Mobile Push Notifications Implementation in React Native with One Signal

Written by: Ria Patel, Agile Software Engineer, TribalScale

📫 Subscribe to receive our content here.

💬 Have questions about your next digital project, startup or TribalScale? Click here to chat with one of our experts!

Push notifications are a common and popular feature for many applications that are used for time-sensitive messages or marketing campaigns, for example. It elevates the user experience and can increase app usage, which is something an app developer does not want to miss out on. After trying out different services/methods to set up push notifications, One Signal provided a simple and organized experience as a developer with up-to-date documentation and a dashboard. If this is your first time using OneSignal or are having difficulties, this is your place to be. Here, we will be showing you the route we took to send mobile push notifications to specific users successfully.

What is One Signal?

One Signal is a customer engagement platform that provides tools for app developers to send mobile & web push notifications, in-app messages, emails, and SMS messages to their customers or clients. OneSignal supports many SDKs as well, not limited to React Native. However, we will show the implementation in React Native (frontend) and Node.js (backend).

Prerequisites

> Create a OneSignal account if you do not already have one

> Create an App on OneSignal

• For mobile push notifications, select one of the following platforms: Apple iOS (APNs), and Google Android (FCM). (Can always configure the other later)
• For APN configuration, see this documentation to set up the .p8 Auth Key
• For Android configuration, see this documentation to set up Firebase Credentials

• To configure other platforms, go to Settings → Platforms. Activate the desired platform.

> Store OneSignal App ID & REST API Key in a protected file or location

> Set up OneSignal access for Apple Devices

• Follow these steps using this resource.

> Set up OneSignal access for Android Devices

• Follow these steps using this resource.

Overview

OneSignal allows subscription users which can be associated with an external ID, OneSignal ID, Subscription ID, email address, or phone number. When your application already has a unique identifier for a user, you should identify them on OneSignal via an external ID. Then, you can send mobile push notifications to a specific user(s) with their external ID(s).

Set Up Frontend

First, install the OneSignal module to access the REST API and other functions.

Then, import the module in the file where you create or log in the user and where you delete or log out the user.

Let’s first log the user’s external id into OneSignal.

This function allows the user to be subscribed to OneSignal services. On OneSignal’s side, the user will show up as subscribed and have a OneSignal ID and Subscription ID assigned, as well. You can view this by selecting the app in OneSignal and navigating to Audience → Subscriptions. If you have a specific external ID to test, select External ID from the dropdown and input the test ID. You should be able to see the user content with a checkmark under the Subscription Status header.

Since we are logging the user in, we should also unsubscribe the user from OneSignal if they log out from the app or are inactive, so they do not receive unexpected notifications.

Now, if you check the subscription status of the testing external ID, it should say Not Subscribed, when they log out of the application.

Set Up Backend

First, install the OneSignal Node module to access the REST API and other functions.

Then, create a new file that will hold the function that sends notifications & import the Node Client SDK.

There is a title and a body to any push notification. We will most likely customize that according to the use case of a specific notification. Since we are using TypeScript, we will create a parameter type. You can store it in another file where you have other types held. If not, store it in the same file as the OneSignal Client SDK (above).

Now, let’s create the function that sends the notification. In the file, where you hold the OneSignal Client SDK, do the following:

This is the standard creation of a Notification that customizes the title, body, and who to send the notification to. However, if you want to further customize the notification, check out the reference page on OneSignal and add accordingly. Make sure to look at the caution messages to ensure it logically executes.

Calling the Function

Since the function is asynchronous, it is important to await the function, which means ensuring the asynchronous function has completed or a Promise has been fulfilled. See the example below.

This function is called in another file. In this example, I am only sending a notification to one user, so I create a string[] by surrounding userID with brackets, creating a one-element array that gets passed into sendNotification. If you are sending a notification to more than one user, I recommend initializing the string array beforehand and sending in the variable as the argument for clean & organized code.

Test Push Notifications

To test if it works, run the simulator, regardless of the platform, and build the application. You should get a pop up to allow push notifications on the device. If not, check on settings if it was previously enabled. If it is not enabled, make sure you have completed steps 4 & 5 in the Prerequisites section.

Then, trigger the push notification via user interaction. You should see a banner pop up or in your notification center! If it does not work, check if the tags are correct for the Notification object in the sendNotification function and the location of the call.

To view more details of the recent push notification, go to OneSignal and select the corresponding app. Navigate to Delivery. You should see the external IDs the push notification got sent to under the Name column if you have not altered the function above. You can also observe how many devices the notification got sent to and the click rate for engagement tracking. If you select the notification, more information is available such as the time it was delivered, title, message, platforms of the devices, and more.

Congrats! You have successfully set up push notifications on Apple and Android devices.

Ria Patel is an Agile Software Engineer at TribalScale with a passion for crafting technical solutions with a driven and supportive team, learning the latest technology. After work, you can find her cooking, working out, or binging a show with her friends.