React Native Push

Notifications: Your Ultimate

Guide

Abbas Ali Radiowala

·
Follow
9 min read

336

8
Hi Geeks !! In this fast-paced world of mobile app

development, Push Notifications play a pivotal role in

engaging users and delivering timely updates. In this

post, we’ll learn how to setup Push notification in

React Native apps using react-native-push-

notification module. We’ll be utilizing the Firebase

console to dispatch notifications and capture them

within our app. Additionally, we’ll delve into the

process of managing push notifications in React

Native applications. This includes accessing the data

transmitted via notifications within the app and

ensuring the app wakes up if it’s inactive or closed.

What are Push Notifications

Push notifications are messages or alerts sent by

mobile applications to users’ devices, even when the

app is not actively in use. These notifications can

contain various types of information, such as updates,

reminders, promotions, or personalized messages.

They appear as banners, alerts, or badges on the

device’s home screen, lock screen, or notification

center, depending on the device’s operating system

and user settings.

Setting up a React Native App for receiving Notifications

In this tutorial, our focus will be on setting up push

notification reception within a React Native

application specifically for Android devices. The code

provided will be compatible with both Android and

iOS platforms, but for iOS, additional configuration

 steps are required. We’ll cover those steps in a

separate tutorial dedicated to iOS setup.

To create a new React Native app, you can use the

following command in your terminal:

npx react-native init Notification

This command initializes a new React Native project

with the specified name. Make sure you have Node.js

and npm (or Yarn) installed on your system before

running this command.

You can run the Android application with the

following code snippet:

npm run android

Creating the Push Notification Dependency

In this setup, we’re utilizing the ‘react-native-push-

notification’ package, specifically designed to handle

push notification functionality within our React Native

application. You can acquire this package via Node

Package Manager (npm).

npm install --save react-native-push-notification

or

yarn add react-native-push-notification

Registering our Application with Firebase

Within the Firebase dashboard, you need to register

your Android or iOS application to enable push

notifications. For this demonstration, we’ll focus on

implementing push notifications for Android apps.

To register your Android application in the Firebase

dashboard, follow these steps:

1. Register the Android application and give it a

name.

2. Select your project or create a new one if you

haven’t already.

3. Click on the “Add app” button to add a new

platform to your project.

4. Choose the Android platform by clicking on

the Android icon.

 5. Enter your Android app’s package name. This

can typically be found in the

“android/app/build.gradle” file of your React

Native project.

6. (Optional) Enter other optional details such as

app nickname and debug signing certificate

SHA-1.

7. Click on the “Register app” button to

complete the registration process.

Tip: To get SHA-1 or SHA-256 certificate go to your

project in cmd and then type the following command.

cd android

./gradlew signingReport
After downloading the google-services.json file from the

Firebase console, ensure you place it in the root

directory of your application module.

Next, incorporate the necessary code provided by

Firebase documentation into the project-level

build.gradle file (located at <project>/build.gradle). This

code snippet configures your project to work with

Firebase services.

