Push Notifications with Firebase in React Native

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. As of October 2018, It has 18 products, which used by 1.5 million apps. What we are about to do here is using Push Notification technology within a React Native App and increment this number by +1 🤣

This article assumes you have required packages installed on your device and ready to build React Native application. But anyone out of this assumption can follow these official instructions, I don’t mention all steps in detail here.

Create your project:

npx react-native init PushNotificationSample

Thats it!
Run it, use it or sell it whatever … I’m done here, goodbye.

just kidding..

a short sight of my package.json file to indicate versions of the packages;

{
"name": "PushNotificationSample",
…
“dependencies”: {
“react”: “16.9.0”,
“react-native”: “0.61.5”,
“react-native-firebase”: “⁵.5.6”
},

Now we begin to settle Firebase environment;
Go to https://console.firebase.google.com/
Log in and create a project; Click Add project on the page below

Enter your project name as you wish and click Continueand click Continueagain and in next page select Default Firebase Account

then click Create project

After some creating process, you will be welcomed by this page

My project’s name is “Push Notification Sample”
Now click the Androidicon to create an application

1. Register app
   Android package name;
   Copy your project name from \android\app\src\main\AndroidManifest.xml file.

its how your AndroidManifest.xml should look like at the end. Now Just get the project name. (highlighted)

Then click “Register app”
2) Click “Download the google-services.json” file and move this file to \android\app directory, then click “Next”
3) Click “Next”
4) Click “Skip this step”. Yeah, these last two are my favourites as well.

Now flip back to your project and install this package;

npm install — save react-native-firebase

and run this to link packages to your application

react-native link react-native-firebase

Note:I am using VS Code but you can use any text editor except Excel
Open \android\build.gradle in your editor and copy+paste
classpath com.google.gms:google-services:4.2.0 to dependencies section.

It should look like this;
dependencies {
classpath(“com.android.tools.build:gradle:3.4.2”)
classpath com.google.gms:google-services:4.2.0 //NEW LINE!!
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}

