React Native Push Notifications for iOS: Firebase Setup Tutorial

Push notifications allow mobile applications to send timely messages and alerts
directly to a user’s iPhone, even when the application is running in the
background. In this guide, we will configure push notifications in a
React Native iOS application using Firebase Cloud Messaging (FCM).

Overview

For iOS, Firebase Cloud Messaging works with Apple’s Push Notification
service (APNs) to deliver remote notifications to the device.

The basic notification flow is:

React Native App
       ↓
   FCM Token
       ↓
   Your Backend
       ↓
Firebase Cloud Messaging
       ↓
      APNs
       ↓
     iPhone

Prerequisites

• React Native project
• Mac with Xcode
• Apple Developer Account
• Firebase Account
• Physical iPhone for testing
• iOS Bundle Identifier of your application

Step 1: Create a Firebase Project

Create a new project in the Firebase Console and add your iOS application.
Enter the same Bundle ID that is configured in your React Native project’s
Xcode settings.

Download the GoogleService-Info.plist file and add it to
your iOS project through Xcode.

Step 2: Configure Push Notifications in Xcode

Open the iOS project in Xcode and select your application target.
Go to:

Signing & Capabilities
        ↓
Push Notifications

Enable the Push Notifications capability. If your application requires
background notification processing, configure Background Modes as well.

Step 3: Configure APNs

Open your Apple Developer Account and configure the application’s
Identifier with Push Notifications enabled.

Create an APNs Authentication Key with Apple Push
Notification service enabled. Download the .p8 key and keep
the Key ID and Team ID available.

In Firebase, open your project settings and upload the APNs Authentication
Key under the Apple app’s Cloud Messaging configuration.

Step 4: Install Firebase Messaging

Install React Native Firebase and its messaging module:

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

cd ios
pod install
cd ..

Step 5: Request Notification Permission

The application needs permission from the user before displaying
notifications.

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

async function setupNotifications() {
  await messaging().requestPermission();

  await messaging().registerDeviceForRemoteMessages();

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

  console.log('FCM Token:', token);
}

The FCM token should normally be sent to your backend and associated with
the user’s device.

Step 6: Handle Notifications

For notifications received while the application is open:

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

Background messages can be handled using:

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

Step 7: Handle Notification Opens

You can detect when a user opens the application by tapping a notification.

messaging().onNotificationOpenedApp(remoteMessage => {
  console.log('Notification opened:', remoteMessage);
});

const initialMessage =
  await messaging().getInitialNotification();

if (initialMessage) {
  console.log('App opened from notification');
}

Step 8: Test the Notification

After the application generates an FCM token, use your backend or an
authenticated FCM request to send a test notification to that token.

Title: Test Notification
Body: This is a test push notification.

Test the complete setup on a physical iOS device and verify that the
notification is received in the foreground, background, and application
launch scenarios as required.

Common Issues

• Verify that the Firebase Bundle ID matches the Xcode Bundle ID.
• Make sure Push Notifications is enabled in Xcode.
• Verify the APNs Authentication Key configuration in Firebase.
• Check that notification permission has been granted.
• Use a physical iOS device for end-to-end testing.
• Update your backend when the FCM token changes.

Conclusion

Implementing push notifications in React Native for iOS requires
configuration across React Native, Firebase, Apple’s APNs service, and the
Apple Developer Account. Once these components are configured correctly,
your application can obtain an FCM token and receive notifications in
different application states.

For production applications, keep Firebase credentials secure, manage FCM
tokens on your backend, and provide users with appropriate notification
preferences.