Skip to content

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Jul 2, 2025

Description

Problem

Currently the following configuration:

<GestureDetector ... >
  <Text> ... </Text>
</GestureDetector>

does not work on iOS. This is due to change react-native introduced in 0.79 - hitTest in RCTParagraphTextView now returns nil by default (see here). This results in native UIGestureRecognizer not responding to touches.

Solution

We no longer attach native recognizer to RCTParagraphTextView, but to its parent - RCTParagraphComponentView. The problem with this approach is that handleGesture method uses reactTag property, which on RCTParagraphComponentView is nil. This is why we use reactTag from RCTParagraphTextView when sending event to JS side.

Fixes #3581

Test plan

Tested on the following code:
import React from 'react';
import { StyleSheet, Text } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function EmptyExample() {
  const g = Gesture.Tap().onEnd(() => {
    console.log('Tapped!');
  });

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={g}>
        <Text>
          Click me
          <Text> Me too! </Text>
        </Text>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

@m-bert m-bert marked this pull request as ready for review July 2, 2025 09:36
@m-bert m-bert requested review from j-piasecki and latekvo July 2, 2025 09:37
@m-bert m-bert requested a review from j-piasecki July 2, 2025 10:04
Copy link
Member

@j-piasecki j-piasecki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume you've tested this change on older versions of RN (0.78) as well.

@m-bert
Copy link
Contributor Author

m-bert commented Jul 2, 2025

I assume you've tested this change on older versions of RN (0.78) as well.

If by tested you mean tested attached example then yes, I did 😅

@m-bert m-bert merged commit 3b7a19e into main Jul 3, 2025
4 checks passed
@m-bert m-bert deleted the @mbert/fix-detector-on-text-ios branch July 3, 2025 09:50
j-piasecki pushed a commit that referenced this pull request Jul 7, 2025
## Description

### Problem

Currently the following configuration:

```jsx
<GestureDetector ... >
  <Text> ... </Text>
</GestureDetector>
```

does not work on `iOS`. This is due to change `react-native` introduced in 0.79 - `hitTest` in `RCTParagraphTextView` now returns `nil` by default ([see here](https://github.com/facebook/react-native/blob/dcbbf275cbc4150820691a4fbc254b198cc92bdd/packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm#L379)). This results in native `UIGestureRecognizer` not responding to touches.

### Solution

We no longer attach native recognizer to `RCTParagraphTextView`, but to its parent - `RCTParagraphComponentView`. The problem with this approach is that `handleGesture` method uses `reactTag` property, which on `RCTParagraphComponentView` is `nil`. This is why we use `reactTag` from `RCTParagraphTextView` when sending event to `JS` side.

Fixes #3581

## Test plan

<details>
<summary>Tested on the following code:</summary>

```jsx
import React from 'react';
import { StyleSheet, Text } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function EmptyExample() {
  const g = Gesture.Tap().onEnd(() => {
    console.log('Tapped!');
  });

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={g}>
        <Text>
          Click me
          <Text> Me too! </Text>
        </Text>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```

</details>
@Daumis102
Copy link

Hi, I'm running into this as well. Any idea when this will be released?

@m-bert
Copy link
Contributor Author

m-bert commented Jul 11, 2025

Hi @Daumis102!

Any idea when this will be released?

I cannot give any ETA since we don't have release plans now. But I will keep that in mind and discuss it with the team 😅

@m-bert
Copy link
Contributor Author

m-bert commented Jul 21, 2025

Hi @Daumis102! FYI, I've just released 2.27.2 which includes this PR 😅

@Daumis102
Copy link

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

iOS Fabric: Gesture.tap() worked on 0.78.2, no longer at 0.80
3 participants