[Android] Text onPress triggers parent Touchable onPress

[dragoncodes]

Description

When a Text with onPress is a child of any Touchable (Opacity, Highlight, WithoutFeedback), when tapping on the Text the onPress of the Touchable parent is also triggered.

*Only seen on Android

Note: On iOS only the parent Touchable#onPress is triggered, but if the Text is wrapped in NativeViewGestureHandler -> only the Text#onPress is called

Steps to reproduce

1. Open https://snack.expo.dev/@dragoncodes/rngh-multi-onpress-repro?platform=android
2. Click on the text in the middle of the screen

Current behavior:

Counter is incremented by 2

Expected behaviour:

Counter is incremented by 1

Preview:

export default function App() {
  const [counter, setCounter] = useState(0);

  return (
    <GestureHandlerRootView
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>{`Counter: ${counter}`}</Text>

      <TouchableOpacity
        onPress={() => {
          setCounter(counter + 1);
        }}>
        <Text
          onPress={() => {
            setCounter(counter + 1);
          }}>
          {'Inner Text'}
        </Text>
      </TouchableOpacity>
    </GestureHandlerRootView>
  );
}

Note: Not sure what runtime snacks use, but also tested with [email protected], [email protected], Hermes on a real device

Snack or a link to a repository

https://snack.expo.dev/@dragoncodes/rngh-multi-onpress-repro?platform=android

Gesture Handler version

2.16.2

React Native version

0.74.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

Samsung Galaxy Fold 4

Acknowledgements

Yes