[RN 0.36.0] onLayout is returning 0 for view drawn in NavigationCardStack

[robclouth]

0a9b6be (I'm guessing) has caused onLayout to return 0 for views returned in renderScene in a NavigationCardStack.

return (
  <View onLayout={e => console.log(e.nativeEvent.layout.height)}>
    <View style={{height: 100}} />
  </View>
)

This prints 0. In 0.35.0 it prints 100. Using onLayout inside NavigationCardStack is important for iOS style dynamically resizing settings popovers.

What's happening here?

[robclouth]

return (
  <View  style={{height: 100}} onLayout={e => console.log(e.nativeEvent.layout.height)}>
  </View>
)

returns 100. It seems to be ignoring children in the size computation.

[hramos]

cc @ericvicenti

[ide]

There have been quite a few changes to the layout implementation, perhaps the root cause is somewhere in there? cc @emilsjolander

[brentvatne]

Is this iOS or Android @robclouth? Does adding collapsable={false} to the container fix it? What if you add a width to the inner view?

[darkamenosa]

I faced the same issue, height is 0, when navigating to new view. This happened on iOS (i don't check on android).
@brentvatne I added collapsable={false}, but it doesnot work. Here is my code:

       <ScrollView
        ref="scrollview"
        contentOffset={{
          x: this.state.width * this.state.initialSelectedIndex,
          y: 0,
        }}
        style={[styles.scrollview, this.props.style]}
        horizontal={true}
        pagingEnabled={true}
        bounces={!!this.props.bounces}
        scrollsToTop={false}
        onScroll={this.handleHorizontalScroll}
        scrollEventThrottle={100}
        removeClippedSubviews={true}
        automaticallyAdjustContentInsets={false}
        directionalLockEnabled={true}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        onLayout={this.adjustCardSize}>
        {this.renderContent()}
       </ScrollView>

  adjustCardSize(e: any) {
    this.setState({
      width: e.nativeEvent.layout.width,
      height: e.nativeEvent.layout.height,
    });
  }

[darkamenosa]

Fixed!!!
I wrapped the ScrollView by a View tag. Adding style={{flex: 1}} to the View tag solved the problem. :D :D

[ericvicenti]

Maybe the change in layout behavior means we need to change the styles of NavigationCardStack?

[robclouth]

@darkamenosa that's not the same issue. My component has the correct height when rendered, but onLayout reports a height of 0.

[robclouth]

Ok super weird, if I don't render the header onLayout in the children returns the correct height.

[robclouth]

Nope spoke too soon. I have listerally no ideas what's happening. Something has changed in either the layout code, NavigationCardStack or something and it's broken my code. Probably not a RN bug. I'll figure it out eventually.

[robclouth]

Got it: if I set the component rendered in renderScene to position: absolute it measures the children correctly. What changed in 0.37.0 to cause this?

[ericvicenti]

@emilsjolander has been working on evolving RN's layout system, and might know more about this. Was this an intentional breaking change, or is it a bug?

[robclouth]

Yup, some layout stuff relating to ScrollViews and flex is listed as a breaking change in the release notes. I just couldn't figure out how this was related since I wasn't using either. I've resolved this on my end now and don't have time right now to look into it deeper, so I can close if you wanna clean up that ever growing issues list...

[ericvicenti]

Thanks!