DEV Community

Dainy Jose
Dainy Jose

Posted on

Implementing Push Notifications in React Native Using Firebase and Notifee

#reactnative #firebase #fcm #mobile

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

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

2️⃣ Add Android App to Firebase

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

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

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.2'
  }
}
Enter fullscreen mode Exit fullscreen mode

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

apply plugin: 'com.google.gms.google-services'
Enter fullscreen mode Exit fullscreen mode

3️⃣ Add iOS App (if applicable)

  1. Add your iOS bundle ID (from Xcode → Targets → General → Bundle Identifier)
  2. Download GoogleService-Info.plist
  3. Add it to your iOS project in Xcode
  4. Run: 
cd ios && pod install && cd ..
Enter fullscreen mode Exit fullscreen mode

📱 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 

yarn add @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native
Enter fullscreen mode Exit fullscreen mode

or

npm install @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native
Enter fullscreen mode Exit fullscreen mode

For iOS:

cd ios && pod install && cd ..
Enter fullscreen mode Exit fullscreen mode

2️⃣ Request Notification Permission

Create a file NotificationService.js:

import 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;
Enter fullscreen mode Exit fullscreen mode

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

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

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

  return <YourMainNavigator />;
}
Enter fullscreen mode Exit fullscreen mode

🧠 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 

npm install firebase-admin
Enter fullscreen mode Exit fullscreen mode

2️⃣ Initialize Firebase in Your Backend

Create a firebaseAdmin.js file:

import 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;
Enter fullscreen mode Exit fullscreen mode

3️⃣ Send Notification API Example 

import 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'));
Enter fullscreen mode Exit fullscreen mode

Example Request:

POST 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"
  }
}
Enter fullscreen mode Exit fullscreen mode

🧭 Step 4: Handling Notification Taps (Navigation)

To handle tap events and navigate to a specific screen:

import 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);
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

✅ Step 5: Test the Setup

  1. Run your app: 
yarn android
# or
yarn ios
Enter fullscreen mode Exit fullscreen mode

  1. Copy the FCM token from the logs.

  2. Use Postman or your backend API to send a test notification.

  3. 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.

✍️ Written by Dainy Jose — Mobile App Developer specialized in React Native and the MERN stack.

💼 Skills & Tools:

Mobile App Dev | MERN Stack | React Native | TypeScript | Redux | React.js | Node.js | MongoDB | MySQL | Express.js | REST API | JWT | Google Maps | Firebase | Jest | Agile | SDLC | Payments | Git | Bitbucket | Jira

📬 Connect with me:

🔗 LinkedIn
💻 GitHub
🌐 Portfolio

Top comments (0)