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

Question

Just started learning react-native,

I have created one separate file flexdemo.js and created component as below:

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>                 <View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>                 <View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>             </View>          );     } } 

and App.js file is as below:

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 (       // <Bananas name = "Tapan"/>       <View>         <FlexibleViews />       </View>      );   } } 

That gives me this error:

Now if I try to run the code by adding flexdemo.js code into App.js then everything works fine.

Changed The App.js like this:

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`?       <View style={{flex: 1}}>         <View style={{flex: 1, backgroundColor: 'powderblue'}} />         <View style={{flex: 2, backgroundColor: 'skyblue'}} />         <View style={{flex: 3, backgroundColor: 'steelblue'}} />       </View>     );   } } 

Answer 1

Remove comments inside component.