buildscript {

ext {
 ...

buildToolsVersion = "34.0.0"

minSdkVersion = 21

compileSdkVersion = 34

targetSdkVersion = 34

ndkVersion = "25.1.8937393"

kotlinVersion = "1.8.0"

...

repositories {

...

google() // Add this line

mavenCentral()
 ...

dependencies {

...

classpath("com.google.gms:google-services:4.4.0") // Google
Service Plugin

...

apply plugin: "com.facebook.react.rootproject"

After completing the project-level configuration,

proceed to create the application-level build.gradle file

located at <project>/<app-module>/build.gradle.
...

apply plugin: "com.google.gms.google-services"

...

dependencies {

...

implementation(platform("com.google.firebase:firebase-
bom:32.7.1"))

...

To incorporate Push Notifications into your React

Native Android application, replace the following

code snippet to your AndroidManifest.xml file.

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

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

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

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

// Permission for requesting Notification Access

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

<application

android:name=".MainApplication"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:roundIcon="@mipmap/ic_launcher_round"

android:allowBackup="false"
 android:theme="@style/AppTheme">

<meta-data
android:name="com.dieam.reactnativepushnotification.notification_
foreground"

android:value="true" />

<meta-data
android:name="com.dieam.reactnativepushnotification.channel_creat
e_default"

android:value="true" />

<meta-data
android:name="com.dieam.reactnativepushnotification.notification_
color"

android:resource="@color/white" />

<receiver
android:name="com.dieam.reactnativepushnotification.modules.RNPus
hNotificationActions"

android:exported="true" />

<receiver
android:name="com.dieam.reactnativepushnotification.modules.RNPus
hNotificationPublisher"

android:exported="true" />

<receiver

android:name="com.dieam.reactnativepushnotification.modules.RNPus
hNotificationBootEventReceiver"

android:exported="true">

<intent-filter>

<action
android:name="android.intent.action.BOOT_COMPLETED" />

<action
android:name="android.intent.action.QUICKBOOT_POWERON" />

<action
android:name="com.htc.intent.action.QUICKBOOT_POWERON" />

</intent-filter>

</receiver>
 <service

android:name="com.dieam.reactnativepushnotification.modules.RNPus
hNotificationListenerService"

android:exported="false">

<intent-filter>

<action android:name="com.google.firebase.MESSAGING_EVENT"
/>

</intent-filter>

</service>

<activity

android:name=".MainActivity"

android:label="@string/app_name"
 android:configChanges="keyboard|keyboardHidden|orientation|
screenLayout|screenSize|smallestScreenSize|uiMode"

android:launchMode="singleTask"

android:windowSoftInputMode="adjustResize"

android:exported="true">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category
android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>
 Lastly, go to

android/app/src/res/values/colors.xml. If the file

does not exist, create it. This file determines the color

of the notification on an Android device.

<resources>

<color name="white">#FFF</color>

</resources>

After configuring all the above steps, follow the below

step to check if there is any dependency issue or error

being raised while adding all the functionalities for

Push Notification.

// Go to Project Folder and follow these steps

// Navigate to android folder

cd android
 // Use this command to check for any error or dependency issue

./gradlew clean

As of now, all the dependency has been added and

we’ll now move onto the next set of steps i.e.

receiving notifications.

All the functionalities & logics must always be applied

to the root level of the project, not inside any

component as Notification requires access to the entire

app.

Configuring Local Notification

In your React Native project, open your App.tsx or

create a new file in your root directory. Import the

PushNotification module from react-native-push-

notification, and initialize it.

import PushNotification from 'react-native-push-notification'

const LocalNotification = () => {

const key = Date.now().toString(); // Key must be unique

everytime

PushNotification.createChannel(

channelId: key, // (required)

channelName: "Local messasge", // (required)

channelDescription: "Notification for Local message",

// (optional) default: undefined.

importance: 4, // (optional) default: 4. Int value of

the Android notification importance

vibrate: true, // (optional) default: true. Creates

the default vibration patten if true.
 },

(created) => console.log(`createChannel returned '$

{created}'`) // (optional) callback returns whether the channel
was created, false means it already existed.

);

PushNotification.localNotification({

channelId: key, //this must be same with channelid in

createchannel

title: 'Local Message',

message: 'Local message !!',

})

};

export default LocalNotification

Now import the above file into App.tsx

import React from ‘react’;

import {

Button,

SafeAreaView,

ScrollView,

StatusBar,

Text,

useColorScheme,

View,

} from ‘react-native’;

import {

Colors,

} from ‘react-native/Libraries/NewAppScreen’;
import LocalNotification from ‘./Notification’;

function App(): React.JSX.Element {

const isDarkMode = useColorScheme() === ‘dark’;

const backgroundStyle = {

backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,

};

return (

<SafeAreaView style={backgroundStyle}>

<StatusBar

barStyle={isDarkMode ? ‘light-content’ : ‘dark-content’}

 backgroundColor={backgroundStyle.backgroundColor}

/>

<ScrollView

contentInsetAdjustmentBehavior="automatic"

style={backgroundStyle}>

<View

style={{

backgroundColor: isDarkMode ? Colors.black :

Colors.white,

flex: 1,

justifyContent: 'center',

alignItems: 'center',

alignContent: 'center',
 }}>

<Text> Push Notification!! </Text>

<Button title={'Click Here'} onPress={LocalNotification}

/>

</View>

</ScrollView>

</SafeAreaView>

);

export default App;

Clicking on Click Here button will render a local

notification successfully.

Now moving onto Remote Notification Setup

For the android versions below 13 (that is 12 and 11

and below), notifications where enabled by default. But

from version 13 and above it is mandatory to ask

permission from the user to enable notification and the

notification is turned off (and blocked if the necessary

permissions are not present in the AndroidManifest.xml

file).

Add these few lines in PermissionsAndroid.js in

node_modules/react-native/Libraries/Permission

sAndroid/PermissionsAndroid.js

...

export type Rationale = {

...

POST_NOTIFICATIONS?: string,

};
const PERMISSION_REQUEST_RESULT = Object.freeze({

...

POST_NOTIFICATIONS: 'android.permission.POST_NOTIFICATIONS',

});

For our current project we have initialized this in

AndroidManifest.xml file already.

Create a file RemoteNotification.tsx and add the

following code line to configure the remote

notifications.

import { useEffect } from 'react';

import { PermissionsAndroid, Platform } from 'react-native';

import PushNotification from 'react-native-push-notification';

const checkApplicationPermission = async () => {

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

try {

await PermissionsAndroid.request(

PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,

);

} catch (error) {

console.error(error)

};
const RemoteNotification = () => {

useEffect(() => {

checkApplicationPermission();

// Using this function as we are rendering local

notification so without this function we will receive multiple
notification for same notification

// We have same channelID for every FCM test server

notification.

PushNotification.getChannels(function (channel_ids) {

channel_ids.forEach((id) => {

PushNotification.deleteChannel(id)

})

});

PushNotification.configure({
 // (optional) Called when Token is generated (iOS and
Android)

onRegister: function (token) {

console.log('TOKEN:', token);

},

// (required) Called when a remote or local

notification is opened or received

onNotification: function (notification) {

const { message, title, id } = notification;

let strTitle: string =

JSON.stringify(title).split('"').join('');

let strBody: string =

JSON.stringify(message).split('"').join('');

const key: string =

JSON.stringify(id).split('"').join('');
 PushNotification.createChannel(

channelId: key, // (required & must be unique)

channelName: "remote messasge", // (required)

channelDescription: "Notification for remote

message", // (optional) default: undefined.

importance: 4, // (optional) default: 4. Int

value of the Android notification importance

vibrate: true, // (optional) default: true.

Creates the default vibration patten if true.

},

(created) => console.log(`createChannel returned

'${created}'`) // (optional) callback returns whether the channel
was created, false means it already existed.

);

PushNotification.localNotification({
 channelId: key, //this must be same with
channelId in createchannel

title: strTitle,

message: strBody,

});

console.log('REMOTE NOTIFICATION ==>', title,

message, id, notification);

// process the notification here

},

// Android only: GCM or FCM Sender ID

senderID: '1234567890'

popInitialNotification: true,

requestPermissions: true,

});
 }, []);

return null;

};

export default RemoteNotification;

In this file we have create a function called

checkApplicationPermission . This function generally

requests the permission for the access to notification

which is by default not given to new application

installed in Android version 13+.

After getting the access for notification, we configure

PushNotification.configure in which we initially create a

device token onRegister which is necessary for a device

to receive remote notification.

The onNotification function is rendered when we

receive a notification. In our project particularly, we

are rendering a Local Notification when we are

receiving a remote notification as sometimes in

Foreground state we don’t receive a pop-up

notification. So in that case we are rendering such

functionality over here.

Receiving Remote Notification

Few more changes are needed to receive our remote

notification as we have 3 states of app activity:

1. Foreground State

2. Background State

3. Quit State

So for these states we are going to make changes in

App.tsx.
In App.tsx we are going import RemoteNotification and

render it.

import React from 'react';

import {

Button,

SafeAreaView,

ScrollView,

StatusBar,

Text,

useColorScheme,

View,

} from 'react-native';

import {
Colors,

} from 'react-native/Libraries/NewAppScreen';

import LocalNotification from './Notification';

import RemoteNotification from './RemoteNotification';

function App(): React.JSX.Element {

const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = {

backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,

};

return (
 <SafeAreaView style={backgroundStyle}>

<StatusBar

barStyle={isDarkMode ? 'light-content' : 'dark-content'}

backgroundColor={backgroundStyle.backgroundColor}

/>

<ScrollView

contentInsetAdjustmentBehavior="automatic"

style={backgroundStyle}>

<View

style={{

backgroundColor: isDarkMode ? Colors.black :

Colors.white,

flex: 1,
 justifyContent: 'center',

alignItems: 'center',

alignContent: 'center',

}}>

<RemoteNotification />

<Text> Push Notification!! </Text>

<Button title={'Click Here'} onPress={LocalNotification}

/>

</View>

</ScrollView>

</SafeAreaView>

);

}
 export default App;

Now after making all the above changes, we are

ready to receive our Remote Notification.

We will now head towards our FCM Console to

sender our notification.

To get Server Token, you have to firstly go to your

Firebase project, then go to Setting of your project then

navigate to Cloud Messaging. There you will see a

section called Cloud Messaging API (Legacy) which

will be disabled by default. Click Here to know how to

enable it & get Server Token

After clicking Push Notification, you will receive your

remote notification successfully.

Remote Notification Arrived
React Native Push Notification

In this tutorial, we’ve covered the essential steps to

integrate push notifications into your React Native

app using the react-native-push-notification package.

From setting up Firebase for notification services to

configuring local notifications, you now have a solid

foundation to implement push notifications effectively

in your projects.

As you continue to explore the vast possibilities of

React Native development, remember that push

notifications are a powerful tool for engaging users

and enhancing the user experience.

I hope this tutorial has provided you with valuable

insights and practical guidance on integrating push

notifications into your React Native projects. If you

have any questions or encounter any challenges along

the way, don’t hesitate to reach out to me for support.

Happy coding, and may your apps thrive with the

power of push notifications!