React Native Firebase Push Notifications Tutorial (2025 Edition)

In this tutorial, you’ll learn how to implement Firebase Cloud Messaging (FCM) push notifications in a React Native app using the latest React Native (0.79.2) and @react-native-firebase/messaging (22.2.0). We’ll cover Android and iOS setup, permissions, and sending notifications with real examples and updated best practices.. The first steps of this tutorial are almost the same as the previous React Native Firebase tutorial.

Set up Google Firebase Cloud Messaging (FCM)

We are using Firebase Cloud Messaging (FCM) because it's a cross-platform messaging solution that lets you reliably deliver messages at no cost. Open your browser, then go to Google Firebase Console, and then log in using your Google account.

From that page, click the "+" add project button to create a Google Firebase project then it will be redirected to this page.

After filling the project name text field whose project name is "React Native," click the continue button, and it will be redirected to this page.

Scroll down, then choose not to add Firebase analytics for now, then click the Create Project button. Now, you have a Google Firebase Project ready to use.

After clicking the Continue button, it will be redirected to this page.

Next, click the iOS button to add a new iOS application.

Fill the iOS bundle ID field (ours: "com.djamware.reactnative"), then click the Register App button.

Download the GoogleService-info.plist file, then click the Next Button several times to the last steps of the wizard, then click the Continue to Console button to finish it. Do the same way for the Android application, so you will have a configuration google-service.json file. Keep those configuration files for use with the React Native app later.

Next, click the Gear button, then choose project settings.

Click the Cloud Messaging tab, then it will take to this page.

Write down the server key in your notepad or text editor. That Firebase server key will be used to send the push notification from your server, or just using the Postman application.

Create React Native App

Create a React Native App using this command from your project's directory.

npx @react-native-community/cli init ReactNativeFcm

Next, go to the newly created React App folder and run the React Native app on the simulator.

cd ReactNativeFcm && npx react-native run-ios

Now, you will see this in the iOS simulator.

Next, we will change the iOS and Android package name or bundle ID to match the Firebase configuration files. For iOS, open the `ios/ReactNativeFcm.xcworkspace` file using XCode.

Just change the Bundle Identifier (ours: com.djamware.reactnative) and it's ready to use with the Firebase Cloud Messaging. For Android a little tricky. First, change the source folders, which previously were `android/app/src/main/java/com/reactnativefcm`, become `android/app/src/main/java/com/djamware/reactnative`.

Next, open and edit `android/app/src/main/java/com/djamware/reactnative/MainActivity.java`, then this package name.

package com.reactnativefcm;

to

package com.djamware.reactnative;

Do the same way to `android/app/src/main/java/com/djamware/reactnative/MainApplication.java`. Next, open and edit `android/app/src/main/AndroidManifest.xml`, then change this line.

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

To

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

Next, open edit `android/app/build.gradle` then change the application ID to the new package.

android {
  ...

  defaultConfig {
      applicationId "com.djamware.reactnative"
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
  }
  ...
}

Next, open and edit `android/app/BUCK`, then change the android_build_config and android_resource package name.

android_build_config(
    name = "build_config",
    package = "com.djamware.reactnative",
)

android_resource(
    name = "res",
    package = "com.djamware.reactnative",
    res = "src/main/res",
)

Finally, run this command from the Android folder to clean up the Gradle.

cd android
./gradlew clean

Install and Configure React Native Firebase

We will use the React Native Firebase (RNFirebase) module to access the Google Firebase services. React Native Firebase is a simple Firebase integration for React Native. To install its dependencies, just type this command.

npm install @react-native-firebase/[email protected]

or

yarn add react-native-firebase

Note: Starting from version 10.0.0, React Native Firebase packages share a single common version.

Set up React Native Firebase on Android

Copy the previously downloaded google-services.json to the `android/app/` folder.

cp ~/Downloads/google-services.json android/app/

