App.js

import {GluestackUIProvider, Text, Box} from "@gluestack-ui/themed";
import {config} from "@gluestack-ui/config"; // Optional if you want to use default theme
import {
	Button,
	ButtonText,
	ButtonIcon,
	AddIcon,
} from "@gluestack-ui/themed";
import {useState, useEffect, useRef} from "react";
import { View, 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,
	}),
});

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);
		});

		responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
			console.log(response);
		});

		return () => {
			Notifications.removeNotificationSubscription(notificationListener.current);
			Notifications.removeNotificationSubscription(responseListener.current);
		};
	}, []);

	return (
		<GluestackUIProvider config={config}>
			<Box width="100%" height="100%" justifyContent="center" alignItems="center">
				<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);
						}}
					>
						<ButtonText>Send Notification</ButtonText>
					</Button>
				</View>
				<Text>Open up App.js to start working on your app!</Text>
				<Button size="md" variant='solid' action="primary"
					isDisabled={false}
					isFocusVisible={false}
					onPress={() => console.log("pressed!")}
				>
					<ButtonText>Add </ButtonText>
					<ButtonIcon as={AddIcon}/>
				</Button>
			</Box>
		</GluestackUIProvider>
	);
}