From a9f0fd4fff216ae0c2a4bae870fa4f3bcd235940 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Sat, 17 Oct 2026 16:34:24 -0700
Subject: [PATCH] fix(mobile): Android environment toggles toggle instead of
 opening the row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/ui/NativeSwitch.android.tsx    | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/mobile/src/components/ui/NativeSwitch.android.tsx b/apps/mobile/src/components/ui/NativeSwitch.android.tsx
index fa0ffbeff38d..a6adbb706f65 100644
--- a/apps/mobile/src/components/ui/NativeSwitch.android.tsx
+++ b/apps/mobile/src/components/ui/NativeSwitch.android.tsx
@@ -1,35 +1,34 @@
 import { NativeThemeHost } from "./NativeThemeHost.android";
 import { Switch as ComposeSwitch } from "@expo/ui/jetpack-compose";
-import { View } from "react-native";
+import { Pressable, View } from "react-native";
 import type { ThemedSwitchProps } from "./NativeSwitch.types";
 
 import { useControlTheme } from "./useControlTheme";
 
-/** Material's native switch, with the same palette and accessibility contract as our RN controls. */
+/**
+ * Material's native switch, with the same palette and accessibility contract as our RN controls.
+ * Compose only draws it. The RN Pressable owns the touch so it wins over a pressable parent row;
+ * with Compose handling touches, a tap on the switch ran the row's onPress instead.
+ */
 export function NativeSwitch(props: ThemedSwitchProps) {
   const { colors } = useControlTheme();
-  const toggle = () => {
-    if (!props.disabled) props.onValueChange?.(!props.value);
-  };
 
   return (
-    <View
-      accessible
+    <Pressable
+      disabled={props.disabled}
+      onPress={() => props.onValueChange?.(!props.value)}
       accessibilityLabel={props.accessibilityLabel}
       accessibilityHint={props.accessibilityHint}
       accessibilityRole="switch"
       accessibilityState={{ checked: Boolean(props.value), disabled: Boolean(props.disabled) }}
-      accessibilityActions={[{ name: "activate", label: "Toggle" }]}
-      onAccessibilityAction={toggle}
       style={props.style}
       testID={props.testID}
     >
-      <View importantForAccessibility="no-hide-descendants">
+      <View importantForAccessibility="no-hide-descendants" pointerEvents="none">
         <NativeThemeHost ignoreSafeAreaKeyboardInsets style={{ width: 52, height: 48 }}>
           <ComposeSwitch
             value={Boolean(props.value)}
             enabled={!props.disabled}
-            onCheckedChange={props.onValueChange ?? undefined}
             colors={{
               checkedTrackColor: colors["--color-switch-active-track"],
               checkedThumbColor: colors["--color-switch-active-thumb"],
@@ -41,6 +40,6 @@ export function NativeSwitch(props: ThemedSwitchProps) {
           />
         </NativeThemeHost>
       </View>
-    </View>
+    </Pressable>
   );
 }