Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tag <cite> Breaks HTML component

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Comments:7

Top GitHub Comments

2reactions

jsamrcommented, Nov 26, 2020

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

0reactions

gabriel-tentaculocommented, Oct 30, 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 <Text key={passProps.key}>{children}</Text>; },

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?