How to Use Push Notification in React Native Apps

To use push notifications in React Native, integrate a library like @react-native-firebase/messaging or react-native-push-notification. Configure permissions, handle notification events, and register your app with Firebase Cloud Messaging (FCM) for Android and Apple Push Notification service (APNs) for iOS.

Syntax

Using @react-native-firebase/messaging, you import the messaging module, request user permission, and listen for notifications.

• messaging().requestPermission(): asks user to allow notifications.
• messaging().getToken(): gets device token for sending notifications.
• messaging().onMessage(): listens for foreground notifications.

javascript

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;
  return enabled;
}

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

Example

This example shows a simple React Native component that requests notification permission, gets the device token, and logs incoming messages.

javascript

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

export default function App() {
  useEffect(() => {
    async function setupNotifications() {
      const enabled = await messaging().requestPermission();
      if (enabled) {
        const token = await messaging().getToken();
        console.log('Device FCM Token:', token);
      }
    }
    setupNotifications();

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

    return unsubscribe;
  }, []);

  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>Push Notification Setup Complete</Text>
    </View>
  );
}

Output

Screen shows centered text: "Push Notification Setup Complete". Console logs device token and incoming messages when received.

Common Pitfalls

Not requesting permission: Notifications won't work if you don't ask the user to allow them.

Missing device token: Without the token, you cannot send notifications to the device.

Not handling background messages: Foreground listeners don't catch notifications when app is backgrounded.

javascript

/* Wrong: No permission request */
import messaging from '@react-native-firebase/messaging';

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

/* Right: Request permission first */
async function requestPermission() {
  const authStatus = await messaging().requestPermission();
  if (authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL) {
    console.log('Permission granted');
  }
}

Quick Reference

• Request permission: messaging().requestPermission()
• Get device token: messaging().getToken()
• Listen foreground: messaging().onMessage()
• Handle background: use setBackgroundMessageHandler

Key Takeaways

Always request user permission before sending push notifications.

Use Firebase Cloud Messaging (FCM) to get device tokens for targeting devices.

Listen for messages both in foreground and background for full coverage.

Test notifications on real devices, as simulators often lack push support.

Handle platform-specific setup for iOS (APNs) and Android (Firebase).