steps to create a notification alert for a React Native and Expo project:
1. Install the necessary libraries: You need to install the `expo-notifications` library. You can do this by running the following command in your terminal:
npx expo install expo-notifications
If you're installing this in a bare React Native app, you should also follow the additional installation instructions².
2. Set up the notification handler: You can set up the notification handler as follows:
javascript
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
3. Register for push notifications: You can register for push notifications in your component’s `useEffect` hook. Here is an example of how you can do this:
javascript
useEffect(() => {
registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
setNotification(notification);
});
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
console.log(response);
});
return () => {
Notifications.removeNotificationSubscription(notificationListener.current);
Notifications.removeNotificationSubscription(responseListener.current);
};
}, []);
4. Schedule a notification: You can schedule a notification as follows:
javascript
async function schedulePushNotification() {
await Notifications.scheduleNotificationAsync({
content: {
title: "You've got mail! 📧",
body: 'Here is the notification body',
data: { data: 'goes here' },
},
trigger: { seconds: 2 },
});
}
```
5. **Handle incoming notifications**: You can handle incoming notifications using the `addNotificationReceivedListener` and `addNotificationResponseReceivedListener` methods².
Please note that push notifications don't work on emulators/simulators². Make sure to test it on a physical device.
.jpeg)
