expo-notifications

npx expo install expo-notifications expo-device expo-constants

// src/notifications/setup.ts - import at app entry
import * as Notifications from "expo-notifications";
import { Platform } from "react-native";
 
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowBanner: true,
    shouldShowList: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});
 
export async function ensureAndroidChannel() {
  if (Platform.OS !== "android") return;
 
  await Notifications.setNotificationChannelAsync("default", {
    name: "Default",
    importance: Notifications.AndroidImportance.DEFAULT,
  });
}
 
export async function requestNotificationPermission(): Promise<boolean> {
  const { status: existing } = await Notifications.getPermissionsAsync();
  if (existing === "granted") return true;
 
  const { status } = await Notifications.requestPermissionsAsync();
  return status === "granted";
}

// src/notifications/pushToken.ts
import Constants from "expo-constants";
import * as Device from "expo-device";
import * as Notifications from "expo-notifications";
import { Platform } from "react-native";
 
export async function getExpoPushToken(): Promise<string | null> {
  if (!Device.isDevice) return null;
 
  const granted = await requestNotificationPermission();
  if (!granted) return null;
 
  const projectId =
    Constants.expoConfig?.extra?.eas?.projectId ??
    Constants.easConfig?.projectId;
 
  if (!projectId) {
    throw new Error("EAS projectId missing - run npx eas init");
  }
 
  const token = await Notifications.getExpoPushTokenAsync({ projectId });
  return token.data;
}

npx expo install expo-notifications expo-device expo-constants

// app/(tabs)/settings/notifications.tsx
import { useState } from "react";
import { Pressable, Text, View } from "react-native";
import {
  ensureAndroidChannel,
  requestNotificationPermission,
} from "@/notifications/setup";
import { registerPushToken } from "@/notifications/registerPushToken";
 
export default function NotificationSettingsScreen() {
  const [status, setStatus] = useState<"idle" | "granted" | "denied">("idle");
 
  async function enableNotifications() {
    await ensureAndroidChannel();
    const granted = await requestNotificationPermission();
    if (!granted) {
      setStatus("denied");
      return;
    }
    await registerPushToken();
    setStatus("granted");
  }
 
  return (
    <View style={{ padding: 24, gap: 12 }}>
      <Text>Get alerts when drivers arrive on site.</Text>
      <Pressable onPress={enableNotifications}>
        <Text style={{ color: "#2563eb", fontWeight: "600" }}>
          Enable notifications
        </Text>
      </Pressable>
      {status === "denied" && (
        <Text>Open Settings to allow notifications for this app.</Text>
      )}
    </View>
  );
}

// src/notifications/registerPushToken.ts
import { getExpoPushToken } from "./pushToken";
 
export async function registerPushToken() {
  const token = await getExpoPushToken();
  if (!token) return;
 
  await fetch(`${process.env.EXPO_PUBLIC_API_URL}/devices/push-token`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token, platform: "expo" }),
  });
}

// app/_layout.tsx
import { useEffect } from "react";
import * as Notifications from "expo-notifications";
import { router, Stack } from "expo-router";
import "@/notifications/setup";
 
export default function RootLayout() {
  useEffect(() => {
    const sub = Notifications.addNotificationResponseReceivedListener(
      (response) => {
        const orderId = response.notification.request.content.data?.orderId;
        if (typeof orderId === "string") {
          router.push(`/orders/${orderId}`);
        }
      }
    );
    return () => sub.remove();
  }, []);
 
  return <Stack />;
}

Install → getExpoPushTokenAsync → POST /devices
Reinstall → new token → upsert server row
Logout → DELETE server token + optional unregister
Account switch → register new token under new userId