Using Unified Push Server (UPS) in React Native

Push notifications and cross platform mobile development is still hard. Android and iOS have different Push Notification systems and that’s why UnifiedPush was designed; to overcome the complexity of having two separate services. With UPS you now only need to maintain one.

UnifiedPush addresses the cross-platform needs of mobile push notifications, in much the same way as React Native reduces the overhead of developing cross-platform native apps. That’s why using UnifiedPush services from React Native can be a big deal. All the code related to push notifications can be handled in one place, regardless of the mobile operating system you are targeting. This approach would not only reduce development and maintenance times but also enables developers to create larger and more complex push campaigns to boost retention and activation.

With this in mind, we created react-native-unified-push, a library for React Native to subscribe and receive Push Notifications in your cross-platform apps built with React Native just in one line of code.

Let’s assume you already have your UnifiedPush server up and running (here is a guide on how to have it ready) and you want to build an app for iOS and Android so you chose React Native as the development platform. Then you can install react-native-unified-push to let your app register for Push Notifications sent from your server:

npm install react-native-unified-push --save

In order to make the necessary changes into the native platforms (iOS and Android at the moment) a linking step is necessary:

react-native link react-native-unified-push

Finally, a couple of changes would be required in both platforms to activate the notifications permissions (in iOS) / include the Google services module (in Android). Let’s start with Android:

1. Add the following lines to android/build.gradle inside dependencies:

classpath 'com.google.gms:google-services:3.0.0'
classpath 'com.diffplug.spotless:spotless-plugin-gradle:3.3.0'

2. Add the following lines to android/app/build.gradle inside dependencies:

compile 'org.jboss.aerogear:aerogear-android-core:3.0.0' 
compile 'org.jboss.aerogear:aerogear-android-pipe:3.0.0' 
compile 'org.jboss.aerogear:aerogear-android-push:4.0.1'

3. Append the following line to android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

4. Add your google-services.json file to android/app/ (how to get your google-services.json)

Then you will need to activate the Push Notification permissions on iOS:

1. Open your app in Xcode (through ios/<your_app_name>.xcodeproj)
2. Having the root project file selected: Capabilities > Push Notifications > Switch to ‘ON’

That’s all the platform specific configuration you will need. Now you need to collect the following details from your UnifiedPush server in order to connect with your apps:

• Url from your UnifiedPush server
• Sender Id for the app created in the server
• Variant id for the app created in the server (one for Android/one for iOS)
• Variant secret for the app created in the server (one for Android/one for iOS)

To retrieve this data you will need to create an app in your server by following UnifiedPush server’s wizard:

You will need to add a name for your app to identify it in your server:

Click on Create App and add an Android variant for your app:

you will need to add your Google cloud Management key and project number (you can retrieve these from Firebase following this guide) and then you should see all the configuration details for your Android variant:

You will need that data to configure your Android app later. Now you will need to repeat these steps to add an iOS variant taking into account that instead of a Google cloud Management key you will need an Apple APN certificate, you can get one by following this guide.

When you have successfully created the variants for your app you can start configuring UPS in your React Native code:

import RNUnifiedPush from 'react-native-unified-push';

  ...

  RNUnifiedPush.init(
  { 
    alias: '<id for this device>' ,
    url: '<url for your UPS server>',
    senderId: '<your sender id from UPS>',
    variantId: '<variant id for your app in UPS>',
    secret: '<variant secret for your app in UPS>'
  },
  () => {
    //success callback
  },
  (err) => {
    //error callback
  }
);

react-native-unified-push provides one method init to connect to your UnifiedPush server through the configuration details you just collected for your variants. You could call this method separately for each platform by using Platform.OS module to differentiate between Android and iOS or use the platform specific configuration files to end up with a cleaner codebase using react-native-config:

import Config from 'react-native-config'
RNUnifiedPush.init(
  { 
    alias: username,
    url: Config.UPSUrl,
    senderId: Config.UPSSenderID,
    variantId: Config.UPSVariantId,
    secret: Config.UPSVariantSecret
  },
  () => {
    //success callback
  },
  (err) => {
    //error callback
  }
);

It also sends the push message body using a device event. Your application can handle the message with this code :

DeviceEventEmitter.addListener('onDefaultMessage', function(event) {
 //Replace this with your own handling code.
 console.log("You have receieved a push message." + JSON.stringify(event));
 });