[Due for payment 2025-09-30] [$250] Chat - Broken icon shown instead of custom global create emoji in Reports and Merchant

[lanitochka17]

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.1.89-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #67030
Email or phone of affected tester (no customers): applausetester+dp275@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open App
2. Go to workspace chat
3. Type :global
4. Select global_create emoji
5. Copy the emoji
6. Submit an expense in the workspace chat (Paste the custom emoji in the Merchant name)
7. Open the expense report
8. Click report header > Title
9. Paste the custom emoji in the report title and save it
10. Click report header > Title

Expected Result:

Custom emoji should be well displayed across the app

Actual Result:

Custom emoji is brocken:

• in Merchant field on Expense preview page
• in Merchant field while editing it
• in Report details page in Title field
• in Report Title editing page

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6908750_1754425557001.1_06_PM_2025-08-05.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021953426238101718711
• Upwork Job ID: 1953426238101718711
• Last Price Increase: 2025-08-14

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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.

[lorretheboy]

Proposal

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

Chat - Broken icon shown instead of custom global create emoji in Reports and Merchant

What is the root cause of that problem?

The original code only applied proper emoji rendering when there was both text AND custom emoji

App/src/components/MenuItem.tsx

Lines 606 to 618 in b70d010

	const titleContainsTextAndCustomEmoji = containsCustomEmoji(title ?? '') && !containsOnlyCustomEmoji(title ?? '');
	if (title && titleContainsTextAndCustomEmoji) {
	return (
	<TextWithEmojiFragment
	message={convertToLTR(title) || ''}
	style={combinedTitleTextStyle}
	alignCustomEmoji
	/>
	);
	}
	return title ? convertToLTR(title) : '';

Missing style for emoji here (custom emoji font when the input contains custom emojis)

App/src/components/TextInput/BaseTextInput/implementation/index.native.tsx

Line 408 in 01181e7

]}

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Line 418 in 01181e7

styles.pointerEventsAuto,

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

Update to

        const titleContainsCustomEmoji = containsCustomEmoji(title ?? '');

        if (title && titleContainsCustomEmoji) {
            return (
                <TextWithEmojiFragment
                    message={convertToLTR(title) || ''}
                    style={combinedTitleTextStyle}
                    alignCustomEmoji
                />
            );
        }

Apply custom emoji font when the input contains custom emojis

containsCustomEmoji(value ?? defaultValue ?? '') && styles.customEmojiFont,

App/src/components/TextInput/BaseTextInput/implementation/index.native.tsx

Line 408 in 01181e7

]}

containsCustomEmoji(value ?? defaultValue ?? '') && styles.customEmojiFont,

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Line 418 in 01181e7

styles.pointerEventsAuto,

We can apply this approach to all other missing places if needed

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[bernhardoj]

Proposal

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

Broken global create emoji in merchant and report title field.

What is the root cause of that problem?

This doesn't happen anymore on the money request view, but it still happens on the text input. For merchant or report title text input, we use a normal text input, not a markdown text input. On native, we can't have multiple font families, so they look broken.

Also, I notice the emoji also broken on system message like this

That's because we render it with a simple text which doesn't apply the custom emoji font.

App/src/pages/home/report/ReportActionItemBasicMessage.tsx

