This content originally appeared on DEV Community and was authored by Dainy Jose
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.jsonfile - Move it to your project:
android/app/google-services.json
5.Add Firebase plugin in android/build.gradle:
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.4.2'
}
}
6.Then, apply the plugin in android/app/build.gradle:
apply 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:
cd 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
yarn add @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native
or
npm install @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native
For iOS:
cd ios && pod install && cd ..
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;
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 />;
}
🧠 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
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;
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'));
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"
}
}
🧭 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);
}
}
});
✅ Step 5: Test the Setup
- Run your app:
yarn 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.
✍️ 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
This content originally appeared on DEV Community and was authored by Dainy Jose
Dainy Jose | Sciencx (2025-10-17T05:24:55+00:00) Implementing Push Notifications in React Native Using Firebase and Notifee. Retrieved from https://www.scien.cx/2025/10/17/implementing-push-notifications-in-react-native-using-firebase-and-notifee/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.