React-Native view was rendered with explicitly set width/height but with a 0 flexBasis

Question

In React-native 0.39,

I often get this error but I don't really understand why (appart the fact that I didn't set flexGrow...).

Here is the error from the console

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6080005a02a0; viewName: RCTView; reactTag: 2608; frame: {{0, 0}, {nan, nan}}>

Can someone explain to me why this error is triggered ?

EDIT: The error comes from this bit of boilerplate code I added in on the main View :

flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,

But If someone could shed a light on react-native styling or lead me to good resources, I'll be grateful :)

Answer 1

Refer to react-native/React/Views/RCTShadowView.m, there has comments

    This works around a breaking change in css-layout where setting flexBasis needs to 
be set explicitly, instead of relying on flex to propagate.

    We check for it by seeing if a width/height is provided along with a flexBasis  
of 0 and the width/height is laid out as 0.

The error is triggered when flex without defined flexBasis and having either width and height is zero.

Refer to react-native/Libraries/StyleSheet/LayoutPropTypes.js, we know the flexGrow, flexShrink and flexBasis receive values of number.

For visual guide, you might refer to this webpage, A Visual Guide to CSS3 Flexbox Properties.

Answer 2

Specifying flexDirection: 'row' solves the problem ¯\_(ツ)_/¯

Answer 3

As the error states - change the 'flex' to 'flexGrow' and the issue is solved.

The difficult part about this is how to locate which 'flex' needs to be changed from the whole project. What I did was (using Atom Editor, so 'Find in Project' ...) changing each 'flex:' with 'flexGrow:' (with the ':' at the end you make sure that you change a style) and then simply search the whole project again for a 'flexGrow' and change every 'flexGrow' from each file with 'flex' until you locate the corrupted 'flex'.

I prefer using flex instead of flexGrow, that's why I revert to flex. This is why: Layout Props

Hope this solves the issues.