[Nested Text Android] onPress hitbox has an incorrect size.

[bobsmits]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 55.39 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.2 - /usr/local/bin/node
      Yarn: 1.3.2 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27
        Build Tools: 23.0.1, 26.0.3, 27.0.3, 28.0.3
        System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

Nested Texts with an onPress do not allow you te press on the whole word. Texts nested in a View work correctly. This only happens on Android IOS seems fine.

Reproducible Demo

Init a new react native project. Change default App component to:

 <View style={styles.container}>
    <Text>
        <Text onPress={ () => {console.warn('Hello!')} } style={styles.welcome}>facebook.com</Text>
    </Text>
 </View>

The last letter from facebook.com will not respond to the onPress.

A Text nested directly in a View it works as expected:

 <View style={styles.container}>
     <Text onPress={ () => {console.warn('Hello!')} } style={styles.welcome}>facebook.com</Text>
 </View>

[cpojer]

You are right, this seems like this is a real issue but unfortunately it's unlikely anyone will be able to spend time on this anytime soon. Do you wanna send a PR to fix this?

[kevinavery]

@bobsmits I found that this is an issue when Text has padding in the style. Even if the padding is assigned to the top level Text, the hitbox for child Text elements seems to break.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[caioedut]

Please pay some attention to this.

[ovy9086]

same issue here...

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ilogico]

Having a similar issue. It happens both on Android and iOS.
The hit box seems to be wrongly calculated, being offset to the left.
Text aligns and monospace fonts seem to have no effect on it. The amount of text and surrounding text seems to influence the offset.
I found no workaround for it.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ilogico]

The issue still exists.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ilogico]

It's not fixed.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[jsamr]

Stale bot, leave the issue open.

[AlenToma]

I hade the same issue. The fix I found is wrapping the parent with SafeAreaView from react-native-safe-area-context and it should work.