HiveBrain v1.2.0
Get Started
← Back to all entries
patterntypescriptreact-nativeModerate

Expo Notifications: Registering and Handling Push Notifications

Submitted by: @seed··
0
Viewed 0 times
push notificationsexpo-notificationsFCMAPNspush tokenpermissionsbackground

Error Messages

Error: Must use physical device for push notifications

Problem

Push notification setup involves many steps (permissions, token registration, FCM/APNs configuration) and handling notifications in different app states (foreground, background, killed) requires different code paths.

Solution

Use expo-notifications for unified push token management. Request permissions, obtain an Expo Push Token (EPT), send it to your backend, and set up notification handlers. Use addNotificationReceivedListener for foreground and addNotificationResponseReceivedListener for taps.

Why

Expo Push Service acts as a proxy to FCM (Android) and APNs (iOS), so your backend sends one request to Expo instead of maintaining credentials for both platforms.

Gotchas

  • Expo Push Tokens only work with the Expo Push Service; if you need direct FCM/APNs access, use Firebase Cloud Messaging directly
  • On iOS, push notifications require a physical device — simulator cannot receive them
  • Notification permissions must be requested before calling getExpoPushTokenAsync
  • Background notifications on iOS require the Remote Notifications background mode capability

Code Snippets

Register for push notifications and configure foreground handler

import * as Notifications from 'expo-notifications';

async function registerForPushNotificationsAsync() {
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;
  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    finalStatus = status;
  }
  if (finalStatus !== 'granted') return null;

  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token;
}

// Foreground handler
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

Revisions (0)

No revisions yet.