React-native: Text numberOfLines prop causes text to be cut off on Android

[shlokamin]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 817.49 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
Yarn: 1.5.1 - /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 11.3, macOS 10.13, tvOS 11.3, watchOS 4.3
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.3
System Images: android-25 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.3/9E145 - /usr/bin/xcodebuild
npmPackages:
react: ^16.5.1 => 16.5.2
react-native: 0.57.5 => 0.57.5
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

When using the numberOfLines Text prop on Android along with any horizontal margin, it causes the edges of the last line to be cut off horizontally as shown below:

Reproducible Demo

As shown in the snack below, the first Text component that has margin gets cut off on the last line, while the second one with no margin does not get cut off.

Note: Make sure you're viewing the snack on Android

https://snack.expo.io/@shlokamin/text-number-of-lines-bug

[GhizlaneA]

Hi, I am facing the same issue with react-native 0.57.8 version, is there any plan to fix this soon ? thanks in advance.

[shlokamin]

Same, for now I'm just truncating text based on an arbitrary character count which is far from ideal :/

[sanjeev141985]

Hi, I am facing the same issue with react-native 0.57.8 version, is there any plan to fix this soon ? thanks in advance.

Same here

[CatapultJesse]

Related: https://github.com/facebook/react-native/issues/19117

[ben-brott]

I am also seeing this issue _without_ any margin, reproduced here: https://snack.expo.io/H1B9TwwMH

[chetan-plrch]

The same issue happened with me, any workaround ?

[curtismenmuir]

Same issue seen with RN version 0.59.3

[curtismenmuir]

Issue seems to be fixed by changing the font family on the Text component to a monospace variant.
EG
fontFamily: "monospace"
Not sure numberOfLines considers the width of the letters before truncating the text string.

[stale[bot]]

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[bot]]

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.