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')

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 18 (2 by maintainers)

Most upvoted comments

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

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

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

This would also cause the problem <Component/>>

See the extra > at the end.

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

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

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