React-Native“如果没有测量功能，则无法将没有YogaNode的孩子添加到父母中！”

Question

App.js renders a reusable external component Fade with its children component. The animation in Fade is executed when a children is confirmed with {this.state.visible ? children : null} {this.state.visible ? children : null} in its render function. After debugging it, I believe the error is caused by the ternary operator, due to the way it is defined in the render function of Fade .

My issue is that I don't know how to correctly wrap this ternary operator in the render. I have tried <Text> and <View> without success. Does anyone know how to fix this?

Thank you in advance.

App.js render

<Container>
  <Fade visible={display.bus}> {renderIf(display.bus, <BusTemplate />)} </ Fade>
</Container>

Fade.js render

<Animated.View style={this.state.visible ? combinedStyle : containerStyle}>
  {this.state.visible ? children : null}
</Animated.View>

Bus.js render

<Container>
  <Image source={require("./scenerios/Bus.png")} style={styles.MainContainer}>
  </Image>
</Container>

Answer 1

Ciao Diego, once I read this problem is related with the if check on an undefined var. It could be your case with this.state.visible .
Another chance is by wrapping your component in a View tag.
Here is the related issue with if checks:
https://github.com/facebook/react-native/issues/13653
In case you already solved it, please let us know how