Text cut off at the bottom (in Android)

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 https://github.com/facebook/react-native/issues/7687, which is closed due to inactivity

[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.

[Jpunt]

Indeed, this was fixed in 0.52 🎉 🙌