Created
October 31, 2023 03:04
-
-
Save nathantew14/e56b9d71cd203295314ec9e563ce9c76 to your computer and use it in GitHub Desktop.
Minimal reproducible notifications example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useEffect, useRef } from 'react'; | |
| import { Text, View, Button, Platform } from 'react-native'; | |
| import * as Device from 'expo-device'; | |
| import * as Notifications from 'expo-notifications'; | |
| import Constants from 'expo-constants'; | |
| Notifications.setNotificationHandler({ | |
| handleNotification: async () => ({ | |
| shouldShowAlert: true, | |
| shouldPlaySound: false, | |
| shouldSetBadge: false, | |
| }), | |
| }); | |
| // Can use this function below or use Expo's Push Notification Tool from: https://expo.dev/notifications | |
| async function sendPushNotification(expoPushToken) { | |
| const message = { | |
| to: expoPushToken, | |
| sound: 'default', | |
| title: 'Original Title', | |
| body: 'And here is the body!', | |
| data: { someData: 'goes here' }, | |
| }; | |
| await fetch('https://exp.host/--/api/v2/push/send', { | |
| method: 'POST', | |
| headers: { | |
| Accept: 'application/json', | |
| 'Accept-encoding': 'gzip, deflate', | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(message), | |
| }); | |
| } | |
| async function registerForPushNotificationsAsync() { | |
| let token; | |
| if (Platform.OS === 'android') { | |
| Notifications.setNotificationChannelAsync('default', { | |
| name: 'default', | |
| importance: Notifications.AndroidImportance.MAX, | |
| vibrationPattern: [0, 250, 250, 250], | |
| lightColor: '#FF231F7C', | |
| }); | |
| } | |
| if (Device.isDevice) { | |
| const { status: existingStatus } = await Notifications.getPermissionsAsync(); | |
| let finalStatus = existingStatus; | |
| if (existingStatus !== 'granted') { | |
| const { status } = await Notifications.requestPermissionsAsync(); | |
| finalStatus = status; | |
| } | |
| if (finalStatus !== 'granted') { | |
| alert('Failed to get push token for push notification!'); | |
| return; | |
| } | |
| token = await Notifications.getExpoPushTokenAsync({ | |
| projectId: Constants.expoConfig.extra.eas.projectId, | |
| }); | |
| console.log(token); | |
| } else { | |
| alert('Must use physical device for Push Notifications'); | |
| } | |
| return token.data; | |
| } | |
| export default function App() { | |
| const [expoPushToken, setExpoPushToken] = useState(''); | |
| const [notification, setNotification] = useState(false); | |
| const notificationListener = useRef(); | |
| const responseListener = useRef(); | |
| useEffect(() => { | |
| registerForPushNotificationsAsync().then(token => setExpoPushToken(token)); | |
| notificationListener.current = Notifications.addNotificationReceivedListener(notification => { | |
| setNotification(notification); | |
| console.log('now as number', new Date().valueOf()) | |
| console.log('date as number', notification.date) | |
| console.log('date as Date', new Date(notification.date)) | |
| }); | |
| responseListener.current = Notifications.addNotificationResponseReceivedListener(response => { | |
| console.log(response); | |
| }); | |
| return () => { | |
| Notifications.removeNotificationSubscription(notificationListener.current); | |
| Notifications.removeNotificationSubscription(responseListener.current); | |
| }; | |
| }, []); | |
| return ( | |
| <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around' }}> | |
| <Text>Your expo push token: {expoPushToken}</Text> | |
| <View style={{ alignItems: 'center', justifyContent: 'center' }}> | |
| <Text>Title: {notification && notification.request.content.title} </Text> | |
| <Text>Body: {notification && notification.request.content.body}</Text> | |
| <Text>Data: {notification && JSON.stringify(notification.request.content.data)}</Text> | |
| </View> | |
| <Button | |
| title="Press to Send Notification" | |
| onPress={async () => { | |
| await sendPushNotification(expoPushToken); | |
| }} | |
| /> | |
| </View> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment