[Native] Fix Touchable behavior when nested within gesture handlers (#4106)

## Description

See
#4097

Fixes interactions of nested touchables/gestures:
1. Touchable was missing `disallowInterruption: true` prop, which caused
it to misbehave when used alongside other gestures
2. Android keeps the list of touch targets internally in [each
`ViewGroup`](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java#220).
Since RNGH can start intercepting events mid-stream, this list could
contain stale values. The OS, trying to clean it up, would dispatch a
synthetic `ACTION_CANCEL` event, which resulted in the touchable working
every other time it's been pressed. To fix that, we do the cleanup by
ourselves, by dispatching a synthetic `ACTION_CANCEL` event before the
new event stream starts.

## Test plan

Added a new example

This doesn't work correctly on web, but it didn't work before either.

Author: j-piasecki

apps/common-app/src/new_api/index.tsx

@@ -35,6 +35,7 @@ import RotationExample from './simple/rotation';
 import TapExample from './simple/tap';
 import NestedPressablesExample from './tests/nestedPressables';
 import NestedRootViewExample from './tests/nestedRootView';
+import NestedTouchablesExample from './tests/nestedTouchables';
 import PointerTypeExample from './tests/pointerType';
 import PressableExample from './tests/pressable';
 import ReattachingExample from './tests/reattaching';
@@ -124,6 +125,7 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       { name: 'Reattaching', component: ReattachingExample },
       { name: 'Modal with Nested Root View', component: NestedRootViewExample },
       { name: 'Nested pressables', component: NestedPressablesExample },
+      { name: 'Nested touchables', component: NestedTouchablesExample },
       { name: 'Pressable', component: PressableExample },
     ],
   },

apps/common-app/src/new_api/tests/nestedTouchables/index.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  GestureDetector,
+  Touchable,
+  useTapGesture,
+} from 'react-native-gesture-handler';
+
+import { COLORS } from '../../../common';
+
+export default function NestedTouchablesExample() {
+  const [log, setLog] = useState<string[]>([]);
+
+  const pushLog = (message: string) => {
+    setLog((prev) =>
+      [...prev, `[${new Date().toLocaleTimeString()}] ${message}`].slice(-6)
+    );
+  };
+
+  const outerTap = useTapGesture({
+    runOnJS: true,
+    onActivate: () => pushLog('outer tap gesture'),
+  });
+
+  const innerTap = useTapGesture({
+    runOnJS: true,
+    onActivate: () => pushLog('inner tap gesture'),
+  });
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Nested gestures & touchables</Text>
+      <Text style={styles.hint}>
+        Tap each colored layer. Every level fires its own handler.
+      </Text>
+
+      <GestureDetector gesture={outerTap}>
+        <View style={[styles.layer, styles.outerLayer]}>
+          <Text style={styles.layerLabel}>Outer tap gesture</Text>
+
+          <Touchable
+            style={[styles.layer, styles.outerTouchable]}
+            onPress={() => pushLog('outer Touchable')}>
+            <Text style={styles.layerLabel}>Outer Touchable</Text>
+
+            <GestureDetector gesture={innerTap}>
+              <View style={[styles.layer, styles.innerLayer]}>
+                <Text style={styles.layerLabel}>Inner tap gesture</Text>
+
+                <Touchable
+                  style={[styles.layer, styles.innerTouchable]}
+                  onPress={() => pushLog('inner Touchable')}>
+                  <Text style={styles.layerLabel}>Inner Touchable</Text>
+                </Touchable>
+              </View>
+            </GestureDetector>
+          </Touchable>
+        </View>
+      </GestureDetector>
+
+      <View style={styles.logBox}>
+        <Text style={styles.logTitle}>Event log</Text>
+        {Array.from({ length: 6 }).map((_, index) => (
+          <Text key={index} style={styles.logEntry}>
+            {log[index] ?? ' '}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  hint: {
+    textAlign: 'center',
+    opacity: 0.6,
+    fontSize: 14,
+  },
+  layer: {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  outerLayer: {
+    width: 300,
+    backgroundColor: COLORS.KINDA_YELLOW,
+  },
+  outerTouchable: {
+    width: 260,
+    backgroundColor: COLORS.YELLOW,
+  },
+  innerLayer: {
+    width: 220,
+    backgroundColor: COLORS.KINDA_GREEN,
+  },
+  innerTouchable: {
+    width: 180,
+    backgroundColor: COLORS.KINDA_BLUE,
+  },
+  layerLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: COLORS.NAVY,
+  },
+  logBox: {
+    width: '100%',
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: COLORS.offWhite,
+    gap: 4,
+  },
+  logTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    marginBottom: 4,
+  },
+  logEntry: {
+    fontSize: 12,
+    fontFamily: 'Menlo',
+  },
+});

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootView.kt

@@ -45,10 +45,21 @@ class RNGestureHandlerRootView(context: Context?) : ReactViewGroup(context) {
     rootHelper?.recordHandlerIfNotPresent(handler)
   }
 
-  override fun dispatchTouchEvent(event: MotionEvent) = if (rootViewEnabled && rootHelper!!.dispatchTouchEvent(event)) {
-    true
-  } else {
-    super.dispatchTouchEvent(event)
+  override fun dispatchTouchEvent(event: MotionEvent): Boolean {
+    // When starting a new event stream, dispatch CANCEL event so the subtree
+    // can clean up its internal state that may be stale due to Gesture Handler
+    // starting to intercept events mid-stream.
+    if (event.actionMasked == MotionEvent.ACTION_DOWN) {
+      val cancelEvent = MotionEvent.obtain(event).apply { action = MotionEvent.ACTION_CANCEL }
+      super.dispatchTouchEvent(cancelEvent)
+      cancelEvent.recycle()
+    }
+
+    return if (rootViewEnabled && rootHelper!!.dispatchTouchEvent(event)) {
+      true
+    } else {
+      super.dispatchTouchEvent(event)
+    }
   }
 
   override fun dispatchGenericMotionEvent(ev: MotionEvent) =

packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx

@@ -16,6 +16,7 @@ const TouchableButton = createNativeWrapper<
 >(GestureHandlerButton, {
   shouldCancelWhenOutside: true,
   shouldActivateOnStart: false,
+  disallowInterruption: true,
 });
 
 const isAndroid = Platform.OS === 'android';