[change] Default flex-basis value of Views

React Native has an implementation of flexbox that does not quite follow the W3C spec for flexbox. Previously, React Native for Web attempted to replicate the React Native rendering by setting flexBasis to 0%. However, this created its own problems where views could collapse down to 0px in height on the web. This patch relies sets the default flexBasis back to 'auto'. This will cause different rendering inconsistencies with React Native, which can be addressed by making changes to existing React Native styles. And ultimately, it is up to Yoga to correct its flexbox implementation. Fix #1640 Fix #1604 Fix #1264 Close #1265
necolas · Sep 9, 2020 · 65cb4f1 · 65cb4f1
1 parent f52a9bc
commit 65cb4f1
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -11,7 +11,7 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 [stylesheet-group=\\"1\\"]{}
 .css-view-1dbjc4n{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;border:0 solid black;box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;z-index:0;}
 [stylesheet-group=\\"2\\"]{}
-.r-flex-13awgt0{-ms-flex-negative:1;-ms-flex-positive:1;-ms-flex-preferred-size:0%;-webkit-box-flex:1;-webkit-flex-basis:0%;-webkit-flex-grow:1;-webkit-flex-shrink:1;flex-basis:0%;flex-grow:1;flex-shrink:1;}
+.r-flex-13awgt0{-ms-flex-negative:1;-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;-webkit-flex-shrink:1;flex-grow:1;flex-shrink:1;}
 [stylesheet-group=\\"2.2\\"]{}
 .r-pointerEvents-12vffkv>*{pointer-events:auto;}
 .r-pointerEvents-12vffkv{pointer-events:none!important;}"

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
@@ -42,7 +42,6 @@ describe('StyleSheet/createReactDOMStyle', () => {
   describe('flexbox styles', () => {
     test('flex: -1', () => {
       expect(createReactDOMStyle({ flex: -1 })).toEqual({
-        flexBasis: 'auto',
         flexGrow: 0,
         flexShrink: 1
       });
@@ -51,24 +50,21 @@ describe('StyleSheet/createReactDOMStyle', () => {
     test('flex: 0', () => {
       expect(createReactDOMStyle({ flex: 0 })).toEqual({
         flexGrow: 0,
-        flexShrink: 0,
-        flexBasis: '0%'
+        flexShrink: 0
       });
     });
 
     test('flex: 1', () => {
       expect(createReactDOMStyle({ flex: 1 })).toEqual({
         flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: '0%'
+        flexShrink: 1
       });
     });
 
     test('flex: 10', () => {
       expect(createReactDOMStyle({ flex: 10 })).toEqual({
         flexGrow: 10,
-        flexShrink: 1,
-        flexBasis: '0%'
+        flexShrink: 1
       });
     });
 
@@ -95,8 +91,7 @@ describe('StyleSheet/createReactDOMStyle', () => {
       // can flex-shrink override the 'flex' expansion?
       expect(createReactDOMStyle({ flex: 1, flexShrink: 2 })).toEqual({
         flexGrow: 1,
-        flexShrink: 2,
-        flexBasis: '0%'
+        flexShrink: 2
       });
     });
   });

diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -106,15 +106,12 @@ const createReactDOMStyle = style => {
           if (value > 0) {
             resolvedStyle.flexGrow = value;
             resolvedStyle.flexShrink = 1;
-            resolvedStyle.flexBasis = '0%';
           } else if (value === 0) {
             resolvedStyle.flexGrow = 0;
             resolvedStyle.flexShrink = 0;
-            resolvedStyle.flexBasis = '0%';
           } else if (value === -1) {
             resolvedStyle.flexGrow = 0;
             resolvedStyle.flexShrink = 1;
-            resolvedStyle.flexBasis = 'auto';
           }
           break;
         }