View is missing flex-shrink

[MateWW]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

I've noticed discrepancy between web and native.
Initially I thought it's Yoga bug but thank to Nick it turned out that View component is compatible on web.

Original issue

The issue is that View on native while set with flex: 1 it translates to flex-grow: 1 + flex-shrink: 1

On web platform it just sets flex-grow: 1 while what leads to different behaviour in some cases.

iOS	Android	Web

Expected behavior

Equal behaviour on both native and web

Steps to reproduce

1. Open linked snack
2. See Web, Android and iOS

Test case

https://snack.expo.dev/@matew/yoga-rendering-issue

Additional comments

I believe it's small change code wise but most likely drastic change for users.
My hope is to start some discussion and see different PoV

[necolas]

Most of the idiosyncrasies of flexbox in React Native have been known about for years. There have been various forms of special handling for cases like -1 and the flex shorthand in React Native for Web. You can search the issues and code for past discussions.

The issue is that View on native while set with flex: 1 it translates to flex-grow: 1 + flex-shrink: 1. On web platform it just sets flex-grow: 1 while what leads to different behaviour in some cases.

This is what flex:1 expands to on web - grow 1, shrink 1, basis 0%.

In the screenshots you shared, it's the web rendering that is the correct. If you want web to match native, you have to also set flex:1 on the container. The margin handling is a difference issue.

https://snack.expo.dev/IRVaqAdl-xh3aIAtpLia-

Unfortunately, this is most likely due to React Native's implementation of flexbox deviating from web expectations in how it handles flexGrow in the view hierarchy.

Also see #1227