Firebase Notification Integration in React Native Android Application

Save

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.

Things You Need To Get Started :

Installation Steps :

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.

Before You Start Coding

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.

CODE :

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 : –>

 

 

. . .
Discuss on Helpdesk

Leave a Comment

Your email address will not be published. Required fields are marked*


15 comments

  • Chirag ncrypted
    This post is helpful , Thank you !!!
    • anchit (Moderator)
      Thanks for your kind words 🙂
  • Jimmy
    Thank you for sharing, save my live
    • anchit (Moderator)
      Thanks 🙂
  • Asish
    My app crashes when I send notification from cloud.
  • Rajesh De
    I am receiving the notification inside listener. But its not displayed properly. The same displayNotification() function works fine on iOS with Heads up notification. On Android the Heads up notification is not working.

    I have a confusion regarding the channel id. I have this setup for channel id

    #AndroidManifest.xml

    I have used the same string in place of “notification_channel_name” in the above example

    • Rajesh De
      #AndroidManifest.xml
      // the following code wasn’t allowed in last comment

      Inside meta-data tag

      android:name=”com.google.firebase.messaging.default_notification_channel_id”
      android:value=”pushNotificationChannelId”

      • anchit (Moderator)
        What is the channel name that you used in the react native code ?
  • zaki
    Thank you so much.
    I tried to send custom data, and when I come to recover them I can not.
    I created a php api.
    $ msg = array (‘body’ => ‘Firebase’ , ‘title =>’ Vishal ‘ , ‘ data ‘=> [‘ id ‘=> 12]);
    console.log (‘onNotification notification.data ->’, notification.data);
    and I get weird info.
    please help me
    • anchit (Moderator)
      Hello dear,
      Can you please share some more details ?

      A log of what exactly do you receive and what exactly was sent in the PHP Api request would be appreciated.

  • Deepak Govindarajan
    Thanks for this awesome work. I am receiving notification and displaying. But i wont see those consol.log inside notificationListener function. One more help, While clicking noticiation i want to do some action can you please suggest me how to listen notification on tap listener. i tried notification firebase.notifications().onNotificationDisplayed, firebase.notifications().onNotificationOpened nothing working in my app.
  • Bishwajeet Das
    Awesome Documentation.
    • anchit (Moderator)
      Thanks for your appreciation 🙂
  • css.php
    Start a Project


      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home