Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Text: onPress doesn't respect parents text style #21063

Closed
ghost opened this issue Sep 12, 2018 · 1 comment
Closed

Nested Text: onPress doesn't respect parents text style #21063

ghost opened this issue Sep 12, 2018 · 1 comment
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@ghost
Copy link

ghost commented Sep 12, 2018

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 65.92 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.9.0 - /usr/local/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

When nesting Text Components, if the child Text has an onPress function the hitBox of the text will not respect the style of the parent. In our case we defined a fontSize in the parent component and did not do so in the child Text Component. While there is no issue styling wise, the clickable area of the child Text is not as big as the fontSize. It defaults to system fontSize and only the upper part of the text is clickable. When defining the style (especially the fontSize) in the child there is no issue. Still it is not the expected behaviour, because only a part of the text is clickable.

Reproducible Demo

/*
<Text style={{fontSize: 50}}>
<Text onPress={() => console.log('clicked')}>Only the top part of me is clickable</ Text>
</ Text>
*/

@ghost ghost closed this as completed Sep 12, 2018
@ghost
Copy link
Author

ghost commented Sep 12, 2018

The issue is actually caused by paddingTop, which will not be respected by hitBox

@facebook facebook locked as resolved and limited conversation to collaborators Sep 12, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 12, 2019
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

1 participant