Rork（Expo）のトーストは、重なっても読み上げられても崩れない設計にする

// toast/ToastOverlay.tsx
import React, { useContext } from "react";
import { StyleSheet, View } from "react-native";
import Animated, { FadeInDown, FadeOutUp, LinearTransition } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { ToastStateContext } from "./ToastContext";
import { ToastCard } from "./ToastCard";
 
export function ToastOverlay() {
  const toasts = useContext(ToastStateContext);
  const insets = useSafeAreaInsets();
 
  return (
    // pointerEvents="box-none" で、トースト以外の領域のタップは下の画面へ通す
    <View
      pointerEvents="box-none"
      style={[styles.host, { paddingTop: insets.top + 8 }]}
    >
      {toasts.map((toast) => (
        <Animated.View
          key={toast.id}
          entering={FadeInDown.springify().damping(18)}
          exiting={FadeOutUp.duration(180)}
          layout={LinearTransition.springify()}
          style={styles.item}
        >
          <ToastCard toast={toast} />
        </Animated.View>
      ))}
    </View>
  );
}
 
const styles = StyleSheet.create({
  host: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
  },
  item: { width: "100%", alignItems: "center", marginBottom: 8 },
});

// App.tsx
export default function App() {
  return (
    <SafeAreaProvider>
      <ToastProvider>
        <NavigationContainer>{/* ...画面群... */}</NavigationContainer>
        <ToastOverlay />
      </ToastProvider>
    </SafeAreaProvider>
  );
}

// toast/ToastCard.tsx
import React, { useEffect } from "react";
import { AccessibilityInfo, Platform, Pressable, StyleSheet, Text } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  runOnJS, useAnimatedStyle, useSharedValue, withTiming,
} from "react-native-reanimated";
import { useContext } from "react";
import { ToastContext } from "./ToastContext";
import type { Toast } from "./ToastContext";
 
const COLORS: Record<Toast["variant"], string> = {
  success: "#0f7b3f",
  error: "#b3261e",
  info: "#33415c",
};
 
export function ToastCard({ toast }: { toast: Toast }) {
  const api = useContext(ToastContext)!;
  const translateX = useSharedValue(0);
 
  // 出現と同時に読み上げる（視覚と聴覚の両方に届ける）
  useEffect(() => {
    AccessibilityInfo.announceForAccessibility(toast.message);
    if (toast.durationMs > 0) {
      const timer = setTimeout(() => api.hide(toast.id), toast.durationMs);
      return () => clearTimeout(timer);
    }
  }, [toast.id]);
 
  // 横スワイプで手動ディスミス
  const pan = Gesture.Pan()
    .onUpdate((e) => { translateX.value = e.translationX; })
    .onEnd((e) => {
      if (Math.abs(e.translationX) > 80) {
        translateX.value = withTiming(e.translationX > 0 ? 400 : -400, { duration: 160 });
        runOnJS(api.hide)(toast.id);
      } else {
        translateX.value = withTiming(0);
      }
    });
 
  const animStyle = useAnimatedStyle(() => ({ transform: [{ translateX: translateX.value }] }));
 
  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.card, { backgroundColor: COLORS[toast.variant] }, animStyle]}>
        <Pressable
          onPress={() => api.hide(toast.id)}
          accessibilityRole="alert"
          {...(Platform.OS === "android" ? { accessibilityLiveRegion: "polite" as const } : {})}
        >
          <Text style={styles.text}>{toast.message}</Text>
        </Pressable>
      </Animated.View>
    </GestureDetector>
  );
}
 
const styles = StyleSheet.create({
  card: {
    maxWidth: 480, width: "92%",
    borderRadius: 12, paddingVertical: 12, paddingHorizontal: 16,
    shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 8, shadowOffset: { width: 0, height: 3 },
    elevation: 4,
  },
  text: { color: "#fff", fontSize: 15, lineHeight: 21 },
});

import { AppState } from "react-native";
 
// ToastProvider 内に追加
const bgAt = useRef<number | null>(null);
useEffect(() => {
  const sub = AppState.addEventListener("change", (s) => {
    if (s === "background") {
      bgAt.current = Date.now();
    } else if (s === "active" && bgAt.current) {
      // 5秒以上バックグラウンドにいたなら、滞留トーストは一掃する
      if (Date.now() - bgAt.current > 5000) {
        toasts.forEach((t) => hide(t.id));
      }
      bgAt.current = null;
    }
  });
  return () => sub.remove();
}, [toasts, hide]);