react-native: Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function

I got this error in RN 0.49.1 in some conditional JSX that relied on a value’s being truthy to decide whether a View shows up or not. I fixed the error using the classic double exclamation !!, i.e. “{!!value” instead of “{value.”

Aah silly error but still the stack trace is too confusing: I had my button tag like:

  <Button
     transparent
     style={styles.nextContainer}
     onPress={props.onPress}
   >
     NEXT
   </Button>

which was causing the error . This used to work in old react-native. But now, no string values should be without the <Text> tag.

So i resolved it by replacing the above code with

    <Button
      transparent
      style={styles.nextContainer}
      onPress={props.onPress}
    >
      <Text>NEXT</Text>
    </Button>

Got the same error when trying to render the following JSX:

<Card title="All done!">
  <Text style={{ marginBottom: 10 }}>There's no more content here!</Text>
  <Button backgroundColor="#03A9F4" title="Get more!" />>
</Card>

If you look very closely you’ll see an extra ‘>’ following the Button declaration. That’s all I needed to remove for it to successfully render.

Removing comments inside Component solved it for me.

I wasted more than a day on this and found no useful solution anywhere. I got this error because I had put a comment inside a component. On removing that comment the app did run for me.

This issue is still prevailing on Android React Native version: 0.49.1

I also had this with some conditional JSX like { foobar && <View/> } Could fix by changing it to { foobar ? <View/> : null }

I had the same error with a semi column “;” wrongly placed inside the JSX on line 4. So this error looks like generic for malformed JSX.

  case 'sun':
    return (
      <View style={styles.iconContainer}>
          <MyIcon name={''} size={18} color={colors.yellow} />;
      </View>
    );

There needs to be better feedback for debugging these issues

Does it work if you wrap the Text inside a view? It’s possible it doesn’t work because you app is only a Text node and might require at least one View, at least on Android.

To summarize, this issue is about what RN perceives to be malformatted JSX (usually occurring on Android render) and this thread has done a good job documenting the many forms this malformatted JSX can come in. Still doesn’t solve the need for developers to comb through their code line by line looking for a random semicolons or spaces. If there is a way to have the stack trace be more specific about the specific offending character or error that would probably save devs hours of sad debugging

Also had this in something weird, to do with using && logic for component mounting.

I had something like

render {
  <View>
    { val === 'a' && renderA() }
    { val === 'b' && renderB() }
    { val === 'c' && renderC() }
  </View>
}

And fixed it by moving those out into it’s own function

renderAlphabet (
  if (val === 'a') {
    return renderA();
  } else if (val === 'b') {
    return renderB();
  } else if (val === 'c') {
    return renderC();
  } 

  return null;
)

render {
  <View>
    { this.renderAlphabet() }
  </View>
}

I had this when i add a space before comment in JSX

<View> {/*Reviews*/}   <-- error
</View>

and works fine after removing the space or putting the comment at the second line

<View>{/*Reviews*/} <-- works fine
</View>

<View>
    {/*Reviews*/} <-- works fine
</View>

@

In my case it’s the fucking comment in the copy-pasted example lmao 💯

https://github.com/facebook/react-native/issues/13243#issuecomment-335488473 <-- js is weird

programmer: “does x exist?” javascript: “???” programmer: “…does x not… not exist?” javascript: “yeah it exists!”

For anyone wondering, you’re casting to a definitive Boolean type: https://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript

This snags me a lot when looking to see if an array is empty or not. I’ll check devtools console with something like this:

But, in fact, it’s me returning true or false from that truthy ternary…

So I’ll code something like {arrayOfThings.length ? ( <Text>Yeah there's stuff!</Text> ) : ( <Text>Nothing there!</Text> ) then run into this error.

With a strict check, we can see I’m absolutely goofing and arrayOfThings.length isn’t true/false. It’s just a stupid 0.

Hope this helps someone understand the problem/solution a bit better.

btw, Boolean(truthy or falsy) is much more readable you double-bang sociopaths.

The approach presented by @parthgandhi7 works for me, too. I think the error message should be vastly improved, though.

3 hours. My fix.

Knowing all the potential errors is helpful when the error has just appeared after changing some code but… how to figure it out when the error appears on a device after having developed a full app on another device/simulator? The error gives absolutely no feedback on which line or file the issue occurs. The stacktrace seems to be limited to java files that are not part of my project. Any ideas on how to debug this?

This seriously needs to be addressed, as the current behaviour is a total mess. Whatever IDE one is using and the stacktrace are completely useless in this situation. It feels like i’m proofreading an essay written in notepad or nano…

This is always caused by a JSX syntax error, you can forget to close an element or have invalid characters in your JSX - there are endless possibilities. The error messaging for this error needs to improve and point to source of the issue. Right now, it doesn’t tell you anything

I was having problems at this time: using ScrollView not set inside View

<ScrollView>  //error
  <View></View>
  <View></View>
  ...
</ScrollView>

<ScrollView>  //works well
  <View>
    <View></View>
    <View></View>
      ...
  </View>
</ScrollView>

Holy sh**t, spend an hour with this bug because i have :

<View> <Row> <- space between two markup make the android app crash completly (inside a modal)

<View><Row> <- this work

Guys, I’ve just solved this problem… The problem was **ing jsx comment {/ Comment */ }… When I removed it, android began to work! God bless React Native developers)))

I’m getting the same error on RN 0.50.3. Running on Android emulator API 23.

this is a really weird case. I wasted two hours to find the problem, and then I found that @alainib got a similar solution: remove an space between tow blocks: Before solution: <Icon name="open" /> <Text>Open details</Text> After solution <Icon name="open" /><Text>Open details</Text>

The problem just go away. Only happend in Android.

@iivaschenko I am developing with RN for over a year, and this is the first time I encountered this. The amount of dev hours wasted over this is probably huge!

I found a “}” that was somewhere random in my JSX but had no corresponding opening “{”. It was not marked as syntax error. But after removing it the problem was solved.

i dont have any semicolon or any comments in my render function still it gives the same error .??