LineHeight is working weird on specific fonts (Android Only)

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Multiline texts don't have same line height on specific fonts. (NotoSansCJK= Source Hans Sans, NotoSerifCJK=Source Hans Serif)

It happens on first line.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 7.08 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Set lineHeight properly. (not too small, large)
and set fontFamily to custom font which has problem. (NotoSansCJK, NotoSerifCJK)

Expected Results

Every lines have same line height.

like this:

Snack, code example, screenshot, or link to a repository:

Android Native(No React Native) is fine. This font is NotoSansKR-Regular :

iOS is fine:

Text Style:

{
    padding: 10,
    fontSize: 12,
    lineHeight: 28,
}

source code here.
https://github.com/toy0605/FontTestApp

and this is real device(not emulator) screenshot.

it's galaxy s9+ (android 10)

you saying that this bug reproduces only on galaxy s9+ (android 10) ?
Does not reproduce on emulator api 28

you saying that this bug reproduces only on galaxy s9+ (android 10) ?
Does not reproduce on emulator api 28

No. It doesn't reproduce only on Galaxy S9+. It happens on emulator, too.
Could you tell me which you tested on emulator?

I tested on Nexus 5 API 28, Nexus 5 API 29 Emulator.
This is my emulator version.

and I changed System language(English(United States) to 한국어(대한민국))

Same issue here, even it was fixed according to #7546 (comment) , I am using react-native 0.63.2, line height of the first line of the ttf font I am using differs from all the other liens. And it is only on Android. I tested on Pixel 2 API R.

The same question，Have you solved it

@fabriziobertoglio1987

I believe @fabriziobertoglio1987 is working on a PR similar to this? Can you confirm and link the PR/issues?

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

I am also running into this issue. Any solutions?

Reproducible example with the font HelveticaNowDisplay https://snack.expo.io/@ronicesarrc/custom-font-example

Im also facing this issue

@XantreDev

As the solution from @XantreDev did not work for multiline paragraphs for me, I played a bit more with his solution and came up with an approach that does the trick for all sorts of Text in our app.

This is the workaround we currently use:

import React from 'react'
import { transformProps } from 'react-fast-hoc'
import * as RN from 'react-native'

export const loadAndroidTextWorkarond = () => {
  if (RN.Platform.OS === 'android') {

    const OriginalText = Object.assign({}, RN.Text)
    Object.assign(
      RN.Text,
      transformProps(RN.Text, (props) => {
        const { lineHeight } =
          (RN.StyleSheet.flatten(props.style) as RN.TextStyle | undefined) ?? {}

        if (!lineHeight) {
          return props
        }

        const createFixElement = () =>
          React.createElement(OriginalText, {
            key: `__text_fix_${Date.now() + Math.random()}`,
            style: { lineHeight: lineHeight + 0.001 },
          })

        const children = React.Children.toArray(props.children)
          .map((child) => {
            if (typeof child === 'string') {
              return child
                .split('\n')
                .map((text, i) =>
                  i === 0
                    ? [createFixElement(), text]
                    : ['\n', createFixElement(), text],
                )
                .flat()
            }
            return [createFixElement(), child]
          })
          .flat()

        return {
          ...props,
          children,
        }
      }),
    )
  }
}

Call the method somewhere (e.g App.tsx) in a useEffect and the lineHeight should work.

Hi, does this issue resolve. I use font NotoSans , with the normal text is working fine. But with special characters don't working. Does anyone have any solution for this?

fontSize: 16
lineHeight: 24

String: ✿ ♬ メ ༒ ☉ 亗〆★ ㏾*㏾*㏾*㏾*㏾*㏾*㏾

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Stale bots should not exist.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Bump

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

This issue was closed because it has been stalled for 7 days with no activity.

Navigation Menu

Repository navigation

LineHeight is working weird on specific fonts (Android Only) #29232

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

37 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

LineHeight is working weird on specific fonts (Android Only) #29232

Description

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

Activity

toy0605 commented on Jun 27, 2020

toy0605 commented on Jun 27, 2020

fabOnReact commented on Jul 6, 2020

toy0605 commented on Jul 8, 2020

ASCII128514 commented on Aug 10, 2020

k1195453766 commented on Sep 4, 2020

safaiyeh commented on Sep 6, 2020

stale commented on Dec 25, 2020

boerdjamin commented on Mar 26, 2021

roni-castro commented on Jun 1, 2021

37 remaining items

jdschin commented on Jan 22, 2025

breezertwo commented on Feb 5, 2025

huynextlevel commented on Mar 30, 2025

react-native-bot commented on Sep 27, 2025

SleeplessByte commented on Sep 27, 2025

react-native-bot commented on Mar 27, 2026

XantreDev commented on Mar 28, 2026

react-native-bot commented on Sep 25, 2026

react-native-bot commented on Oct 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions