Description
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>
*/