Firebase push notification in react native android application

In this article i will guide you step by step how you can implement firebase push notification in react native, android application

Step 1: Create a new firebase project

Go to https://firebase.google.com/ and login to your firebase account and click on Add project

addproject

Step 2: Add Android app on firebase project created previously

In order to add firebase to your react native android application you need to add android app in your firebase project which you created previously
For this go to Project Overview -> Project settings and then click on Add Android App

add-app-to-firebase

Go to AndroidManifest.xml file and grab the android package name
In order to add android app you need to have SHA-1 key in order to generate this key you need go to your project directory and run this command

keytool -list -v -keystore ./android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android

You will get your SHA-1 key just copy and paste it in the field where it is required

add-sha1

Download the google-services.json file paste it into android/app

download-google-service.json

Step 3: Install and add dependencies for Recieving Push notification in Android

Install required firebase messaging package

npm install --save @react-native-firebase/app
npm install --save @react-native-firebase/messaging

Under Root-level (project-level) Gradle file (/build.gradle):

buildscript {
  repositories {
    // Make sure that you have the following two repositories
    google()  // Google's Maven repository

    mavenCentral()  // Maven Central repository

  }
  dependencies {
    ...
    // Add the dependency for the Google services Gradle plugin
    classpath 'com.google.gms:google-services:4.3.13'

  }
}

allprojects {
  ...
  repositories {
    // Make sure that you have the following two repositories
    google()  // Google's Maven repository

    mavenCentral()  // Maven Central repository

  }
}

Module (app-level) Gradle file (//build.gradle):

plugins {
  id 'com.android.application'

  // Add the Google services Gradle plugin
  id 'com.google.gms.google-services'

  ...
}

dependencies {
  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:30.4.1')


  // TODO: Add the dependencies for Firebase products you want to use
  // When using the BoM, don't specify versions in Firebase dependencies
  // https://firebase.google.com/docs/android/setup#available-libraries
}

Step 4: Adding push notification code to listen notification in Foreground, Background

import messaging from "@react-native-firebase/messaging";

const App = () => {
  useEffect(() => {
    //To handle background messaging
    messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      let message_body = remoteMessage.notification.body;
      let message_title = remoteMessage.notification.title;
      let avatar = remoteMessage.notification.android.imageUrl;
      Alert.alert(message_title, message_body);
    });

    //To handle foreground messaging
    const subscribe = messaging().onMessage(async (remoteMessage) => {
      let message_body = remoteMessage.notification.body;
      let message_title = remoteMessage.notification.title;
      let avatar = remoteMessage.notification.android.imageUrl;
      Alert.alert(message_title, message_body);
    });
    return subscribe;
  }, []);
};

Step 5: Testing the notification from firebase

To test this, go to the Firebase console of the application you created in the previous step. On the left sidebar, under Engage, click Cloud messaging. Then click the button Send your first message.

On the form:

Enter any title (e.g., “test”) Under Notification text
Type in “Hello there!” under Notification image
Paste in any image address you’d like
Click the Next button below

Now, under Target, click Select an app and then select your app. Click Next on the next step and then Review. On the resulting popup, click Publish.

Step6: Sending notification from your react native android application

First In order to send notification from your react native we need to generate fcm token

import messaging from "@react-native-firebase/messaging";

const App = () => {
  const getFCMToken = async () => {
    try {
      const token = await messaging().getToken();
      console.log(token);
    } catch (e) {
      console.log(error);
    }
  };

  useEffect(() => {
    getFCMToken();
  }, []);

  useEffect(() => {
    //To handle background messaging
    messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      let message_body = remoteMessage.notification.body;
      let message_title = remoteMessage.notification.title;
      let avatar = remoteMessage.notification.android.imageUrl;
      Alert.alert(message_title, message_body);
    });

    //To handle foreground messaging
    const subscribe = messaging().onMessage(async (remoteMessage) => {
      let message_body = remoteMessage.notification.body;
      let message_title = remoteMessage.notification.title;
      let avatar = remoteMessage.notification.android.imageUrl;
      Alert.alert(message_title, message_body);
    });
    return subscribe;
  }, []);
};