diff --git a/apps/mobile/src/components/MaterialSwitch.android.tsx b/apps/mobile/src/components/MaterialSwitch.android.tsx index f08fa78690f7b..5a4df02bfd539 100644 --- a/apps/mobile/src/components/MaterialSwitch.android.tsx +++ b/apps/mobile/src/components/MaterialSwitch.android.tsx @@ -1,9 +1,16 @@ import { Host, Switch as ComposeSwitch } from "@expo/ui/jetpack-compose"; -import { View } from "react-native"; +import { View, type ViewProps } from "react-native"; import type { ThemedSwitchProps } from "./MaterialSwitch.types"; import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider"; +// Like RN's Switch, own the touch so a pressable row around the switch never takes it. Claimed on +// the Compose Host because a React Native View holding the touch would cancel the native switch. +const ownTouch: Pick = { + onStartShouldSetResponder: () => true, + onResponderTerminationRequest: () => false, +}; + /** Material's native switch, with the same palette and accessibility contract as our RN controls. */ export function MaterialSwitch(props: ThemedSwitchProps) { const { themeAppearance, themeVariables: colors } = useAppearancePreferences(); @@ -25,6 +32,7 @@ export function MaterialSwitch(props: ThemedSwitchProps) { >