[fix] Use browser expansion of 'flex' style

Fix #1792

Author: necolas

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;-webkit-box-flex:1;-webkit-flex-grow:1;-webkit-flex-shrink:1;flex-grow:1;flex-shrink:1;}
+.r-flex-13awgt0{-ms-flex:1 1 0%;-webkit-flex:1;flex:1;}
 [stylesheet-group=\\"2.2\\"]{}
 .r-pointerEvents-12vffkv>*{pointer-events:auto;}
 .r-pointerEvents-12vffkv{pointer-events:none!important;}"

packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -43,28 +43,26 @@ describe('StyleSheet/createReactDOMStyle', () => {
     test('flex: -1', () => {
       expect(createReactDOMStyle({ flex: -1 })).toEqual({
         flexGrow: 0,
-        flexShrink: 1
+        flexShrink: 1,
+        flexBasis: 'auto'
       });
     });
 
     test('flex: 0', () => {
       expect(createReactDOMStyle({ flex: 0 })).toEqual({
-        flexGrow: 0,
-        flexShrink: 0
+        flex: 0
       });
     });
 
     test('flex: 1', () => {
       expect(createReactDOMStyle({ flex: 1 })).toEqual({
-        flexGrow: 1,
-        flexShrink: 1
+        flex: 1
       });
     });
 
     test('flex: 10', () => {
       expect(createReactDOMStyle({ flex: 10 })).toEqual({
-        flexGrow: 10,
-        flexShrink: 1
+        flex: 10
       });
     });
 
@@ -76,8 +74,7 @@ describe('StyleSheet/createReactDOMStyle', () => {
 
       // can flex-basis override the 'flex' expansion?
       expect(createReactDOMStyle({ flex: 1, flexBasis: '25%' })).toEqual({
-        flexGrow: 1,
-        flexShrink: 1,
+        flex: 1,
         flexBasis: '25%'
       });
     });
@@ -90,7 +87,7 @@ describe('StyleSheet/createReactDOMStyle', () => {
 
       // can flex-shrink override the 'flex' expansion?
       expect(createReactDOMStyle({ flex: 1, flexShrink: 2 })).toEqual({
-        flexGrow: 1,
+        flex: 1,
         flexShrink: 2
       });
     });

packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js

@@ -101,15 +101,12 @@ const createReactDOMStyle = style => {
         // The 'flex' property value in React Native must be a positive integer,
         // 0, or -1.
         case 'flex': {
-          if (value > 0) {
-            resolvedStyle.flexGrow = value;
-            resolvedStyle.flexShrink = 1;
-          } else if (value === 0) {
-            resolvedStyle.flexGrow = 0;
-            resolvedStyle.flexShrink = 0;
-          } else if (value === -1) {
+          if (value === -1) {
             resolvedStyle.flexGrow = 0;
             resolvedStyle.flexShrink = 1;
+            resolvedStyle.flexBasis = 'auto';
+          } else {
+            resolvedStyle.flex = value;
           }
           break;
         }