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

[m-makuch]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Cannot add a child that doesn't have a YogaNode to a parent without a measure function exception when Component co-existing in same parent as TextInput which triggers component removal.

Environment

Environment:
OS: Linux 4.13
Node: 9.4.0
Yarn: 1.3.2
npm: 5.7.1
Watchman: 4.9.0
Xcode: N/A
Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
react: ^16.3.1 => 16.3.1
react-native: ^0.55.2 => 0.55.2

Steps to Reproduce

Simplified example:
Change text in TextInput field
https://snack.expo.io/SyAcWQFoz

Expected Behavior

<Text> component stops existing

Actual Behavior

Exception thrown:

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: ]' to a 'RCTView')
addChildAt
    ReactShadowNodeImpl.java:279
addChildAt
    ReactShadowNodeImpl.java:56
manageChildren
    UIImplementation.java:446
manageChildren
    UIManagerModule.java:416
invoke
    Method.java
invoke
    JavaMethodWrapper.java:372
invoke
    JavaModuleWrapper.java:160
run
    NativeRunnable.java
handleCallback
    Handler.java:751
dispatchMessage
    Handler.java:95
dispatchMessage
    MessageQueueThreadHandler.java:29
loop
    Looper.java:154
run
    MessageQueueThreadImpl.java:192
run
    Thread.java:761

[SaraCalla]

Same problem!

[m-makuch]

For now I just display empty text instead of removing <Text> component. Not sure if that's a suitable solution for you @saracallaioli

[lebedev]

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>
}

[derekbar90]

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

[mezod]

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 :/

[kevinscience]

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

[Paul-Hume]

We're having the same problem here too :( and no way of easily seeing which file is causing it

[export-mike]

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

[zsaCHG]

I have same problem too. Over one day =.=

[matmartic]

I've had the same problem for a while until I realized that in order to make a line break between 2 paragraphs, I had this {`\n`} between 2 Text components. Removing it fixed this issue for me

[drdpedroso]

Same here. Fixed by removing texts that was outside the <Text> tag

[beisert1]

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

[lebedev]

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

[Fi2zz]

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