Text component can't show all content.

[sekitaka]

🐛 Bug Report

In Android Pie, I tried to show Japanese multiple line content using Text component.
But, there is not enough height.

To Reproduce

• react-native init example
• edit App.js render funciton like this.

  render () {
    return (
        <View>
          <Text>Alphabet</Text>
          <Text style={{backgroundColor: 'cyan', marginBottom: 16}}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
          </Text>

          <Text>Japanese single line</Text>
          <Text style={{
            backgroundColor: 'magenta',
            marginBottom: 16,
          }}>こんにちは、世界</Text>

          <Text>Japanese multiple line</Text>
          <Text style={{backgroundColor: 'magenta', marginBottom: 16}}>
            私は生涯いよいよこの中止事というのの上と云いですでし。もし今日がお話国は無論その見当たませまでをやるでいるなかっをは圧迫通り越しませますて、そうにもしなけれだないた。
          </Text>
        </View>

    )
  }

Expected Behavior

I expected this.

But, In android pie, the result is this.

Code Example

This is minimal example.

          <Text style={{backgroundColor: 'magenta', marginBottom: 16}}>
            私は生涯いよいよこの中止事というのの上と云いですでし。もし今日がお話国は無論その見当たませまでをやるでいるなかっをは圧迫通り越しませますて、そうにもしなけれだないた。
          </Text>

In expo, This bug doesn't reproduce. 🤔
https://snack.expo.io/B1yOLlQ9E

Environment

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
      Memory: 63.91 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 19.1.0, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.1, 27.0.2, 27.0.3, 28.0.2, 28.0.3
        System Images: android-16 | Google APIs Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.2/10E125 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.4 => 0.59.4
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      react-native-cli: 2.0.1

Device
PH-1

[saxenanickk]

@sekitaka <Text style={{backgroundColor: 'magenta', marginBottom: 16}}>

Remove marginBottom: 16 and try.

[sekitaka]

@saxenanickk Thanks for your replying. I got same result.

[saxenanickk]

@sekitaka I think I got the issue. This is because the lineheight. For English it is working fine but when there are multiple lines in Japanese Language then text is getting cut in half. May be in the new release this is an issue.

Try giving lineHeight: 20 and if it's working

[sekitaka]

@saxenanickk Giving lineHeight: 20, it worked. I can use this workaround. Thank you.
But, I think it's a bug, so I don't close the issue.

[kazyk]

i'm also facing this 🤔

[Esxiel]

It's been like this for a while. If you know the fontSize, you can set the lineHeight to be 1.5x of that and it will solve the issue, but seeing that we don't have a way to set a multiplier for lineHeight...

[s123121]

Can confirm this problem only affect Japanese multiple lines on Android (iOS is fine). My workaround is to set lineHeight for Japanese text

tiny: (isJpn) => {
  fontSize: scale(10),
  ...isJpn ? { lineHeight: scale(10*1.5) } : {}
}

[sunnylqm]

Also seeing this issue for Chinese on Android Pie

[yz1311]

downgrade targetSDKVersion to 27,it works well.But it's just a workaround for app not distributed.

[tikkichan4]

Faced this problem in our app too. I have already received a lot of bug report from our users. And i found that not all of the android devices would cause this problem, the problem generally happens on Android 9 users.

From our user bug report, below is the list of devices have this bug:
Samsung S10+
Google Pixel xl
Sony xzp
Nokia 8
u11+
Nokia 8.1
Essential phone

i think it is a critical problem because Text component is one of the core component on app.....Hope any fixes can be released as fast as possible. Thanks!!!

[Yousefjb]

I can confirm @tikkichan4 report. it happens on Android 9 only and for Arabic text as well.

[Jacky9425]

occurs on Android 9 devices/emulators, when the text component contains multiple lines of text.

[sunnylqm]

Looks like it's fixed by 76c50c1

[chengsam]

Any solution instead of upgrading react native to 0.61.2?

[tarouboy]

I believe it is related to this: #25306

I didn't try 0.61 yet but 2 workarounds:

1. Lower the targetSDK from 28 to 27 ( Confirmed working )
2. Apply the patch manually ( You'll have to build from source )

Maybe should merge with this topic: #24837 (comment)

It seems it is affecting many non-latin languages.

[hubertwang]

Any solution instead of upgrading react native to 0.61.2?

Hi @chengsam
You can fork you own react-native repository, checkout the version you want to patch, and then cherry-pick commit #25306 manually, for example:
git checkout "v0.59.10"
cherry pick the commit 76c50c1

Then follow the instructions in the wiki to make your own android aar binary
https://github.com/facebook/react-native/wiki/Building-from-source

git checkout -d my-branch-name
(Yes, you need to install docker first)
docker run --rm --name rn-build -v $PWD:/pwd -w /pwd reactnativecommunity/react-native-android /bin/sh -c "./gradlew installArchives"
git add android --force
git commit -a -m 'my react native forked release'
git push

Finally, change your package.json, point react-native to your repository
"dependencies": {
...
"react-native": "myName/react-native#my-branch-name"
}

[tarouboy]

Hi @hubertwang

Do you mind if I use your fork directly?
"react-native": "github:hubertwang/react-native#v0.59.10-rev1"

[hubertwang]

Hi @hubertwang

Do you mind if I use your fork directly?
"react-native": "github:hubertwang/react-native#v0.59.10-rev1"

Nope, you can use it anyway (since the repo is public)
But from security’s point of view, I’ll suggest you to make your own binary :)

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

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.