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'sundefined
, 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