import { Platform, Pressable, Switch, View, type SwitchProps } from "react-native"; import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";import { SymbolView } from "./AppSymbol"; export function ThemedSwitch(props: SwitchProps) { const { materialYouStyleLayoutActive } = useAppearancePreferences(); if (materialYouStyleLayoutActive) { return ( <Pressable accessibilityHint={props.accessibilityHint} accessibilityLabel={props.accessibilityLabel} accessibilityRole="switch" accessibilityState={{ checked: Boolean(props.value), disabled: props.disabled }} disabled={props.disabled} hitSlop={8} onPress={() => props.onValueChange?.(!props.value)} style={props.style} testID={props.testID} className={props.disabled ? "opacity-40" : "active:opacity-70"} > <View className={ props.value ? "h-8 w-[52px] items-end justify-center rounded-full border-2 border-switch-active-track bg-switch-active-track px-0.5" : "h-8 w-[52px] items-start justify-center rounded-full border-2 border-switch-inactive-thumb bg-switch-inactive-track px-0.5" } > <View className={ props.value ? "size-6 items-center justify-center rounded-full bg-switch-active-thumb" : "size-6 items-center justify-center rounded-full bg-switch-inactive-thumb" } > <SymbolView name={props.value ? "checkmark" : "xmark"} size={13} tintColorClassName={ props.value ? "accent-switch-active-track" : "accent-switch-inactive-track" } type="monochrome" /> </View> </View> </Pressable> ); } return ( <Switch {...props} ios_backgroundColorClassName="accent-switch-inactive-track" thumbColorClassName={ Platform.OS === "android" ? props.value ? "accent-switch-active-thumb" : "accent-switch-inactive-thumb" : undefined } trackColorOffClassName="accent-switch-inactive-track" trackColorOnClassName="accent-switch-active-track" /> );}
import { Platform, Pressable, Switch, View, type SwitchProps } from "react-native";
import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
import { SymbolView } from "./AppSymbol";
export function ThemedSwitch(props: SwitchProps) {
const { materialYouStyleLayoutActive } = useAppearancePreferences();
if (materialYouStyleLayoutActive) {
return (
<Pressable
accessibilityHint={props.accessibilityHint}
accessibilityLabel={props.accessibilityLabel}
accessibilityRole="switch"
accessibilityState={{ checked: Boolean(props.value), disabled: props.disabled }}
disabled={props.disabled}
hitSlop={8}
onPress={() => props.onValueChange?.(!props.value)}
style={props.style}
testID={props.testID}
className={props.disabled ? "opacity-40" : "active:opacity-70"}
>
<View
className={
props.value
? "h-8 w-[52px] items-end justify-center rounded-full border-2 border-switch-active-track bg-switch-active-track px-0.5"
: "h-8 w-[52px] items-start justify-center rounded-full border-2 border-switch-inactive-thumb bg-switch-inactive-track px-0.5"
}
>
<View
className={
props.value
? "size-6 items-center justify-center rounded-full bg-switch-active-thumb"
: "size-6 items-center justify-center rounded-full bg-switch-inactive-thumb"
}
>
<SymbolView
name={props.value ? "checkmark" : "xmark"}
size={13}
tintColorClassName={
props.value ? "accent-switch-active-track" : "accent-switch-inactive-track"
}
type="monochrome"
/>
</View>
</View>
</Pressable>
);
}
return (
<Switch
{...props}
ios_backgroundColorClassName="accent-switch-inactive-track"
thumbColorClassName={
Platform.OS === "android"
? props.value
? "accent-switch-active-thumb"
: "accent-switch-inactive-thumb"
: undefined
}
trackColorOffClassName="accent-switch-inactive-track"
trackColorOnClassName="accent-switch-active-track"
/>
);
}