Push notifications with FCM in React Native

Introduction

Push notifications let your app send messages to users even when they are not using it. FCM (Firebase Cloud Messaging) helps you send these messages easily and reliably.

To alert users about new messages or updates in a chat app.

To remind users about upcoming events or appointments.

To send promotional offers or news in a shopping app.

To notify users about important app changes or alerts.

Syntax

React Native

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

// Request permission to receive notifications
const requestUserPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
                  authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  return enabled;
};

// Get FCM token
const getFcmToken = async () => {
  const token = await messaging().getToken();
  return token;
};

// Listen for messages
messaging().onMessage(async remoteMessage => {
  console.log('A new FCM message arrived!', remoteMessage);
});

Use messaging().requestPermission() to ask user permission for notifications.

Use messaging().getToken() to get the device token needed to send notifications.

Examples

This example asks the user for notification permission and logs the result.

React Native

const requestPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  if (enabled) {
    console.log('Permission granted');
  } else {
    console.log('Permission denied');
  }
};

This listens for incoming messages when the app is in the foreground and logs the notification title to the console.

React Native

messaging().onMessage(async remoteMessage => {
  console.log('New notification: ' + remoteMessage.notification?.title);
});

Sample App

This React Native app requests notification permission on start, listens for messages, and shows the FCM token when the button is pressed.

React Native

import React, {useEffect} from 'react';
import {View, Text, Button, Alert} from 'react-native';
import messaging from '@react-native-firebase/messaging';

export default function App() {
  const requestUserPermission = async () => {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    if (enabled) {
      console.log('Permission granted');
    } else {
      console.log('Permission denied');
    }
  };

  const getToken = async () => {
    const token = await messaging().getToken();
    Alert.alert('FCM Token', token);
  };

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

  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>Push Notifications with FCM</Text>
      <Button title="Get FCM Token" onPress={getToken} />
    </View>
  );
}

Important Notes

Always test push notifications on a real device; emulators may not support them fully.

Remember to configure Firebase project and add google-services files to your app.

Handle permissions carefully to respect user privacy and platform rules.

Summary

FCM helps send push notifications to your React Native app.

Request user permission before receiving notifications.

Use messaging().getToken() to get the device token for sending messages.