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 (
            
                 
                 
                 
            

        );
    }
}

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 (
      // 
      
        
      

    );
  }
}

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`?
      
        
        
        
      
    );
  }
}

user_4752632 · Answer

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

In your flexdemo.js file you should remove the whitespaces from within the tags. They are considered as text, and text is only allowed inside a component. I'd recommend making your 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 (
      
        
        
        
      
    );
  }
}
```
This will render your components but still be faulty, as you wont see anything on the screen.
To get your flexible shades of blue to appear you'll either have to add flex to the component in your App.js file or(depending on what your next steps are, I guess) remove it and render your as the root component, since it is basically a component with some children anyway.

user_690413 · Answer

I downgrade react native version, then I got a different error, basically what it was I had a simple string within a view, something like this:


    MyComponent

I had to wrap the string with a text component like this:


    MyComponent

hope that helps

user_13093137 · Answer

Make use Component hierarchy should be maintain, for example all components like Text, ListView, TextInput etc should be wrapped inside the parent component that is View. lets see the below example :

< View >
< Text >
CORRECT
< / Text >
< / View >
Make sure all the Component tag should be closed properly.
Make sure unnecessary semicolons should be removed from the react native layout components & functions.

https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html

user_960992 · Answer

In my case I had small () brackets around one of my view which was causing error.

({renderProgress()})

Removing small brackets worked for me.

{renderProgress()}

user_1814268 · Answer

In my case I had a condition in my render function that resulted in evaluating 0.

It seems that 0 && 'some jsx' breaks in newer versions of react native.

Error Example:

render(){
   return 
              {this.state.someArray.length && ...}
      
}

Although this should be valid javascript and works in react since 0 is falsey, It crashes in react native, not sure why but it works with a little refactoring as:

Working Example:

render(){
   return 
              {this.state.someArray && this.state.someArray.length> 0 && 
              ...}
          
}

user_7704587 · Answer

Remove semi-colon when rendering a method in

{this.renderInitialView()} //semi-color should not be here

user_590451 · Answer

I have encountered the same issue just now and solved it by removing the comments that I have made while editing the project in android studio and over there the comment's shorotcut just adds /* and */ but actually for react native the commented code should be enclosed with starting and end of curly braces, for example following would be an invalid comment:

/*
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 */

And the following will be a valid one:

{/*
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 */}

you see there is just one minor difference of enclosing the comment in curly braces.

user_4427540 · Answer

This error also occurs if you have comments in your render() return() function. Remove all comments in your return function when rendering JSX

user_14118431 · Answer

In my case I had written in the tag. Below is wrong. It will give error for child.

solution.

  hello

you have to write separate tag.

So any tag you have written in another tag this error can come.

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

14 Answers