title: React native: Cannot add a child that doesn't have a YogaNode or parent node
body: <p>Just started learning react-native,</p>
  
  <p>I have created one separate file flexdemo.js and created component as below:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View } from 'react-native';
  
  export default class FlexibleViews extends Component {
      render() {
          return (
              &lt;View style={{ flex: 1 }}&gt;
                  &lt;View style={{ flex: 1, backgroundColor: "powderblue" }}&gt; &lt;/View&gt;
                  &lt;View style={{ flex: 2, backgroundColor: "skyblue" }}&gt; &lt;/View&gt;
                  &lt;View style={{ flex: 3, backgroundColor: "steelblue" }}&gt; &lt;/View&gt;
              &lt;/View&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>and App.js file is as below:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    Platform,
    StyleSheet,
    Text,
    View, Image
  } from 'react-native';
  
  // import Bananas from './src/banana';
  // import LotsOfStyles from './src/styledemo'
  
  import FlexibleViews from './src/flexdemo';
  
  export default class App extends Component {
    render() {
      return (
        // &lt;Bananas name = "Tapan"/&gt;
        &lt;View&gt;
          &lt;FlexibleViews /&gt;
        &lt;/View&gt;
  
      );
    }
  }
  </code></pre>
  
  <p>That gives me this error:</p>
  
  <p><a href="https://i.stack.imgur.com/jpQJSl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jpQJSl.png" alt="enter image description here"></a></p>
  
  <p><strong>Now if I try to run the code by adding flexdemo.js code into App.js then everything works fine.</strong></p>
  
  <p>Changed The App.js like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AppRegistry, View } from 'react-native';
  
  export default class FlexDimensionsBasics extends Component {
    render() {
      return (
        // Try removing the `flex: 1` on the parent View.
        // The parent will not have dimensions, so the children can't expand.
        // What if you add `height: 300` instead of `flex: 1`?
        &lt;View style={{flex: 1}}&gt;
          &lt;View style={{flex: 1, backgroundColor: 'powderblue'}} /&gt;
          &lt;View style={{flex: 2, backgroundColor: 'skyblue'}} /&gt;
          &lt;View style={{flex: 3, backgroundColor: 'steelblue'}} /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ThFlNl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ThFlNl.png" alt="enter image description here"></a></p>