Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Text rendering is inconsistent on ios and android
See original GitHub issueDescription
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:
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Blog: Fix Custom Font Inconsistency in React Native
The font inconsistency issues between platforms have been in part due to iOS ignoring a font property that android doesn't.
Read more >React Native: Custom font renders differently on Android ...
It seems that iOS renders the font in top of the Text-container. I'm using the same TTF font-file for both Android and iOS....
Read more >Consistent font line height rendering - Martin Adamko - Medium
Recently I had to use the same font on the React Native project for both platforms. The difference was just too big. On...
Read more >Text rendering as blocks briefly. Bug in iOS build.
It happens when we update the text on the screen. We are using OpenSans-Bold, but we've seen it with different fonts too including...
Read more >[Solved]-Inconsistent text rendering between iOS and Mac
Coding example for the question Inconsistent text rendering between iOS and Mac. ... { families: ['Lato'] } }; ... rest of font loader...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
onLayout={event => console.log({ layout: event.nativeEvent.layout, platfrom: Platform.OS, }) }Did somebody find a solution?