Single emoji message leads to emoji cutoff

[sterlingwes]

Describe the bug

Sending just a single emoji leads to it being cutoff in the chat (rendered by built-in MessageSimple):

sender view (iOS):

receiver view (Android):

Dev environment info:

• stream-chat-react-native v5.7.0
• react-native v0.70.4
• iOS 16.2 and Android API 33

To Reproduce
Steps to reproduce the behavior:

1. Use the built-in MessageList and Message component, with custom theme (see below)
2. Send a single emoji to the chat (in our case: 🤞)
3. See it cut-off immediately

Expected behavior
Emoji is allowed to render in full

Custom theme used

 const maxWidth = vw(100) - 72
  // ...
  messageSimple: {
    card: {
      container: {
        width: maxWidth,
      },
    },
    gallery: {
      // -2 for border widths
      gridWidth: maxWidth - 2,
    },

    content: {
      container: {
        width: maxWidth,
      },
      textContainer: {
        width: maxWidth,
        maxWidth,
      },
      wrapper: {
        width: maxWidth,
      },
      markdown: {
        text: {
          fontSize: 16,
          lineHeight: 25,
        },
        paragraph: {
          fontSize: 16,
          lineHeight: 25,
        },
      },
    },
  },

[khushal87]

Hey @sterlingwes, The lineHeight property of markdown's paragraph seems to be an issue. Please remove it, and it will be solved.

[sterlingwes]

It's there for a reason @khushal87 , are you suggesting I can't have a line height set? What if I'd prefer to control the line height instead of rendering large single emojis differently from normal text? This seems like a bug to me that I can't have both and given your default components are deciding to render the emojis at a size larger than my normal text it's strange to me that it'd use the normal text's line height, no?

[khushal87]

Hey @sterlingwes, can you try this? We have a different markdown style theming pattern for onlyEmoji Messages, which needs to be applied separately. General markdown styles do not apply to those messages. You can apply all of the markdown style properties inside it.

textContainer: {
  width: maxWidth,
  maxWidth,
  onlyEmojiMarkdown: {
    text: {
      fontSize: 16,
      lineHeight: 25,
    },
  },
},

[sterlingwes]

That's great, thanks! I wish there was a way to style the "bubble" / container in the onlyEmoji case as well, but that's a separate issue... your suggestion fixed the cut-off problem here at least. Thanks again