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

[sojimon]

Hi, when I run my react native app in android device using the command react-native run-android, for a particular component I get the above error.But there is no error if it run on android simulator, ios simulator and ios devices.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 7.10.0
Yarn: Not Found
npm: 4.2.0
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.1 => 0.54.1

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[anderskev]

This is due to having plain text that is not inside of a Text component, please see #13243.

[Billy-]

@sojimon You need to provide what code is causing the issue...

@anderskev I have had this issue with other types of node too, iirc.

[sojimon]

The error cleared when updated to react-native":"^0.55.0.

[johnckendall]

Here is another fun one that happens only in android (even in RN 0.55.3):

{this.props.loadingURL&& <View style={{flexDirection:‘row’,alignItems:‘center’,justifyContent:‘center’,marginTop:40,marginBottom:10,}}> <Text style={{marginRight:10,fontSize:20}}>{this.props.loadingURL}</Text> <ActivityIndicator size=“large” color=“black” /> </View> }

This blows up Android with that error if loadingURL is an empty string. It works fine if it's a non-empty string or a boolean or if I change it to this (basically convert it to a boolean):

{!_.isEmpty(this.props.loadingURL)&&

another 2 hours wasted! 👎

[mezod]

The error persists here with 0.55.3

[sfratini]

Another posibility is that you have not closed a tag correctly.

This would also cause the problem<Component/>>

See the extra > at the end.

[phillmill]

The fix for me was to add a comparison in my conditional if this helps anyone:

Didn't work:

{this.state.numPhotos && <MyComponent /> }

Worked:

{this.state.numPhotos > 0 && <MyComponent /> }

[joshuapinter]

@phillmill In your case, it's likely because numPhotos doesn't return a boolean. It probably returns an integer, which can be interpreted as a string, which it tries to join the <MyComponent /> but two adjacent components need to be wrapped in a View.

[lyrl]

<View style={[styles.test, {marginTop: 10}]}>
          <View style={[styles.test2, {marginLeft: 20, marginRight: 20}]}>
            <Divider style={{backgroundColor: 'grey'}} />
          </View>
        </View>q

change to work

<View style={[styles.test, {marginTop: 10}]}>
          <View style={[styles.test2, {marginLeft: 20, marginRight: 20}]}>
            <Divider style={{backgroundColor: 'grey'}} />
          </View>
        </View>

[skptricks]

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

[kylanhurt]

My solution was similar to @phillmill, I was only having the issue on Android (not iOS) and had to change my conditional to check for this.props.defaultElectrumServer.length !== 0 rather than just this.props.defaultElectrumServer.length. I don't know why a blank screen wouldn't be considered falsey but oh well.

[DjarallahBrahim]

<View style={[styles.test, {marginTop: 10}]}>
          <View style={[styles.test2, {marginLeft: 20, marginRight: 20}]}>
            <Divider style={{backgroundColor: 'grey'}} />
          </View>
        </View>q

change to work

<View style={[styles.test, {marginTop: 10}]}>
          <View style={[styles.test2, {marginLeft: 20, marginRight: 20}]}>
            <Divider style={{backgroundColor: 'grey'}} />
          </View>
        </View>

In my case:
return (

{dataCategories..............CODE.....................};

)

After 2h i found that i add #; hahaha !

[nandorojo]

This error persists, and the error does not indicate which line(s) are causing it.

[irajwani]

Hello, the specific error I'm getting is:
"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' )".

I've tried just about every solution above to no avail; I've isolated the issue to a single component but that component is like 2000 lines of code so it's really hard to know what is wrong because my linters and syntax checkers in vs code show no issues.

Please help!

react native version: 0.55.3
App works just fine on iOS. This is purely an android issue.

[prabhu133]

Hello, the specific error I'm getting is:
"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' )".

I've tried just about every solution above to no avail; I've isolated the issue to a single component but that component is like 2000 lines of code so it's really hard to know what is wrong because my linters and syntax checkers in vs code show no issues.

Please help!

react native version: 0.55.3
App works just fine on iOS. This is purely an android issue.

I am also getting same issue. If anyone found solution, please help.

[macnmunasinghe]

hi face the same issue,
problem was i had more than one children tag inside Text tag after removing extra tag issue was resolved

[TheSavior]

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