Open History to see the last commit
1import { NativeThemeHost } from "./NativeThemeHost.android";
2import { Switch as ComposeSwitch } from "@expo/ui/jetpack-compose";
3import { Pressable, View } from "react-native";
4import type { ThemedSwitchProps } from "./NativeSwitch.types";
5
6import { useControlTheme } from "./useControlTheme";
7
8/** RN Pressable must own touch: Compose-handled switch taps can activate the parent row instead. */
9export function NativeSwitch(props: ThemedSwitchProps) {
10 const { colors } = useControlTheme();
11
12 return (
13 <Pressable
14 disabled={props.disabled}
15 onPress={() => props.onValueChange?.(!props.value)}
16 accessibilityLabel={props.accessibilityLabel}
17 accessibilityHint={props.accessibilityHint}
18 accessibilityRole="switch"
19 accessibilityState={{ checked: Boolean(props.value), disabled: Boolean(props.disabled) }}
20 style={props.style}
21 testID={props.testID}
22 >
23 <View importantForAccessibility="no-hide-descendants" pointerEvents="none">
24 <NativeThemeHost ignoreSafeAreaKeyboardInsets style={{ width: 52, height: 48 }}>
25 <ComposeSwitch
26 value={Boolean(props.value)}
27 enabled={!props.disabled}
28 colors={{
29 checkedTrackColor: colors["--color-switch-active-track"],
30 checkedThumbColor: colors["--color-switch-active-thumb"],
31 checkedBorderColor: colors["--color-switch-active-track"],
32 uncheckedTrackColor: colors["--color-switch-inactive-track"],
33 uncheckedThumbColor: colors["--color-switch-inactive-thumb"],
34 uncheckedBorderColor: colors["--color-switch-inactive-thumb"],
35 }}
36 />
37 </NativeThemeHost>
38 </View>
39 </Pressable>
40 );
41}