React-native: Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactVirtualTextShadowNode' to a 'NativeViewWrapper')

[sopaco]

I add code below to use yoga-node，but got an error，what‘s wrong？

@Override
        protected UIImplementationProvider getUIImplementationProvider() {
            return new FlatUIImplementationProvider();
        }

"react-native": "0.43.3"

java.lang.RuntimeException: Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactVirtualTextShadowNode' to a 'NativeViewWrapper')
                                                                   at com.facebook.react.uimanager.ReactShadowNode.addChildAt(ReactShadowNode.java:173)
                                                                   at com.facebook.react.flat.FlatShadowNode.addChildAt(FlatShadowNode.java:217)
                                                                   at com.facebook.react.flat.NativeViewWrapper.addChildAt(NativeViewWrapper.java:98)
                                                                   at com.facebook.react.flat.FlatUIImplementation.addChildAt(FlatUIImplementation.java:510)
                                                                   at com.facebook.react.flat.FlatUIImplementation.setChildren(FlatUIImplementation.java:190)
                                                                   at com.facebook.react.uimanager.UIManagerModule.setChildren(UIManagerModule.java:326)
                                                                   at java.lang.reflect.Method.invoke(Native Method)
                                                                   at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:345)
                                                                   at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:141)
                                                                   at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
                                                                   at android.os.Handler.handleCallback(Handler.java:739)
                                                                   at android.os.Handler.dispatchMessage(Handler.java:95)

[hramos]

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue with the additional information provided. Thanks!

[lyxia]

I have the some problem.

[JCMais]

Same error here.

[ryands17]

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

[sibelius]

this is still happening on 0.50.0

[wuxiaojun123]

this is still happening on 0.50.4

[chohra-med]

i used to have the same issue , the solution is : don't make spaces in declaration of components for example look at Text tag ( there's space between > and Text )
make it like that :

[JCMais]

This happens if you have space like mentioned above, or if you have conditional rendering, that is checking a non boolean variable, that can be undefined or an empty string. Example:

{myCheck && <MyComp />}

This returns an error if myCheck is undefined, or an empty string, because if its a falsy value, it's going to be the value returned in the expression, and so, React will try to render it, but React cannot render undefined or empty string values inside non-Text elements, throwing the error above.

The solution is to cast the variable to a boolean:

{!!myCheck && <MyComp />}

Since false is correctly ignored on JSX.

[RoshanSalian]

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.

[sebirdman]

This seems to be a problem with something that parses what your component returns from render().

in my case i had the following code:

<View>
  {someThing};
</View>

and the fix was removing the semicolon:

<View>
  {someThing}
</View>

[daxaxelrod]

This error should be reformated. I just made a simple JSX mistake but took forever to find it.

[Harag]

This (blank line between <text>and SomeText) did me in, just posting here for some other person like me that could not spot the obvious

<View>
<Text>

SomeText
</Text>
<View>

[catmans1]

I have same error
But i have investigate, it does not relate to about white space in text.
I think it should notice this bug more detail.

[catmans1]

All right, i do follow by @RoshanSalian.
It work.

@RoshanSalian 👍

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.

[rozzy]

🙌

Thanks guys! 👍

It was already discussed above, but take care of such constructions:

{sectionTitle && <SectionTitle>{sectionTitle}</SectionTitle>}

If the sectionTitle is a string or a number, it's better to convert it to boolean in a logical operator:

{!!sectionTitle && <SectionTitle>{sectionTitle}</SectionTitle>}