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.

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.

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.