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> </> );