Implementing Push Notifications in React Native Using Firebase and Notifee

Push notifications are one of the most effective ways to re-engage users and deliver timely updates. In this article, we’ll walk through implementing FCM (Firebase Cloud Messaging) push notifications in a React Native app using Firebase and Notifee, covering both mobile-side setup and backend integration.

🧩 Prerequisites

Before we dive in, make sure you have:

A React Native project (Expo bare workflow or React Native CLI)
Node.js and npm/yarn installed
A Firebase account
Basic understanding of backend APIs

🪄 Step 1: Firebase Setup

1️⃣ Create a Firebase Project

Go to Firebase Console
Click Add Project → enter a name (e.g., NotifyMeApp)
Disable Google Analytics (optional) → click Create Project

2️⃣ Add Android App to Firebase

In your Firebase project → click Add App → Android
Enter your package name (from android/app/build.gradle, e.g. com.notifyme.app)
Download the google-services.json file
Move it to your project:

bash   android/app/google-services.json

5.Add Firebase plugin in android/build.gradle:

bashbuildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.2'
  }
}

6.Then, apply the plugin in android/app/build.gradle:

bashapply plugin: 'com.google.gms.google-services'

3️⃣ Add iOS App (if applicable)

Add your iOS bundle ID (from Xcode → Targets → General → Bundle Identifier)
Download GoogleService-Info.plist
Add it to your iOS project in Xcode
Run:

bashcd ios && pod install && cd ..

📱 Step 2: React Native Mobile Setup

We’ll use two key libraries:

@react-native-firebase/messaging – for handling FCM
@notifee/react-native – for advanced notification control

1️⃣ Install Dependencies

bashyarn add @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native

bashnpm install @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native

For iOS:

bashcd ios && pod install && cd ..

2️⃣ Request Notification Permission

Create a file NotificationService.js:

bashimport messaging from '@react-native-firebase/messaging';
import notifee, { AndroidImportance } from '@notifee/react-native';
import { Platform } from 'react-native';

class NotificationService {
  static async requestPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

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

  static async getFcmToken() {
    const token = await messaging().getToken();
    console.log('FCM Token:', token);
    // Send this token to your backend to store it
  }

  static async onMessageListener() {
    messaging().onMessage(async (remoteMessage) => {
      await notifee.displayNotification({
        title: remoteMessage.notification?.title,
        body: remoteMessage.notification?.body,
        android: {
          channelId: 'default',
          importance: AndroidImportance.HIGH,
        },
      });
    });
  }

  static async setupNotifeeChannel() {
    await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
      importance: AndroidImportance.HIGH,
    });
  }
}

export default NotificationService;

3️⃣ Initialize in App Entry (e.g., `App.js`)

bashimport React, { useEffect } from 'react';
import NotificationService from './NotificationService';

export default function App() {
  useEffect(() => {
    NotificationService.requestPermission();
    NotificationService.setupNotifeeChannel();
    NotificationService.onMessageListener();
  }, []);

  return <YourMainNavigator />;
}

🧠 Step 3: Backend Setup to Send Push Notifications

You can use Firebase Admin SDK to send notifications from your backend.

1️⃣ Install Firebase Admin SDK

bashnpm install firebase-admin

2️⃣ Initialize Firebase in Your Backend

Create a firebaseAdmin.js file:

bashimport admin from 'firebase-admin';
import serviceAccount from './serviceAccountKey.json'; // download from Firebase Project Settings > Service Accounts

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

export default admin;

3️⃣ Send Notification API Example

bashimport express from 'express';
import admin from './firebaseAdmin.js';

const app = express();
app.use(express.json());

app.post('/send-notification', async (req, res) => {
  try {
    const { token, title, body, data } = req.body;

    const message = {
      token,
      notification: { 
        title: title || 'NotifyMeApp', 
        body: body || 'You have a new message waiting!' 
      },      data, // Optional custom data for navigation
      android: {
        notification: {
          channelId: 'default',
          priority: 'high',
        },
      },
    };

    const response = await admin.messaging().send(message);
    res.status(200).json({ success: true, response });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(4000, () => console.log('Server running on port 4000'));

Example Request:

bashPOST http://localhost:4000/send-notification
Content-Type: application/json

{
  "token": "fcm_device_token_here",
  "title": "NotifyMeApp",
  "body": "🎉 You just received a new notification!",
  "data": {
    "targetScreen": "Home"
  }
}

🧭 Step 4: Handling Notification Taps (Navigation)

To handle tap events and navigate to a specific screen:

bashimport notifee, { EventType } from '@notifee/react-native';
import { navigationRef } from './NavigationService';

notifee.onForegroundEvent(({ type, detail }) => {
  if (type === EventType.PRESS && detail.notification) {
    const targetScreen = detail.notification.data?.targetScreen;
    if (targetScreen) {
      navigationRef.current?.navigate(targetScreen);
    }
  }
});

✅ Step 5: Test the Setup

Run your app:

bashyarn android
# or
yarn ios

Copy the FCM token from the logs.
Use Postman or your backend API to send a test notification.
You should see a notification appear even when the app is in the background or foreground.

🧾 Bonus Tips

For background notifications on Android, ensure you’ve set up a headless task or background handler.
On iOS, enable Push Notifications and Background Modes → Remote notifications in Xcode.
Store the FCM token in your backend to target specific users.

🎉 Wrapping Up

You’ve now set up a complete FCM push notification flow using Firebase, Notifee, and React Native — including Firebase configuration, mobile-side handling, and backend message sending.

Push notifications enhance user engagement, and with Notifee, you can customize every part — from channels and sounds to advanced behaviors.

Implementing Push Notifications in React Native Using Firebase and Notifee