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.

  1. clone https://github.com/pvinis/react-native-text-render-bug
  2. yarn && yarn start
  3. yarn android
  4. 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)

Most upvoted comments

onLayout={event => console.log({ layout: event.nativeEvent.layout, platfrom: Platform.OS, }) }