[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

[m-bert]

Hi @dragoncodes! Could you please check if using our Text component from this PR works? 😅

[mhoran]

I gave the changes in #3202 a try in my iOS app. While the sample code in the PR mostly works (on iOS the Touchable onPress never fires), in a real app I see inconsistent behavior with the new Text component. It sort of works, but most of the time causes a wrapping TouchableHighlight to never register (it doesn't highlight, nor does the onLongPress fire.) The Text onPress does seem to work reliably (as it does with the sample), just the TouchableHighlight failing intermittently. If I revert to React Native's text component, the TouchableHighlight onLongPress does fire as expected (and the line is highlighted), but of course the Text onPress does not work.

[mhoran]

To clarify the above: this works as expected with React Native components, but does not behave the same with RNGH. I have Text components which may or may not have onPress and onLongPress handlers, wrapped in a TouchableHighlight. With React Native components, the onPress and onLongPress handlers on the Text will always be called if present. However, the touch will fall through to the TouchableHighlight if they are not. I would like to use the RNGH TouchableHighlight instead, with the new Text component, it does not work consistently.

[m-bert]

Thanks for your feedback @mhoran. I'll look into it.

I'm closing this issue as it seems to be resolved. In the meantime, could you open new one regarding problems that you've mentioned?

[mhoran]

Thanks. I have opened a new issue here: #3331.