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!

Give your project a name

Click on Continue.

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

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

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.

Click on Android.

Android package name is in your build.gradle file

In my case it’s “com.pushnotifications”

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

2. Download Config File

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

3. Add Firebase SDK

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

dependencies {
// Add Here
classpath '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

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.

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.

Click on send your first message,

Click on test. And check the result!

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.