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

Updated 31 May 2019

Save

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 ->

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

  1. Application is in foreground
  2. Application is in background
  3. 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.

 

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

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

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

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

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

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 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

 

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

  • zaki
    • ashwini gupta (Moderator)
  • Start a Project


      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home