Attempted to set an invalid frame to inner scrollview

[ljunb]

Description

Yesterday I upgraded the RN version from 0.25.1 to 0.39.2, everything works fine until I reset to the root view which build with react-native-scrollable-tab-view. Confusing that the root view is normal when app starts, but it will throws the bellow errors when resetTo root view:

2016-12-16 14:29:54.441 [error][tid:main][UIView+React.m:152] Invalid layout for (8793)<RCTView: 0x136962540; reactTag: 8793; frame = (0 0; 0 0); layer = <CALayer: 0x136939800>>. position: {187.5, nan}. bounds: {{0, 0}, {375, nan}}
2016-12-16 14:29:54.443 [error][tid:main][UIView+React.m:152] Invalid layout for (8795)<RCTText: 0x136962a50; reactTag: 8795; text:  frame = (0 0; 0 0); opaque = NO; layer = <CALayer: 0x136962290>>. position: {16.25, nan}. bounds: {{0, 0}, {32.5, nan}}
2016-12-16 14:29:54.447 [error][tid:main][UIView+React.m:152] Invalid layout for (8798)<RCTView: 0x13632e670; reactTag: 8798; frame = (0 0; 0 0); layer = <CALayer: 0x13697e1e0>>. position: {29.25, nan}. bounds: {{0, 0}, {58.5, nan}}
2016-12-16 14:29:54.452 [error][tid:main][UIView+React.m:152] Invalid layout for (8797)<RCTView: 0x13632e430; reactTag: 8797; frame = (0 0; 0 0); layer = <CALayer: 0x136963420>>. position: {66.75, nan}. bounds: {{0, 0}, {58.5, nan}}
2016-12-16 14:29:54.455 [error][tid:main][UIView+React.m:152] Invalid layout for (8807)<RCTText: 0x13638c540; reactTag: 8807; text:  frame = (0 0; 0 0); opaque = NO; layer = <CALayer: 0x1363d06a0>>. position: {61, nan}. bounds: {{0, 0}, {36, nan}}
2016-12-16 14:29:54.458 [error][tid:main][UIView+React.m:152] Invalid layout for (8799)<RCTText: 0x136989520; reactTag: 8799; text:  frame = (0 0; 0 0); opaque = NO; layer = <CALayer: 0x136316b90>>. position: {29.25, nan}. bounds: {{0, 0}, {58.5, nan}}
2016-12-16 14:29:54.475 [error][tid:main][UIView+React.m:152] Invalid layout for (8803)<RCTText: 0x13695dbe0; reactTag: 8803; text:  frame = (0 0; 0 0); opaque = NO; layer = <CALayer: 0x13692d4a0>>. position: {29.25, nan}. bounds: {{0, 0}, {58.5, nan}}
2016-12-16 14:29:54.478 [error][tid:main][UIView+React.m:152] Invalid layout for (8794)<RCTView: 0x1369627d0; reactTag: 8794; frame = (0 0; 0 0); layer = <CALayer: 0x136907f70>>. position: {131.75, nan}. bounds: {{0, 0}, {243.5, nan}}
2016-12-16 14:29:54.499 [error][tid:main][RCTScrollView.m:387] Attempted to set an invalid frame to inner scrollview: {{0, 0}, {375, inf}}

Android works fine, it happens on iOS only.

Additional Information

• React Native version: 0.39.2
• Platform: iOS
• Operating System: MacOS Sierra

[ljunb]

It works fine in version 0.37.0

[lacker]

Can you provide a small sample app that runs into this problem?

[sadlerjw]

I have the same problem. So far unable to track it down to a root cause. I'll post again if I find anything.

[DKbyo]

I have the same issue, but it's related to the flex layout in the scrollview, wrapping the scrollview in a view and setting style={{flex:1}} solves my problem.

[ljunb]

@DKbyo It also solves my problem! The flex layout of ListView causes the issue in my situation, Thanks!

[joncursi]

I ran into the same issue. Wrapping ListView and ScrollView within a component as pointed out above did resolve the issue. But here's the interesting part:

I then undid that code line by line to try to pinpoint the exact issue, and I ended up undoing every single line and the bug was still gone. So I'm scratching my head a bit, and can only think that this is some sort of simulator and/or caching issue within the bundle / Xcode process. Idk!

[florianbepunkt]

I have the same issue, but wrapping scrollview in a view with flex:1 did not resolve it. what makes me scratch my head: when I turn on the debugger it works fine, when I turn remote debugging of I get the error...if I dismiss it i see the layout as exspected.

see here #11846

[0x6e6562]

@DKbyo This solved the same issue for me using 0.40.0 - many thanks :-)

[christophermark]

I was having similar issues, but managed to find some instances of flex: null or flex: undefined that was causing it.

Either way, it seems to be an issue with flex, causing an overflow, hence the nan in the error message.

[miketheanimal]

I have just hit the same problem, or at least a problem with the same problem. I get

Invalid layout for (369)<RCTView: .... position: {187.5, nan}. bounds: {{0, 0}, {375, nan}}

Maybe interestingly, the position and bounds values are exactly the same as in the first line in @ljunb's original post. The effect is exactly as described by @florianbepunkt

I have tracker down a solution in my case. The relevant bits (ignore the funny stylesheet construction, its just a wrapper around RN StyleSheet; Button and Images.Loading are my components) of code are:

const styles = StyleSheet.create({
    container: (global) => ({
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        backgroundColor: 'rgba(0,0,0,0.50)',
        flex: 1,
        alignItems: 'center',
    }),
    ....        
}) ; 

render () {
    return (
        <View style={ styles.container }>
          <View style={ styles.inner }>
            <Images.Loading style={ styles.image } />
            <Button onPress={ this.onClickCancel } type='cancel' label='Cancel'/>
          </View>
        </View>
        ) ;
    }

The above gives the reported error. However, if I remove the flex:1 style from the container (which is actually spurious anyway because the the style uses absolute positioning), then it all works fine.

This in on iOS emulator (iPhone 6/iOS 9.3) on ElCapitan, The problem existed with RN0.40; I upgraded to RN0.41 (latest as of a couple of hours ago), problem was still there.

[anuragdadheech]

I was facing it in 0.41 for 2 reasons. Thought I 'd share so it can help somebody. To fix it, I

• Wrapped ListViews and ScrollViews within a component and set style={{flex:1}} to that component
• Made sure flex: null or flex: undefined was not set anywhere. In my case, this was happening in a progressBar where I was giving flex: calculatedValue, where calculatedValue was undefined in some cases.