{"id":1743,"date":"2017-05-26T05:50:22","date_gmt":"2017-05-26T05:50:22","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=1743"},"modified":"2020-12-02T10:42:40","modified_gmt":"2020-12-02T05:12:40","slug":"how-to-send-push-notification-to-the-android-phones-using-react-native-and-fcm","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/how-to-send-push-notification-to-the-android-phones-using-react-native-and-fcm\/","title":{"rendered":"How to Send Push Notification in Android Apps Using React Native and FCM"},"content":{"rendered":"\n

Push notification is a very popular communication channel to notify users about important events in the application.<\/p>\n\n\n\n

This article is about how to enable push notification to an Android app built on React Native<\/a> using Google’s Firebase Cloud Messaging.<\/p>\n\n\n\n

Firebase Cloud Messaging (FCM<\/b>)<\/a> is a cross-platform messaging solution that lets you reliably deliver the messages, at no cost!<\/p><\/blockquote>\n\n\n\n

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.<\/p>\n\n\n\n

How to setup FCM?<\/h2>\n\n\n\n

Go to the Firebase Console page<\/a> and click on Add new project<\/i><\/p>\n\n\n\n

\"firebase<\/figure><\/div>\n\n\n\n

After creating a project you will land on the project dashboard.<\/p>\n\n\n\n

\"firebase<\/figure><\/div>\n\n\n\n

Click on Add Firebase to your Android app<\/i> Link which will open following popup.<\/p>\n\n\n\n

\"add<\/figure><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

\"firebase<\/figure><\/div>\n\n\n\n

Once the config file is placed successfully, restart your app. It will start installing react-native-fcm<\/a> package. Follow all the steps along to configure this package. You will get steps and information about this package on the README<\/a>.<\/p>\n\n\n\n

Once you successfully setup this package you should test the push notification setup. For that, go to the firebase-console<\/a> and select your app. Navigate to notification from left side menu, you will see all the message history which is sent from firebase-console<\/a>. Click on NEW MESSAGE<\/i> button to send a test message.<\/p>\n\n\n\n

\"notification<\/figure><\/div>\n\n\n\n

If you see your test message in above listing with status delivered then the setup is complete! Congratulations!!<\/p>\n\n\n\n

Read Also: How to build a Chatbot in React Native using React-Native-Chatbot<\/a>?<\/p><\/blockquote>\n\n\n\n

Setup FCM in React-Native App<\/h3>\n\n\n\n

First we need to create a separate class(PushNotification<\/i>) which handles all notification which is coming from server app(e.g rails or php)<\/p>\n\n\n\n