A text layout differs between android and ios when using external font

[masarusanjp]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
      Memory: 25.59 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.1.0 - /usr/local/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 26.0.3, 27.0.3, 28.0.1
        API Levels: 23, 26, 28
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      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

Description

When I set 'Tsukushi A Round Gothic' as the fontFamily of a Text component, the layout differs between android and ios.

screenshots

android	iOS

The difference occurs since 'Tsukushi A Round Gothic' has a leading(a line gap. see this)
iOS doesn’t ignore leading, but android ignores it.

This difference causes the following two problems.

• It is difficult to use for UI on iOS
• Layout differs between android and ios

It is not limited to Tsukushi A Round Gothic. The same problem also occurs in Hiragino which is the standard iOS font.

Reproducible Demo

https://drive.google.com/open?id=1jI53RiQRUbEGtotn8BrIrj3RvyNgSpZR

[Esxiel]

Still is a problem on RN 0.57.1 as well, even if you set fontFamily:"system font" AKA San Francisco. Only works as expected if fontFamily is omitted, Avenir, Helvetica, etc all have the leading if there are Japanese characters/kanji.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[masarusanjp]

This issue has not been fixed yet

[dulmandakh]

Due to platform differences you cannot same fontFamily for custom fonts on both iOS and Android. Please see https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

[aarondail]

@dulmandakh I dont think this is due to the issue you mentioned (having to use different fontFamily depending on OS). Even if you have the correct fontFamily you get this extra vertical padding at the bottom for Japanese characters, on iOS only.

Can we get this re-opened?

It also still repros in 0.59.9. I haven't been able to get this to repro at all in a regular non-RN app. Additionally non-Japanese characters "seem to" be ok (dont get the extra vertical padding).

Another bug filled on this that got closed due to inactivity: #20732

[markymc]

Agree this should be reopened. I'm seeing this with React Native 0.61.5. A workaround was to create a base text like this:

export const BaseText = ({children, style}) => (
  <Text
    style={[
      i18n.currentLocaleAsLanguageCode === 'ja'
        ? styles.defaultJs
        : styles.default,
      style,
    ]}>
    {children}
  </Text>
);

Then use this instead of a standard Text.

This means we can't use a custom font on iOS for our Japanese users.