[HOLD for payment 2024-12-19] [$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
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6679718_1732859883472.bandicam_2024-11-29_06-53-25-664.mp4

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: @Christinadobrzyn

[melvin-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.

App/src/styles/index.ts

Lines 2202 to 2208 in 1a6f48e

	textInputCompose: addOutlineWidth(
	theme,
	{
	backgroundColor: theme.componentBG,
	borderColor: theme.border,
	color: theme.text,
	...FontUtils.fontFamily.platform.EXP_NEUE,

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.

App/src/styles/index.ts

Lines 235 to 238 in 1a6f48e

	baseFontStyle: {
	color: theme.text,
	fontSize: variables.fontSizeNormal,
	...FontUtils.fontFamily.platform.EXP_NEUE,

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.

App/src/components/EmojiWithTooltip/index.native.tsx

Lines 4 to 6 in 1a6f48e

	function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) {
	return <Text style={style}>{emojiCode}</Text>;
	}

App/src/components/Text.tsx

Lines 31 to 39 in 1a6f48e

	function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
	const theme = useTheme();
	const customStyle = useContext(CustomStylesForChildrenContext);
	const componentStyle: TextStyle = {
	color: color ?? theme.text,
	fontSize,
	textAlign,
	...FontUtils.fontFamily.platform[family],

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.

App/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx

Lines 20 to 23 in 1a6f48e

	return (
	<EmojiWithTooltip
	style={[style, styles.cursorDefault, styles.emojiDefaultStyles]}
	emojiCode={'data' in tnode ? tnode.data : ''}

App/src/styles/utils/emojiDefaultStyles/index.ts

Lines 6 to 10 in 1a6f48e

	const emojiDefaultStyles: EmojiDefaultStyles = {
	fontStyle: 'normal',
	fontWeight: FontUtils.fontWeight.normal,
	...display.dInline,
	};

App/src/styles/utils/emojiDefaultStyles/index.native.ts

Lines 4 to 8 in 1a6f48e

	const emojiDefaultStyles: EmojiDefaultStyles = {
	fontStyle: 'normal',
	fontWeight: FontUtils.fontWeight.normal,
	textDecorationLine: 'none',
	};

...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?

2024-12-02_14-47-26.mp4

[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]

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

[melvin-bot]

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