Firebase Notification Integration in React Native Android Application

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 :

Access to a firebase project (Create a new firebase project if you are not familiar with the Firebase ).
react-native-firebase ( Refer here for the official GitHub page of this package )

Installation Steps :

npm install --save react-native-firebase

1	npm install --save react-native-firebase

Above command will install and save the react-native-firebase package in your React Native Project.

react-native link react-native-firebase

1	react-native link react-native-firebase

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 )

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 27
        supportLibVersion = "27.1.1"
        googlePlayServicesVersion = "15.0.0" // Make Sure This line is added over here only
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'
        classpath 'com.google.gms:google-services:3.2.1' // Make Sure This line is added over here only

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
         maven {
            url 'https://maven.google.com/' // Make Sure This block is added over here only
            name 'Google'
        }
    }
}

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

ext {

buildToolsVersion = "27.0.3"

minSdkVersion = 16

compileSdkVersion = 27

targetSdkVersion = 27

supportLibVersion = "27.1.1"

googlePlayServicesVersion = "15.0.0" // Make Sure This line is added over here only

}

repositories {

google()

jcenter()

}

dependencies {

classpath 'com.android.tools.build:gradle:3.1.4'

classpath 'com.google.gms:google-services:3.2.1' // Make Sure This line is added over here only

// NOTE: Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

allprojects {

repositories {

mavenLocal()

google()

jcenter()

maven {

url "$rootDir/../node_modules/react-native/android"

}

maven {

url 'https://maven.google.com/' // Make Sure This block is added over here only

name 'Google'

}

In your module level build.gradle file (path to this file: android–> app–>build.gradle)

// other lines of file

dependencies {
// Your other dependencies
implementation project(':react-native-firebase')
implementation "com.google.android.gms:play-services-base:15.0.0"
implementation "com.google.firebase:firebase-core:15.0.2"
implementation "com.google.firebase:firebase-messaging:15.0.2"
}

// other lines of file

dependencies {

// Your other dependencies

implementation project(':react-native-firebase')

implementation "com.google.android.gms:play-services-base:15.0.0"

implementation "com.google.firebase:firebase-core:15.0.2"

implementation "com.google.firebase:firebase-messaging:15.0.2"

}

Now you need to make some changes in your AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.react.native.myproject">

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
  <uses-permission android:name="android.permission.VIBRATE" />


    <application>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>
        <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@drawable/ic_notification_icon" />

    </application>
</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.react.native.myproject">

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

<uses-permission android:name="android.permission.VIBRATE" />

<intent-filter>

</intent-filter>

</service>

<intent-filter>

</intent-filter>

</service>

<meta-data

android:name="com.google.firebase.messaging.default_notification_icon"

android:resource="@drawable/ic_notification_icon" />

</application>

</manifest>

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.

import firebase from 'react-native-firebase';
import type, { Notification, NotificationOpen } from 'react-native-firebase';

    componentDidMount() {
        firebase.messaging().hasPermission().then(hasPermission => {
            if (hasPermission) {
                //App already has permission to recieve notifications we just need to add recivers for the notifications
                this.subscribeToNotificationListeners()
            } else {
                //App does not have permission to recieve notifications we first need to request for permission and then add recivers for the notifications
                firebase.messaging().requestPermission().then(() => {
                    this.subscribeToNotificationListeners()
                }).catch(error => {
                    console.error(error);

                })
            }
        })
    }

    // A funtion to subscribe to the notification recievers
    subscribeToNotificationListeners() {
        const channel = new firebase.notifications.Android.Channel(
            'notification_channel_name', // To be Replaced as per use
            'Notifications', // To be Replaced as per use
            firebase.notifications.Android.Importance.Max
        ).setDescription('A Channel To manage the notifications related to Application');
        firebase.notifications().android.createChannel(channel);
        
        this.notificationListener = firebase.notifications().onNotification((notification) => {
            console.log('onNotification notification-->', notification);
            console.log('onNotification notification.data -->', notification.data);
            console.log('onNotification notification.notification -->', notification.notification);
            // Process your notification as required
        });
    }

    componentWillUnmount() {
        this.notificationListener();
    }

import firebase from 'react-native-firebase';

import type, { Notification, NotificationOpen } from 'react-native-firebase';

componentDidMount() {

firebase.messaging().hasPermission().then(hasPermission => {

if (hasPermission) {

//App already has permission to recieve notifications we just need to add recivers for the notifications

this.subscribeToNotificationListeners()

} else {

//App does not have permission to recieve notifications we first need to request for permission and then add recivers for the notifications

firebase.messaging().requestPermission().then(() => {

this.subscribeToNotificationListeners()

}).catch(error => {

console.error(error);

})

}

})

}

// A funtion to subscribe to the notification recievers

subscribeToNotificationListeners() {

const channel = new firebase.notifications.Android.Channel(

'notification_channel_name', // To be Replaced as per use

'Notifications', // To be Replaced as per use

firebase.notifications.Android.Importance.Max

).setDescription('A Channel To manage the notifications related to Application');

firebase.notifications().android.createChannel(channel);

this.notificationListener = firebase.notifications().onNotification((notification) => {

console.log('onNotification notification-->', notification);

console.log('onNotification notification.data -->', notification.data);

console.log('onNotification notification.notification -->', notification.notification);

// Process your notification as required

});

}

componentWillUnmount() {

this.notificationListener();

}

After adding these listeners, we now need to handle the Notification received, so we will just modify our listeners a bit like below :

subscribeToNotificationListeners() {
        const channel = new firebase.notifications.Android.Channel(
            'notification_channel_name', // To be Replaced as per use
            'Notifications', // To be Replaced as per use
            firebase.notifications.Android.Importance.Max
        ).setDescription('A Channel To manage the notifications related to Application');
        firebase.notifications().android.createChannel(channel);
        
        this.notificationListener = firebase.notifications().onNotification((notification) => {
            console.log('onNotification notification-->', notification);
            console.log('onNotification notification.data -->', notification.data);
            console.log('onNotification notification.notification -->', notification.notification);
            // Process your notification as required
            this.displayNotification(notification)
        });
    }

    displayNotification = (notification) => {
        if (Platform.OS === 'android') {
            const localNotification = new firebase.notifications.Notification({
                sound: 'default',
                show_in_foreground: true,
            }).setNotificationId(notification.notificationId)
                .setTitle(notification.title)
                .setSubtitle(notification.subtitle)
                .setBody(notification.body)
                .setData(notification.data)
                .android.setChannelId('notification_channel_name') // e.g. the id you chose above
                .android.setSmallIcon('ic_notification_icon') // create this icon in Android Studio
                .android.setColor(colors.colorAccent) // you can set a color here
                .android.setPriority(firebase.notifications.Android.Priority.High);

            firebase.notifications()
                .displayNotification(localNotification)
                .catch(err => console.error(err));

        }
    }

subscribeToNotificationListeners() {

const channel = new firebase.notifications.Android.Channel(

'notification_channel_name', // To be Replaced as per use

'Notifications', // To be Replaced as per use

firebase.notifications.Android.Importance.Max

).setDescription('A Channel To manage the notifications related to Application');

firebase.notifications().android.createChannel(channel);

this.notificationListener = firebase.notifications().onNotification((notification) => {

console.log('onNotification notification-->', notification);

console.log('onNotification notification.data -->', notification.data);

console.log('onNotification notification.notification -->', notification.notification);

// Process your notification as required

this.displayNotification(notification)

});

}

displayNotification = (notification) => {

if (Platform.OS === 'android') {

const localNotification = new firebase.notifications.Notification({

sound: 'default',

show_in_foreground: true,

}).setNotificationId(notification.notificationId)

.setTitle(notification.title)

.setSubtitle(notification.subtitle)

.setBody(notification.body)

.setData(notification.data)

.android.setChannelId('notification_channel_name') // e.g. the id you chose above

.android.setSmallIcon('ic_notification_icon') // create this icon in Android Studio

.android.setColor(colors.colorAccent) // you can set a color here

.android.setPriority(firebase.notifications.Android.Priority.High);

firebase.notifications()

.displayNotification(localNotification)

.catch(err => console.error(err));

}

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

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, BackHandler, ToastAndroid, StatusBar } from 'react-native';
import firebase from 'react-native-firebase';
import type, { Notification, NotificationOpen } from 'react-native-firebase';
// Your Other import lines as per your use case

export default class App extends Component {
    subscribeToNotificationListeners() {
        const channel = new firebase.notifications.Android.Channel(
            'notification_channel_name', // To be Replaced as per use
            'Notifications', // To be Replaced as per use
            firebase.notifications.Android.Importance.Max
        ).setDescription('A Channel To manage the notifications related to Application');
        firebase.notifications().android.createChannel(channel);
        
        this.notificationListener = firebase.notifications().onNotification((notification) => {
            console.log('onNotification notification-->', notification);
            console.log('onNotification notification.data -->', notification.data);
            console.log('onNotification notification.notification -->', notification.notification);
            // Process your notification as required
            this.displayNotification(notification)
        });
    }

    displayNotification = (notification) => {
        if (Platform.OS === 'android') {
            const localNotification = new firebase.notifications.Notification({
                sound: 'default',
                show_in_foreground: true,
            }).setNotificationId(notification.notificationId)
                .setTitle(notification.title)
                .setSubtitle(notification.subtitle)
                .setBody(notification.body)
                .setData(notification.data)
                .android.setChannelId('notification_channel_name') // e.g. the id you chose above
                .android.setSmallIcon('ic_notification_icon') // create this icon in Android Studio
                .android.setColor(colors.colorAccent) // you can set a color here
                .android.setPriority(firebase.notifications.Android.Priority.High);

            firebase.notifications()
                .displayNotification(localNotification)
                .catch(err => console.error(err));

        }
    }

    componentDidMount() {
        firebase.messaging().hasPermission().then(hasPermission => {
            if (hasPermission) {
                this.subscribeToNotificationListeners()
            } else {
                firebase.messaging().requestPermission().then(() => {
                    this.subscribeToNotificationListeners()
                }).catch(error => {
                    console.error(error);

                })
            }
        })
    }

    componentWillUnmount() {
        this.notificationListener();
    }


/* Change return block below as per Your Application Logic */
    render() {
        return (
            <View>
                
            </View>
        );
    }
}

import React, { Component } from 'react';

import { Platform, StyleSheet, Text, View, BackHandler, ToastAndroid, StatusBar } from 'react-native';

import firebase from 'react-native-firebase';

import type, { Notification, NotificationOpen } from 'react-native-firebase';

// Your Other import lines as per your use case

export default class App extends Component {

subscribeToNotificationListeners() {

const channel = new firebase.notifications.Android.Channel(

'notification_channel_name', // To be Replaced as per use

'Notifications', // To be Replaced as per use

firebase.notifications.Android.Importance.Max

).setDescription('A Channel To manage the notifications related to Application');

firebase.notifications().android.createChannel(channel);

this.notificationListener = firebase.notifications().onNotification((notification) => {

console.log('onNotification notification-->', notification);

console.log('onNotification notification.data -->', notification.data);

console.log('onNotification notification.notification -->', notification.notification);

// Process your notification as required

this.displayNotification(notification)

});

}

displayNotification = (notification) => {

if (Platform.OS === 'android') {

const localNotification = new firebase.notifications.Notification({

sound: 'default',

show_in_foreground: true,

}).setNotificationId(notification.notificationId)

.setTitle(notification.title)

.setSubtitle(notification.subtitle)

.setBody(notification.body)

.setData(notification.data)

.android.setChannelId('notification_channel_name') // e.g. the id you chose above

.android.setSmallIcon('ic_notification_icon') // create this icon in Android Studio

.android.setColor(colors.colorAccent) // you can set a color here

.android.setPriority(firebase.notifications.Android.Priority.High);

firebase.notifications()

.displayNotification(localNotification)

.catch(err => console.error(err));

}

componentDidMount() {

firebase.messaging().hasPermission().then(hasPermission => {

if (hasPermission) {

this.subscribeToNotificationListeners()

} else {

firebase.messaging().requestPermission().then(() => {

this.subscribeToNotificationListeners()

}).catch(error => {

console.error(error);

})

}

})

}

componentWillUnmount() {

this.notificationListener();

}

/* Change return block below as per Your Application Logic */

render() {

return (

<View>

</View>

);

}

Hope This helps you.

Keep coding and Keep Sharing

References : –>

https://www.npmjs.com/package/react-native-firebase
https://rnfirebase.io/docs/v5.x.x/notifications/receiving-notifications
https://rnfirebase.io/docs/v5.x.x/messaging/android

anchit

5 Mar, 2021
Updated by - anchit
30 Mar, 2019
Created by - anchit

. . .

15 comments

Chirag ncrypted 5 years ago

This post is helpful , Thank you !!!

anchit (Moderator) 5 years ago
Thanks for your kind words 🙂

Reply

Jimmy 5 years ago

Thank you for sharing, save my live

anchit (Moderator) 5 years ago
Thanks 🙂

Reply

Asish 5 years ago

My app crashes when I send notification from cloud.

Rajesh De 5 years ago

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 5 years ago
#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”

Reply
- anchit (Moderator) 5 years ago
  What is the channel name that you used in the react native code ?
  
  Reply

zaki 5 years ago

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) 5 years ago
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.

Reply

Deepak Govindarajan 5 years ago

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 4 years ago
Awesome Documentation.
whats about IOS notification.

Reply
- anchit (Moderator) 4 years ago
  Thanks for your appreciating words.
  
  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 –>
  1) https://rnfirebase.io/docs/v5.x.x/installation/ios
  2) https://rnfirebase.io/docs/v5.x.x/notifications/ios
  
  This should help you to get along.
  
  Regards,
  Anchit
  
  Reply

Bishwajeet Das 4 years ago

Awesome Documentation.

anchit (Moderator) 4 years ago
Thanks for your appreciation 🙂

Reply

Firebase Notification Integration in React Native Android Application

Things You Need To Get Started :

Installation Steps :

Before You Start Coding

CODE :

Leave a Comment Cancel Reply

15 comments

Message Sent!