[$250] Web - Chat - Web - "stars" emoji changes to a different one after sending it

[IuliiaHerets]

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

---

Version Number: 9.0.68-2 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with any account
3. Open any 1:1 DM
4. Click inside the composer
5. Type ":star"
6. Select the "stars" emoji
7. Send the message

Expected Result:

The same emoji should be seen in the composer and in the chat.

Actual Result:

"stars" emoji changes to a different one after sending it.

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [x] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/ed7c4ca8-3b5c-4a29-8cec-2deb7cfd8e93

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864084924595239388
• Upwork Job ID: 1864084924595239388
• Last Price Increase: 2024-12-03

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot[bot]]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[bernhardoj]

Proposal

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

Stars emoji is shown differently between composer and message.

What is the root cause of that problem?

This issue is becaused the emoji is not rendered with the same font family. For the composer, we use the EXP_NEUE and the font family look like this. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/index.ts#L2202-L2208

For the emoji, it's rendered by react-native-render-html and we also use the EXP_NEUE, but the font family look like this. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/index.ts#L235-L238

Notice that it doesn't have any fallback font for the emoji, thus the emoji is rendered differently. This happens becaue react-native-render-html only select the first available font.

If we remove the fontFamily style from baseFontStyle, then the emoji fontFamily will have the fallback font for the emoji. That's because we use a custom renderer for the emoji and use our custom Text component which has a defaul font family style. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/components/EmojiWithTooltip/index.native.tsx#L4-L6 https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/components/Text.tsx#L31-L39

But not all textual tag has a custom renderer.

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

Since all emoji is rendered with EmojiRenderer, we can apply the font family manually on that component, specifically updating the emojiDefaultStyles. https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx#L20-L23

https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/utils/emojiDefaultStyles/index.ts#L6-L10 https://github.com/Expensify/App/blob/1a6f48ea0e2139a82d0a96578badbf3f761bcf00/src/styles/utils/emojiDefaultStyles/index.native.ts#L4-L8

...FontUtils.fontFamily.platform.EXP_NEUE,

[Christinadobrzyn]

I'm not able to reproduce this. @bernhardoj are you still seeing this issue? what 'star' emoji are you choosing? It seems like the emoji in the OP isn't one that is available in my Chrome.... maybe that's the issue?

https://github.com/user-attachments/assets/0894829b-5851-4ded-a865-c69979a4bd75

[bernhardoj]

It's the :stars: emoji (the 3rd emoji from your video). It's only reproducible on Windows. The issue happens on the live markdown too if we use some markdown, such as bold, italic, etc.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[Christinadobrzyn]

Thanks @bernhardoj! Adding external so @sobitneupane can review your proposal.