3 ms·
I personally implemented web-compatible rich text using TextInput and I will share some of my knowledge here which hopefully fills the gaps for you. 1. Most us
by gloosx 4y ago
I personally implemented web-compatible rich text using TextInput and I will share some of my knowledge here which hopefully fills the gaps for you.
1. Most useful resource for creating this feature would be official TextInput doc [1], no need for googling.
2. Unlike Web, it is possible to nest <Text> elements inside <TextInput>, which is what you need to use for styling your blocks.
3. So finally, you will need your Rich State, and you need a Parser function, which will translate this Rich State into a collection of <Text> elements representing your blocks.
There is a lot of nuance still, say, Image elements cant be nested directly into TextInput, so you need to generate a spacer Text block where you will host your image. Also it requires some bits of excellence to work out the selection and caret logic correctly, but overall – it's not that big of a task, I would do it in few days
[1] https://reactnative.dev/docs/textinput https://reactnative.dev/docs/textinput
- jitl 4y agoYou do need to Google because the docs never mention that TsxtInput can contain Text!
- gloosx 4y agoIn fact, never otherwise is mentioned, so generally you should feel free to experiment nesting everything inside anything unless otherwise mentioned explicitly. Of course you will discover that TextInput is only rendering Text elements this way, surely it's not documented well enough, although you should 100% of the time understand it's not the web and, with many many familiarities, things still work different here