How to Handle Firebase Cloud Messaging in React Native

1npm install @react-native-firebase/messaging
2
3# For iOS:
4cd ios && pod install && cd ..
5
6# For Android: auto-linked, no additional steps

1// In Xcode:
2// 1. Select your target > Signing & Capabilities
3// 2. Click + Capability > Push Notifications
4// 3. Click + Capability > Background Modes > check 'Remote notifications'
5
6// In Firebase Console:
7// 1. Project Settings > Cloud Messaging
8// 2. Under Apple app configuration, click Upload
9// 3. Upload your APNs Authentication Key (.p8 file)
10// 4. Enter the Key ID and Team ID from Apple Developer portal

1import messaging from '@react-native-firebase/messaging'
2
3async function requestNotificationPermission() {
4  const authStatus = await messaging().requestPermission()
5  const enabled =
6    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
7    authStatus === messaging.AuthorizationStatus.PROVISIONAL
8
9  if (enabled) {
10    console.log('Notification permission granted:', authStatus)
11  } else {
12    console.log('Notification permission denied')
13  }
14
15  return enabled
16}

1import messaging from '@react-native-firebase/messaging'
2
3async function getFCMToken() {
4  const token = await messaging().getToken()
5  console.log('FCM Token:', token)
6
7  // Send token to your backend
8  await saveTokenToServer(token)
9  return token
10}
11
12function listenForTokenRefresh() {
13  return messaging().onTokenRefresh(async (newToken) => {
14    console.log('Token refreshed:', newToken)
15    await saveTokenToServer(newToken)
16  })
17}
18
19async function saveTokenToServer(token: string) {
20  // Save to Firestore, your API, etc.
21  // await firestore().collection('users').doc(userId).update({ fcmToken: token })
22}

1import messaging from '@react-native-firebase/messaging'
2import { useEffect } from 'react'
3
4function useNotificationHandler() {
5  useEffect(() => {
6    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
7      console.log('Foreground message:', remoteMessage)
8
9      // Option 1: Show in-app alert
10      Alert.alert(
11        remoteMessage.notification?.title || 'Notification',
12        remoteMessage.notification?.body || ''
13      )
14
15      // Option 2: Use notifee for a proper notification banner
16      // await notifee.displayNotification({
17      //   title: remoteMessage.notification?.title,
18      //   body: remoteMessage.notification?.body,
19      // })
20    })
21
22    return unsubscribe
23  }, [])
24}

1// index.js (root of your React Native app)
2import { AppRegistry } from 'react-native'
3import messaging from '@react-native-firebase/messaging'
4import App from './App'
5
6// Register the background handler BEFORE AppRegistry.registerComponent
7messaging().setBackgroundMessageHandler(async (remoteMessage) => {
8  console.log('Background message:', remoteMessage)
9
10  // Process the message (update badge, sync data, etc.)
11  // Do NOT try to update UI state here
12})
13
14AppRegistry.registerComponent('MyApp', () => App)

1import notifee, { AndroidImportance } from '@notifee/react-native'
2
3async function createNotificationChannel() {
4  await notifee.createChannel({
5    id: 'default',
6    name: 'Default Notifications',
7    importance: AndroidImportance.HIGH,
8    vibration: true,
9    sound: 'default',
10  })
11}
12
13// Call this on app startup
14createNotificationChannel()
15
16// When sending from server, include the channel:
17// admin.messaging().send({
18//   token: userToken,
19//   notification: { title: 'Hello', body: 'World' },
20//   android: { notification: { channelId: 'default' } },
21// })