How to handle FCM in React Native?

 

Step 1: Set Up Firebase Project

 

To begin with, you need a Firebase project. If you don’t have one, create it by going to the Firebase Console and clicking "Add Project". Follow the on-screen instructions to set it up.

 

Step 2: Add Firebase to Your React Native App

 

You'll need to add Firebase SDK to your React Native project. Use the following commands:

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

Ensure that you have installed the React Native Firebase Messaging package to enable the use of Firebase Cloud Messaging (FCM).

 

Step 3: Configure Firebase for iOS and Android

 

iOS Configuration:

1. Open your React Native project in Xcode.
2. Click on your project in the left sidebar.
3. Add your GoogleService-Info.plist file by dragging it into the Xcode project.
4. Enable push notifications and background modes (especially “Remote notifications”) under your target’s capabilities.

Android Configuration:

1. Add the google-services.json file to the android/app directory.
2. Inside android/build.gradle, add:

buildscript {
    dependencies {
        // Add this line
        classpath 'com.google.gms:google-services:4.3.10'
    }
}

1. In android/app/build.gradle, apply the google-services plugin by adding this line at the bottom:

apply plugin: 'com.google.gms.google-services'

 

Step 4: Request User Permissions

 

Before you can receive notifications, request user permissions. Update your React Native code for permissions as follows:

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

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);
    }
}

requestUserPermission();

 

Step 5: Get the FCM Token

 

Retrieve the device token, which is required to send notifications to the device.

async function getToken() {
    const fcmToken = await messaging().getToken();
    if (fcmToken) {
        console.log('Your Firebase Cloud Messaging Token is:', fcmToken);
    } else {
        console.log('Failed to get the token.');
    }
}

getToken();

Ensure you securely store this token in your server or within a secure environment for later use in sending notifications.

 

Step 6: Handle Incoming Messages

 

Use the following snippets to handle foreground and background messages.

Foreground Messages:

import { useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';

useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
        console.log('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
}, []);

Background and Quit State Messages:

Add this at the top level of your application, e.g., index.js or App.js:

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

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

 

Step 7: Testing FCM

 

Ensure the application is installed on a real device (emulators may not work for push notifications). In the Firebase Console, navigate to Cloud Messaging under the Engage section. Click on "Send your first message" and fill in the fields as required. Here, you can set the target to your app's package name and include the device token for precise targeting. Send the message and observe your app for notifications both in the foreground and background.

 

By following these detailed steps, you should be able to handle FCM in your React Native application effectively. Troubleshoot any issues by checking logs and ensuring all configurations are correctly applied.