[$250] Follow up improvements for inline code blocks on native devices

[shawnborton]

Now that we merged #56924, we want to make sure we follow up and address a few things:

• let's investigate how we can get the border style and border radius back into the inline code blocks on native devices
• let's figure out why emojis are adding unnecessary height to the inline code blocks, which causes them to look like they have too much padding on the top

cc @fabioh8010

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021895170990516924112
• Upwork Job ID: 1895170990516924112
• Last Price Increase: 2025-02-27
• Automatic offers:
• allgandalf | Contributor | 106308048

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[melvin-bot]

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

[shawnborton]

Note that this issue is a continuation of #53458 and I'd like to assign it to @fabioh8010

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[shawnborton]

Going to assign this one to @allgandalf as a continuation of the other issue as well.

[fabioh8010]

Hi, I'm Fábio from Callstack - expert agency - and I would like to work on this issue!

[fabioh8010]

I'm going to start working on this next week, @shawnborton I think we can make this Weekly.

[fabioh8010]

let's figure out why emojis are adding unnecessary height to the inline code blocks, which causes them to look like they have too much padding on the top

I assume this will be fixed together with the native fix, but let's see

[fabioh8010]

Updates:

• Started working on this today.
• I'm going to clone latest react-native version and re-create this example app here as my starting point like I did it in the past.
• After it will going to explore solutions again using the app as test environment.

[fabioh8010]

Updates:

• Re-created the example app with latest RN version and problem still exists, and it looks like it's worse now in iOS.
• The misalignment seems to happen even just with a empty View inside a Text. The last 3 examples with the green background are a replication of our previous WrappedText component which allows us to have the inline code blocks with multiple lines.
• I will use this app as reference to find for the solution.

[shawnborton]

Awesome, thanks for digging into this 👍

[Christinadobrzyn]

Amazing! Thank you for the great updates @fabioh8010!

[fabioh8010]

Updates:

• Not much updates from iOS side, but from Android side @kubabutkiewicz was able to find a fix for that platform, but we are still testing it because some scenarios are having issues.
• We also are still thinking if we should create a prop in RN to apply this fix, because seems like the behavior is expected according to RN code (at least for Android)
• @kubabutkiewicz will help me and take over my side too as I'm pretty busy with other high priority stuff, so he will look iOS side now too.

[kubabutkiewicz]

Hi leaving an update on that issue:

• I managed to mostly fix it on android (there are needed still some adjustments)
• Currently working on iOS to get it to the state same as iOS

[melvin-bot]

@fabioh8010 @Christinadobrzyn @allgandalf this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[allgandalf]

@kubabutkiewicz What's the plan for this week?

[kubabutkiewicz]

Hi,
Currently working on iOS fixes, I am mostly in the state that ios is looking like android|
We prepared a testing playground in RN tester and this is how it looks before changes
iOS:

Android:

And this is how it looks after changes
iOS

Android:

I will need to still do some adjustments and then I will go to extensive testing phase

[shawnborton]

Exciting, love where this is heading!

[allgandalf]

What's up for this week?

[kubabutkiewicz]

Hey, I was dragged into other issue which have higher priority, I will get back to that issue after finishing it

[Christinadobrzyn]

Hi @kubabutkiewicz just checking to see how everything is going with the other project and a timeline on this one. thanks!

[kubabutkiewicz]

Hi!
Sorry I am right now involved into this issue #59913 which is a critical issue.
After finish it I will come back to this issue.
On our issue I have fixed issue on android and mostly on ios. Then I will need to file an issue in react-native repo and wait for the input from rn maintainers. But in the meantime we could add a patch in our repo.

[allgandalf]

yeah, a patch sounds good to me!

[kubabutkiewicz]

Hi, wanted to inform that I will be off for next 2 weeks. Will be back to this issue then

[allgandalf]

thanks for the update!, @Christinadobrzyn maybe put this to monthly for now?

[allgandalf]

@kubabutkiewicz are you back to work on this?

[fabioh8010]

@allgandalf Kuba is expected to be back on May 12th.

[kubabutkiewicz]

Hi, I am back sooner and will go back to work on this issue 😄

[kubabutkiewicz]

Hi update on that:
I am still working on the fixing few examples in our playground which causing troubles. Then I will need to test it on every possible way, like on new arch/old arch etc.

[allgandalf]

Welcome back @kubabutkiewicz , thanks for the update!

[allgandalf]

@Christinadobrzyn lets bump this back to weekly

[kubabutkiewicz]

Hey, update on that I patched our app with the changes to react native and results seems promising (especially on ios)

There is still work to do as last gap in the code block seems inconsistent with previous one and something weird is happening on android because sometimes the codeblocks are ovelapping with author label. Will continue next week.

[shawnborton]

Oh that's an exciting update, thanks!

[allgandalf]

wowww, excited for what will follow this week!

[Christinadobrzyn]

Just a heads up that I'm going to be ooo May 21st - May 27th. Back on the 28th.

I'm not going to assign another BZ teammate but if you need someone while I'm gone, please remove and add the Bug label.

[allgandalf]

@kubabutkiewicz what are the exiting updates for this week?