Week 14: Push Notifications

1. Setting Up expo-notifications

npx expo install expo-notifications expo-device

import * as Notifications from 'expo-notifications';

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

This handler runs whenever a notification arrives while the app is open — without it, a foreground notification is received silently with no visible alert, which surprises most people building this for the first time.

2. Getting a Push Token

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';

export async function registerForPushNotifications() {
  if (!Device.isDevice) return null; // push tokens require a real device

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

  const token = await Notifications.getExpoPushTokenAsync({
    projectId: 'your-eas-project-id',
  });
  return token.data; // send this to your backend, keyed to the signed-in user
}

This token is what your backend sends notifications to — store it against the signed-in user's record the same way you'd store any other device metadata, and re-register (tokens can change) on every app launch.

3. Under the Hood: FCM & APNs

expo-notifications doesn't invent its own delivery network — it's a unified layer over each platform's real push service:

• FCM (Firebase Cloud Messaging) — Android's delivery service. A message sent through FCM reaches the device even if the app isn't running.
• APNs (Apple Push Notification service) — the iOS equivalent, requiring a signed push certificate or key registered with Apple.

Sending through Expo's push service (as the token above implies) means your backend talks to one simple API, and Expo's service handles routing the message to FCM or APNs correctly depending on the token's platform — you can also bypass Expo's service and talk to FCM/APNs directly for more control, at the cost of implementing both.

4. Handling Taps & Foreground Arrivals

useEffect(() => {
  const receivedSub = Notifications.addNotificationReceivedListener((notification) => {
    console.log('Received in foreground:', notification.request.content.title);
  });

  const responseSub = Notifications.addNotificationResponseReceivedListener((response) => {
    const postId = response.notification.request.content.data.postId;
    navigation.navigate('PostDetail', { postId });
  });

  return () => {
    receivedSub.remove();
    responseSub.remove();
  };
}, [navigation]);

addNotificationReceivedListener fires when a notification arrives while the app is in the foreground (paired with the handler from earlier deciding whether to show an alert). addNotificationResponseReceivedListener fires when the user taps a notification — foreground, background, or from a fully closed app — and is where deep-link-style navigation, using data attached to the notification payload, belongs.

5. Hands-on Exercise

6. Knowledge Check

Four quick questions. Expand each to check your answer.