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

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