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

[Lastin]

• 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!

[Lastin]

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

[kaueDM]

Can we have a better way to debug this? Is kinda hard to discover where is my empty text.

[weiyih]

I had this issue when I had an unnecessary semi-colon on my function call inside my render function.

  render() {
    return (
      <Container>
        <Content padder>
          <Title>Text</Title>
          {this.Function()} // <--MAKE SURE NO SEMI-COLON
        </Content>
      </Container>
    );
  }
}

[MJGTwo]

Yeah, echoing what @kaueDM said, has anyone figured out a nifty way to trace back to this error? I've been a bad dev and used this pattern a few times :/

[otaviogaiao]

@angly-cat solution solved my problem, just put a !! at my short circuit evaluation.

{!!limitDateTime && (
              <Text>
                <Text style={styles.label}>
                  {strings("solicitacao.data_limite")}:
                </Text>{" "}
                {format(new Date(limitDateTime), "DD/MM/YYYY")}
              </Text>
            )}

[jamiesonbates]

Just reiterating and providing an attempt to explain what is happening.

Using a double bang (!!) will coerce the condition into a boolean. In some cases the conditional might be falsy, but evaluates to a non-boolean value (i.e. 0).

React then tries render this non-boolean value, which is no longer acceptable in Android with current versions of react-native.

Its worth considering avoiding using the && operator for conditional rendering if you are not going to be using booleans as your conditional.

[lebedev]

React then tries render this non-boolean value, which is no longer acceptable in Android with current versions of react-native.

Rendering null or undefined is fine. Rendering 0 or '' isn't.

[nateReiners]

@jamiesonbates yes, In my case this was caused by { this.state.index && <View><Text>Foo</Text></View>} but if this.state.index was equal to zero, it would throw this error. zero is falsey so to fix it I did {(!!this.state.index || this.state.index === 0) && ... which worked. Also agree with your advice to avoid using && for non booleans.

[xims]

In my case, it was something like

<View>>
...
</View>

Worked on iOS but crashed on Android with similar error message ('RCTRawText [text: >]')

[AmmarTariq10]

Can someone explain what is actually causing the problem?
I have faced this 3 to 4 times and resolved, but I don't know what caused it and what really solved the problem, I'm confused :(

[zzorba]

It appears to be an issue with 'falsey' strings/numbers/undefined breaking rendering. So specifically a '' or 0 will be false and work fine on iOS, but on Android it will appear as 'text outside of a ' tag and blow up.

You can workaround this by using !!variable && <View>...</View> instead of variable && <View>...</View> when doing short circuit rendering, since both boolean false and null still seem to work okay.

[jeromew21]

Ran into the same issue where my app worked in debug mode but upon production it crashed with the same set of errors.

I had extended the Text component in order to globally apply the same style to each Text instance. Changing the class to inherit from React.Component instead fixed the problem.

[connorbode]

I was able to solve this by changing {condition && <ReactComponent />} syntax to {condition ? <ReactComponent /> : null}

[hankzhuo]

I solve this problem for me

<View style={{ flexGrow: 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end" }}>
    <Text>{formatPhone(userManager.userPhone)}</Text>,
</View>

just because the ',' delete it, it works

[Fitzpasd]

Does anyone use tooling to help prevent these? Lint/regex/other static analysis?

[skptricks]

Does anyone use tooling to help prevent these? Lint/regex/other static analysis?

I have found solution for this issue. refer this link : https://www.skptricks.com/2018/08/react-native-cannot-add-child-that.html

[nickmccomb]

This error also occurs if you have comments in your render() return() function. Remove all comments in your return function when rendering JSX

[mithunadhikari40]

I am not sure this might be helpful or not. I also was having this same issue and couldn't find out the reason causing the problem. As it turns out, I forgot to add static navigationOptions in my class component. Like :
static navigationOptions = { title: 'a', TabBarIcon: { icon: ({tintColor}) => { return <Icon name='favorite' size={30} color={tintColor}/>; } } };
After I added this function at the top before render function, the issue seems to be gone. Though I am not sure why this function was causing that error, that was solved for. Any explanation on this would be really appreciated.

[edmondlaja]

Worked for me after I removed a > that was extra in my code

[vjsingh]

This is fairly frustrating and time-consuming behavior, especially when porting a large iOS project to Android.

As has been noted, the generic error occurs when there is an extra space in your single-line JSX, such as <Tag> {children}</Tag>. In fact, it sometimes causes your app to crash entirely, which makes debugging even harder (<Tag> <View/></Tag>). It also happens when there are extra characters in your JSX (such as an extra ":" at the end of the line, which seems to be fine on iOS), and probably for various other reasons as noted.

It would be great if spaces in single-line JSX could be allowed. More importantly probably would be a line number or at least a file in which the problem occurred .

I also opened an issue to catch this in TSLint (palantir/tslint-react#188). Not sure if it is a rule option in ESlint

[Ilphrin]

Hi,

I had the exact same error yesterday (fixed this by reading the thread and changing { myVariable && ...} to {!!myVariable && (...)} ) so thank you all for this ;)

Now, as @vjsingh said, this is a very frustrating issue, and even though a rule in tslint would be nice, I think the main issue here is that this error message isn't giving any information but the string used (and in my case the string was empty, so I had absolutely no idea where the error was, and in fact it happened after I changed SQLite lines and thought for hours that I was doing something wrong with my SQL requests)

Is there any hint of how this message could be improved? Just giving the file and the line would be an awesome win for my work time :') I'd love to take a look at this issue but I don't know what I could do

[rostislav-simonik]

Implementation should be error-tolerant because it's easy to make a mistake. Logic is implemented here #22776.

[alloy]

Thanks for that update @rostislav-simonik 👍 In an effort to reduce the number of open issues and this issue having a open PR to fix it, I’ll close this for now. If somebody verifies the PR and it turns out to not actually address this issue, please let us know and we can re-open.

[kailesh49]

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

This solved my issue. :)

[sudolibre]

A lot if not all of these issues will be caught with the react-native/no-raw-text eslint rule from the plugin here: https://github.com/Intellicode/eslint-plugin-react-native. If you're using TypeScript from what I can tell there is no TSLint alternative. It seems the Typescript is going to be formally supporting eslint only moving forward anyways: microsoft/TypeScript#29288.

[Ilphrin]

That's a good news! But how can this be communicated so devs actually knows about that eslint rule that could help them? Documenting it like in an FAQ?

[heavy-snowy]

use "xx? xx : ' ';"instead of "xx&&xx"

[binki]

@heavy-snowy

use "xx? xx : ' ';"instead of "xx&&xx"

Shouldn’t xx || '' be clearer and less repetitive?

[waqaramjad]

same issue in android

[elicwhite]

Hi all! Sorry for the long wait but I think the fix for this just landed.

We were able to repro and fix this issue with this sample code:

function PlaygroundContent(props: {}) {
  return (
    <View>
      <Text>
        <View style={{width: 10, height: 10}}>
          <Image source={ANY_IMAGE_SOURCE} />
        </View>
      </Text>
    </View>
  );
}

[saroj85]

cannot add a child that doesn't have a yoganode to a parent without a measure function in expo