Skip to content

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

Closed
@archdishup

Description

@archdishup
  • I have reviewed the documentation
    I have searched existing issues

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

Activity

SaraCalla

SaraCalla commented on Apr 10, 2018

@SaraCalla

Same problem!

archdishup

archdishup commented on Apr 10, 2018

@archdishup
Author

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

lebedev

lebedev commented on Apr 10, 2018

@lebedev
Contributor

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

derekbar90 commented on Apr 11, 2018

@derekbar90

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

mezod

mezod commented on Apr 21, 2018

@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

kevinscience commented on May 4, 2018

@kevinscience

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

Paul-Hume

Paul-Hume commented on May 4, 2018

@Paul-Hume

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

export-mike

export-mike commented on May 8, 2018

@export-mike

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

zsaCHG

zsaCHG commented on May 11, 2018

@zsaCHG

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

matmartic

matmartic commented on May 11, 2018

@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

drdpedroso commented on May 29, 2018

@drdpedroso

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

beisert1

beisert1 commented on May 31, 2018

@beisert1

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

lebedev

lebedev commented on May 31, 2018

@lebedev
Contributor

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

Fi2zz

Fi2zz commented on Jun 1, 2018

@Fi2zz

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

66 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @alloy@binki@hramos@elicwhite@mjstelly

        Issue actions

          Error: Cannot add a child that doesn't have a YogaNode to a parent without a measure function! · Issue #18773 · facebook/react-native