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 22.214.171.124 release ready!
In this blog, we will learn about how to integrate and receive firebase notification in React Native Android App.
Having Notifications in your mobile applications is one of the basic features these days.
Firebase provides many cool functions that make application development, testing and analytics super easy.
But personally, I feel that there is no competition for firebase in terms of Push Notifications and it will soon be the only way to send notifications to your mobile application users.
Well, there can be many separate blogs for each of the firebase related functionality.
Currently, we will focus on firebase push notification only.
Integrating this super easy, but procedural, please follow through the lines written along.
So, without wasting further time, let’s get started.
Above command will install and save the react-native-firebase package in your React Native Project.
This Command will link the react-native-firebase package in your React Native Project.
Now go to your firebase console and set up your android package and app registration over there.
Download the google-services.json file and keep it safe with you.
Now, you need to do some manual changes in your android directory/folder of your React Native Project.
Paste the google-services.json file that you just saved above at path android –> app
Your directory will look something like this :
In your project level build.gradle file (path to this file: android –> build.gradle )
In your module level build.gradle file (path to this file: android–> app–>build.gradle)
Now you need to make some changes in your AndroidManifest.xml file
NOTE : -> You need to add default notification_icon in your android drawable folders only so that the default notification icon is replaced by the icon you want to use.
After following the above steps you now need to add and remove some simple listeners to your React native App.js File.
After adding these listeners, we now need to handle the Notification received, so we will just modify our listeners a bit like below :
And It is done, you will now be able to receive notifications in your React Native Android Application.
Below is a snippet of App.js file with all the changes –>
Hope This helps you.
Keep coding and Keep Sharing
References : –>
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
I have a confusion regarding the channel id. I have this setup for channel id
I have used the same string in place of “notification_channel_name” in the above example
Inside meta-data tag
A log of what exactly do you receive and what exactly was sent in the PHP Api request would be appreciated.
1) Are you checking the notification on an iOS device?
If yes, then please do check the version of the react-native-firebase package.
If the version is greater than 5.3.x , then perhaps you will need to add two notification listeners namely : onNotificationDisplayed & onNotification.
for more details, you can read from here –> https://rnfirebase.io/docs/v5.x.x/notifications/receiving-notifications#3)-Listen-for-Notifications
2) For listening to notification taps(opening) you will need to implement listeners for two events, namely
a) onNotificationOpened –> this will work when your app is already open.
b) getInitialNotification –> this will work when your application is closed.
You can refer this –> https://rnfirebase.io/docs/v5.x.x/notifications/receiving-notifications#4)-Listen-for-a-Notification-being-opened
Hope this helps you 🙂
Well, the iOS notification also works in a similar fashion.
The react-native code is the same.
Only you need to make changes in the iOS Xcode project and install some additional packages (using cocoa pods) and add the GoogleServicesInfo.Plist file from the firebase into your iOS Project.
You can find the documentation from the official site over here –>
This should help you to get along.
Webkul is a truly trusted and supported IT Company to develop business ideas for e-commerce. They provide professional support after deploying the solution to production and be responsible to act for fixing the reported issues or system errors. We highly encourage to deal with Webkul for business development.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.