Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
vishalchhodwani1992 opened this issue Nov 15, 2019 · 2 comments
Open

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

vishalchhodwani1992 opened this issue Nov 15, 2019 · 2 comments

Comments

@vishalchhodwani1992
Copy link

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
Copy link
Author

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

@jim-toth
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jim-toth @vishalchhodwani1992