[HOLD for payment 2023-06-21] [$1000] Web - Reaction Emoji- Some emoji as reactions are displayed incorrectly

[kbecciv]

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

---

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Navigate to a conversation that already has some messages.
3. Hover over any of the suggested emojis.
4. Verify there's a button to select an emoji to react the message.
5. Click on the button.
6. Verify the emoji picker opens.
7. Select emoji: ☺️ or 🛗 or any flag.

Expected Result:

Each selected emoji should be displayed.

Actual Result:

Some emoji as reactions are displayed incorrectly.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• Web / Chrome
• MacOS / Desktop

Version Number: 1.3.11.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01149274d6e399baa4
• Upwork Job ID: 1656821076429647872
• Last Price Increase: 2023-05-24

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[therealsujitk]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The correct emoji is being displayed here, however the issue is it's not being displayed properly.

What is the root cause of that problem?

The cause here is very simple, the right font-family is not being used for displaying the emojis in reactions, this is required for web browsers.

What changes do you think we should make in order to solve the problem?

To prevent this from happening in future, we could add the emoji font to all the font families in /src/styles/fontFamily/index.js as suggested by @rushatgabhane.

const fontFamily = {
    EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
    EXP_NEUE_BOLD: bold,
    EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
    EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
    EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
    SYSTEM: 'System',
    MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
    MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
    MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
    MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
};

Screencast.from.07-05-23.03.37.52.PM.IST.webm

What alternative solutions did you explore? (Optional)

The correct font-family should be added to the inline styles of the reaction bubble and the tooltip text.

emojiReactionBubbleText: {
    fontFamily: fontFamily.EMOJI_TEXT_FONT,   // This was missing
    textAlignVertical: 'center',
},

...

reactionEmojiTitle: {
    fontFamily: fontFamily.EMOJI_TEXT_FONT,   // This was missing
    fontSize: variables.iconSizeLarge,
    lineHeight: variables.iconSizeXLarge,
},

[mallenexpensify]

I'm unable to reproduce, the reaction emoji looks correct/accurate. @kbecciv @therealsujitk is there something I'm not doing correctly? I'm on Mac - Chrome, latest staging instance.

@kbecciv can you please add a screen image or video of what you're seeing to the OP?

[therealsujitk]

@mallenexpensify I believe it has to do with the emoji's available in system fonts, do you have a windows or linux PC/VM you can test this on? I tested it on Ubuntu 22.04. Since the current font family doesn't take care of emojis, it defaults/falls-back to the system font. In your case on mac those emoijs happen to be available.

[mallenexpensify]

ah... that makes sense. Thanks @therealsujitk .

I was able to test, is this what you're seeing?

I wonder if this is more of an issue with all emoji and how they're displayed differently. I'm pretty sure we've discussed them before, might have to do some digging

[therealsujitk]

@mallenexpensify yup, and to fix this we simply have to set the font family as mentioned in my proposal.

Also, yeah it was probably discussed before as it is also mention in the comments of your code here. I'm guessing you guys just forgot to apply it to the reactions.

App/src/styles/fontFamily/emoji/index.js

Lines 1 to 5 in 45c3212

	// In windows and ubuntu, we need these system fonts for emojis to work properly
	// otherwise few of them will appear as black and white
	const emojiFont = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
	export default emojiFont;

[therealsujitk]

I found another similar issue, look at how the emoji is displayed in the message under Chats on the left panel. This should also be fixed in the same way.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01149274d6e399baa4