React Native
expo-notifications
Learn push notifications with expo-notifications.
What is a notification?
A notification is a small message shown to the user even when the app is closed. In React Native you send notifications with the expo-notifications package. It supports both local notifications (scheduled by the app itself) and remote notifications (sent from a server).
Notifications inform the user about new messages, reminders or updates. expo-notifications is easy to install and offers a consistent interface across Android and iOS. In this lesson we first see how the package is installed and imported.
Install and import
To install the package with Expo you run npx expo install expo-notifications. This command picks the version that matches your Expo SDK. After installation you import two things: the Notifications class (for listeners and scheduling) and the * as Notifications pattern is common.
import * as Notifications from 'expo-notifications';
To set top-level behavior you call Notifications.setNotificationHandler. This function decides how a notification is shown when it arrives. It is defined once at the top of the app.
Exercise Set up the notification handler
Complete the empty file. Import expo-notifications with import * as Notifications. Then add the call Notifications.setNotificationHandler({{ handleNotification: async () => ({{ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadge: false }}) }}).
Show example solution
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: false,
}),
});
Test yourself
-
What is a notification for?
- It informs the user even when the app is closed
- It shows messages only while the app is open
- It only keeps error logs
- It only stores files
Show answer
It informs the user even when the app is closed — A notification reaches the user even when the app is closed.
-
Write the import statement
import * as ____ from 'expo-notifications';
Show answer
import * as Notifications from 'expo-notifications';
-
Match each part to its role
- expo-notifications
- Notification package
- Notifications
- Imported namespace
- setNotificationHandler
- Top-level behavior
- local notification
- App schedules
Next lesson: Token retrieval
