Updated 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.
|
1 2 3 4 |
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 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// /* // * 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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
/** @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
|
1 2 3 4 5 6 7 |
// /* // * 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
|
1 2 3 4 5 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
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
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
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.