React-native: [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.

[adbl]

@hramos it is still an issue, it acts differently in iOS 10 vs before. There are hacks to get around it, the best one I could come up with is to add zero width space to the text. It's still a bug

[hramos]

Alright - can you open a new issue?

[adbl]

I will not bother because we have solved it for our purposes. This issue
has some of the information that explains what is wrong. Why close and open
a new one?
On Tue, 14 Mar 2017 at 19:30, Héctor Ramos [e-mail] wrote:

Alright - can you open a new issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4457#issuecomment-286516767,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAK22LSAIJiRdWiQmw0VPXzSE_FlGnYLks5rltzHgaJpZM4Gr_yj
.

[hramos]

The issue lacks all the detail required in the template, has been open for a really long time, and people have commented with possibly unrelated issues. If someone really cares about this, then the best way forward is to open a new issue with all the necessary details.

[adbl]

Ok, hopefully someone does care about it enough to do that then.
On Tue, 14 Mar 2017 at 20:05, Héctor Ramos [e-mail] wrote:

The issue lacks all the detail required in the template, has been open for
a really long time, and people have commented with possibly unrelated
issues. If someone really cares about this, then the best way forward is to
open a new issue with all the necessary details.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4457#issuecomment-286527370,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAK22Nuh421GH8iwIS4P9lAiuOnGCnAUks5rluT7gaJpZM4Gr_yj
.

[rikur]

Still an issue.

[hramos]

Please open a new issue.

[rikur]

@hramos I would love to, but unfortunately I can't verify the issue with latest version of React Native as it breaks remote debugging. I noticed the latest version has new implementation of Text.

I will try again with the next release.

[ccfz]

Since this issue is closed I moved my workaround solution to: #18559