Skip to main content

Push Notifications in React Native with Firebase

· 5 min read
Beniamin Marcu
Full Stack Developer
Last updated on May 18, 2026

push notifications react native firebase

Push notifications are one of the highest-leverage features in a React Native app, but they are also easy to get wrong. Firebase Cloud Messaging can deliver messages to Android and iOS, but iOS still depends on APNs, modern Android requires runtime notification permission, and every production app needs a trusted backend to send notifications.

This guide focuses on the current architecture: the mobile app requests permission and stores device tokens; Firebase owns delivery; your backend sends messages with Firebase Admin SDK or FCM HTTP v1.

Quick Answer​

Do not clone old React Native Firebase starter projects or put an FCM server key in the app. Configure Firebase for your production iOS bundle ID and Android package name, upload APNs credentials for iOS, request notification permission, save each user's FCM token, handle token refresh, and send notifications only from Firebase Functions or another trusted backend.

For Instamobile apps, start with:

How Firebase Push Works​

PartResponsibility
React Native appRequests permission, receives FCM token, updates token for the signed-in user.
Firebase projectStores iOS/Android app registrations, Firebase config files, and APNs credentials.
APNsDelivers iOS notifications through Firebase's APNs integration.
BackendSends notifications with Firebase Admin SDK or FCM HTTP v1.
App databaseStores tokens, notification preferences, and notification records if needed.

The app should never send push notifications directly with privileged credentials. Treat device tokens as user-linked data and update them whenever Firebase rotates the token.

Configure Firebase First​

Before touching code, verify:

  • iOS bundle identifier matches the Firebase iOS app;
  • Android package name matches the Firebase Android app;
  • GoogleService-Info.plist is installed for iOS;
  • google-services.json is installed for Android;
  • APNs authentication key or certificate is uploaded to Firebase for iOS;
  • app capabilities include Push Notifications on iOS;
  • the backend has Firebase Admin SDK or FCM HTTP v1 credentials.

If one of these identities is wrong, token generation or delivery can fail even when the React Native code looks correct.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Request Permission and Save the Token​

In React Native Firebase apps, the messaging API handles registration and token management:

import messaging from '@react-native-firebase/messaging';
import { PermissionsAndroid, Platform } from 'react-native';

export async function registerForPushNotifications(userId: string) {
  if (Platform.OS === 'ios') {
    await messaging().requestPermission();
  }

  if (Platform.OS === 'android' && Platform.Version >= 33) {
    await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
    );
  }

  const token = await messaging().getToken();

  if (token) {
    await savePushTokenForUser(userId, token);
  }
}

Use your own savePushTokenForUser implementation. In Firebase apps, store the token under the signed-in user's record or a dedicated device-token collection. Do not hardcode test users or write tokens to public database paths.

Handle Token Refresh​

FCM tokens can change. Register a refresh listener after login and remove it on logout:

import messaging from '@react-native-firebase/messaging';

export function subscribeToPushTokenRefresh(userId: string) {
  return messaging().onTokenRefresh(async (token) => {
    await savePushTokenForUser(userId, token);
  });
}

On logout, remove the token association for that user if your app stores per-device tokens. This prevents push messages from being sent to the wrong signed-in user on a shared device.

Handle Foreground, Background, and Taps​

Foreground messages need app-side UI handling:

const unsubscribe = messaging().onMessage(async (remoteMessage) => {
  // Show in-app banner, update local state, or create a local notification.
});

Background handlers are registered outside the React component tree, commonly in the app entry file:

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  // Persist lightweight state or let the OS display the notification.
});

For notification taps, use getInitialNotification for cold starts and onNotificationOpenedApp when the app is opened from background. Keep deep-link payloads small and validate access after opening the target screen.

Send From the Backend​

Firebase Functions or another backend should send notifications:

import { getMessaging } from 'firebase-admin/messaging';

export async function sendChatNotification(token: string, channelId: string) {
  await getMessaging().send({
    token,
    notification: {
      title: 'New message',
      body: 'Open the app to reply.',
    },
    data: {
      type: 'chat',
      channelId,
    },
  });
}

Backend code should authenticate the sender, check recipient permissions, avoid private lock-screen content, and remove invalid tokens after send failures.

Production Checklist​

  • Notification permission is requested at the right moment in the user flow.
  • Users can decline notifications without breaking the app.
  • Token refresh updates the backend.
  • Invalid tokens are removed after send errors.
  • iOS is tested on a real device with APNs configured.
  • Android runtime permission is tested on current devices.
  • Foreground, background, killed-state, and tap behavior are tested.
  • Push payloads do not expose private data.
  • Store privacy forms disclose notification usage.
Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

FAQ​

Can I test iOS push notifications in the simulator?​

Use a real iOS device for final FCM/APNs validation. Simulator behavior is not a replacement for a store-ready push test.

Should I send pushes from the React Native app?​

No. The app can receive tokens and display messages. Sending push notifications requires trusted backend credentials.

Should I use topics for private notifications?​

Use topics for broad segments such as announcements. For private messages, target authenticated user devices and enforce permissions on the backend.