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

How to check react version?

Table of Contents Hide Check react version through command lineCheck version programmaticallyLive DemoRelated Posts: It is important to know how to check react version in order to keep the libraries…
View Post