Integrating Push Notifications in React Native Apps (FCM & APNs) - The Complete Guide (2025)

Introduction

Push notifications are essential for engaging users and driving retention in mobile applications. Whether you’re alerting users about new content, offers, or app updates, timely notifications can significantly enhance user experience.

In this comprehensive guide, we will cover everything you need to know about integrating push notifications into your React Native app, using Firebase Cloud Messaging (FCM) for Android and Apple Push Notification Service (APNs) for iOS. By the end of this guide, you will have a fully functional notification system that works cross-platform.

What You'll Learn

• The difference between FCM & APNs
• Setting up Firebase Cloud Messaging (FCM) for Android
• Setting up Apple Push Notification Service (APNs) for iOS
• Configuring React Native project for notifications
• Implementing notification handlers (background, foreground, quit state)
• Best practices for push notifications in 2025

Prerequisites

• Basic knowledge of React Native & TypeScript
• A working React Native project (Expo or bare React Native)
• Android Studio and Xcode installed
• Firebase account
• Apple Developer account (for iOS)

Section 1: Understanding FCM & APNs

Firebase Cloud Messaging (FCM)

• Free service by Google to send push notifications to Android devices.
• Supports rich media notifications, topics, and custom data payloads.
• Can also be used to send notifications to iOS apps.

Apple Push Notification Service (APNs)

• Apple's proprietary service for iOS/macOS.
• Required for all iOS devices.
• Requires APNs keys/certificates and provisioning profiles.

FCM vs APNs - At a Glance

Section 2: Setting up Firebase Cloud Messaging (Android)

Step 1: Configure Firebase Project

1. Go to Firebase Console.
2. Create a new project.
3. Add your Android app (provide package name).
4. Download the google-services.json file.

Step 2: Configure Android Project

1. Place google-services.json in android/app/.
2. Add the following to android/build.gradle:

classpath 'com.google.gms:google-services:4.3.15' // or latest

3. In android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'
implementation 'com.google.firebase:firebase-messaging:23.1.0' // or latest

4. Sync Gradle files.

Step 3: Update AndroidManifest.xml

<service android:name="io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

Step 4: Firebase Console - Send a test message

1. Go to Cloud Messaging.
2. Click on "Send your first message".
3. Target your app and send.

Section 3: Setting up Apple Push Notification Service (APNs)

Step 1: Create APNs Key

1. Go to Apple Developer Console.
2. Navigate to "Certificates, Identifiers & Profiles".
3. Create a new APNs Auth Key.
4. Download the .p8 key.
5. Add this key to your Firebase iOS App settings.

Step 2: Configure iOS Project

1. In Xcode, open your .xcworkspace.
2. Enable Push Notifications and Background Modes > Remote Notifications in Capabilities.
3. Make sure your AppDelegate.m has:

#import <RNFBMessagingModule.h>
...
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [RNFBMessagingModule didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

4. Update Info.plist:

<key>FirebaseAppDelegateProxyEnabled</key>
<false/>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Section 4: Integrating React Native Firebase Messaging

Step 1: Install Packages

npm install @react-native-firebase/app @react-native-firebase/messaging

Step 2: Request Permissions

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

export async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
}

Call this function on app launch.

Step 3: Listen for Notifications

useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    Alert.alert(remoteMessage.notification?.title || '', remoteMessage.notification?.body || '');
  });
  return unsubscribe;
}, []);

Step 4: Handle Background & Quit State

// Background
messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
});

// App killed
useEffect(() => {
  messaging()
    .getInitialNotification()
    .then(remoteMessage => {
      if (remoteMessage) {
        console.log('Notification caused app to open from quit state:', remoteMessage);
      }
    });
}, []);

Section 5: Testing & Debugging

• Use Firebase Console or Postman to send FCM messages.
• For iOS, use a real device (push notifications don’t work on iOS Simulator).
• Use adb logcat for Android logs.
• Check APNs token validity inside Firebase console for iOS.

Section 6: Best Practices for 2025

• Segment users: Send personalized notifications using FCM Topics.
• Data-only messages: For custom in-app handling without showing a system notification.
• Opt-in UX: Explain the value of enabling notifications before prompting users.
• Rich Media: Leverage images, actions, and sounds for higher engagement.
• Analytics: Track open rates using Firebase Analytics.

Conclusion

Integrating push notifications in React Native apps is a crucial skill for any developer aiming to build modern and engaging applications. While the setup process involves multiple steps and platform-specific configurations, once complete, it provides an effective channel to communicate with your users.

With this guide, you now have the knowledge to implement a cross-platform notification system using FCM and APNs in 2025. Don’t forget to keep notifications valuable and respectful of user privacy.