Can not add child that doesn't have YogaNode to a parent

vishalchhodwani1992 commented 4 years ago

Hello Conor,

I got an error while I am using react-native-syntax-highlighter inside react-native-render-html.

I got this error:

Screenshot_1573818279

Here is my code

import React from 'react';
import { View } from 'react-native';
import Html from 'react-native-render-html';
import SyntaxHighlighter from 'react-native-syntax-highlighter';

const contentTest = `
                    <li>
                        <h3>Hello</h3>
                       <pre class="brush: xml; title: ; notranslate" title="">
                           &lt;html&gt;

                           &lt;head&gt;
                           &lt;/head&gt;

                           &lt;body&gt;
                           &lt;/body&gt;

                           &lt;/html&gt;
                       </pre>  
                    </li>`

export default class SyntaxHighlighterTest extends React.Component{

    render(){ 
        return (
            <View style={{ flex: 1, flexDirection: 'column' }}>
                <Html
                    html={contentTest}
                    renderers={{
                    pre: (node)=> {                    
                        return <SyntaxHighlighter>{contentTest}</SyntaxHighlighter>             
                        }
                    }}
                />
            </View>
        );
    }
}

I found that the content I am passing has an issue

If I am using this content without <h3> tag then it is working fine:

Working

const contentTest = `
                    <li>
                       <pre class="brush: xml; title: ; notranslate" title="">
                           &lt;html&gt;

                           &lt;head&gt;
                           &lt;/head&gt;

                           &lt;body&gt;
                           &lt;/body&gt;

                           &lt;/html&gt;
                       </pre>  
                    </li>`

Screenshot_1573819513

Not Working

const contentTest = `
                    <li>
                       <h3> Hello </h3>
                       <pre class="brush: xml; title: ; notranslate" title="">
                           &lt;html&gt;

                           &lt;head&gt;
                           &lt;/head&gt;

                           &lt;body&gt;
                           &lt;/body&gt;

                           &lt;/html&gt;
                       </pre>  
                    </li>`

So `SyntaxHighlighter` takes content that has only one child in parent tag.

Note: It is working when I am using this outside of react-native-render-html, but I want to use within html renderer.

What will be the best practice to resolve this issue ?

Thank you

vishalchhodwani1992 commented 4 years ago

does anyone have solution for this? still I am not able to do this.

jim-toth commented 4 years ago

I ran into this recently as well. I got around it by specifying Text for both PreTag and CodeTag properties. Like this:

<NativeSyntaxHighlighter
  language={language}
  PreTag={Text}
  CodeTag={Text}>
    {code}
</NativeSyntaxHighlighter>

conorhastings / react-native-syntax-highlighter