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.