This content originally appeared on DEV Community and was authored by haider mukhtar
If you’re building a React Native CLI app and want to integrate Firebase push notifications for Android, you’re in the right place. This guide walks you through every step I took while implementing push notifications in my own project — from setting up Firebase to handling foreground and background notifications with Notifee.
📌 1. Create a Firebase Project
Start by heading to Firebase Console and creating a new project.
- Set your project name.
- Register your Android app with the correct package name (e.g., com.yourappname).
- Download the
google-services.jsonfile and place it into your Android app folder:android/app/google-services.json
⚙️ 2. Firebase SDK Integration for Android
Modify your Android project:
-
android/build.gradle
buildscript {
dependencies {
classpath("com.google.gms:google-services:4.4.2") // Make sure this is up to date
}
}
-
android/app/build.gradle
apply plugin: "com.google.gms.google-services"
dependencies {
// your code
implementation(platform("com.google.firebase:firebase-bom:33.11.0"))
implementation("com.google.firebase:firebase-analytics")
// your code
}
📦 3. Install Firebase Packages
Install Firebase libraries using npm:
npm install --save @react-native-firebase/app
npm install --save @react-native-firebase/messaging
Then, rebuild your app:
npx react-native run-android
🔐 4. Request Notification Permission (Android 13+)
Since Android 13 requires runtime permission for notifications:
import {PermissionsAndroid} from 'react-native';
const requestPermissionAndroid = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
);
console.log(granted === PermissionsAndroid.RESULTS.GRANTED
? '✔ Permissions Granted'
: '❌ Permissions Denied');
};
Call this inside useEffect on app load.
useEffect(() => {
if (Platform.OS === 'android') {
requestPermissionAndroid();
} else {
console.log('This OS not supported.');
}
}, []);
🔑 5. Get FCM Token
This token uniquely identifies the device. You can send notifications to this token using Firebase.
import messaging from '@react-native-firebase/messaging';
const getFCMToken = async () => {
const token = await messaging().getToken();
console.log('FCM Token:', token);
};
🧩 6. Handle Foreground Notifications
useEffect(() => {
const unsubscribe = messaging().onMessage(async remoteMessage => {
Alert.alert('New FCM Message', JSON.stringify(remoteMessage));
});
return unsubscribe;
}, []);
📲 7. Setup Notifee for Foreground Notification Display
Install Notifee:
npm install --save @notifee/react-native
Display foreground notifications using Notifee:
import notifee from '@notifee/react-native';
const onDisplayNotification = async (remoteMessage) => {
const channelId = await notifee.createChannel({
id: 'default',
name: 'Default Channel',
});
await notifee.displayNotification({
title: remoteMessage.notification.title,
body: remoteMessage.notification.body,
android: {
channelId,
pressAction: { id: 'default' },
},
});
};
useEffect(() => {
const unsubscribe = messaging().onMessage(async remoteMessage => {
onDisplayNotification(remoteMessage);
});
📳 8. Background & Quit State Notifications
In index.js, register the background message handler:
import messaging from '@react-native-firebase/messaging';
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Background message:', remoteMessage);
});
Now, even when the app is killed or in the background, it captures and logs the message.
💻 9. Sending Notifications via Postman
- Get your Firebase project’s Access Token using a service account JSON.
- Hit this endpoint from Postman:
POST https://fcm.googleapis.com/v1/projects/<project-id>/messages:send
- Use the FCM token in your request body to target your device.
🎯 Summary
You’ve now successfully integrated Firebase push notifications in a React Native CLI app for Android. From requesting permissions and getting tokens to handling notifications in all states (foreground, background, quit), everything is covered in this guide.
📄 Source Code on GitHub
Want to explore the full code implementation of Firebase Push Notifications in React Native CLI?
Check out the complete project on GitHub:
👉 GitHub Repository: React Native Firebase Notifications
Feel free to star ⭐ the repo if it helps you!
📺Live Demo: Receiving Firebase Push Notifications on Android
Want to see it in action? Here’s a screen recording showing how Firebase push notifications are delivered to an Android device using React Native CLI. The video demonstrates:
-Receiving a notification while the app is in the foreground.
-Handling notifications in the background and the quit state.
-Custom notification appearance using Notifee.
Watch how seamlessly the integration works in a real scenario:
💡 Pro Tips
- Use Notifee for better control over notification appearance and behavior.
- Test in both the emulator and physical devices
- Make sure your AndroidManifest has the required services and permissions.
✉️ Happy coding with React Native and Firebase!
This content originally appeared on DEV Community and was authored by haider mukhtar
haider mukhtar | Sciencx (2025-09-16T11:20:45+00:00) React Native (CLI) Firebase Push Notifications for Android 📱🔔. Retrieved from https://www.scien.cx/2025/09/16/react-native-cli-firebase-push-notifications-for-android-%f0%9f%93%b1%f0%9f%94%94/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.