iOS Push Notifications with React Native & Twilio
I recently worked on a project that used Twilio Conversations, which sent push notifications via APNs to an iOS device running a React Native app.
After a lot of trial & error, and settling on React Native Notifications as the library to handle push notifications within React Native, the app was presenting the local notif but required customisation for the title and description.
I learnt a few things here:
- Some providers (Twilio being one) send a notification with the
- This flag causes a local notification on the device (it's not a background message) so if you have another library to handle push notifications - you could see multiple, each with different content.
- To customise the content of a local notification with this flag, you need to create a Notification Service Extension in Swift or Objective-C.
The official documentation starts us off with:
A notification service app extension ships as a separate bundle inside your iOS app. To add this extension to your app:
- Select File > New > Target in Xcode.
- Select the Notification Service Extension target from the iOS > Application section.
- Click Next.
- Specify a name (i.e.
NotificationService) and other configuration details for your app extension.
- Click Finish.
You will have several new files:
Within the implementation (NotificationService.m), you will write the code that controls the content of the notification, here's an example that works for the Twilio Conversation payload:
We create a mutable copy of the
request.content object and modify the title/body properties based on content that comes with the notification payload.
To debug what data you have available in the payload, you can use the
po command from XCode's debug console.