[Text] Emoji changes the line height

[h3l]

The demo is here,
Emoji will change the line height.

[facebook-github-bot]

Hey h3l, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[adbl]

Related to this (in iOS):

Rendering a text at fontSize 15 results in a lineheight of 18 (default font), setting the lineHeight to 18 explicitly and including an emoji will also lift up the baseline (which results in??) emoji getting cut at the top.

If there are several lines of text, an emoji on second line will fit and not get cut...

[adbl]

@h3l do you know of any workaround?

[h3l]

I'm sorry to tell you that there is still no solution for this.
What about to direct mention a contributor about it?

[adbl]

I found somewhat of a workaround actually... detect if the text contains any emoji and in that case apply additional style:

  emojiText: {
    fontSize: 15,
    lineHeight: 18
    marginBottom: -2,
    paddingTop: 2,
  }

Obviously it is tied to this fontSize (and font?)...

[h3l]

Yes, this style fix the problem in a given fontsize.
But when use change the fontsize in setting, it may have a problem.

[h3l]

@brentvatne Could you please have a look at this problem?

[brentvatne]

@h3l - sorry I had so many notifs I just noticed this. I'm not familiar with this part of the codebase but I'm noticing some strange behaviours with lineHeight on Android so looking into that..

[eugenehp]

@h3l hey Hel, do you have accounted the same issue on android platform?

[eugenehp]

@brentvatne what do you think about this? do you think this might be the good place to start finding the way to fix this interesting issue?

[adbl]

In iOS 10 the behaviour is a bit different, I think the line height no longer changes, but instead the emoji will get cut at the Text bottom margin.

[regrex]

@adbl I resolved this problem by add a character, like space.

[hramos]

This is an old issue and it's not clear to me if it's still affecting people.

Please feel free to re-open, and fill in the template with details.