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

Comments

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles