Handle Firebase Push Notification and navigate to a Component in React Native

ashwini gupta

31 May 2019

In this blog, I am describing how to handle the firebase push notification and how to navigate to a particular Component Page. I have used “react-native-firebase” to recieve firebase notification and “react-navigation” to navigate a page.

Installing Library ->

npm install react-navigation --save
react-native link react-navigation
npm install react-native-firebase --save
react-native link react-native-firebase

npm install react-navigation --save

react-native link react-navigation

npm install react-native-firebase --save

react-native link react-native-firebase

Please follow the link for the initial setup of firebase push notification and React Navigation (official site).

How to receive a Notification? Our Application has 3 running state

Application is in foreground
Application is in background
Application has closed.

Application is in the foreground ->
When our Application is Foreground ( current running app) then we don’t be worry to handle the notification, the following snippet uses to get Notification and show it on the screen. In this snippet, I have customized our notification.

 // /*
  // * Triggered when a particular notification has been received in foreground
  // * */
  this.notificationListener = firebase.notifications().onNotification((notification) => {
      const { title, body, data } = notification;
      console.log("Notification",notification );
      
      notification.setTitle(title).setBody(body).setSound("500").android.setColor(ThemeConstant.ACCENT_COLOR)
      notification.android.setSmallIcon("@drawable/ic_stat_name")
      notification.android.setPriority(firebase.notifications.Android.Priority.High) /// set to High
      notification.android.setChannelId("autocaptions")  ///for android 8.0 and above
    

      const channel = new firebase.notifications.Android.Channel(
      "daily",
      "Reminders",
      firebase.notifications.Android.Importance.High
    ).setDescription("Reminds you....");
    firebase.notifications().android.createChannel(channel).then(response=>{
      if(data.image){
        notification.android.setBigPicture( data.image, data.image, title, body);
      }
      firebase.notifications().displayNotification(notification)
    }
    );
  });

// /*

// * Triggered when a particular notification has been received in foreground

// * */

this.notificationListener = firebase.notifications().onNotification((notification) => {

const { title, body, data } = notification;

console.log("Notification",notification );

notification.setTitle(title).setBody(body).setSound("500").android.setColor(ThemeConstant.ACCENT_COLOR)

notification.android.setSmallIcon("@drawable/ic_stat_name")

notification.android.setPriority(firebase.notifications.Android.Priority.High) /// set to High

notification.android.setChannelId("autocaptions") ///for android 8.0 and above

const channel = new firebase.notifications.Android.Channel(

"daily",

"Reminders",

firebase.notifications.Android.Importance.High

).setDescription("Reminds you....");

firebase.notifications().android.createChannel(channel).then(response=>{

if(data.image){

notification.android.setBigPicture( data.image, data.image, title, body);

}

firebase.notifications().displayNotification(notification)

}

);

});

Application is in the background ->
When our app is in the background then We add a background RemoteMessage to our App Registry. Create a bgMessaging.js file to import RemoteMessage class of ‘react-native-firebase‘ as the following snippet

import type { RemoteMessage } from 'react-native-firebase';

/// When Application is in Background to recieve a notification. 

export default async (message: RemoteMessage) => {
    // handle your message

    return Promise.resolve(); 
}

import type { RemoteMessage } from 'react-native-firebase';

/// When Application is in Background to recieve a notification.

export default async (message: RemoteMessage) => {

// handle your message

return Promise.resolve();

}

following snippet for registering above js class to our AppRegistry in our index.js class

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import bgMessaging from './bgMessaging';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging);
console.disableYellowBox = true

/** @format */

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

import bgMessaging from './bgMessaging';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging);

console.disableYellowBox = true

Now, We can listen for when a notification is clicked/tapped/opened as follow

// /*
  // * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
  // * */
  this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {
      this.onPressNotification(notificationOpen.notification.data);
      firebase.notifications().removeDeliveredNotification(notificationOpen.notification.notificationId)
  });

// /*

// * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:

// * */

this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {

this.onPressNotification(notificationOpen.notification.data);

firebase.notifications().removeDeliveredNotification(notificationOpen.notification.notificationId)

});

In the above snippet, I have got open notification data when the user clicks and send this data to our custom function to identify a particular page (Component) to open by our Navigator. I will describe it below in this blog.

Application has closed->
When our app has closed then We add a background RemoteMessage to our App Registry. as like the above snippet. and then we can check if it was opened by a notification being clicked/tapped/opened as follows

 const notificationOpen = await firebase.notifications().getInitialNotification();
  if (notificationOpen) {
    this.onPressNotification(notificationOpen.notification.data);    
    firebase.notifications().removeDeliveredNotification(notificationOpen.notification.notificationId) 
  }

const notificationOpen = await firebase.notifications().getInitialNotification();

if (notificationOpen) {

this.onPressNotification(notificationOpen.notification.data);

firebase.notifications().removeDeliveredNotification(notificationOpen.notification.notificationId)

}

Now I am describing how to handle the firebase push notification click to open Particular Component and send notification data to Component via React Navigation. For it, We need to create a global constant that stores our navigation object. The help of this navigation object we can go to any Component from APP.js when Application is in Foreground/background as follow

onPressNotification = (data)=>{
  if(AppConstant.navigation){
    let routeData = getNotificationRoot(data)
    AppConstant.navigation.navigate(routeData.root, routeData.data);
  }else{
    this.setState({
      notification : data,
    })
  }
}

onPressNotification = (data)=>{

if(AppConstant.navigation){

let routeData = getNotificationRoot(data)

AppConstant.navigation.navigate(routeData.root, routeData.data);

}else{

this.setState({

notification : data,

})

}

When our Application has closed so we can navigate Component from our initial Component by transferring Notification data in “screenProps” of React Navigation as follows

<NavigationConst screenProps = {{isFromNotification : true, notificationData: this.state.notification}}/>

1	<NavigationConst screenProps = {{isFromNotification : true, notificationData: this.state.notification}}/>

NavigationConst is my StackNavigator that hold all Component of Application. For more detail of react-navigation go to its official website.

Hope it helps you. Thanks for reading.

References-

https://reactnavigation.org/docs/en/getting-started.html

https://www.npmjs.com/package/react-native-firebase

https://reactjs.org/docs/react-component.html