Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactRawTextShadowNode' to a 'LayoutShadow

For others landing on this page due to the same error message as the OP, there are a whole host of issues that can cause same error message.
There is an GitHub issue surrounding this generic error message.

Probably the most common reasons are:

  • text to be rendered is not wrapped in <Text> tags
  • syntax error in JSX (for example, a ;, or a malformed tag)
  • a space between JSX comments and a JSX tag, if you use Prettier
    (it seems Prettier puts an automatic ; insertion,
    (solution: move the JSX comment to its own line)

  • some value is assumed to be null, but it's undefined, or an ''(empty string).
    In the case of an '', it would need to be wrapped in <Text> (see 1st item above)

  • not wrapping child tags (ScrollView in particular)
  • space between two adjacent tags
  • an issue with CSS

    If a CSS node has measure defined, the layout algorithm will not visit its children. Even more, it asserts that you don't add children to nodes with measure functions.

I highly recommend taking a gander if you are having trouble finding the source of your error: https://github.com/facebook/react-native/issues/13243

As one person wrote:

To summarize:
This issue is about what React Native perceives to be mal formatted JSX (usually occurring on Android render) and this thread has done a good job documenting the many forms this malformatted JSX can come in.

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


You should Use <Text> to display text in <Button> like this

<ListItem>
    <Button> <Text>First</Text> </Button>
</ListItem>

My error was caused by this code:

      {caption && (
        <Text
          style={[styles.tag, { marginBottom: 8 }]}
          numberOfLines={4}
          ellipsizeMode="tail"
        >
          {caption}
        </Text>
      )}

For some reason, I need to coerce caption from a string to a boolean for it to work on Android. (It worked fine on iOS):

     {!!caption && (
        <Text
          style={[styles.tag, { marginBottom: 8 }]}
          numberOfLines={4}
          ellipsizeMode="tail"
        >
          {caption}
        </Text>
      )}

Hope it helps someone