Android Text lineHeight is incorrect for the first line

[brentvatne]

Noticed this in a production app, easy repro case with the template app: all I did to the example app was add some lineHeight and change the text to make it obvious. You can copy and paste the source from here: https://gist.github.com/brentvatne/ed98472bc8605484862c7adfdee8d5ca

Example gif:

Full video: http://url.brentvatne.ca/1jQXm

cc @dmmiller

[dmmiller]

@andreicoman11 any thoughts?

[andreicoman11]

Will have to investigate, it's probably a cool bug somewhere.

[aaronschubert0]

@brentvatne @andreicoman11 Did this ever get fixed?

[andreicoman11]

I have diff internally that fixes this, I just need to get all details right and land it.

[aaronschubert0]

@andreicoman11 That'd be awesome :D

[brentvatne]

wooo awesome @andreicoman11!

[alexHlebnikov]

Same problem here, is there any fix for this?

[alexHlebnikov]

@andreicoman11 is there any chance you will do a PR with a fix?

[andreicoman11]

c79f617 fixes this.

The TLDR is that Android's StaticLayout gives you incorrect layout when using lineHeight. In a simple test app, this is what it looked like:

It took longer than usual to fix this because it was tricky to get the implementation details right. We initially pushed a version of this fix internally and then had to immediately revert it because it didn't work right in many cases. Given that this might change the layout of many Text components, we might still need to do that, or to add more fixes on top of this one.

[alexHlebnikov]

@andreicoman11
I've tried your fix, it doesn't works for me.
RN 0.34.RC.0
Nexus 5 (Android 6.0.1)
Here is my code:

<Text style={styles.aboutMessageText}>
    Some random text here Some random text here Some random text here <Text style={styles.aboutMessageLink} onPress={() => Linking.openURL(agreementUrl)}>Some random text here</Text> Some random text here Some random text here Some random text here 
</Text>
<Text style={styles.aboutMessageText}>Some random text here Some random text here<Text style={styles.aboutMessageLink} onPress={() => this.onPressEmailButton(email)}>{email.toUpperCase()}</Text>.
</Text>

[andreicoman11]

@alexHlebnikov do you mind opening a new issue with the entire code, expected outcome, actual outcome, maybe also a few screenshots? Thanks!

[jr-k]

Please try to use .TTF webfont. I had this issue but I was using .OTF

[mdvacca]

Same problem here with OTF or TTF fonts. (the lineHeight is incorrect only for the first line)

I'm using
RN 0.34.0
Nexus 5 (Android 5.0.0 and Android 6.0.0)

[mdvacca]

Looking at the Release notes of RN 0.35.0 I noticed that this bug was fixed and I just confirmed it works fine in Android.

Thanks @andreicoman11

[GhizlaneA]

@mdvacca It still does not work fine for me.
The problem is still there in Android with react-native: 0.55.4.