Need help with nested markup about react-native-render-html HOT 5 CLOSED

Hi,
this is kind of expected. A huge problem with rendering HTML with native components is wrapping View inside Text.
Since <img> is a "block" element, the wrapper around your <p> has to be one too to prevent rendering a View without height and width inside a Text, which would make react-native crash.
These View wrappers rendered one after the other cause the line breaks.

A nice improvement to the renderer would be to flag some images that shuld be rendered inline, but sadly, until react-native improves, there is no way to render the HTML the way you'd like without changing your markup and adding some kind of prop to render your images inline.

I hope this enlightens you !

from react-native-render-html.

Oh I see now! I've managed to get it to look as I wanted tho. I just added flexDirection: 'row' and flexWrap: 'wrap' to the wrapping views and they r inline now.
Thanks for the tips and for this great package. Been very helpfull.

Thanks J.

from react-native-render-html.

I'm happy to see you've found a solution 😄 . The only problem is that we're relying on styling that wouldn't be needed on a browser, but heh, good enough I guess ¯_(ツ)_/¯

from react-native-render-html.

Ye that's true. I've now tried with different markups (that have different nested tags) and its working, so I guess its good for now.

from react-native-render-html.

The problem with flexDirection: 'row' + flexWrap: 'wrap' is that when you have too many text before or after each image, the <Text> box would wrap the text as well, making it unreadable. OP's example included very little text which is why it worked. Mine has more text, and I'm still trying to find a workaround... anybody has any suggestions?

from react-native-render-html.