react-native: Text component can't show all content.

🐛 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. Screenshot_20190416-150541

But, In android pie, the result is this. Screenshot_20190416-150439

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 10
  • Comments: 20 (4 by maintainers)

Most upvoted comments

Also seeing this issue for Chinese on Android Pie

@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

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 😃

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