Bolded and Italics code does not render properly on mobile

[NicMendonca]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

Bold and italics are applied to the code block

Actual Result:

Bold and italics are not applied to the code block

Action Performed:

1. Send the following message on mobile

*`test`*
_`test`_

2. See how italics and bold are not applied to the code section
3. View the message on desktop / web
4. See how italics and bold are applied

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

Mobile, reproduced on both -
iOS
Android

Version Number: 1.0.2-74
Notes/Photos/Videos:

Bold / Strikethrough on mobile

Bold/ Strikethrough on desktop

Video: https://recordit.co/QtKls2EXDi

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/158825

View all open jobs on Upwork

Upwork job: https://www.upwork.com/jobs/~016d9851436c63f135

[parasharrajat]

@NicMendonca This is intended behavior and defined in the code.

---

Sorry. Misunderstood it. Please ignore the above.

[aliabbasmalik8]

@NicMendonca We can fix this by updating RenderHTML component like this. tested on IOS and WEB and it's working accordingly

and here is classesStyles that placed in webViewStyles object.

classesStyles: {
        em: {
            fontFamily: fontFamily.GTA_ITALIC,
            fontStyle: italic,
        },

        strong: {
            fontFamily: fontFamily.GTA_BOLD,
            fontWeight: fontWeightBold,
        },

    },

[0xthierry]

@NicMendonca

I spend a time debugging here and I found that in android we are not using the correct values.

When text must be italic, it is changed to normal.
When text must be 700 (bold), it is changed 600 (semibold).

That is why it is not showing correctly, you could see it below.

https://github.com/Expensify/Expensify.cash/blob/9efcc63e4eb9dd27fac35d7bfc92b3400554be0c/src/styles/fontWeight/bold/index.android.js#L3
https://github.com/Expensify/Expensify.cash/blob/9efcc63e4eb9dd27fac35d7bfc92b3400554be0c/src/styles/italic/index.android.js#L1

In the begging of the file, the @marcaaron explain why

Android has GTAmericaExp-Bold, but fontWeight: '700' will result in an incorrect font displaying on Android.

I changed to use bold and italic.

_

_

[parasharrajat]

@Thierrysantos LOL. This issue literally killed me. I graved out the react-native-render-html's code. What a absolutely waste of time.
Why italic = normal?????

Nice found. Great work. 🎉

[marcaaron]

In the screenshots the type is no longer monospaced ?

[0xthierry]

@marcaaron yeah, when using bold or italic the text isn't monospaced

[parasharrajat]

So we should load a monospaced italic font for fontstyle italic.

[marcaaron]

I think we want them to be the same on all platforms cc @shawnborton have you got the right font to use on hand ?

[parasharrajat]

GTAmericaExpMono-Rg.otf should have the italic and bold variant.

[0xthierry]

@Thierrysantos LOL. This issue literally killed me. I graved out the react-native-render-html's code. What a absolutely waste of time.

Yes, if I didn't find that, looking at the react-native-render-html code would be the next step 😂

[0xthierry]

GTAmericaExpMono-Rg.otf should have the italic and bold variant.

I try with that and have the same result 🤔

[parasharrajat]

I mean it should have the italic and bold-variant on the internet which we can use something line GTAmericaExpMono-Italic.otf.

[0xthierry]

Yeah, I found some variants here https://www.grillitype.com/typeface/gt-america