Push notification is a very popular communication channel to notify users about important events in the application.
This article is about how to enable push notification to an Android app built on React Native using Google’s Firebase Cloud Messaging.
Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver the messages, at no cost!
FCM is one of the best known ways to notify the client (Android and iOS) via push notification as it is free and backed by Google.
How to setup FCM?
Go to the Firebase Console page and click on Add new project
After creating a project you will land on the project dashboard.
Click on Add Firebase to your Android app Link which will open following popup.
Enter your Android package name (this name is used for sending push notification so be careful) and register your app. FCM will generate a config file which contains secret tokens of your app. Download this file and put it in your react native app directory as suggested below.
Once the config file is placed successfully, restart your app. It will start installing react-native-fcm package. Follow all the steps along to configure this package. You will get steps and information about this package on the README.
Once you successfully setup this package you should test the push notification setup. For that, go to the firebase-console and select your app. Navigate to notification from left side menu, you will see all the message history which is sent from firebase-console. Click on NEW MESSAGE button to send a test message.
If you see your test message in above listing with status delivered then the setup is complete! Congratulations!!
Read Also: How to build a Chatbot in React Native using React-Native-Chatbot?
Setup FCM in React-Native App
First we need to create a separate class(PushNotification) which handles all notification which is coming from server app(e.g rails or php)
We need to initialize FCM when app is initialized (componentDidMount) so the app is able to receive notifications from server side.
This code generates FCM token(line 14) and passes this token to the server. We need to ensure whenever the FCM token is updated we need to update it on the server side as well. If fcm_token is not updated when the app will not receive any notification from the server side.
Thanks for Reading…
Android React-native FCM Push notification
Consulting is free – let us help you grow!