Blocks of `quoted` text render incorrectly on mobile

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.

1. 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:

[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.

[parasharrajat]

@mallenexpensify but PR is awaiting merge https://github.com/Expensify/Expensify.cash/pull/2527.