How to Implement Push Notifications for iOS and Android In React Native

Push notifications have a powerful impact on the conversions, engagement, and retention on your website. You can use them in different ways and forms to promote your valuable content, direct users to other channels, announce news and offers.

According to the Localytics, push notifications boost app engagement by 88%. The key here is to find the right user touch points and make these notifications relevant.

In this article, we want to show how to setup and customize push notifications for iOS and Android in React Native.

Let's get straight to the point.

Setting push notifications in React Native

To implement push notifications in React Native application, you can use the react-native-push-notification library, that works both for iOS and Android.

This library allows you to set up 4 types of notifications:

  • local notifications
  • noisy remote push notifications
  • silent remote push notifications
  • mixed remote push notifications

Local push notifications are sent from React Native applications and appear in the notification center, where they remain until the user removes them. This type of notifications also provides a set of different features, that allow you to create notifications with a custom design.

Remote push notifications are sent from the server, such as Apple Push Notification Service (APNS) or Google Cloud Messaging Service (GCM).

Getting started with React Native push notification library

First of all, you have to set up the library using npm. As this library uses native modules, you also have to manually install the library for iOS and Android.

Follow the instructions described in Installations sections , iOS manual Installation, and Android manual installation.

For initial configuration of notifications, call the method PushNotification.configure() and pass it the object with the following properties:

(Optional) is called when Token is generated (iOS and Android).

`onRegister: function(token) {
  console.log( 'TOKEN:', token );
},`

(Required) is called when any notification is opened or received. Here you can process the notification, as the object with notification data is passed to the function.

onNotification: function(notification) {}

In Android, this property is optional for local notifications and required - for remote ones.

senderID: "GCM SENDER ID"

Permissions for iOS (optional)

permissions: {
        alert: true,
        badge: true,
        sound: true
    }

(Optional) installed in true by default

popInitialNotification: true

It defines whether the request for permissions (iOS) and Token (Android and iOS) will be pulled. It's true by default. If you want to set it as false, you need to call PushNotificationsHandler.requestPermissions() later.

requestPermissions: true

Notifications should be configured beyond React Native lifecycle, in the entry point of JavaScript code.

Find the file index.js (index.android.js, index.ios.js) in the root folder of your project.

Look at the call function registerComponent() to find the component of the highest level. In this case, it's App.

Let's create the folder for services for our application './src/services' with two files - index.js and pushNotification.js

pushNotifications.js:

Index.js:

Now let's import the service of notifications in the file with the highest level component and call the configuration before React Native lifecycle.

Let's add the opportunity to call local notifications to our notification service. You need to call PushNotification.localNotification(details: Object).

Now let's see the properties of details object, that is passed by the parameter for localNotification.

Only for Android:

id - (optional). Real, unique whole 32-bit number, indicated as a string. By default: autogenerated unique identification.

ticker – (optional) string, Notification Ticker

autoCancel – (optional) Boolean, true by default. Boolean determines whether the notification is automatically hidden.

largeIcon – (optional) default: "ic_launcher" (application icon). Big icon for notifications.

React Native notification

smallIcon – (optional) default: "ic_notification". Small icon for notifications is generated from the label “ic_launcher”, that's why this auto-generated icon may be displayed inсorrectly.

React Native icon

Small icon for notifications should have a transparent background with no colors.

Here is the example of the picture of a small icon.

small icon React Native

Now let's add the small icon with the name ic_notification.png in android/app/src/main/res/mipmap-‘dpi’

Now the small icon notification will look like this:

React Native notification

bigText – (optional) - has the same characteristics as in “message” property by default.

subText: "This is a subText", – (optional) default: none

push notification icon

color – // (optional) default: system default

On the previous screens, the color is set by default.

Now I have set the green color

notification in React Native

vibrate: true, – (optional) default: true

vibration: 300, – vibration length in milliseconds, ignored if vibrate=false, default: 1000

tag: 'some_tag', – (optional) adding tags to the message

group: " some_group", – (optional) messages grouping

ongoing: false, – (optional). If you set “true”, the message can`t be deleted from the notifications center. When you press notification, it disappears and the application is opened

alertAction: 'day', – Repeating interval. Could be one of `week`, `day`, `hour`, `minute, `time`.

If the property repeatType is set as “time”, you need to use one more property:

repeat time – the number of milliseconds between each interval.

For iOS:

alertAction – (optional) can be used to specify the string that will appear below the notification, by default – ‘view’

category – (optional) can be used to specify the notification actions to show for the notifications. The notification actions appear if you slide the notification towards the left. default: null

userInfo: – (optional) default: null (object containing additional notification data)

Properties for iOS and Android:

title – the name of the notification (optional, for iOS this is only used in apple watch, the title will be the app name on other iOS devices)

message – (required) string, the text of the notification.

playSound – (optional) Boolean. default: true. If you set “false”, the notification will be silent.

soundName – (optional) The notification is noisy. Value of 'default' plays the default sound.

In android, add your custom sound file to [project_root]/android/app/src/main/res/raw

In iOS, add your custom sound file to the project Resources in xCode.

number – (optional) Valid 32 bit integer specified as a string. default: none (Cannot be zero)

actions: '["Accept", "Reject"]' – This is an array of strings where each string is a notification action that will be presented with the notification.

notification

Thus, to call local notification, let`s add the following code to the file ./src/services/pushNotifications.js

To demonstrate the notification performance, add the button for calling local notification. file ./src/AppContainer.js

Result

React native push notification