Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
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.
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 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
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.