Skip to main content

Push Notifications

Push notifications in React Native involve communication between an app, a backend server, and a push notification service (e.g., Apple Push Notification Service (APNs) for iOS or Firebase Cloud Messaging (FCM) for Android).

User Flow Overview​

  1. User Opt-In:

    • The app asks for the user’s permission to send push notifications.
    • On iOS, this is required by the operating system.
    • On Android, permissions are usually granted during app installation.

  2. Device Registration:

  • The app registers itself with a push notification service (APNs for iOS, FCM for Android).
  • The service returns a Device Token (iOS) or a Registration Token (Android), which uniquely identifies the app instance on the device.
  1. Server Configuration:
  • The backend server securely stores the device tokens and is configured to communicate with the respective push notification services.
  1. Push Notification Sending:
  • The backend server sends a notification request (with a payload and token) to APNs/FCM.
  • The service routes the notification to the target device using the token.
  1. Notification Received:
  • The app receives the notification via an event listener or displays it in the notification center.

How to set up notifications​

  1. Choose a Library

    • react-native-push-notification (not actively maintained)
    • @react-native-firebase/messaging
    • notifee/react-native-notifee (great for rich notification control, advanced local notification handling, works with Firebase)

    For most modern apps, React Native Firebase Messaging + Notifee is the go-to combo.

  2. Set up Firebase

    • Android:

      • Add your Android app in Firebase Console
      • Download google-services.json and put it in android/app/
      • Update your android/build.gradle and android/app/build.gradle for Firebase and messaging

    • iOS:

      • Add your iOS app in Firebase Console

      • Download GoogleService-Info.plist and add it using Xcode

      • Go to project target, then Signing & Capabilities and Enable Notifications & Background Modes -> 'Remote Notifications' in the Xcode project settings

      • Setup APNs and upload the key to Firebase

      • In the app: request user permissions for iOS 10+ on app start:

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

        const async requestUserPermission = () => {
          const authStatus = await messaging().requestPermission();
          const enabled =
            authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
            authStatus === messaging.AuthorizationStatus.PROVISIONAL;

          if (enabled) {
            console.log('Notification permission granted');
          }
        }

  3. Get the FCM token

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

    async function getFCMToken() {
      const token = await messaging().getToken();
      console.log('FCM Token:', token);
    }

  4. Listen for messages

    Foreground

    useEffect(() => {
      const unsubscribe = messaging().onMessage(async (remoteMessage) => {
        // Display a local notification (optional)
        console.log('Foreground message:', remoteMessage);
      });

      return unsubscribe;
    }, []);

    Background and Quit state

    messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      console.log('Background message:', remoteMessage);
    });

    Local notifications from foreground messages

    import notifee from '@notifee/react-native';

    await notifee.displayNotification({
      title: 'New Message',
      body: 'You have a new notification',
    });

APNs Certificate​

A certificate generated by Apple and uploaded to your backend server.

How to Generate​

  1. Log in to the Apple Developer Console.
  2. Create an App ID and enable the “Push Notifications” service.
  3. Generate a Certificate Signing Request (CSR) from your local machine.
  4. Upload the CSR to Apple to generate the APNs certificate.
  5. Download the certificate, convert it to .p12 or .pem format, and upload it to your backend server or push notification provider (e.g., Firebase).

Device Token​

The device token is a unique identifier for the app instance. It's assigned to a specific installation of the app on a specific device.

On Android, it’s generated by FCM. On iOS, it comes from APNs and is passed through Firebase Messaging if you use it.

Simple flow​

  1. User installs the app
  2. App requests permission to send push notifications
  3. Your app requests a device token from the notification service (APNs for iOS, FCM for Android).
  4. APNs/Firebase returns device token
  5. Device token is sent to backend server
  6. Backend server stores device token
  7. Backend server sends notification to device using device token

Getting the FCM token​

const fcmToken = await messaging().getToken();
// fcmToken: 'dXzlLpz...abc123' ← This is your device token

The BE sends the notification like that:

{
  "to": "dXzlLpz...abc123",
  "notification": {
    "title": "Hi!",
    "body": "You have a new message"
  }
}
APN token and Firebase

If you don’t use Firebase and want the raw APNs token directly, you’d need to write native code or use a library like react-native-push-notification, but Firebase Messaging handles it internally and gives you an FCM token that works cross-platform.

warning

Tokens can change over time — you must handle token refresh:

useEffect(() => {
  const unsubscribe = messaging().onTokenRefresh((newToken) => {
    console.log('New FCM Token:', newToken);
    // Update token in backend
  });

  return unsubscribe;
}, []);