Add Recurring Reminders to an Expo App

npx expo install expo-notifications @react-native-async-storage/async-storage

import { useRef, useState } from "react";
import { Button, Platform, Text, View } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as Notifications from "expo-notifications";

const KEY = "daily-reminder-id";
const CHANNEL = "daily-reminders";

// Merge this with your app-level handler if one already exists.
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldPlaySound: true, shouldSetBadge: false,
    shouldShowBanner: true, shouldShowList: true,
  }),
});

function mayNotify(permission: Notifications.NotificationPermissionsStatus) {
  return permission.granted ||
    permission.ios?.status === Notifications.IosAuthorizationStatus.PROVISIONAL ||
    permission.ios?.status === Notifications.IosAuthorizationStatus.EPHEMERAL;
}

export default function DailyReminder() {
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState("");
  const running = useRef(false);

  async function update(enabled: boolean) {
    if (running.current) return;
    running.current = true;
    setBusy(true);
    try {
      if (enabled) {
        if (Platform.OS === "android") {
          await Notifications.setNotificationChannelAsync(CHANNEL, {
            name: "Daily reminders",
            importance: Notifications.AndroidImportance.DEFAULT,
          });
        }
        let permission = await Notifications.getPermissionsAsync();
        if (!mayNotify(permission)) permission = await Notifications.requestPermissionsAsync();
        if (!mayNotify(permission)) {
          setStatus("Notifications are not allowed. Review this app in system settings.");
          return;
        }
      }
      const previous = await AsyncStorage.getItem(KEY);
      if (previous) await Notifications.cancelScheduledNotificationAsync(previous);
      await AsyncStorage.removeItem(KEY);
      if (enabled) {
        const id = await Notifications.scheduleNotificationAsync({
          content: { title: "Daily check-in", body: "Take a moment to check in.", sound: "default" },
          trigger: {
            type: Notifications.SchedulableTriggerInputTypes.DAILY,
            hour: 9, minute: 0, channelId: CHANNEL, delivery: "bestEffort",
          },
        });
        try {
          await AsyncStorage.setItem(KEY, id);
        } catch (error) {
          await Notifications.cancelScheduledNotificationAsync(id);
          throw error;
        }
      }
      setStatus(enabled ? "Daily reminder scheduled. Delivery follows system settings." : "Reminder disabled.");
    } catch {
      setStatus("Could not update the reminder. Please try again.");
    } finally {
      running.current = false;
      setBusy(false);
    }
  }

  return (
    <View style={{ gap: 16, padding: 24 }}>
      <Button title="Enable daily reminder" disabled={busy} onPress={() => update(true)} />
      <Button title="Disable reminder" disabled={busy} onPress={() => update(false)} />
      <Text accessibilityLiveRegion="polite">{status}</Text>
    </View>
  );
}