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.

[m-bert]

Hi @mhoran! I know it's been a while, but now our new beta version of Gesture Handler 3 is out. In it, you can use GestureDetector on React Native Text directly (as can be seen in this example). Can you please check if it resolves your issues with handling Text?

[mhoran]

Thanks for the update! I gave this a try and had some success. I noticed a couple of things:

1. It seems that InterceptingGestureDetector cannot be outside a view that contains a VirtualGestureDetector. If the InterceptingGestureDetector is outside a wrapping View it doesn't seem to work. I think this is fine, but just wanted to note I ran into this issue.
2. Per my reproducer, I replaced the TouchableOpacity with a GestureDetector and useLongPressGesture, and the inner Text with VirtualGestureDetector and useTapGesture, which worked as expected. However, if I have both a useTapGesture and useLongPressGesture composed with useExclusiveGesture on the inner VirtualGestureDetector, sometimes the long press gesture is not detected on the Text and bubbles up to the outer GestureDetector. I'm not exactly sure why or when this happens, so I haven't been able to make a reliable reproducer. Here is the implementation in my app.
3. I'm running into ERROR [Error: RNGestureHandlerModule.createGestureHandler raised an exception: Handler with tag 322 already exists. Please ensure that no Gesture instance is used across multiple GestureDetectors.] intermittently. Perhaps this could be some interaction with @shopify/flash-list? So far as I can tell I am not reusing any gesture, so something may be getting recycled.

[tastydev]

Hello,

i am currently using react-native-gesture-handler Pressables inside my app alot and found out that as soon as they appear in the react tree, nested Text components may not fire touch events anymore on iOS. I currently need to nest Text components in order to achieve embedded link behaviour within a text block i.e for markdown strings. The reason to have nested Text components is because only then react native renders text word breaks etc. correctly. As soon as i switch over to RN Pressables in the whole application the touch events of nested Text components are detected again.

Not working with much RNGH Pressable usages in react tree:

<Text>
  <Text>
       Child 1
  </Text>
  <Text onPress={()=>{ // not detected  }}>
        Child 2
   </Text>
</Text>

So as far as i understand, this is related to RNGH not being able to attach to nested Text components due to Text flattening inside fabric and there is no proper fix currently available in order to make markdown renderers work with heavy RNGH usage?

I also tried to wrap the specific nested "Link"-Text components with a Pressable but it sadly also did not work.

ENV:

IOS (android works fine)
RN 0.83.2
"react-native-gesture-handler": "2.30.0",
// also using mostly native stacks
"react-native-screens": "4.24.0",
"@react-navigation/bottom-tabs": "7.12.0",
"@react-navigation/elements": "2.9.5",
"@react-navigation/material-top-tabs": "7.4.13",
"@react-navigation/native": "7.1.28",
"@react-navigation/native-stack": "7.12.0",
"@react-navigation/stack": "7.7.1",