[Due for payment 2026-03-18] [$250] iOS - Compose box - Global create emoji is overlapping the message with markdown

[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.2.73-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #76576
Issue reported by: Applause - Internal Team

Action Performed:

1. Open Expensify app
2. Open any chat
3. Write a message with markdown
4. Add a new line
5. Add the ":global_create:" emoji in the second line
6. Send the message

Expected Result:

Message should be clearly visible when using global_create emoji

Actual Result:

Global_create emoji is overlapping the text with markdown

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

Bug7022018_1764968754512.PR76576iOS.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021997879542995363859
• Upwork Job ID: 1997879542995363859
• Last Price Increase: 2025-12-08
• Automatic offers:
• truph01 | Reviewer | 109818747

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

Proposal

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

Global create emoji is overlapping the message with markdown

What is the root cause of that problem?

1. When an emoji is on its own line, it is rendered without margin, unlike when it is displayed together with text.
2. However, on iOS we always treat emojis as being rendered inline with text, and we apply a negative marginTop value to reduce unnecessary white space.
   

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

   Lines 10 to 17 in 3c1691d

   	return isMedium ? (
   	<Text style={style}>
   	<View>
   	<Text style={[styles.emojisWithTextFontSizeAligned, isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>
   	</View>
   	</Text>
   	) : (
   	<Text style={[style, isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>

   
   As a result, the emoji overlaps the preceding markdown, especially with the Global_create emoji.

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

If the emoji is the last character in a comment, we will add a trailing space after it so that the emoji is always rendered inline with text.

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

Line 93 in 3c1691d

htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji ismedium>');

     htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji ismedium>');
+    htmlContent = Str.replaceAll(htmlContent, /<\/emoji>$/g, '</emoji> ');

What alternative solutions did you explore? (Optional)

N/A

[paulnjs]

Proposal

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

iOS - Compose box - Global create emoji is overlapping the message with markdown.

What is the root cause of that problem?

Messages containing custom emojis are rendered in:

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

Line 105 in 4c774c6

<RenderCommentHTML

The emojis themselves are rendered in:

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

Lines 10 to 18 in 4c774c6

	return isMedium ? (
	<Text style={style}>
	<View>
	<Text style={[styles.emojisWithTextFontSizeAligned, isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>
	</View>
	</Text>
	) : (
	<Text style={[style, isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>
	);

Currently, a negative top margin is always applied to the emoji, regardless of whether it's inline with text or displayed on a separate line. This causes the emoji to visually overlap with the line above, which leads to the rendering issue.

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

We should avoid applying the negative top margin when the emoji appears on its own line (i.e., not inline with other text).

1. Update EmojiWithTooltip to conditionally apply alignment styles based on a new oneline prop:

function EmojiWithTooltip({emojiCode, style = {}, isMedium = false, oneline = false}: EmojiWithTooltipProps) {
    const styles = useThemeStyles();
    const isCustomEmoji = emojiCode === '\uE100';
    if (oneline) {
        return <Text style={[styles.emojisWithTextFontSizeAligned, isCustomEmoji && styles.customEmojiFontAlignment]}>{emojiCode}</Text>;
    }

2. Update EmojiRenderer to pass the oneline prop if the emoji is rendered on a separate line:

        <EmojiWithTooltip
            oneline={'oneline' in tnode.attributes}
            ...
        />

3. Update TextCommentFragment to detect emojis on their own line and add the oneline attribute accordingly:

            const lines = htmlContent.split(/<br\s*\/?>/i);
            function isSingleEmojiLine(line: string) {
                const trimmed = line.replace(/<br\s*\/?>/gi, '').trim();
                return /^<emoji>.*<\/emoji>$/.test(trimmed);
            }
            const processedLines = lines.map((line) => {
                if (isSingleEmojiLine(line)) {
                    return line.replace('<emoji>', '<emoji ismedium oneline >');
                }
                return line.replace('<emoji>', '<emoji ismedium>');
            });

            htmlContent = processedLines.join('<br />');

What alternative solutions did you explore? (Optional)