[$8000] Android/iOS - Code blocks are overflowing the app border

[isagoico]

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

---

Issue is failing https://github.com/Expensify/App/pull/4624 (CC @parasharrajat)

Action Performed:

1. Navigate to a conversation in iOS or Android
2. Send a long message in a code block

Expected Result:

Code block should be displayed in the area of the conversation.

Actual Result:

Code block is partially visible because is overflowing the app border.

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.0.86-2

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @iwiznia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[OSBotify]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[parasharrajat]

@iwiznia even reverting https://github.com/Expensify/App/pull/4624 PR does not fix this issue. This issue is caused by upgrading the react-native-render-html. And I am tracking multiple issues caused by that here meliorence/react-native-render-html#514.

[parasharrajat]

I am investigating it.

[iwiznia]

Oh sorry about that, I think that this PR caused this then https://github.com/Expensify/App/pull/4047 cc @jsamr

[iwiznia]

Wait, I am confused, that PR was deployed a while ago, was this broken before and we did not notice?

[parasharrajat]

Yes. this is the list of issues that were caused by that upgrade.

1. https://github.com/Expensify/App/issues/4488.
2. https://github.com/Expensify/App/issues/4377 . (What is wrong with Github? URLs for this issue and link pasted have the same id) notice 4377.
3. Links were clickable from empty space. https://github.com/meliorence/react-native-render-html/issues/514
4. And this one.

It is just due to one reason that a wrapper node was removed in the new lib version for optimizations which I think should be reverted.

[parasharrajat]

Update, I have discussed this issue with the Lib owner and we are going to revert this change behind the flag which should fix the issue. It should be done by weekend.

[isagoico]

@johnmlee101 @parasharrajat Should this issue still be considered a deploy blocker?

Update: Just as a double check, I just retested this and it's still happening

[parasharrajat]

I think is happening on prod as well. so No deploy blocker.

Update:

1. After applying the latest patch from the lib, this specific issue is not fixed. The library has moved a long way from the earlier version.
2. I am still trying to find the best possible solution but currently, nothing seems to work.
3. Next planned thing is to check the diff between older and newer versions and find the root cause. If the fix is patchable, I will approach the lib maintainers otherwise try to solve it with combinations of settings.

[isagoico]

Confirmed this is also happening in prod too in iOS. Removing the deploy blocker label.

[parasharrajat]

Update: This is really giving me nuts. I tried a lot of things but still no luck.

Planned:

I will revert the code to the old version before the upgrade of RNRH and try to observe why it was working. Hoping this will help.

[johnmlee101]

Did you have a revert PR to link @parasharrajat ? Or any update here?

[johnmlee101]

Still on hold for N6

[johnmlee101]

No update, still on hold

[parasharrajat]

No update about the solution. But I ended with the conclusion that Using View inside the Text is not a good option Especially when you don't have control over the parent elements.

In this case, only words that extend beyond the width of the screen, will overflow.

At last, I will try to hack it but there are other priorities for me and this is yet on hold until N6.

[MelvinBot]

This issue has not been updated in over 15 days. @johnmlee101, @parasharrajat eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[johnmlee101]

Is this still reproducible?

[parasharrajat]

I think yes. But I haven't found any solution for it.

[johnmlee101]

Any update?

[parasharrajat]

Oh. This is a long-dead issue. I completely forgot about this. Sorry, I have tried many solutions to adjust the UI but using only styling does not seem to be a solution anymore. I will try to find some tricks but truly saying existing implementation for code blocks rendering is already tricky. We can reopen this for others if needed, It will be some time before I can spend time on this again.

[jsamr]

I am currently studying in details differences between CSS spec and React Native layout. Perhaps I will publish some material at some point; this morning I have been working on CSS inline formatting contexts VS React Native Text layout.

The issue you are encountering is due to a lack of specification regarding layout of inline elements in React Native. Its layout engine, Yoga, only attempts compliance with CSS flexible layout, but doesn't claim any support for CSS normal flow, which determines, among other things, how runs of text mixed with other inline elements should be displayed. Therefore, the Text element creates an undocumented layout that resembles to some extent CSS inline layout. But its implementation is had-hoc and doesn't check against any kind of specification that I know of. For this very reason, it is also very prone to platform specifics. I have started collecting a few facts about behavioral divergence:

CSS inline-level element	React Native (Text child of Text)	React Native (View child of Text)
Inline margins are preserved.	✘	✘
Inline paddings are preserved.	✘	✔
Block margins are ignored.	✔	✔
Block paddings are preserved.	✘	✘
Block paddings/borders overflow the linebox*.	n/a	n/a
Borders are preserved.	✘	✔
Child text-runs are aligned to linebox baseline.	✔	✘
Child text-runs can be fragmented**.	✔	✘

* Unless for elements with an inline-block display type.
** They can be broken to participate to different lineboxes.

[parasharrajat]

Awesome, I will keep eye on your blog.

[johnmlee101]

No update (?)

[johnmlee101]

Same ^

[johnmlee101]

None

[johnmlee101]

Where are we with this?

[johnmlee101]

Should I close this out?

[parasharrajat]

No, let's export this, Please add the external label. Hopefully, we can get some ideas. I will be auto-assigned as C+.

[melvin-bot[bot]]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.