Then open android\app\build.gradle file and copy&paste apply plugin: ‘com.google.gms.google-services’ to very bottom.
It should look like this;
…
apply from: file(“../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesAppBuildGradle(project)
apply plugin: ‘com.google.gms.google-services’
Also before leave this file copy firebase dependencies;
dependencies {
implementation project(‘:react-native-firebase’)
implementation fileTree(dir: “libs”, include: [“*.jar”])
implementation “com.facebook.react:react-native:+”
// Firebase dependencies (Copy&paste these two lines)
add this line if you wish to use badge on Android
implementation "com.google.android.gms:play-services-base:16.1.0"
implementation "com.google.firebase:firebase-core:16.0.9"
implementation "com.google.firebase:firebase-messaging:18.0.0"
implementation 'me.leolin:ShortcutBadger:1.1.21@aar' // <-- its optional
...

Note: in official Firebase documentation(https://rnfirebase.io) it says;

“In android/gradle/wrapper/gradle-wrapper.properties, update the gradle URL to gradle-4.4-all.zip”

But its wrong! At the moment I post this article RN gradle version in \android\gradle\wrapper\gradle-wrapper.properties file gradle-5.5 and
RN Minumum supported Gradle version is 5.2 so its gonna make you encounter a compile error if you change it to gradle-4.4-all.zip.

Solution: Don't touch, leave it as it is.

In android/build.gradle check that you have google() specified in the buildScript repositories section
buildscript {
repositories {
google() // ← Check this line exists and is above jcenter
jcenter()
// …
}
// …
}

Open \android\app\src\main\java\com\pushnotificationsample\MainApplication.java file add these two import statements;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import
io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;

and edit getPackages() method. It should look like this;
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings(“UnnecessaryLocalVariable”)
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new RNFirebaseMessagingPackage()); // ← Add this line
packages.add(new RNFirebaseNotificationsPackage()); // ← Add this line
return packages;
}

Open \android\app\src\main\AndroidManifest.xmlfile and copy-paste some XML inside application element, just above </application> tag
and your file should look like this;

<manifest xmlns:android=”http://schemas.android.com/apk/res/android" package=”com.pushnotificationsample”>
...
<activity
android:name=”com.facebook.react.devsupport.DevSettingsActivity” />
<! — Copy Begin →
<service android:name=”io.invertase.firebase.messaging.RNFirebaseMessagingService”><intent-filter>
<action android:name=”com.google.firebase.MESSAGING_EVENT” />
</intent-filter>
</service><meta-data
android:name=”com.google.firebase.messaging.default_notification_icon” android:resource=”@drawable/ic_launcher” />
<meta-data android:name=”com.google.firebase.messaging.default_notification_color” android:resource=”@color/notificationColor” />
<meta-data android:name=”com.google.firebase.messaging.default_notification_channel_id” android:value=”@string/default_notification_channel_id”/>
<receiver android:name=”io.invertase.firebase.notifications.RNFirebaseNotificationReceiver”/>
<receiver android:enabled=”true” android:exported=”true” android:name=”io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver”><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”/>
<category android:name=”android.intent.category.DEFAULT” />
</intent-filter></receiver>
<! — Copy End →
</application>
</manifest>

And under project root directory create a file named bgMessaging.js and edit index.js

bgMessaging.js file should look like this;
// @flow
import firebase from ‘react-native-firebase’;
import type from ‘react-native-firebase’;
export default async (message) => {
return Promise.resolve();
}

index.js file should look like this;
import {AppRegistry} from ‘react-native’;
import App from ‘./App’;
import {name as appName} from ‘./app.json’;
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerHeadlessTask(‘RNFirebaseBackgroundMessage’, () =>
bgMessaging); // ← Add this line

Under \android\app\src\main\res directory create a folder drawable
and put an icon file which will have been use as notification icon.
You can download it by here. Create another folder raw and put your notification ring tone sound file here.
Open \android\app\src\main\res\values directory create a file named color.xml and copy-paste the content below;
<resources>
<color name=”notificationColor”>#FFA500</color>
</resources>

And in same directory open strings.xml file make it look like this;
<resources>
<string name=”app_name”>PushNotificationSample</string>
<string name=”default_notification_channel_id” translatable=”false”>fcm_pushnotification_default_channel</string>
</resources>

Thats it! Now run the app;

react-native run-android

and open Grow -> Cloud Messaging click Notifications tab and click New notification, you gonna generate your notification in this form.

if everything is ok, you should see something like this on your device.

Best advantage of this approach you can save the identity all of the clients(tokens) you want and choose who you want to send notification in future its very easy and usefull.

This is how you send notification to your clients in Firebase.

Lets use another application named pushtry. Its a third party web application. Open https://pushtry.com/ which used for sending test notification.

You don't need Firebase or any other platform that you need to log in for sending a notification, its just a simple web app with anonymous access. You were able to send GCM test notification, I said “were” because it's deprecated and moving to FCM as well, this is why its losing popularity among developers so using Firebase seems the best way to send a notification. But lets respect olds and show the way. 😢

Copy your server key and token and edit the message detail to be sent
You can get your server key from firebase account as you see below;

You can get your token from console, open debug in your app and it would be prompted in console.

Also you can edit notification form data as you see below

Before send notification, push home button or whatever it routes to main screen.

Your app suppose to work in Background, now click “Send”. If everything goes okay, you should see something like this on your device.

You will be able to send notification even your app is not running on the foreground so you can keep your clients up to date and share information regarding your business.

I have also shared the source codes and there are comments and description in detail that may assist you to understand what's going on here, just check my repo link below.

You can download full source code here. There is another tutorial coming soon about an application in .Net Core which I use as application layer. It will send notifications to Firebase and eventually, you will see notifications on your device just like the pics above.

Please feel free to comment in the section below also let me know if you have any questions about this tutorial I will be happy to assist you. Also, don't hesitate to share your ideas if you think it fits better with our needs here.