Show push notifications on React Native app

The objective of this tutorial, is to explain step by step, how to show push notifications from Amazon simple notification service SNS to an android device running a react native app.

There are some steps in this tutorial that are manually created but in real life, they should be automated, like the subscription of the device token that is shown below. But in the future I will make another tutorial that should do that.

Services and software used for this example:

• React Native
• Amazon AWS Simple Notification Service SNS
• Google Cloud Messaging GCM / Firebase console
• React-native-push-notification package

The source code for this project is here

Table of contents

1. Configure Google GCM
2. Configure Amazon SNS
3. Create react native project
4. Push notifications

1) Configure Google GCM (Google Cloud Messaging)

• For this step we will have to use Firebase console https://console.firebase.google.com and create a new project.

2) Configure Amazon AWS SNS (Simple Notification Service)

• Go to Amazon web services console https://console.aws.amazon.com/console/home
• Click on the Simple Notification Service link, or go to https://us-west-2.console.aws.amazon.com/sns/v2/home?region=us-west-2#/newuser
• On the SNS Dashboard, click on the option Create Platform Application

• Enter a name for the application, in this case I will call it PushTestAWS
• Choose Google Cloud Messaging (GCM) in the Push notification platform option
• In The API Key value, you have to enter the value of the Firebase Server Key. You can see that value in the settings of the firebase project. Go to the Cloud Messaging tab in the Firebase console.

3) Create react native project

For this step we are going to create a sample app with react native CLI

• On terminal create a new react native project with the following command: react-native init PushSNSTest and wait until it finishes
• Go to the project folder withcd PushSNSTest
• Run the project to see that everything is ok. Execute the following command: react-native run-android
• You have to see this screen

• Now, we are going to install the package react-native-push-notification in order to handle the notifications and to see the device token that we need in order to push the notification from Amazon SNS server to the device.
• For this we run the command npm install — save react-native-push-notification
• In it’s GitHub page, is the installation instructions, however, I will put all the steps in this tutorial.
• Run the command react-native link. This should automatically modify the files settings.gradle, build.gradle, MainApplication.java
• Next, modify the AndroidManifest.xml file. Add the following permissions that are needed by the react-native-push-notification plugin.

<uses-permission android:name=”android.permission.WAKE_LOCK” />
<permission android:name=”${applicationId}.permission.C2D_MESSAGE” android:protectionLevel=”signature” />
<uses-permission android:name=”${applicationId}.permission.C2D_MESSAGE” />
<uses-permission android:name=”android.permission.VIBRATE” />
<uses-permission android:name=”android.permission.RECEIVE_BOOT_COMPLETED”/>

• In the same AndroidManifest.xml file add this lines inside the application element. I put this just before closing the application element.

<receiver android:name=”com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher” />
<receiver android:name=”com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver”>
<intent-filter>
<action android:name=”android.intent.action.BOOT_COMPLETED” />
</intent-filter>
</receiver>
<service android:name=”com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService”/>
<service android:name=”com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService” android:exported=”false”>
<intent-filter>
<action android:name=”com.google.android.c2dm.intent.RECEIVE” />
</intent-filter>
</service>

• In the PushSNSTest react Native project that we created earlier, we modify the file app.js
• We insert the following import import PushNotification from 'react-native-push-notification'
• We add the componentDidMount function to the app.js file

componentDidMount() {
    console.log('Did mount')
    PushNotification.configure({
      // (optional) Called when Token is generated (iOS and Android)
      onRegister: function (token) {
        console.log('TOKEN:', token);
      },
      // (required) Called when a remote or local notification is opened or received
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
      },
      // ANDROID ONLY: GCM Sender ID (optional — not required for local notifications, but is need to receive remote push notifications)
      senderID: "719007178572",
      // IOS ONLY (optional): default: all — Permissions to register.
      permissions: {
        alert: true,
        badge: true,
        sound: true
      },
      // Should the initial notification be popped automatically
      // default: true
      popInitialNotification: true,
      /**
      * (optional) default: true
      * — Specified if permissions (ios) and token (android and ios) will requested or not,
      * — if not, you must call PushNotificationsHandler.requestPermissions() later
      */
      requestPermissions: true,
    });
  }

• In that function we have to configure the Pushnotification plugin. There are two important parts in this code. The senderID property has to be filled with the value of the Sender ID that we have in the firebase console. In the Cloud Messaging tab in the Settings of the project PushReactNativeTest that we created earlier
• The other important thing that we need is the device token id. This token is needed when we want to send push notifications from Amazon SNS server to a specific user. In this case we are going to see the console in order to see what is the device token of my android phone. This token is unique for the current app and your device. The token is passed to the onRegister function that we declared earlier.
• Run the application again with react-native run-android
• Enable Debug JS Remotely

• Open the chrome browser and open http://localhost:8081/debugger-ui
• Be sure to have the developer tools open to see the console log.
• Reload the app, and you should see the device token in the console log.
• Copy the token because we are going to need that later. In my case the token is fXcg0fY…

4) Push notifications

• Open the Amazon AWS SNS console. On the left menu, click on the Applications option. Then click on the ARN of the application PushTestAWS that we created earlier

• Inside the application details page, we should see the button Create platform endpoint. We click on that button.

• In the Add endpoints screen, we paste the device token that we copy earlier from the console log.

• In the next screen, we choose the endpoint and then click in the Publish to endpoint button

• In the Publish a message screen, we can send a message to the chosen device. Here we click the JSON message generator button. After we create a message we can click on the publish message button, to send the push notification to the device. Important: Be sure that the app is in the background, or it is closed in order to see the push notification. When the app is on the foreground, the notification is not shown. Only the onNotification function is invoked. You can see the behavior of the notifications here.

• At this point you should see the notification that arrived to the device

That’s it. In the future, I will do a tutorial in which your server automatically sends the notification with the desired message to Amazon AWS SNS, so it sends to the corresponding devices.

I hope this how-to tutorial saved you some time.