App: Blocks of `quoted` text render incorrectly on mobile

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

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

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

@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 assigning to you to review incoming proposals because you were picked via auto-assigner for the issue in the Expensify repo

@laurenreidexpensify upwork account - Eduard Rubin