flex: 1 does not set flexGrow: 1 about yoga

[ecreeth]

Setting the style flex: 1 is supposed to set flexGrow: 1, flexShrink: 1 and flexBasis: "auto".

[darkbasic]

@ecreeth flex: 1 doesn't set flexGrow: 1, flexShrink: 1, flexBasis: 0 either, because flexGrow: 1, flexShrink: 1, flexBasis: 0 renders correctly (see screenshot below) while flex: 1 doesn't (see previous screenshot).

[mxcihak]

Same here. For me this happens when I set container to flex: 1 (everything OK) then to flexGrow: 1 (everything OK) then to flex:1 (container disappears - height: 0)

[darkbasic]

I'm not sure but I think it might be a react-native regression, if I recall correctly I've tried to downgrade several major versions and the issue disappeared. In the end I've decided to simply change my CSS because it was easier than debugging it.

[dharit-tan]

Bump, seeing this as well!

[matart15]

exact same.
and this issue is closed without explanation
facebook/react-native#11565

[lunaleaps]

Can we move this issue to the yoga repo?
cc @NickGerleman

[NickGerleman]

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

One-value syntax: the value must be one of:

1. a valid value for : then the shorthand expands to flex: <flex-grow> 1 0.
2. a valid value for : then the shorthand expands to flex: 1 1 <flex-basis>.

So, on the web, the number should lead to:

1. Flex shrink being set to 1
2. Flex grow getting set to n if it is a number, or 1 if it is a length
3. Flex basis is set to n if it is a length, or 0 if it is a number

I confirmed this by looking at https://www.w3.org/TR/css-flexbox-1/#flex-common

The React Native/Yoga version of flex is documented here, and I checked that it is how the code works. The value for flex will contribute to flexGrow if positive, and flexShrink if negative. https://reactnative.dev/docs/layout-props#flex

62f4719 from a few years ago has Yoga doing the right thing when opted into useWebDefaults (but I think actually doing the wrong thing wrt flexbasis should be set to zero). But changing these defaults for existing RN styles would be pretty breaking.

[darkbasic]

If this is indeed the case, nice catch! Breaking or not the current defaults make little sense and are pretty annoying and confusing.