Handling Foreground and Background Notifications
Use addNotificationReceivedListener to handle notifications while the app is open, and addNotificationResponseReceivedListener to respond when the user taps a notification.
App States and Notification Delivery
Your app can be in three states when a notification arrives: foreground (app is open and visible), background (app is running but not visible), or killed (app is not running at all). Each state has different handling requirements and different APIs to use.
Understanding which state applies is critical because the OS delivers notifications differently in each case and the user's tap response routes through different code paths depending on the app state at the time they tap.
addNotificationReceivedListener
Notifications.addNotificationReceivedListener fires when a notification arrives while the app is in the foreground. By default, notifications do not show a banner or sound when the app is already open — you must handle them in-app. The listener receives the full notification object including all content and data payload.
Use this to show in-app banners, update UI (e.g., refresh a chat thread), or play a custom sound — giving users the same experience as if the notification had arrived while the app was in the background.
import * as Notifications from 'expo-notifications';
import { useEffect } from 'react';
useEffect(() => {
const subscription = Notifications.addNotificationReceivedListener(
(notification) => {
const { title, body, data } = notification.request.content;
console.log('Notification received in foreground:', title, body);
// Update UI or show in-app banner:
showInAppBanner({ title, body });
}
);
return () => subscription.remove();
}, []);All lessons in this course
- Requesting Permission and Getting a Push Token
- Sending Notifications via the Expo Push API
- Handling Foreground and Background Notifications
- Notification Channels and Rich Content