Text component does not propagate touch to parent on gesture failure

[mhoran]

Description

With a Text component nested inside any touchable (e.g. TouchableOpacity), a failed touch of Text should bubble the event back up to the wrapping touchable, as happens with React Native components. However, the Text component seems to trap the event and it does not bubble up to the touchable reliably. In React Native, this works fine -- if the Text has an onPress or onLongPress, it intercepts the touch. Otherwise, the touch bubbles up to the next handler. This is useful e.g. for copying a line of text, but also being able to click a link within the line.

Steps to reproduce

1. Run the reproducer
2. See that touching Touchable Text never increases the counter nor highlights the line
3. Touching Outer and Inner work as expected
4. Change to React Native TouchableOpacity and Text components
5. Touching Touchable Text increments the counter, as does touching Outer and Inner

Snack or a link to a repository

https://github.com/mhoran/react-native-scratch/blob/rngh-touchable-text/ReproducerApp/App.tsx

Gesture Handler version

2.22.0

React Native version

0.76.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

None

Device

Real device

Device model

iPad Air 11-inch (M2)

Acknowledgements

Yes

[mhoran]

I also noticed I get a warning about GestureDetector receiving a view that may be flattened on New Arch, suggesting to add collapsable to the view. However, I don't think that's possible with Text (and this seems to be within the RNGH Text component.)

[m-bert]

Hi @mhoran! I've spent some time trying to understand what happens on the native side with Text. #3336 should fix the issue that touch is not propagated.

I'd also like to mention that handling nested Text is quite complicated, as it gets merged into one component. For example, your code has the following structure:

<TouchableOpacity ...>
  <Text ...>  {/* Wrapper */}
    <Text ...>
    <Text ...>  {/* Outer text */}
      <Text ...>  {/* Nested Text */}

In that case, native hierarchy will have only one Text component. This mechanism removes our detectors, which makes it difficult to handle such cases.

As for error with view flattening, that's true that it is not possible to add collapsable to Text, I'll check if we can get rid of it.

[mhoran]

Thanks for taking a look. I had tried something similar to #3336, but it doesn't seem to work for my purposes, likely due to the text flattening you've described. I see the same issue if I try to wrap nested text with my own GestureDetector (using Pan instead of Native) -- it's as if the GestureDetector isn't even there.

I need the nested text, otherwise word wrapping does not work as expected (especially with long URLs.) flexWrap is insufficient, as it doesn't wrap as if the text is a paragraph and looks quite odd. React Native Text components do wrap properly and handle events -- but have other issues which led me to try out the RNGH components.

I see other React Native apps that seem to be using native gestures in a ScrollView with proper wrapping. I wonder how they do it...

[m-bert]

Hi @mhoran, could you please check if #3338 does remove those errors?

[mhoran]

#3338 does resolve the collapsable warning on New Arch. Thanks!

Regarding the difference in behavior between React Native and RNGH components, see the following screen recordings. The first shows what I'm seeing with RNGH. I believe this is due to the situation you described above; the collapsing of the Text removes the GestureHandler, so the touch is not received and ultimately the URL is not clickable.

rngh-text.mp4

With React Native Text and TouchableHighlight components, this works as expected. There must be something special going on that somehow preserves the clickable spans. The first press is a long press on the URL; second is on the text that triggers the TouchableHighlight.

native-text.mp4

[m-bert]

With React Native Text and TouchableHighlight components, this works as expected. There must be something special going on that somehow preserves the clickable spans.

The only thing that I was able to find was a mechanism that allows React Native to detect which part of text was clicked by getting appropriate reactTag (iOS / android). The problem is, I'm not sure if we will be able to use this in Gesture Handler.