Lines 12 to 17 in 028bd0f

	function ReportActionItemBasicMessage({message, children}: ReportActionItemBasicMessageProps) {
	const styles = useThemeStyles();
	return (
	<View>
	{!!message && <Text style={[styles.chatItemMessage, styles.colorMuted]}>{Str.htmlDecode(message)}</Text>}
	{children}

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

For the textinput issue, we can always use markdown text input instead of RNTextInput.

App/src/components/TextInput/BaseTextInput/implementations.ts

Lines 8 to 12 in 028bd0f

	const InputComponentMap = new Map<InputType, InputComponentType>([
	['default', RNTextInput],
	['mask', RNMaskedTextInput as InputComponentType],
	['markdown', RNMarkdownTextInput],
	]);

['default', RNMarkdownTextInput],

(I don't see the usage of mask)

But the problem with this is that now we can use markdown for input that doesn't allow it. To fix it, we can update the RNMarkdownTextInput to accept a new props, for example, onlyEmoji, then pass it to parseExpensiMarkWithShortMentions.

App/src/components/RNMarkdownTextInput.tsx

Line 57 in 028bd0f

return parseExpensiMarkWithShortMentions(text, mentionsSharedVal.get(), currentUserMentions);

Then, we also need to update parseExpensiMark to accept an options param. If onlyEmoji is true, then we can pass:

{filterRules: ['emoji']}

App/src/libs/ParsingUtils.ts

Line 60 in 028bd0f

const parsedRanges = parseExpensiMark(text);

This rule will be passed to the expensimark parser.
https://github.com/Expensify/react-native-live-markdown/blob/c5aeea4397e29012241f6e0aa934e11f75c36350/src/parseExpensiMark.ts#L31-L35

For the system message, we can update ReportActionItemBasicMessage

App/src/pages/home/report/ReportActionItemBasicMessage.tsx

Lines 12 to 19 in 028bd0f

	function ReportActionItemBasicMessage({message, children}: ReportActionItemBasicMessageProps) {
	const styles = useThemeStyles();
	return (
	<View>
	{!!message && <Text style={[styles.chatItemMessage, styles.colorMuted]}>{Str.htmlDecode(message)}</Text>}
	{children}
	</View>
	);

by following the existing pattern we had.

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 110 to 113 in 028bd0f

	const alternateTextContainsCustomEmojiWithText = useMemo(
	() => containsCustomEmojiUtils(optionItem?.alternateText) && !containsOnlyCustomEmoji(optionItem?.alternateText),
	[optionItem?.alternateText],
	);

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 314 to 322 in 028bd0f

	{alternateTextContainsCustomEmojiWithText ? (
	<TextWithEmojiFragment
	message={Parser.htmlToText(optionItem.alternateText)}
	style={[alternateTextStyle, styles.mh0]}
	alignCustomEmoji
	/>
	) : (
	Parser.htmlToText(optionItem.alternateText)
	)}

Or we can remove the usage of ReportActionItemBasicMessage for some system messages.

App/src/pages/home/report/PureReportActionItem.tsx

Lines 1003 to 1004 in 028bd0f

	} else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIED_EXPENSE) {
	children = <ReportActionItemBasicMessage message={modifiedExpenseMessage} />;

Then, return the message fragments here.

App/src/libs/ReportActionsUtils.ts

Lines 1785 to 1832 in 028bd0f

	function getReportActionMessageFragments(action: ReportAction): Message[] {
	if (isOldDotReportAction(action)) {
	const oldDotMessage = getMessageOfOldDotReportAction(action);
	const html = isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.SELECTED_FOR_RANDOM_AUDIT) ? Parser.replace(oldDotMessage) : oldDotMessage;
	return [{text: oldDotMessage, html: `<muted-text>${html}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.ROOM_CHANGE_LOG.UPDATE_ROOM_DESCRIPTION)) {
	const message = getUpdateRoomDescriptionMessage(action);
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.POLICY_CHANGE_LOG.UPDATE_DESCRIPTION)) {
	const message = getWorkspaceDescriptionUpdatedMessage(action);
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.REIMBURSED)) {
	const message = getReportActionMessageText(action);
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.RETRACTED)) {
	const message = getRetractedMessage();
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.REOPENED)) {
	const message = getReopenedMessage();
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.TRAVEL_UPDATE)) {
	const message = getTravelUpdateMessage(action);
	return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
	}
	if (isConciergeCategoryOptions(action)) {
	const message = getReportActionMessageText(action);
	return [{text: message, html: message, type: 'COMMENT'}];
	}
	const actionMessage = action.previousMessage ?? action.message;
	if (Array.isArray(actionMessage)) {
	return actionMessage.filter((item): item is Message => !!item);
	}
	return actionMessage ? [actionMessage] : [];
	}

if (isModifiedExpenseAction(action)) {
    const message = ModifiedExpenseMessage.getForReportAction({reportOrID: reportID, reportAction: action});
    return [{text: message, html: `<muted-text>${message}</muted-text>`, type: 'COMMENT'}];
}

With this approach, if the message contains emoji, then it will be rendered with HTML.

App/src/pages/home/report/comment/TextCommentFragment.tsx

Lines 75 to 105 in 028bd0f

	if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {
	const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
	const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
	let htmlContent = htmlWithDeletedTag;
	if (containsOnlyEmojis) {
	htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji islarge>');
	} else if (containsEmojis) {
	htmlContent = htmlWithDeletedTag;
	if (!htmlContent.includes('<emoji>')) {
	htmlContent = Parser.replace(htmlContent, {filterRules: ['emoji'], shouldEscapeText: false});
	}
	htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji ismedium>');
	}
	let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
	if (styleAsMuted) {
	htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
	}
	htmlWithTag = getHtmlWithAttachmentID(htmlWithTag, reportActionID);
	return (
	<RenderCommentHTML
	containsOnlyEmojis={containsOnlyEmojis}
	source={source}
	html={htmlWithTag}
	/>
	);
	}

But this approach requires lot of changes to cover all the system message.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

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

[melvin-bot]

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

[ishpaul777]

Thanks for your proposal all!

@lorretheboy as @bernhardoj mentions On native, we can't have multiple font families, so if we use customEmojiFont there will be regression when both text and emoji exists

---

@bernhardoj lets me know if i understand your proposed solution correctly, we will default the Textinput to use RNMarkdownTextInput but we will still only support emojis in RNMarkdownTextInput, using the prop onlyEmoji which will be true for when default type input then we need to make changes in parseExpensiMark to support the rule. is my understanding correct? if yes can you mention what code changes you propose in `parseExpensiMark?

This doesn't happen anymore on the money request view

for me its not happening on IOS but still happening on android, can you please check and add propose changes for fix?

the emoji also broken on system message like this

i can reproduce the issue and agree with using existing approach to use TextWithEmojiFragment when containsCustomEmojiUtils is true, unless you have any reason you think the later approach is better ?

[lorretheboy]

Hi @ishpaul777, thank you for your review.

@lorretheboy as @bernhardoj mentions On native, we can't have multiple font families, so if we use customEmojiFont there will be regression when both text and emoji exists

Could you please specify for about this as I have tested on native, it looks fine without any regression? Thank you