react-native: Error: Cannot add a child that doesn't have a YogaNode to a parent without a measure function!

The issue is that you try to render an empty string outside a Text component:

{state.error &&
    <Text>
        Some text
    </Text>
}

If state.error is an empty string (falsey value), this transforms into {''}. And you can’t render an empty string ('') or zero (0) outside of Text component. But all other falsey values will do. Try to turn this into another falsey value.

For example (null):

{state.error
    ? (
        <Text>
            Some text
        </Text>
    )
    : null
}

or (false)

{!!state.error &&
    <Text>
        Some text
    </Text>
}

By the way, I’ve just noticed, that this error message actually shows a text that caused it (notice Test text).

Also seeing this issue. Causing major issues on the app after upgrading. Seems to be largely for Android.

Can we have a better way to debug this? Is kinda hard to discover where is my empty text.

I had a semi colon somewhere it shouldn’t have been. return <View><Text>Hi!</Text>;</View>;

Same here, with the added problem that the error/stacktrace doesn’t show which files of my project contain the issue making it very hard to fix 😕

on android, do not use { your_condtion && <YourComponent/ >}

I have this issue as well, only on Android. And I couldn’t find any problem with my TEXT!!

We’re having the same problem here too 😦 and no way of easily seeing which file is causing it

Does anyone use tooling to help prevent these? Lint/regex/other static analysis?

I have found solution for this issue. refer this link : https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html

Issue was fixed for me by removing a space I had between my <View> tags.

Does anyone use tooling to help prevent these? Lint/regex/other static analysis?

In my case, it was something like

<View>>
...
</View>

Worked on iOS but crashed on Android with similar error message (‘RCTRawText [text: >]’)

Just reiterating and providing an attempt to explain what is happening.

Using a double bang (!!) will coerce the condition into a boolean. In some cases the conditional might be falsy, but evaluates to a non-boolean value (i.e. 0).

React then tries render this non-boolean value, which is no longer acceptable in Android with current versions of react-native.

Its worth considering avoiding using the && operator for conditional rendering if you are not going to be using booleans as your conditional.

I had this issue when I had an unnecessary semi-colon on my function call inside my render function.

  render() {
    return (
      <Container>
        <Content padder>
          <Title>Text</Title>
          {this.Function()} // <--MAKE SURE NO SEMI-COLON
        </Content>
      </Container>
    );
  }
}

I was able to solve this by changing {condition && <ReactComponent />} syntax to {condition ? <ReactComponent /> : null}

Try not to leave spaces between elements, this can give you that error: <Text>abc</Text> <TouchableOpacity ....

@conor909 Just make sure that neither '', nor 0 are passed as isThisTrue ever. Or add double negations -> !!isThisTrue.

@angly-cat solution solved my problem, just put a !! at my short circuit evaluation.

{!!limitDateTime && (
              <Text>
                <Text style={styles.label}>
                  {strings("solicitacao.data_limite")}:
                </Text>{" "}
                {format(new Date(limitDateTime), "DD/MM/YYYY")}
              </Text>
            )}

Hi all! Sorry for the long wait but I think the fix for this just landed.

We were able to repro and fix this issue with this sample code:

function PlaygroundContent(props: {}) {
  return (
    <View>
      <Text>
        <View style={{width: 10, height: 10}}>
          <Image source={ANY_IMAGE_SOURCE} />
        </View>
      </Text>
    </View>
  );
}

Thank you @angly-cat your solution helped me fix my issue! Could the errors be any more vague? smh!

I have found solution for this issue. refer this link : https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html

If you want to return a view with the only style applied, make sure to remove empty space between the opening and closing tag.

eg: <View style={styles.ring}> </View> caused error

rectified by <View style={styles.ring}></View>

I understand the solution, the problem is the amount of files that need to be updated and the very vague error won’t help the process.

do you have some comments in your code?

My solution was to remove the comments

<View>
//Nice Code  
<Text>Hello</Texte>
</View>

const AlbumDetail = (props) => { return ( <Card> {(!!props.album.title)} </Card> ); }; // By applying{(!! )} it resolves my issue but still the data is not displaying the previous error "YogaNode " was resoved.

@Triskae in you case it’s not because of a “comment”, it’ because of whitespaces between </Text> and the “comment”.

I solve this problem for me

<View style={{ flexGrow: 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}>
    <Text>{formatPhone(userManager.userPhone)}</Text>,
</View>

just because the ‘,’ delete it, it works

@jamiesonbates yes, In my case this was caused by { this.state.index && <View><Text>Foo</Text></View>} but if this.state.index was equal to zero, it would throw this error. zero is falsey so to fix it I did {(!!this.state.index || this.state.index === 0) && ... which worked. Also agree with your advice to avoid using && for non booleans.

Yeah, echoing what @kaueDM said, has anyone figured out a nifty way to trace back to this error? I’ve been a bad dev and used this pattern a few times 😕