DEV Community

Cover image for React Native (CLI) Firebase Push Notifications for Android 📱🔔
haider mukhtar
haider mukhtar

Posted on

React Native (CLI) Firebase Push Notifications for Android 📱🔔

#reactnative #firebase #typescript #mobile

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.json file 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
  }
}
Enter fullscreen mode Exit fullscreen mode
  • android/app/build.gradle 
apply plugin: "com.google.gms.google-services"
Enter fullscreen mode Exit fullscreen mode 
dependencies {
    // your code
    implementation(platform("com.google.firebase:firebase-bom:33.11.0"))
    implementation("com.google.firebase:firebase-analytics")
    // your code
}
Enter fullscreen mode Exit fullscreen mode

📦 3. Install Firebase Packages

Install Firebase libraries using npm:

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

Then, rebuild your app:

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

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

Call this inside useEffect on app load.

  useEffect(() => {
    if (Platform.OS === 'android') {
      requestPermissionAndroid();
    } else {
      console.log('This OS not supported.');
    }
  }, []);
Enter fullscreen mode Exit fullscreen mode

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

🧩 6. Handle Foreground Notifications 

useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    Alert.alert('New FCM Message', JSON.stringify(remoteMessage));
  });

  return unsubscribe;
}, []);
Enter fullscreen mode Exit fullscreen mode

📲 7. Setup Notifee for Foreground Notification Display

Install Notifee:

npm install --save @notifee/react-native
Enter fullscreen mode Exit fullscreen mode

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

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

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
Enter fullscreen mode Exit fullscreen mode
  • 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!

Top comments (0)