React-native: View was rendered with explicitly set width/height but with a 0 flexBassis

[mxmtsk]

Description

I recently upgraded to the latest react-native version and parts of my application are not working anymore. I have a Timeline that loads more posts after a click on a button, but a certain post type is causing the error

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View:

(It work on initial render, only the appended posts aren't working) I have no idea what this error means or how to fix it. The style attributes look alright to me. Strangly enough, when I dismiss the error, everything is rendered, except the height is incorrect, it's higher than what I set it to be.

Reproduction

The problem is caused by a view with the following styles:

  playerYoutube: {
    flex: 1,
    height: 200,
    backgroundColor: 'black',
  },

Additional Information

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

[lacker]

Can you provide a minimal sample app that reproduces this? It doesn't seem like the styles you provided have enough info to reproduce the problem.

[hygkui]

@mxmtsk I have meet the same error, and I found the documents of break-changes in 0.36, it says
you should remove 'flex: x' or replace with 'flexGrow: x', x may be 0, 1, or 2 whatever, and it will resolve most problems.

the link is here: Breaking-Changes

[pvpshoot]

How can i detect which component breaks ?
http://take.ms/IiKoj

[olajyde]

Any update on the issue? @mxmtsk were you able to fix it? If yes how? I have no idea how to fix this. I have changed 'flex: x' and replaced with 'flexGrow: x'. Still unresolved :(

[hygkui]

@andela-Jaderibigbe x should be replaced with the real number such as 1.

[Taakn]

Same issue, same RN version (I cannot upgrade). Impossible to know which component is breaking.

[mxmtsk]

Hi,
this may not be applicable to everyone but in my specific case I went with this approach:

  youtubeVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  playerYoutube: {
    flex: 1,
    paddingBottom: 200,
    backgroundColor: 'black',
  },

<View style={styles.playerYoutube}>
  <YouTube
    ref="youtubePlayer"
    videoId={post.postable.gold.video_id} // The YouTube video ID
    play={false}           // control playback of video with true/false
    hidden={false}        // control visiblity of the entire view
    playsInline={true}    // control whether the video should play inline
    loop={false}          // control whether the video should loop when ended
    showinfo={false}

    style={styles.youtubeVideo}
  />
</View>

[Taakn]

@mxmtsk I ended up finding the missing flex that I had to replace by a flexGrow so it's working now. But really, thanks a lot for taking the time to reply a just few minutes after my post.

[Kerence]

I have encountered this issue, the reason is as follows:
view in a parent with flexDirection:'row' sets flex:1 and width:value
view in a parent with flexDirection:'column' sets flex:1 and height:value
In android, react native automatically skip flex:1 and uses the width/height value
In ios, react native detects the collision and throws an error.
It is important to notice the combinition of flex and width/height.

[zhaolei1177]

hi, @mxmtsk , @Kerence , i meet the same issue,and my code is:
posterPlayImg: {
flex: 1,
height: 48,
resizeMode: 'contain'
}

if i change it like the under code(add the width prop):

posterPlayImg: {
flex: 1,
height: 48,
width: 48,
resizeMode: 'contain'
}

can it close my error?

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