React-native-render-html: Tag <cite> Breaks HTML component

Created on 27 Oct 2020 · 7Comments · Source: meliorence/react-native-render-html

I'm on version 4.2.2-beta.2 and if you pass a paragraph in the follwing format
<p><cite>"He said hello"</cite></p>
the whole things breaks on Android, saying that old Yoganode problem like the link below shows on S.O.
https://stackoverflow.com/questions/46605376/react-native-cannot-add-a-child-that-doesnt-have-a-yoganode-or-parent-node

Here is a snippet for a component that you can create to reproduce, the HTML variable content is the paragraph code above
The renderer is not an issue in the case, I tested and I can provide if you want to check, but I tested this extensively and nailed it down to the tag

Is there a workaround for this? I'm going to fix this case by manually removing the unsuported tag with string.replace
Also, would be great to know about more compatibility restrictions like this case of mine.

return ( <View style={{ paddingTop: 16 }}> <HTML html={html} renderers={renderers} onLinkPress={onLinkPress} tagsStyles={tagsStyles} customWrapper={(content) => { return <Text textBreakStrategy="simple">{content}</Text>; }} /> </View> );
PS: sorry about the indentation above, not sure why it did not work.

bug

Source

gabriel-tentaculo

Most helpful comment

This issue has been fixed in the Foundry release. Try it out now! See #430 for instructions.

jsamr on 26 Nov 2020

❤1 👍1

All 7 comments

@gabriel-tentaculo Next versions will be much better regarding this kind of issue:

We will document an exhaustive list of supported tags;
We will warn the user of unsupported tags, unless he provides a list of stripped tags or chooses to remove warnings altogether.

I would need a full reproduction to investigate your issue more closely. I tried the following code, and it didn't crash:

import * as React from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import HTML from 'react-native-render-html';

const html = '<p><cite>"He said hello"</cite></p>';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <HTML html={html} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
});

Note: Latest version is 4.2.4, but I don't think that would make a difference.

jsamr on 27 Oct 2020

@gabriel-tentaculo In the meantime, you can create a block custom renderer for cite tag.

jsamr on 28 Oct 2020

Hi @jsamr thank you for the fast response and the suggestion to use the custom render, it actually makes a lot of sense to use that approach, but I wonder what is it that I would have to fix to make that YogaNode error go away since I could not see any output on that page because the page component itself (parent component to the HTML component) did not render.
Do you have any suggestion maybe for a common case when custom tags are used and there is no custom render to display it?

Also, when I get back to fixing this during this week, I'll get more details for you to reproduce and I'll also try the latest version...

gabriel-tentaculo on 28 Oct 2020

Quick update on this, updating from ^4.2.2-beta.2 to 4.2.4 did not solve the issue.
I'll get back when I have more details

gabriel-tentaculo on 30 Oct 2020

@gabriel-tentaculo I'll be happy to take a look when you find the time for a repro :-)

jsamr on 30 Oct 2020

Sure thing @jsamr
In the meantime, more feedback and a question for you.
So, I was not able to make a custom renderer for this cite tag to start working.
Since I did not figure out a way to view what exactly is going to be the output of the html that contains that tag ( cite is actually nested in a h3 tag in this context) I could not guess what has to be done to create the custom renderer... I tried wrapping the children of the cite tag in a text component and also in a view but the error is the same

cite: (htmlAttribs, children, convertedCSSStyles, passProps) => {
return ;
},

Now to my question,
I have tried also using IGNORED_TAGS but what happened in this case was that the entire paragraph where the tag is got removed or if it did render I could not see it.
Whats the intended behaviour for the ignored tags?

gabriel-tentaculo on 30 Oct 2020

This issue has been fixed in the Foundry release. Try it out now! See #430 for instructions.

jsamr on 26 Nov 2020

❤1 👍1

Was this page helpful?

0 / 5 - 0 ratings