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 https://github.com/facebook/react-native/issues/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.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[jose920405]

+1 react-native:0.49