From 108366a72421e1b7ef8800a05584b507e948f8bf Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 25 Aug 2020 16:28:32 -0700
Subject: [PATCH] [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
---
 .../__tests__/__snapshots__/index-test.js.snap      |  2 +-
 .../__tests__/createReactDOMStyle-test.js           | 13 ++++---------
 .../src/exports/StyleSheet/createReactDOMStyle.js   |  3 ---
 3 files changed, 5 insertions(+), 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
index b9015c7d..8c2f7a9b 100644
--- 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
index 473594ad..6c596e4a 100644
--- 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
index 49288231..36f2e613 100644
--- 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;
         }