Text cut off at the bottom (in Android)

[Jpunt]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.2.1
Yarn: 0.27.5
npm: 5.3.0
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Steps to Reproduce

1. Create a brand new app (with create-react-native-app for example)
2. Render a text
3. Set the style of this text to {fontSize: 72, lineHeight: 72}

Expected Behavior

I expected the text to not be cut off at the bottom, as it does (correctly) when leaving out lineHeight.

Actual Behavior

As soon as we define a lineHeight (even if it's the same as its fontSize) the bottom part gets cut off:

(where the first one is without lineHeight and the second one is with {fontSize: 72, lineHeight: 72})

Reproducible Demo

https://snack.expo.io/BJT3KRzZM

Additional notes

• It's not possible to compensate the cut off part with a paddingBottom (which could be done with similar issues in higher areas of a Text component, using paddingTop)
• This is a similar bug as Top of Text cut off when lineHeight < fontSize #7687, which is closed due to inactivity

[mudasirkhan]

You have to increase the line height accordingly in order for it to render completely. This probably takes the height for only capital letters.

[Jpunt]

But.. what do we do when we want multiple lines of text that are closer together than the line-height it takes to render the last line?

What you're suggesting results in:

You're right in that it fixes the g at the end, but the rest of the text does not look how I want it to look. Please reopen this, because it's not a weird use case at all.
Edit: Sorry, I was confused with the status of #7687 for being closed 😅

[tdekoning]

I've looked into if this is even possible in native Android, and turns out that it works just fine.
Setting android:lineSpacingMultiplier at a value of something like 0.5 on a TextView will result in the lines of text being quite close to each other, but the letters are never cut off.

I did not have the time to figure out where in the React-native logic this fails, but it seems like a bug in React-native to me.

[dickie81]

Hey - this should be fixed in latest release (0.52).

Merged PR here: #16448

[Jpunt]

Indeed, this was fixed in 0.52 🎉 🙌