Next, open and edit `android/build.gradle`, then add this classpath dependency of Google Services.

    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
        classpath("com.google.gms:google-services:4.3.15")
    }

Open and edit `android/app/build.gradle`, then add this line to the bottom of the file.

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

Add these lines of Firebase implementation to the dependencies.

dependencies {
    ...
    implementation("com.google.firebase:firebase-messaging:23.1.2")

    ...
}

Next, open and edit `android/app/src/main/AndroidManifest.xml`, then add these Android permissions after the INTERNET permission.

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

Add the Firebase MESSAGING_EVENT before the closing of the <application> tag.

<application ...>
  ...
  <service
        android:name="io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService"
        android:exported="true">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
  </service>
</application>

Set up React Native Firebase on iOS

a. Update CocoaPods:

Navigate to the ios directory and install pods:

cd ios
pod install

b. Update AppDelegate.m:

Ensure Firebase is configured in your AppDelegate.m:

import Firebase

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  ...

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    FirebaseApp.configure()
    ...
  }
}

Implementing FCM Push Notification

After everything is set up and configured for the Android and iOS (in XCode), now, we have to implement the FCM push notification on the React Native side using the React Native Firebase module. Just open and edit `App.tsx`, then add this import:

import React, {useEffect} from 'react';
import messaging from '@react-native-firebase/messaging';
import {
  Alert,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

Implement the use effect function or method that runs the checkPermission and messageListener functions.

useEffect(() => {
  requestUserPermission();
  messageListener();
}, []);

Add a function to request the permissions.

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
}

 

Add a function to listen to the incoming messages or push notifications from the Firebase Cloud Messaging (FCM), then show them as an Alert when the App is open.

  async function messageListener() {
    // Foreground
    messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    // Background & Quit
    messaging().setBackgroundMessageHandler(async remoteMessage => {
      console.log('Message handled in the background!', remoteMessage);
    });
  }

Run and Test React Native Firebase App

Run the React Native app on the Android device using this command. Make sure the Android device is connected using a USB cable and USB Debugging is enabled so it can be detected using the ADB command.

npx react-native run-android
npx react-native run-ios

For iOS, we can open the `ios/ReactNativeFcm.xcworkspace` from XCode, then use the valid provisioning profile signing, then run the iOS app from there while the Metro Bundler runs from the terminal.

Next, open the Postman app, then change the method to POST and the address to `https://fcm.googleapis.com/fcm/send`. In the headers tab, add Authorization with the value of the Firebase Cloud Messaging Key that was previously obtained when setting up the Firebase. Also, add the Content-Type of `application/json` as the second header.

In the body tabs, choose the RAW and fill with the JSON like below.

{
    "to" : "cFgZQf_bGtc:APA91bF0xbAObLc1CwyBe8lINHaZ_V2PvmsYJ53URUYT1gQwBcglYIi_fdnnpl7KEkNeWOZgmaTWu-hsFGDT7BNaMsEZl37VybPHSXaU0vKZwMl6HfV8VzZlmluIbHTqxwSD7r8Fmy4i",
    "notification" : {
        "body" : "The first message from the React Native and Firebase",
        "title" : "React Native Firebase",
        "content_available" : true,
        "priority" : "high"
    },
    "data" : {
        "body" : "The first message from the React Native and Firebase",
        "title" : "React Native Firebase",
        "content_available" : true,
        "priority" : "high"
    }
}

You can change the "to" with the received FCM token that showed up in the alert when the React Native app started on the devices. Click the Send button, and you will see the push notification on the device like this.

That's the React Native Firebase Cloud Messaging (FCM) Push Notification. You can find the full source on our GitHub.

That's just the basics. If you need more deep learning about React.js, React Native, or related, you can take the following cheap course:

• Master React Native Animations
• Advanced React Native Topics
• React Native
• Learning React Native Development
• React: React Native Mobile Development: 3-in-1

Thanks!