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.
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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 10
- Comments: 20 (4 by maintainers)
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 workingNope, 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.