Triggering iOS 10 actionable push notifications via React Native

In this tutorial we use Xcode and React Native to configure and create local custom push notifications.

Background

Notification Content Extensions are used to display a custom interface for your iOS app’s notifications. React Native lets you build mobile apps using only JavaScript

Create a new app using React Native

Follow the instructions here to install React Native and generate a new project:

Enable Push Notifications in Xcode

You can follow the steps here to enable local push notifications:

Be sure that your bundle identifier is unique. While there are more steps to enable remote notifications, all you have to do is toggle this switch to enable testing local push notifications.

Link React Native’s PushNotificationIOS library in Xcode

Follow the instructions here to link React Native’s PushNotificationIOS library into Xcode.

Use Xcode to create a new target in your app

Select your Xcode project, then add and name a Notification Content extension target:

Tell Xcode how to find your notification

Your new target appears. Select it, and in its Info.plist, set the value for UNNotificationExtensionCategory and UNNotificationExtensionInitialContentSizeRatio .

Test the push notification from React Native

Import the library in your React Native code:

import { PushNotificationIOS } from 'react-native';

Trigger the push from RN. Be sure to use the category you created above:

componentDidMount() {
  PushNotificationIOS.requestPermissions();
  PushNotificationIOS.presentLocalNotification({
     alertBody: 'Hello World',
     category: 'myNotifcationCategory'
  });
}

With LiveReload enabled in React Native, when I close the app and save my RN file, I can see the push notification:

Next: Customize your view and handle user actions

From here you can edit your NotificationViewController.swift file to implement the didReceive method. Use it to configure your notification interface and to handle user actions.

Use the userInfo object in RN to pass arbitrary bits of info to your Xcode ViewController, populating the fields of the UI provided by the MainInterface.storyboard.