React-native: Document the use and difference between flex and flexGrow

[mschipperheyn]

In 0.36 and 0.39 a number of changes were introduced to the way the flexbox in RN works.
Before the flexGrow property was introduced, we often laid out our flex boxes by applying flex : 1.

With 0.36 and 0.39 this can lead to collapsing UIs (https://github.com/facebook/react-native/issues/11441). Some of these situations lead to warnings in the console, others do not and just seem unexpected and weird.

To me, it is now unclear when to use flex (if at all) and when to use flexGrow. Judging by the limited documentation on RN and the more extensive of Yoga, it seems the properties seem to overlap. And the flex property doesn't occur in Yoga. Since in RN all Views are flexboxes by default, flex doesn't need to be "turned on" (css => display : flex). So, why have flex at all? Should everything now be flexGrow?

Since I'm wasting a lot of my time trying to get my UI to work properly again after these changes, I would appreciate some clear documentation on when to use one or the other.

I'll even write the documentation if you explain it to me.

[ide]

The ~40 lines starting here through YGNodeStyleSetFlex are the best explanation of flex vs flexGrow I've seen: https://github.com/facebook/yoga/blob/master/yoga/Yoga.c#L363.

At a glance I'm not sure what the difference between flexBasis = 0 and flexBasis = YGUndefined are, though. @emilsjolander would you be able to explain that quickly to me?

[emilsjolander]

Flexbasis = 0 is 0px
FlexBasis = YGUndefined is auto

[ide]

Thanks!

Reading the spec https://drafts.csswg.org/css-flexbox-1/#flex-flex-basis flex-basis: auto means that the layout engine looks at height (or width depending on the flex direction) and if it's unspecified then it looks at the intrinsic size of the content.

@mschipperheyn I think this thread gives you enough information to start writing docs on it? Also see this from the spec:

[SudoPlz]

Still doesn't make sense to me..

[wootwoot1234]

This is still confusing to me too...

[johnchourajr]

agreed 👆

[AggarwalAnkit]

please, someone, explain the difference between flex and flexGrow in react-native

[wootwoot1234]

@AggarwalAnkit I spent a day or two trying to figure this out. Here is what I came up with:

flex vs flexGrow vs flexShrink vs flexBasis in React Native?

Hope it helps.

[johnchourajr]

@AggarwalAnkit

Flex is a parent property, and applies to its children. Just like how flexAlign will make as set of children align.

flexGrow, flexShrink is a self property. Similar to how alignSelf works.

The biggest change is that you can't blanket apply flex to a parent element and expect all of the children to just assume the proportions of the container. I've found that yo have to go in, and add flexGrow or flexShrink to the child elements.

[johnchourajr]

@AggarwalAnkit

If you look here, https://codepen.io/enxaneta/full/adLPwv/, in the css usage of the 'flex' property, it's an all encompassing shorthand property comprised of flex-grow flex-shrink and flex-basis.

Why React Native doesn't treat it in this way? I'm not sure.

[AggarwalAnkit]

@johnchourajr that is what my question was. Flex in react-native is not same as flex in CSS where flex = flex-grow flex-shrink flex-basis. @johnchourajr @wootwoot1234 thanks for the pointers guys. I will read more and update here.

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

[hnordt]

It's still confusing for me the difference between flex: 1 and flexGrow: 1. Could someone explain the difference?

@sebmarkbage

[wootwoot1234]

Maybe this will help.
https://stackoverflow.com/questions/43143258/flex-vs-flexgrow-vs-flexshrink-vs-flexbasis-in-react-native
On Sat, Nov 11, 2017 at 6:27 AM Héliton Nordt [e-mail]
wrote:

It's still confusing for me the difference between flex: 1 and flexGrow: 1.
Could someone explain the difference?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/11565#issuecomment-343668906,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAZnGS7WefQrYoz8x3Si2VqR5tlGs-A7ks5s1a7jgaJpZM4LSD4F
.

[hnordt]

@wootwoot1234 I found this link too, but it's still not clear, I would like an "official" explanation.

[stanmots]

The link mentioned by @wootwoot1234 doesn't answer the main questions of this thread:

• Why React Native doesn't follow CSS standard where flex is just a shorthand for flex-grow flex-shrink and flex-basis? Are there any benefits of the current implementation?
• What are the official differences between flex and flexGrow in RN? Yes, it's possible to investigate this by testing code snippets, but we need an expected behaviour, not an observed one.

[TheDutchCoder]

I ran into this problem today as well.

I work a lot with flexbox in CSS and react's implementation (or Yoga, rather) is completely different and the cascade is pretty much non-existent.

Nest two Views into each other with flex: 1 and be witness of some sort of implosion of it's child elements. It makes very little sense and the documentation doesn't seem to explain this behaviour either (other than claiming it's almost identical to CSS (it's not)).

In CSS, you specify a container to be a flex container and all its direct descendants become flex items. In RN it looks like everything is a flexbox at all items or something. Setting flex: 1 on an element should technically not do anything (if RN makes everything a flexbox anyway), except it does and behaves unpredictably.

Anyway, when you're used to the CSS flexbox spec, you'll probably have a hard time reasoning about RN's implementation. To make matters worse, the inspector actually doesn't show parent Views in a lot of cases, so you can't even debug where your child elements have flown off to. You can use xcode's debugger to see the stacking in most cases, but it's a major PITA to use.

[hnordt]

I don't understand why this issue was closed. I think it's fundamental to understand the differences between flex: 1 and flexGrow: 1.

[lafiosca]

I just found I had to set a ScrollView to flexGrow: 1 instead of flex: 1 to get it to scroll properly on Android, but I have no idea why. I'd love to understand the difference.