Chat - Double strike through is applied for emojis

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Redmi note 10s Android 13
App Component: Chat Report View

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open a chat
3. Enter ~😗~
4. Send the message

Expected Result:

Double strike through must not be applied for emojis.

Actual Result:

Double strike through is applied for emojis.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6702931_1735302419927.screenrecorder-2024-12-27-08-47-23-706.mp4

View all open jobs on GitHub

[melvin-bot]

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

[Shahidullah-Muffakir]

It will be fixed by this PR Expensify/react-native-live-markdown#591

[bernhardoj]

Proposal

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

Double strike-through is seen on emoji.

What is the root cause of that problem?

We previously prevented the emoji from being formatted in #40617. The strikethrough style is applied from the parent (<del>) and the emoji itself. In that PR, we apply an inline-flex style so the emoji won't be affected by the parent strikethrough style.

But in #47547, we changed it to inline because selecting the text with emoji won't have the same height.

Compared to when using inline.

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

I think it's more important to prevent the emoji from being formatted compared to making sure the selection height to be same and it's barely noticeable too, so I suggest to use inline-flex back and add `textDecorationLine: 'none' to override the text decoration style on the emoji itself.

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

Lines 6 to 9 in e94df0f

	const emojiDefaultStyles: EmojiDefaultStyles = {
	...FontUtils.fontFamily.platform.EXP_NEUE,
	...display.dInline,
	};

const emojiDefaultStyles: EmojiDefaultStyles = {
    ...FontUtils.fontFamily.platform.EXP_NEUE,
    ...display.dInlineFlex,
    textDecorationLine: 'none',
};

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

N/A