Add Firebase push notifications to an Android React native app

Push notification is a message that pops up on a mobile device. The message is usually a prompt to start using the app. An app can receive a push notification when it is in foreground state, background state or even when it is killed.

In this article, we will integrate Firebase Cloud Messaging to an Android React native app. Adding FCM to iOS app is similar. But it requires Apple developer account. So, we won’t be able to test it anyway.

Create app using react-native-cli

We won’t be using Expo to create the app. This is because for testing push notifications, the app should run on the device and not the simulator. To run the app on the device, the Expo app should be ejected.

Expo comes with a SDK. Expo SDK has support for push notifications. But, we won’t use Expo SDK. Instead, we use react-native-firebase or RNFirebase for integrating firebase cloud messaging or FCM. 

Considering all this, it makes sense to create the app using react-native-cli.

react-native init PushN

To run the app in Android device, connect the Android device to the Mac and use 

react-native run-android

The above command builds the app, installs the app in the device, downloads the relevant scripts and starts the app.

Install Firebase SDK via RNFirebase

The Firebase web setup is sufficient for using Firebase features in React native. However, Push notifications require native iOS and Android SDK. RNFirebase is a lightweight JavaScript library that provides the native SDKs for the platform. Install RNFirebase.

yarn add react-native-firebase

Follow the integration guide in the RNFirebase docs. For completeness, we will go over the steps here. Create a firebase project from the firebase console. Or use an existing project for the steps below.

Configure RNFirebase in the app folders using the link command.

react-native link react-native-firebase

From Firebase console, click “Add Firebase to Android app”.  To know the bundle id, open build.gradle in android/app folder. The bundle id is the value in applicationId property. Enter the bundle id and click “Register app”. This will generate a google-services.json file. Download the file and place it in android/app folder.

To parse the above json file, include the google-services plugin. In android/build.grade, add a dependency.

classpath 'com.google.gms:google-services:4.0.1'

In android/app/build.grade, place the plugin at the bottom of the file.

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

Add firebase dependencies in the same file.

implementation "com.google.android.gms:play-services-base:15.0.1"
implementation "com.google.firebase:firebase-core:16.0.3"

Change from compile to implementation for react-native-firebase dependency.

implementation project(':react-native-firebase')

Add Firebase Cloud Messaging module

So far, we have integrated Firebase core to our project. To add FCM or Firebase Cloud Messaging, we got to do a few more steps.

In android/app/build.gradle, add firebase messaging as a dependency.

implementation "com.google.firebase:firebase-messaging:17.3.2"

In MainApplication.java file, add the messaging package.

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

Add the package to the getPackages method.

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new RNFirebasePackage(),
      new RNFirebaseMessagingPackage()
  );
}

Update the Android manifest file with the following services within the application node.

<service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>
<service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
  <intent-filter>
    <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
  </intent-filter>
</service>
<service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

Testing notifications

There are three types of notifications: Notifications, Notifications with Data and Data only Notifications. The first two type of Notifications are intercepted by the mobile OS and displayed in the notifications tray. However, a data-only notification is not intercepted by mobile OS and is processed differently. In this article, we will send a simple Notification with no data.

To give a concrete example, consider a Quiz app. The app developer stores the questions for the Quiz in Firebase database. When he adds new questions in Firebase database, the user of the app does not know about it till he opens the app. One way to let the user know about newly added questions is by sending a notification. 

Let us send a simple notification to the app: “New questions are added”. Before we send the notification, make sure the app is run with all the above configuration.

react-native run-android

Go to Firebase console. From the Grow section, click Cloud Messaging and click “New notification”

In the message text, type “New questions” added. In the target, select the Android app. And in Scheduling, select “Send now”. Then click the Publish button.

The notification appears in the notification tray of the Android device if the app is in background mode or it is killed. On clicking the notification, the app opens. If the app is already in foreground mode, there won’t be any notification in the notification tray.

Receiving notification with data works similar. When the app is in background mode or killed state, there is a notification in the notification tray. On clicking the notification, the app opens and triggers a callback function. We do data processing within the callback function. Read the documentation in RNFirebase for more information.