flex gets converted to flex-grow

[dsernst]

What is the current behavior?

When I use flex: 3 in a component's style prop, it gets converted to flex-grow: 3 in the DOM.

What is the expected behaviour?

flex: 3 in react-native-web should appear as flex: 3 in the DOM, not flex-grow.

Environment (include versions)

React Native for Web (version): ^0.0.81

[necolas]

They are equivalent

[dsernst]

Appreciate the quick response. Are you sure they are equivalent? When I use flex in the DOM, it implicitly adds a flex-shrink and flex-basis as well:

I had to manually add a flex-basis to react-native-web components to get the same layout for css-in-js vs traditional css.

[necolas]

React Native's flex is a bit different. It also adds flex-shrink:1, but uses flex-basis:auto instead of flex-basis:0%

[maszaa]

I tried the calculator with this done in Kyle Bank's tutorial (code). Works fine otherwise but the flex is converted to flex-grow which causes the InputButton components to align ugly:

Changing the CSS rule (manually on the browser dev tools) to {flex: 1} fixes the problem:

Could this behaviour be fixed?

[necolas]

As you can see in the screenshot, the only difference is the value of flex-basis

[maszaa]

But why is the flex converted (only) to the flex-grow? They aren't the same thing. Flex is flex-grow, flex-shrink and the flex-basis combined together as defined in the CSS reference.

[RangerMauve]

@maszaa This library is simply following the react-native API for flexbox

To quote their docs:

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga library at https://github.com/facebook/yoga

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

When flex is 0, the component is sized according to width and height and it is inflexible.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

flexGrow, flexShrink, and flexBasis work the same as in CSS.

[maszaa]

But doesn't

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

actually mean the same thing as

The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

React Native has flexGrow which works the same way as flex-grow in CSS so converting its flex to CSS' flex-grow seems inconsistent as flex in React Native isn't flexGrow.

[necolas]

But why is the flex converted (only) to the flex-grow?

flex is converted to flexGrow, flexShrink, and flexBasis.

react-native-web/src/apis/StyleSheet/createReactDOMStyle.js

Lines 155 to 160 in cdf13b8

	case 'flex': {
	resolvedStyle.flexGrow = value;
	resolvedStyle.flexShrink = 1;
	resolvedStyle.flexBasis = 'auto';
	break;
	}

[maszaa]

My bad. What about setting that to 0? At least worked for the calculator when I manually set all the flex components to have flexBasis: 0

[necolas]

Looks like maybe we should do that. I'll investigate a bit more

[maszaa]

Thanks for the fix! Unfortunately my flex attributes still convert to flex: value, flexGrow: 1, flexBasis: auto, though the code now has resolvedStyle.flexBasis = '0%';. I've installed the latest version, re-installed all npm packages and cleaned the whole build but that didn't help. Where could the problem be?

[ntharim]

The problem is even though resolvedStyle.flexBasis = '0%';, flexBasis is auto in the default View style. So when it loops through all the style props, when prop is flex, resolvedStyle.flexBasis is set to 0% correctly. When prop is flexBasis, resolvedStyle.flexBasis is set back to auto .

[ThaJay]

In react-native-electron I had a bug that a text element would take up full height in production but in development it would only be the height of the text like it shoud. Thanks to this discussion, I was able to solve it with:

style = {
  flex      : 0,
  flexGrow  : 0,
  flexBasis : 0,
  flexShrink: 1,
}