### Install Expo Notifications Source: https://docs.expo.dev/versions/latest/sdk/notifications Use this command to install the expo-notifications package for your project. This command works across different package managers. ```sh npx expo install expo-notifications ``` ```sh yarn expo install expo-notifications ``` ```sh pnpm expo install expo-notifications ``` ```sh bun expo install expo-notifications ``` -------------------------------- ### Manually Configure Notification Channel and Schedule Notification (Android) Source: https://docs.expo.dev/versions/latest/sdk/notifications Manually configure a notification channel with a custom sound file (e.g., email_sound.wav) placed in android/app/src/main/res/raw/. This example shows setting the channel sound for Android 8.0+ and the content sound for older Android versions. ```typescript // Prepare the notification channel await Notifications.setNotificationChannelAsync('new_emails', { name: 'E-mail notifications', importance: Notifications.AndroidImportance.HIGH, sound: 'email_sound.wav', // <- for Android 8.0+, see channelId property below }); // Eg. schedule the notification await Notifications.scheduleNotificationAsync({ content: { title: "You've got mail! 📬", body: 'Open the notification to read them all', sound: 'email_sound.wav', // <- for Android below 8.0 }, trigger: { type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL, seconds: 2, channelId: 'new_emails', // <- for Android 8.0+, see definition above }, }); ``` -------------------------------- ### Schedule and Cancel a Notification Source: https://docs.expo.dev/versions/latest/sdk/notifications This example demonstrates scheduling a notification with a title and a repeating trigger, then immediately canceling it using its identifier. Ensure you have requested notification permissions before scheduling. ```typescript import * as Notifications from 'expo-notifications'; async function scheduleAndCancel() { const identifier = await Notifications.scheduleNotificationAsync({ content: { title: 'Hey!', }, trigger: { seconds: 60, repeats: true }, }); await Notifications.cancelScheduledNotificationAsync(identifier); } ``` -------------------------------- ### Configure Expo Notifications Plugin Source: https://docs.expo.dev/versions/latest/sdk/notifications Example of configuring the 'expo-notifications' plugin in your app.json or app.config.js file. This allows setting properties like icon, color, default channel, and custom sounds for push notifications. ```json { "expo": { "plugins": [ [ "expo-notifications", { "icon": "./local/assets/notification_icon.png", "color": "#ffffff", "defaultChannel": "default", "sounds": [ "./local/assets/notification_sound.wav", "./local/assets/notification_sound_other.wav" ], "enableBackgroundRemoteNotifications": false } ] ] } } ``` -------------------------------- ### Expo Notifications App Example Source: https://docs.expo.dev/versions/latest/sdk/notifications This snippet demonstrates a full React Native app component for handling push notifications. It includes token registration, channel management for Android, and listeners for received notifications and responses. Ensure you have configured your project with a projectId for EAS. ```tsx import { useState, useEffect } from 'react'; import { Text, View, Button, Platform } from 'react-native'; import * as Notifications from 'expo-notifications'; import Constants from 'expo-constants'; Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldPlaySound: false, shouldSetBadge: false, shouldShowBanner: true, shouldShowList: true, }), }); export default function App() { const [expoPushToken, setExpoPushToken] = useState(''); const [channels, setChannels] = useState([]); const [notification, setNotification] = useState( undefined ); useEffect(() => { registerForPushNotificationsAsync().then(token => token && setExpoPushToken(token)); if (Platform.OS === 'android') { Notifications.getNotificationChannelsAsync().then(value => setChannels(value ?? [])); } const notificationListener = Notifications.addNotificationReceivedListener(notification => { setNotification(notification); }); const responseListener = Notifications.addNotificationResponseReceivedListener(response => { console.log(response); }); return () => { notificationListener.remove(); responseListener.remove(); }; }, []); return ( Your expo push token: {expoPushToken} {`Channels: ${JSON.stringify( channels.map(c => c.id), null, 2 )}`} Title: {notification && notification.request.content.title} Body: {notification && notification.request.content.body} Data: {notification && JSON.stringify(notification.request.content.data)}