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

[parasharrajat]

@bernhardoj Do we have any other solution to this problem?

[parasharrajat]

This looks like a duplicate issue of #14676.

[bernhardoj]

It was solved months ago, but it happens again.

[bfitzexpensify]

I agree that this is a duplicate of #14676

[bernhardoj]

@bfitzexpensify I wouldn't say it's a dupe because that issue is solved months ago, but this issue happens again, so we should fix it again.

[parasharrajat]

I agree with you but Expensify/react-native-live-markdown#591 is solving this issue at lib level.

[bernhardoj]

It's not a live markdown issue.

[parasharrajat]

Oh, correct. It was very confusing from the issue.

[parasharrajat]

@bfitzexpensify Could you please reopen this issue. Looks like it a valid issue. I misinterpreted the above PR. It is solving the issue on TextInput.

We are talking about sending messages here. It was solved in #14676 long back but it looks like the
but recently something broke it.

Can I be C+ on this issue given that I have already dug into this issue?