expo-notifications
- React Native course
- Advanced
- Lesson 1/83
- 5 min
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.
Practice 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 }}) }}).
Starter code
// import the expo-notifications package
// set the behavior when a notification arrivesSample solution
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: false,
}),
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is a notification for?
- It informs the user even when the app is closed Correct answer
- It shows messages only while the app is open
- It only keeps error logs
- It only stores files
Explanation: A notification reaches the user even when the app is closed.
2 Write the import statement
import * as ____ from 'expo-notifications';import * as Notifications from 'expo-notifications';Explanation: The Notifications namespace carries all functions.
3 Match each part to its role
| Term | Meaning |
|---|---|
expo-notifications |
Notification package |
Notifications |
Imported namespace |
setNotificationHandler |
Top-level behavior |
local notification |
App schedules |