cannot add a child that doesn’t have a yoganode – React Native Error

Total
0
Shares

As the error (cannot add a child that doesn’t have a yoganode) indicates, there is some node which is not a valid element. This is the problem but could arise due to many things. For example,

  • There is extra < before or after node.
  • The node itself is invalid like <view> or <VIEW>.
  • You are using comments in wrong place.

Check out this code –

return (
      <View style={{flex: 1}}>
        // This comment is not a valid node.
        <Text>Captain America</Text>
      </View>
);

Since we are using comment inside return function, React native will give error of invalid yoganode. This is because it’s not within an expression. return function expects to return a JSX. If you want to add a comment, you need to include it within braces {}. But, there should always be a single parent enclosing the nodes.

This code will give error –

return (
      {/* This comment is not a valid node. */}
      <View style={{flex: 1}}>
        <Text>Captain America</Text>
      </View>
);

The correct code is –

return (
   <>  
      {/* This comment is not a valid node. */}
      <View style={{flex: 1}}>
        <Text>Captain America</Text>
      </View>
   </>
);

    Tweet this to help others

Live Demo

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

React Native background color

In React Native background color can be applied using background-color css property. The only difference is that we need to use camel case as backgroundColor. Check out the code –…
View Post

React convert JSON to CSV

React convert JSON to CSV using JSONToCSVConvertor function. Suppose you have a table (GUI react table tool) and you want to export it into excel, then this function will come…
View Post