Image for post
Image for post

How To Send Push Notifications with Firebase in React Native

Hi folks,

In this tutorial, we are going to learn how to send Remote Push Notifications using Firebase. In the next sections I’ll assume that you have basic knowledge of what React-Native and Firebase is.
For those who are new to those two, I’d strongly suggest you to get familiar with those before going deep.

Getting Started With Firebase

First of all, go to firebase.google.com and create a new project. I called mine PushNotifications!

Image for post
Image for post
Give your project a name

Click on Continue.

Image for post
Image for post

Enable Google Analytics for this project. This will help you later on to track data from your users, for marketing purposes.

Image for post
Image for post

I used the Default Account for Firebase. You can create a separate one if you want to have your projects analytics separate stored.

Image for post
Image for post

Voilà! We have our project created on Firebase. Let’s create the application, for real.

Go to your projects folder and use this command to init your project using the typescript template. I’m personally new in typescript, but I found it amazing.

npx react-native init PushNotifications --template react-native-template-typescript
cd PushNotifications

Now add the libs

yarn add @react-native-firebase/app @react-native-firebase/messaging @react-native-community/push-notification-ios react-native-push-notification @types/react-native-push-notification

For the iOS part, install the pods.

pod install --project-directory=ios/

Now go back to Firebase, we will add our Android Application.

Image for post
Image for post

Click on Android.

Image for post
Image for post

Android package name is in your build.gradle file

Image for post
Image for post

In my case it’s “com.pushnotifications”

App nickname, you can pick anything. Then Click on Register App.

2. Download Config File

Image for post
Image for post

Donwload the google-services.json and put it under your android/app folder

3. Add Firebase SDK

Image for post
Image for post

First of all the classpath under dependencies in your project-level build.gradleas stated in firebase.

dependencies {// Add Hereclasspath 'com.google.gms:google-services:4.3.4'}

and go to your app-level build.gradle and add those,

apply plugin: 'com.android.application'
// Add this line
apply plugin: 'com.google.gms.google-services'

dependencies {

}
implementation 'com.google.firebase:firebase-analytics'
}

After you have done that and click Sync Now from Android Studio.

4. Run your app to verify installation

Let’s run our application

npx react-native run-android
Image for post
Image for post

Now as we can see, it says:

Congratulations, you’ve successfully added Firebase to your app!

Click on Continue to console.

Now we have to edit our App.ts, so replace this code with your App.ts

import React, {useEffect} from 'react';
import firebase from '@react-native-firebase/app';
import '@react-native-firebase/messaging';
import PushNotification from 'react-native-push-notification';
import {Platform} from 'react-native';
import PushNotificationIOS from '@react-native-community/push-notification-ios';import {FirebaseMessagingTypes} from '@react-native-firebase/messaging';const App = () => {
const showNotification = (
notification: FirebaseMessagingTypes.Notification,
) => {
PushNotification.localNotification({
title: notification.title,
message: notification.body!,
});
};
useEffect(() => {
firebase
.messaging()
.getToken(firebase.app().options.messagingSenderId)
.then(token => console.log(token))
.catch(e => console.log(e));
firebase.messaging().onMessage(response => {
console.log(JSON.stringify(response));
if (Platform.OS === 'ios') {
PushNotificationIOS.requestPermissions().then(
showNotification(response.notification!),
);
} else {
showNotification(response.notification!);
}
});
}, []);
return <></>;
};
export default App;

And run your code, you will see your token in your console.

Image for post
Image for post

We will use this code to send a notifications directly to this device.

f2_oa1ZpS86fay_R41RVJ6:APA91bEYJgZB8DiZD8hCPJZpC3KopxEcsRJodY0PNrWBbyQcQI-6ztwGrxpk6YJO-7iB-IiIM7VyFv5pbXQH7OmaLKvU3BpyC7Sif2NC_JpAhkVXWdgwAZ73zRlrddtB5kZLs8G_iYQ1

Go to your firebase console -> Cloud Messaging -> Send your first mesage.

Image for post
Image for post

Click on send your first message,

Image for post
Image for post

Click on test. And check the result!

Image for post
Image for post

You can continue and make the other settings, such as adding image to the notification. Sending daily notifications etc.

Settings for iOS

I’ll add this sections later.

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store