Implementing Push Notifications in React Native Using Firebase

Implementing push notifications in a React Native app can significantly enhance user engagement by providing timely updates and alerts. Firebase Cloud Messaging (FCM) offers a reliable and easy-to-integrate solution for managing push notifications across platforms. This guide walks you through the steps to implement push notifications in React Native using Firebase.

Prerequisites

A React Native project set up with Expo or React Native CLI
A Firebase project created in the Firebase Console
Basic knowledge of JavaScript and React Native
Firebase SDK installed in your project

Setting Up Firebase

First, create a Firebase project and add your app to it. Download the configuration files:

For Android

Download the google-services.json file and place it in your project’s android/app directory. Make sure to add the Firebase SDK to your project dependencies.

For iOS

Download the GoogleService-Info.plist file and add it to your Xcode project. Install the Firebase SDK via CocoaPods.

Installing Dependencies

Install the necessary Firebase packages:

For React Native CLI:

Run: npm install --save @react-native-firebase/app @react-native-firebase/messaging

For Expo managed workflow:

Use the Expo Firebase SDK or eject to bare workflow for native modules.

Requesting Permissions and Getting Token

In your React Native code, request permission for notifications and retrieve the device token:

Example:

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

async function getFcmToken() {
  const fcmToken = await messaging().getToken();
  if (fcmToken) {
    console.log('FCM Token:', fcmToken);
    // Send token to your server for push notifications
  }
}

requestUserPermission();

Handling Incoming Notifications

Set up listeners to handle foreground notifications and responses:

messaging().onMessage(async remoteMessage => {
  console.log('A new FCM message arrived!', remoteMessage);
  // Show local notification or update UI
});

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

Sending Push Notifications

Use Firebase Cloud Messaging API or Firebase Console to send notifications. Example payload:

{
  "to": "",
  "notification": {
    "title": "Hello!",
    "body": "This is a push notification."
  }
}

Send the message via Firebase Cloud Messaging REST API or Firebase Console.

Conclusion

Integrating push notifications with Firebase in React Native involves setting up Firebase, requesting permissions, retrieving device tokens, and handling messages. Proper implementation can improve user engagement and keep your app dynamic and interactive.

Table of Contents