mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

fabriziobertoglio1987 132d1d00f8 nested text onPress not working on last character (#30928 )

Summary:
This issue fixes https://github.com/facebook/react-native/issues/22747 nested text does not allow you to press on the last character.

The method reactTagForTouch filters touches based on coordinates x and y. Nested Texts are converted into Spans on Android
https://github.com/facebook/react-native/blob/28fb41a0ab48cc01d606b64744c84e2ac3805f3f/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java#L111-L112
https://developer.android.com/guide/topics/text/spans

reactTagForTouch iterates over the span and triggers the onPress handler if the x,y coordinates correspond to one of the span characters.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Nested Text Android onPress does not work with last character

Pull Request resolved: https://github.com/facebook/react-native/pull/30928

Test Plan:
This changes fix the Java API which can not be tested as explained in commit https://github.com/facebook/react-native/commit/709a441ecf54cd9465f5946af0454ee7d10d5cbe
The java TextTest was excluded from the test suite in commit https://github.com/facebook/react-native/commit/709a441ecf54cd9465f5946af0454ee7d10d5cbe as they need the Yoga libraries to run

**<details><summary>TEST - Clicking on the last letter triggers the callback</summary>**
<p>

Clicking on the last letter does not invoke the onPress callback (in this case a console.warn)

| **BEFORE** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107537789-9060f480-6bc3-11eb-8ad1-1152e466f830.gif" width="700" height="" /> |

Clicking on the last letter does invoke the onPress callback (in this case a console.warn)

| **AFTER** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107538263-11b88700-6bc4-11eb-9a48-139e053aa68b.gif" width="700" height="" /> |

</details>
</p>

**<details><summary>TEST - Adding and removing Text</summary>**
<p>

<video src="https://user-images.githubusercontent.com/24992535/107541305-48dc6780-6bc7-11eb-8d57-a8aeb57a6879.mp4" />

</details>
</p>

**<details><summary>TEST - Different type of languages</summary>**
<p>

<video src="https://user-images.githubusercontent.com/24992535/107541683-affa1c00-6bc7-11eb-8630-22c2ba4d0973.mp4" />

</details>
</p>

**<details><summary>TEST - Testing other Examples that use onPress handler</summary>**
<p>

<video src="https://user-images.githubusercontent.com/24992535/107541972-f9e30200-6bc7-11eb-9759-6ff9d52bba15.mp4" />

</details>
</p>

**<details><summary>TEST - Text with Inline Images</summary>**
<p>

| Inline View | Inline Image is clipped |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107542187-357dcc00-6bc8-11eb-9eed-eefbd8be339f.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107542193-37478f80-6bc8-11eb-8ab3-fa1282dc3fd3.png" width="300" height="" /> |

</details>
</p>

Reviewed By: yungsters

Differential Revision: D31061832

Pulled By: charlesbdudley

fbshipit-source-id: 3034b4f35d4042bfcf1e899a59d5b2f73a990f31