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         


        

Answer 1

        <View style={{ flex: 1 }}>
            <Text style={{ flex: 1, backgroundColor: "powderblue" }}> </Text>
            <Text style={{ flex: 2, backgroundColor: "skyblue" }}> </Text>
            <Text style={{ flex: 3, backgroundColor: "steelblue" }}> </Text>
        </View>

1. 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 >

2. Make sure all the Component tag should be closed properly.

3. 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

Answer 2

This error is usually from one of below mistakes

• Remove unnecessary comments and remove comments from return function.
• check for proper variable name.
• check for unintended semicolon or any wrong syntax

Answer 3

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

Answer 4

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 <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

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 <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}

Answer 5

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

<text>
  <TextInput style={styles.textinput} 
        textcolor
          placeholder = 'user id'
          placeholderTextColor = 'gray'
   />
</Text>

solution.

 <Text> hello </Text>
 <TextInput style={styles.textinput} 
        textcolor
          placeholder = 'user id'
          placeholderTextColor = 'gray'
  />

you have to write separate tag.

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

Answer 6

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

({renderProgress()})

Removing small brackets worked for me.

{renderProgress()}