Blocks of quoted text render incorrectly on mobile

[jboniface]

If you haven’t already, check out our contributing guidelines for onboarding!

---

View the job on Upwork here.

Platform - version:

iOS and Android, build 263

Action Performed (reproducible steps):

1. Type a sentence with code block formatting (single ticks) in the middle, like this:

This is a test to see how code renders in the middle of a sentence on mobile.

2. Notice that it renders strangely by either breaking the line or overflowing.

Expected Result:

It should render the same way it does here on GitHub.

This is a test to see how code renders in the middle of a sentence on mobile.

Actual Result:

The line either breaks or overflows where the code formatting starts/ends

Notes/Photos/Videos:

We've seen multiple results from this bug. Here are some examples:

[sakul-budhathoki]

PR #1099

[telesensdev]

I worked with this bug

[laurenreidexpensify]

@telesensdev can you clarify what the name you have registered in Upwork is? Thanks

[telesensdev]

@laurenreidexpensify upwork account - Eduard Rubin

[tugbadogan]

Hi @jboniface, is this task still available? It looks like there isn't any activity for a while.

[jboniface]

@tugbadogan we're not quite sure how to solve it optimally, and another contributor put up a PR that we weren't able to move forward with because it wasn't consistent across platforms. Do you have a proposal that would resolve this issue?

[mallenexpensify]

Reposted this on Upwork https://www.upwork.com/jobs/~01fc428a62f97f17a2
Please create new comments for proposals, even if you're already commented above

[mallenexpensify]

@sketchydroide assigning to you to review incoming proposals because you were picked via auto-assigner for the issue in the Expensify repo

[aliabbasmalik8]

@sketchydroide is it okay?
for ios

and for web

[sketchydroide]

@sketchydroide is it okay?
for ios

I think for iOS we are expect the text to be on the same line as the rest of the text. It's wrapping well, and going to the next line correctly, but it also should be on the same line of the rest of the text, not on a new line.
Web looks good

Does that make sense @aliabbasmalik8

[sketchydroide]

@aliabbasmalik8 Do you think you could do the changes as I described them?

[aliabbasmalik8]

@sketchydroide did not found a solution according to the changes you described above.
There is two solution

1. Blocks of quoted text render incorrectly on mobile #986 (comment)
2. inline text but without border and padding properties.

BLOCKER: Not found any way to assign border and padding properties to <Text> element without using <View> if you have an idea how to do this please let me know.

Thanks

[parasharrajat]

@sketchydroide I think this issue is hanging around for a long time. So I tried few techniques that could let us achieve the desired UI. I would like to work on this.

Problem

We(Including other contributors from the comments above) tried using a combination of Text & View tag to achieve the above UI but there are a couple of issues as follows:

1. Text is rendered as a block box but we want inline text.
2. In Another way, we can get the inline text but border and border-radius are not being rendered.

Solution

I had an idea of tokenizing the text. Then apply the style selectively. This is working well. I have made a small snap here.

1. we create one wrapper component which divides the text into tokens(words) divided based on word break. This component put the text tokens inline into a view and renders it.
2. We can then pass styles selectively to tokens and manage the border-radius for the first and last tokens.

[sketchydroide]

@parasharrajat I think that might work, would be happy to see a PR using this

[mallenexpensify]

Hired @parasharrajat in Upwork

[mallenexpensify]

This closed 3 days ago, waiting til 4/27 to ensure no regressions then paying

[mallenexpensify]

Paid 4/28 via Upwork. Thanks @parasharrajat

[parasharrajat]

@mallenexpensify but PR is awaiting merge #2527.