1import { Host, RadioButton } from "@expo/ui/jetpack-compose";
2import { size } from "@expo/ui/jetpack-compose/modifiers";
3import { View } from "react-native";
4
5import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
6
7/** The enclosing radio row owns selection, touch and accessibility. */
8export function MaterialRadioIndicator({ selected }: { readonly selected: boolean }) {
9 const { themeAppearance, themeVariables, systemColorsActive } = useAppearancePreferences();
10 // Expo's radio button cannot override colors in the pinned SDK. Custom
11 // themes need their exact accent rather than a generated Material palette.
12 if (!systemColorsActive) {
13 return (
14 <View
15 pointerEvents="none"
16 importantForAccessibility="no-hide-descendants"
17 style={{ width: 24, height: 24, alignItems: "center", justifyContent: "center" }}
18 >
19 <View
20 style={{
21 width: 20,
22 height: 20,
23 borderRadius: 10,
24 borderWidth: 2,
25 borderColor:
26 themeVariables[selected ? "--color-primary-text" : "--color-foreground-muted"],
27 alignItems: "center",
28 justifyContent: "center",
29 }}
30 >
31 {selected ? (
32 <View
33 style={{
34 width: 10,
35 height: 10,
36 borderRadius: 5,
37 backgroundColor: themeVariables["--color-primary-text"],
38 }}
39 />
40 ) : null}
41 </View>
42 </View>
43 );
44 }
45 return (
46 <View pointerEvents="none" importantForAccessibility="no-hide-descendants">
47 <Host
48 colorScheme={themeAppearance}
49 ignoreSafeAreaKeyboardInsets
50 style={{ width: 24, height: 24 }}
51 >
52 <RadioButton selected={selected} modifiers={[size(24, 24)]} />
53 </Host>
54 </View>
55 );
56}