How to implement push notifications in React Native (Android)

Ever thought about the notifications we receive from the apps we installed? or How is Swiggy or Zomato provoking us to order food at 3 AM with their creative notifications? 🤔

Let's dive deep into the concept of notifications!

What are notifications?

A notification is a message or alert sent by an app to inform users about updates, events, or actions, typically delivered outside the app's interface.

Now there can be two types of notifications as shown below -

Push Notification

Push notifications are messages or alerts sent from a server to an app when the app is not actively running in the foreground. They are primarily used to keep users engaged by sending updates, reminders, or personalized content. Push notifications are delivered through operating system services like Apple Push Notification Service (APNs) for iOS or Firebase Cloud Messaging (FCM) for Android.

How push notification works:

1. Registration: When the app is installed or first opened, the app requests a unique device token from the OS's push notification service (APNs or FCM).
2. Server Communication: The app sends this token to the app's backend server, which stores it for future use.
3. Sending Notifications: The server sends a notification payload (containing title, message, action buttons, etc.) to the push notification service (APNs/FCM) with the device token.
4. Delivery: The push notification service delivers the message to the respective device, even if the app is not running.

In-App Notification

In-app notifications are messages or alerts displayed to users while they are actively using the app. Unlike push notifications, these do not require server intervention and are triggered within the app itself, usually as a result of user actions or app events.

How in-app notification works:

1. Event Trigger: When a specific event occurs inside the app (like a user reaching a milestone or a feature needing attention), the app can trigger an in-app notification.
2. Display: The notification is shown as a banner, modal, or pop-up within the app's UI, guiding the user or informing them about the event.
3. Custom Logic: In-app notifications are handled directly by the app’s code and can be shown dynamically based on the app’s internal state or logic.

Implementation in React Native android app:

Now that we know about notifications and their types, it's time to implement the feature in your very own react native app. This guide is for implementing only push notification in React native android app only, if you want for iOS or in-app notification, write down a comment and I will post that for sure!

To get started we will be using a third-party service called OneSignal. I recently came across this platform and was shocked by the services they offer.

About OneSignal:

OneSignal is a push notification service that enables app developers to send targeted notifications to users across various platforms, including mobile apps, websites, and email. It supports push, in-app, and web notifications, providing features like segmentation, automation, A/B testing, and real-time analytics. OneSignal is widely used for improving user engagement and retention by offering an easy-to-integrate solution for sending personalized messages. Their free tier consists of 10,000/month Free Email Sends, Unlimited Mobile Push Sends, Journeys Workflows, GDPR Compliant, A/B Testing

Going back to the guide, since we already know that push notifications require server-side handling via FCM (Firebase Cloud Messaging) hence there are a few steps to follow:

1. Set up firebase project (ignore first two steps if you already have firebase project):

   • Go to firebase console and log in to your account.
   • Create a project from here and follow the steps
   • Once your project is created go to project settings from the sidebar
   • Navigate to service accounts from the bar and it should look like this
   • Click on Generate new private key and this will download a json file, carefully store it somewhere safe, we will be needing this while setting up OneSignal.

2. Set up OneSignal

   • Go to OneSignal and create an account.
   • After creating an account go through the setup steps and create an organization and now, you'll see a page for adding apps.
   • In this page give your app name and select Google Android (FCM) for our case. and click on Configure Your Platform
   • Now you will be redirected to this page where we'll be using the service account json file downloaded during firebase configuration Upload the json and then Save & Continue
   • On the next page select React Native/Expo as target SDK and then Save & Continue again
   • In the next screen you'll get your App ID, this is a confidential id and using this id anyone can trigger notification in your app, so be careful with this secret.

We are done with the setup in firebase and OneSignal, now the only task left is some Coffee with Code

Add OneSignal to your app and configure it

• Step 1: Add OneSignal to your app by running this command first

                       npm i react-native-onesignal

• Step 2: In your index.js or App.tsx or App.js whichever is the root of your project, import OneSignal

             import { OneSignal } from 'react-native-onesignal';

and you have add this code snippet to initialise OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

You can wrap this inside a useEffect hook for seamless integration and connectivity with OneSignal.

This will initialize the device with an unique ID on for OneSignal and you can check that in the subscriptions in the sidebar. Every device that gets initialized will be identified with this unique OneSignal ID and you can set it manually also if you have users with their own unique id's already by using this code snippet:

                         OneSignal.login(userId)

Once the user is successfully subscribed, it will show in the dashboard like this

Now you might come across some issues with OneSignal not being properly used or some critical errors so here is a part that you can follow which helped me resolve those issues.

• Step 3: Inside your android\app\build.gradle add this code snippet

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• Step 4: In android for providing necessary permissions for push notifications, in android\app\src\main\AndroidManifest.xml add

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

right before the application tag. The INTERNET permission is optional however since it might be enabled by default.

Boom🚀 All the steps are covered for implementing push notifications, and you can send a test notification from the OneSignal dashboard itself.

Try out yourself and if any doubt you can comment below. Follow for more detailed guides!

References:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Happy coding!🧑‍💻