From 3f11a37dd4c1c9c0d948e1b7d7948f9b7fa3f680 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Sat, 3 Oct 2026 15:08:42 +0530
Subject: [PATCH] fix(mobile): Android switches toggle instead of pressing
 their row

On Android, ThemedSwitch renders a Jetpack Compose switch in place of
React Native's Switch. RN's Switch claims the JS touch responder so a
surrounding Pressable never fires; the Compose wrapper did not. Tapping
an environment switch therefore opened or expanded its row, and a real
finger tap usually left the switch unchanged because the row's view
intercepted the touch and cancelled the native switch.

Claim the responder on the Compose Host, which does not intercept
touches the way a React Native View does, so the switch gets the whole
gesture and the row never sees it.

Fixes #14958

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/mobile/src/components/MaterialSwitch.android.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

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<ViewProps, "onStartShouldSetResponder" | "onResponderTerminationRequest"> = {
+  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) {
     >
       <View importantForAccessibility="no-hide-descendants">
         <Host
+          {...ownTouch}
           colorScheme={themeAppearance}
           ignoreSafeAreaKeyboardInsets
           style={{ width: 52, height: 48 }}