App: Bolded and Italics code does not render properly on mobile

@Luke9389 The PR is open 🎉 https://github.com/Expensify/Expensify.cash/pull/2648

@shawnborton Yes I think that’s correct.

@aliabbasmalik8 I’m liking the direction you’re heading, but you’ll need to verify that your proposed solution works for iOS AND Android (with screenshots). If you can do that, please resubmit a proposal with those included, and a summary of exactly what you’re going to change, links to those files, and any resources you’ll need (like a new font for example). Please use links to our actual codebase (example), and markdown code blocks rather than screenshots of your IDE. Generally speaking, I’m looking for a very clean proposal that has everything we need, all in one comment.

@thierrysantos I’m not quite following your last two comments, but I ask that you please only comment when you have a solution ready and have a proposal to resubmit. Posting investigation steps is making this thread noisy and hard to follow.

@thierrysantos just sent over the the offer in Upwork. Thanks!

Nice, I sent the proposal on UpWork

Ok, @thierrysantos you can go ahead and start the PR. Thanks for all your patience here.

@aliabbasmalik8 I appreciate the effort you put into this thread, but I’ve decided not to move forward with your proposal. The main reason for this is that after I asked for a clear, complete, and well laid out proposal from both of you, Thierry was the one to provide that first. I do hope that you continue to make proposals with us, but in the future, I think you should focus less on speed, and more on making sure your proposal is clear and complete. The revised version you did was good, had you posted that much sooner this would have gone the other way. Thank you again very much for your time and efforts.

@Luke9389 I’m looking a way here and I give a feedback for you

Hello @Luke9389 ,

I have a proposal right now, after a lot of time debugging we need to add this new fonts and rename it based on PostScript name.

We need to add this fonts here

https://github.com/Expensify/Expensify.cash/blob/d27cf29a5579cbaab20fd4c29ad92140f55580e8/src/styles/fontFamily/index.js#L3

and here

https://github.com/Expensify/Expensify.cash/blob/d27cf29a5579cbaab20fd4c29ad92140f55580e8/src/components/RenderHTML.js#L20

Also we need to change the strong and em to be:

        em: {
            fontFamily: fontFamily.GTA_ITALIC,
            fontStyle: 'italic',
        },
        
         strong: {
            fontFamily: fontFamily.GTA_BOLD,
            fontWeight: 'bold',
        },

And in the <CodeRenderer /> we need to load the font variant dynamically (only for android), because react-native in android don’t work well with fontWeight and fontStyle.

https://github.com/Expensify/Expensify.cash/blob/d27cf29a5579cbaab20fd4c29ad92140f55580e8/src/components/RenderHTML.js#L62

The code below is not the final version, and it is just to show the solution, I will improve it

    if (Platform.OS === 'android') {
        const isItalic = textStyle.fontStyle === 'italic';
        const isBold = textStyle.fontWeight === 'bold' || Number(textStyle.fontWeight) >= 700;
        const isItalicAndBold = isItalic && isBold;
       
       // The better solution to fix that is use the correct font variant instead fontWeight or fontStyle
       
        const fontName = isItalicAndBold
            ? fontFamily.MONOSPACE_BOLD_ITALIC
            : isItalic
                ? fontFamily.MONOSPACE_ITALIC
                : isBold ? fontFamily.MONOSPACE_BOLD : fontFamily.MONOSPACE;
        customStyle = {
            ...customStyle,
            fontFamily: fontName,
            fontStyle: undefined, // We need to do it, because react-native-render-html will send it as 'italic' and will broken in android
            fontWeight: undefined, // We need to do it, because react-native-render-html will send it as 'bold' and will broken in android
    }

That is the final result:

Here are the font files we need for native implementation: GTAMono.zip

As I mentioned, we’ll need to implement these on Web-E as well as I am pretty sure desktop/web on Expensfiy.cash just grabs font URLs from the www.expensify.com web app. @Luke9389 is that something you would like to take care of? I can help you implement them as well.

Sorry, if I’m not being clear enough, but what I’m suggesting here (https://github.com/Expensify/Expensify.cash/issues/2491#issuecomment-824322482 and https://github.com/Expensify/Expensify.cash/issues/2491#issuecomment-824237403) is to have other variants for monospace font, such as bold and italics @Luke9389

Just to make sure I understand this correctly, it sounds like we need our monospaced font in regular italic, bold, and bold italic. Does that sound right? We can provide the font files to implement these natively, and I think we’ll also have to make sure these fonts are added to our Expensify.com web application so we can serve them up for desktop/web.

I’m thinking here and probably the problem is related to font variant.

-> Without font monospace

When we are using monospace(regular), when the text is rendered as bold it doesn’t occurs.

Hello @thierrysantos! I’ll be reviewing your proposal on this issue. The description of the issue does include both Android and iOS, and I see that you’ve cracked part of the problem on Android. Can you account for why this is happening on iOS, and what you’d change to fix it?

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

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