React-native-web: `flex: 0` does not respect intrinsic size on Web; but does on iOS and Android

[shirakaba]

The problem

• ✅ On iOS and Android: flex: 0 sizes elements down to their intrinsic size (as is correct and expected), keeping them at width: 8 and height: 8.
• ❌ On Web: flex: 0 sizes elements down all the way to 0px on the main axis (i.e. "width" for a child of a row), causing them to disappear from view.

iOS	Android	Web

How to reproduce

I've reproduced the same minimum-working example for both RNW alone and for Expo (to show native behaviour).

• From the Code Sandbox RNW template: https://codesandbox.io/s/cross-platform-flex-inconsistency-6gpwr
• In an Expo Snack (to compare to Android and iOS): https://snack.expo.io/@bottledlogic/cross-platform-%22flex%22-inconsistencies

Steps to reproduce:

1. In these MWEs, I add flex: 0 style to an element, along with explicit width and height.
2. See how the elements size differently on Web vs. iOS/Android.

Expected behavior

For both flex: 0 and flex: -1, my PageIndicator should look like this (disregarding the background colour), respecting the width: 8 and height: 8 properties of the indicator circles:

Sizing should be consistent between iOS/Android and Web, and should adhere to the React Native documentation's stated behaviour for flex:

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.

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. flex: <positive number> equates to flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.

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

Environment (include versions). Did this work in previous versions?

flex: 0 has behaved poorly for as long as I have used RNW.

• Expo SDK: v37.0.0
• React Native for Web (version): 0.11.7
• React (version): 16.12.0
• Browser: Safari 13.1, Chrome 81
• OS: macOS 10.14.6

Additional context

See:

• https://reactnative.dev/docs/layout-props#flex
• https://reactnative.dev/docs/flexbox#flex
• https://yogalayout.com/playground/
• https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c

[necolas]

I don't know if this can be done on web. React Native doesn't correctly implement the W3C spec and we've had discussions about fixing that so there is cross platform consistency

[necolas]

This might be caused by the flexBasis 0% default

[necolas]

This should be fixed in the @canary version