[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 [email protected] 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.

[parasharrajat]

Anyone looking into this. This is a regression and looks like Rujuric is working over it #4543 (comment).

[jboniface]

Does anyone know what PR caused the regression?

[parasharrajat]

#4206 Regression from...

[jboniface]

oh sorry, i missed that in the comment somehow. still opening my eyes this morning.

[MelvinBot]

@MitchExpensify Eep! 4 days overdue now. Issues have feelings too...

[MitchExpensify]

Labelling external seeing as we'e consolidating to this issue.

[MelvinBot]

Triggered auto assignment to @Jag96 (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mananjadhav]

@mananjadhav Sounds good! It's great to know that you have some experience with emoji-regex.

I've used emoji-regex package earlier and it isn't full proof. It doesn't match many emojis such as shopping bag, chilly, mostly sunny, etc.

Well, we can always submit a pull request to improve it! Overall I'm usually a big fan of contributing to community packages to help keep our own repos a bit lighter and to benefit from community maintenance.

+1.

But in this case maybe it's not worth it. I wonder if those emoji are missing from their test suite for some reason?

As you rightly said might not be worth for this one. We could pick the regex and improve it? The regex itself is 13kb but the overall unpackaged size is 97kb. I am not sure of the reason these are missing from their test suite.

Which makes me think ... if we are going to maintain the emoji regex ourselves we should absolutely add some unit tests for it.

Yeah we should do that. My suggestion would be:

1. To pick all the emojis in Emoji.js and ensure that our regex matches each of them.
2. Some sample chats with Emojis in between and our function should pick these.

[mananjadhav]

@deetergp @roryabraham Should I then start with the PR?

[deetergp]

Yes, @mananjadhav, go for it 👍

[mallenexpensify]

@deetergp 'go for it' means @Jag96 should hire in Upwork, right?

[Jag96]

@mananjadhav I've invited you to the Upwork job

[mananjadhav]

Thanks @Jag96

[deetergp]

This one is in progress and pending review from @marcaaron, not overdue.

[botify]

🚀 Deployed to staging by @marcaaron in version: 1.0.97-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @francoisl in version: 1.0.98-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.0.98-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pulls/5039\n

If no regressions arise, payment will be issued on 2021-09-27. 🎊

[mountiny]

This message is a bug, caused by today's deploy and some weird GH API behaviour. Updated the title back to what it was 🙇

[mananjadhav]

@deetergp @Jag96 Are the payments also on hold due to n6?

[Jag96]

Thanks for the reminder @mananjadhav, paid + bonus!