[HOLD for payment 2021-09-22] Size of the single emoji in the chat is too small

[mananjadhav]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Upwork Link: https://www.upwork.com/jobs/~01d853d1f00586e2de

---

With respect to comment #4456 (comment), adding this issue.

Action Performed:

1. Go to chat, click on EmojiPicker
2. Enter some Emojis (one emoji at a time), especially people & faces

Expected Result:

Emoji should be a little bigger
From ExpensifyChat,

From Slack,

and honestly, we should also increase inline emojis by at least 2 points. (debatable)

Actual Result:

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @MitchExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[mananjadhav]

Proposal

At the moment ValidationUtils, we're trying to match if it is isSingleEmoji, but the message.length and matchedMessage.length is different. This could be because of the Unicode characters in the emojis.

<Text
      selectable={!canUseTouchScreen() || !this.props.isSmallScreenWidth}
      style={isSingleEmoji(fragment.text) ? styles.singleEmojiText : (isEmoji())}
>

There are two approaches to solve this:

In ValidationUtils, we should update the isSingleEmoji function to the following:

Convert Emoji to Uncide and then compare. (recommended)

function isSingleEmoji(message) {
    const match = message.match(CONST.REGEX.EMOJIS);

    if (!match) {
        return false;
    }

    const matchedEmoji = match[0];
    console.log('Emoji Text', emojiUnicode(message) === emojiUnicode(matchedEmoji));
    return emojiUnicode(message) === emojiUnicode(matchedEmoji);
}

function emojiUnicode(emoji) {
    let comp;
    if (emoji.length === 1) {
        comp = emoji.charCodeAt(0);
    }
    comp = (
        (emoji.charCodeAt(0) - 0xD800) * 0x400
      + (emoji.charCodeAt(1) - 0xDC00) + 0x10000
    );
    if (comp < 0) {
        comp = emoji.charCodeAt(0);
    }
    return comp.toString('16');
}

or somehow trim or add +1 to the message. (not recommended)

function isSingleEmoji(message) {
    const match = message.match(CONST.REGEX.EMOJIS);
    if (!match) {
        return false;
    }
    const matchedEmoji = match[0];
    return (matchedEmoji.length + 1) === message.length; 

}

[parasharrajat]

#4114 Sounds familiar so that can be merged into this one.

[rdjuric]

@parasharrajat I think that PR is about also making the emojis bigger in other scenarios - like on the Composer and with multiple emojis in the same message.

This one looks like a regression from my #4206 PR. I added a VS unicode to our emojis but forgot to update the isSingleEmoji validation. I can open a PR to fix this 😅

[parasharrajat]

Sure @rdjuric. I was wondering that you implemented this feature earlier and how is it not working?
But I didn't mention regression to keep few contributors happy. Alas, skipping long discussion.

[mananjadhav]

Thanks for notifying. @rdjuric You'll pick this and close it?

[MitchExpensify]

Unique - There are similar issues here #4422 and here #4544
Issue hygiene - Good
Clarity of problem - Not expressed as a problem but rather a comparison with Slack. In other words, what is the problem with the current size of emojis in Expensify Chat? Are they too small to identify details for example? (I agree t is hard to see detail which takes away from them) Are there specific size inconsistencies? (I notice inconsistencies as mentioned here) by @mallenexpensify
Value - I do think its valuable to easily be able to see emojis in more detail and making them bigger is a perfectly reasonable solution to that.

If we're going to cover emoji size with this issue, we should close this right @mallenexpensify ?

[mananjadhav]

#4422 is similar to the current one, which deals with the size and rendering of emojis in the chats, conditional render based on 1 or more emojis.

#4544 is more of a UX item for Emoji Picker. IMO, not related.