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

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

 

. . .
Discuss on Helpdesk

Leave a Comment

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


2 comments

  • zaki
    Thank you so much @Ashwini Gupta.
    push notification works great, especially when app is in the foreground.
    the problem is when app is in the background.
    1) When I click on the notification, the “getInitialNotification ()” function is called instead of the “onNotificationOpened ()” function, I do not know why.
    normally “onNotificationOpened ()” the one that will be called, is not it ?.
    2) Is there not a function that listens to the arrival of the notification, when app is in the background as app in the foreground.
    please help me.
    I’m in a hurry.
    Thanks.
    • ashwini gupta (Moderator)
      Hi, you need to add <service android:name=”io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService”/>
      in your manifest file for background Service.
  • css.php
    Start a Project


      Message Sent!

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

      Back to Home