React-native-gifted-chat: lineHeight in MessageText cause emojis to cut

Created on 9 Sep 2016 · 14Comments · Source: FaridSafi/react-native-gifted-chat

Issue Description

Looks like the lineHeight here https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageText.js#L71 causes emojis in the top row to cut.

Removing this line seems to fix it btw.

@FaridSafi can we safely remove it or does it have a purpose?

Steps to Reproduce / Code Snippets

Expected Results

Not to cut :)

Additional Information

Platform: iOS

Source

kfiroo

Most helpful comment

@kfiroo Removing the lineHeight causes the bottom of emojis to cut off, when only a single line of text is present. Increasing the Line-height to (fontSize + 8) seems to solve all Emoji issues I've run into with React native's text component.

For example, here setting the lineHeight to 24 (16+8) solves the problem of cutting emojis on the top and bottom.

simulator screen shot sep 21 2016 11 26 20 pm

const textStyle = {
  fontSize: 16,
  lineHeight: 24,
  marginTop: 5,
  marginBottom: 5,
  marginLeft: 10,
  marginRight: 10,
};

@FaridSafi

ghost on 22 Sep 2016

👍6

All 14 comments

@kfiroo maybe we can increase a little lineHeight value ?

FaridSafi on 9 Sep 2016

@FaridSafi Do we need it?
Without it, it looks like every line sets it's own line height

kfiroo on 9 Sep 2016

For example, here setting the lineHeight to 24 (16+8) solves the problem of cutting emojis on the top and bottom.

simulator screen shot sep 21 2016 11 26 20 pm

const textStyle = {
  fontSize: 16,
  lineHeight: 24,
  marginTop: 5,
  marginBottom: 5,
  marginLeft: 10,
  marginRight: 10,
};

@FaridSafi

ghost on 22 Sep 2016

👍6

@kfiroo @FaridSafi Can you please help me to add emoji in message text. I couldn't find any documentation. Is emojis bundled in this package? Or should i use external emoji icons? Which renderXXX method i should use?

Thanks in advance

snsekar on 26 Dec 2016

AFAIK emojis are just text, you don't have to do anything to get it to work

kfiroo on 26 Dec 2016

@kfiroo Sorry i couldn't get you. I am trying in Android 4.2.2. Still I am not getting emojis. What text i should use to get emojis on chat message?

screenshot_2016-12-26-21-03-56

snsekar on 26 Dec 2016

@snsekar If you type in an emoji char then it should be an emoji ⛄️. if you type in ":-)" it shouldn't be an emoji

kfiroo on 26 Dec 2016

Ok thanks @kfiroo . But i am not getting emoji char in keyboard. It is just normal standard keyboard.

snsekar on 26 Dec 2016

@kfiroo Sorry, that was my mistake. Emojis supported from Android 4.4 only. It is working fine. Thanks for your time.

snsekar on 26 Dec 2016

@snsekar no problem, good luck!

kfiroo on 26 Dec 2016

Increasing the line height messes with the readability of longer messages. We changed

  marginTop: 5,
  marginBottom: 5,

  marginTop: 1,
  marginBottom: 1,
  paddingTop: 4,
  paddingBottom: 4

and are satisfied with the results:

image_uploaded_from_ios_720

neilsarkar on 29 Jan 2017

@neilsarkar Thanks! can you post images of the same messages using the old margin style for comparison?
Thanks :)

kfiroo on 29 Jan 2017

👍1

Sure, here they are. I just discovered that this is only an issue on iOS 9. The screenshot from last night is iOS 9 with margin changed to padding. Here's what the current styles look like on iOS 9.

image_uploaded_from_ios_1024