react-native: Text rendering is inconsistent on ios and android
Description
It seems that with the same style, Text
on Android renders higher than on iOS, and that could cause problems wherever text is involved, especially vertically centered text.
React Native version:
npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 11.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 1.78 GB / 16.00 GB
Shell: 5.8 - /usr/local/bin/zsh
Binaries:
Node: 16.10.0 - ~/.asdf/installs/nodejs/16.10.0/bin/node
Yarn: 1.22.10 - ~/.asdf/shims/yarn
npm: 7.24.0 - ~/.asdf/installs/nodejs/16.10.0/bin/npm
Watchman: 2021.09.27.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /Users/pavlos/.asdf/shims/pod
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
Android SDK:
API Levels: 26, 29, 30
Build Tools: 26.0.3, 28.0.3, 29.0.2, 30.0.2, 31.0.0
System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: 22.1.7171670
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_252 - /Users/pavlos/.asdf/shims/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.0 => 0.66.0
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- clone https://github.com/pvinis/react-native-text-render-bug
- yarn && yarn start
- yarn android
- yarn ios
Expected Results
I would expect the android text to have a pixel space from the top border, same as ios.
Snack, code example, screenshot, or link to a repository:
About this issue
- Original URL
- State: open
- Created 3 years ago
- Comments: 15 (5 by maintainers)
onLayout={event => console.log({ layout: event.nativeEvent.layout, platfrom: Platform.OS, }) }