React native: Cannot add a child that doesn't have a YogaNode or parent node

Remove comments inside component.

I want to give a more general answer here, because there can be several reasons for the issue returning the same error message. The three I have seen the most:

1. Comments might be the cause. But instead of removing comments make them work:

In the return()-part, variables need to be wrapped in {} like {this.state.foo} so wrapping the comments works fine...

    return(
        <Text> This works {/* it really does */}</Text>
    );

...as long as they are not the first or last element in the return statement:

    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );

2. Conditional rendering might be the cause. If myCheck is undefined or an empty string this can fail:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );

but adding double negation !! works:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );

3. Whitespaces (or actually any strings) within a component can cause this, if not in a <Text>-Component:

Text in a View for example:

    /* This fails */
    return(
      <View>it really does</View>
    );

But also the tiny space between two components:

    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );

But works if in a newline:

    return(
      <View>
        {/* This works */}
        <Text>surprisingly it does</Text>
      </View>
    );

Unfortunately these pitfalls do not always lead to errors. Sometimes they work. I guess this depends on which of all those many tools/libraries/components you use and their versions in your app.

I was able to reproduce the issue with the code you provided. The solution is twofold:

1. In your flexdemo.js file you should remove the whitespaces from within the <View> tags. They are considered as text, and text is only allowed inside a <Text> component. I'd recommend making your <View> tags self closing until they have some content, to stay away from this issue in the future, like so:

   import React, { Component } from 'react';
   import { View } from 'react-native';
   
   export default class FlexibleViews extends Component {
     render() {
       return (
         <View style={{ flex: 1 }}>
           <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
           <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
           <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
         </View>
       );
     }
   }
   

   This will render your components but still be faulty, as you wont see anything on the screen.

2. To get your flexible shades of blue to appear you'll either have to add flex to the <View> component in your App.js file or(depending on what your next steps are, I guess) remove it and render your <FlexibleViews> as the root component, since it is basically a <View> component with some children anyway.