1import { useEffect } from "react";
2import { AccessibilityInfo, Platform, Pressable, View } from "react-native";
3
4import { AppText as Text } from "../../components/AppText";
5import { SymbolView } from "../../components/AppSymbol";
6
7/** Why the thread's last message did not send, above the composer until dismissed. */
8export function ComposerErrorNotice({
9 message,
10 onDismiss,
11}: {
12 readonly message: string;
13 readonly onDismiss: () => void;
14}) {
15 // accessibilityLiveRegion below only reaches TalkBack; VoiceOver needs an
16 // explicit announcement.
17 useEffect(() => {
18 if (Platform.OS === "ios") {
19 AccessibilityInfo.announceForAccessibility(message);
20 }
21 }, [message]);
22 return (
23 <View className="px-4 pb-3">
24 <View className="flex-row items-start gap-3 rounded-[20px] border-continuous bg-card p-4">
25 <SymbolView
26 name="exclamationmark.circle"
27 size={16}
28 tintColorClassName="accent-danger-foreground"
29 type="monochrome"
30 />
31 <Text
32 selectable
33 accessibilityLiveRegion="polite"
34 className="min-w-0 flex-1 text-sm text-foreground"
35 >
36 {message}
37 </Text>
38 <Pressable
39 accessibilityLabel="Dismiss error"
40 accessibilityRole="button"
41 hitSlop={12}
42 onPress={onDismiss}
43 className="p-1 active:opacity-60"
44 >
45 <SymbolView
46 name="xmark"
47 size={14}
48 tintColorClassName="accent-icon-muted"
49 type="monochrome"
50 />
51 </Pressable>
52 </View>
53 </View>
54 );
55}