React-native-render-html: Android issue: View within Text

[aiavci]

Getting Nesting of <View> within <Text> is not supported on Android. error when trying to use custom renderer for iframe.

Note: You must add iframe to HTMLUtils.js in order to allow it to render.

Sample renderer:
const renderers = { iframe: (htmlAttribs, children, passProps) => { return (<View><Text>Video here</Text></View>); } }

[Exilz]

Hi,
this is an expected behavior on android. You're not able to render a <View> inside a <Text> on Android, sadly.
I don't think this is ever going to be fixed by the react-native's team as it seems to be a restriction from the OS itself.

However, there used to be a similar issue regarding rendering <Image> inside <Text> and this has been fixed a couple of releases ago. I had to wrote some code to move images outside of texts so that the majority of basic HTML would render on Android too.

I might change this code, which shouldn't be needed anymore, to be able to render views just at the end of the <Text> they are in.

This would be a rather tricky task, but it would improve the plugin greatly.

[Exilz]

Hi,
I've worked on this issue a bit more. I've refactored the code as I mentioned earlier.

Images are now working properly, react-native improved greatly on this regard, Android is now behaving like iOS with images.

Regarding other kind of views, I'm providing more default renderers to handle the most common cases and I'm making sure block elements are rendering as they should.

This will ship with the next release.

By the way, I added a default renderer for iframes 😉 It's working pretty well with YouTube videos or google maps.

[Exilz]

The new parser has shipped with 3.0.0 and you should not encounter any <Text> nested within <View>.
Feel free to re-open an issue if you see this problem happening again.