[fix] 'flex' shorthand sets 'flexBasis' to '0%'

The previous attempt at a fix (88ddeca0c6)
didn't account for 'View' handling the 'flexBasis' reset (as it used to
with 'flexShrink'). This patch moves flex style resolution into the DOM
style resolver.

Fix #426

src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js

@@ -22,36 +22,63 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
     expect(firstStyle).toEqual(secondStyle);
   });
 
-  test('flex', () => {
-    expect(createReactDOMStyle({ display: 'flex' })).toEqual({
-      display: 'flex',
-      flexShrink: 0
+  describe('flexbox styles', () => {
+    test('flex defaults', () => {
+      expect(createReactDOMStyle({ display: 'flex' })).toEqual({
+        display: 'flex',
+        flexShrink: 0,
+        flexBasis: 'auto'
+      });
     });
 
-    expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
-      display: 'flex',
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: '0%'
+    test('flex property expansion', () => {
+      expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '0%'
+      });
+
+      expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
+        display: 'flex',
+        flexGrow: 10,
+        flexShrink: 1,
+        flexBasis: '0%'
+      });
     });
 
-    expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
-      display: 'flex',
-      flexGrow: 10,
-      flexShrink: 1,
-      flexBasis: '0%'
+    test('flexBasis', () => {
+      // is flex-basis applied?
+      expect(createReactDOMStyle({ display: 'flex', flexBasis: '25%' })).toEqual({
+        display: 'flex',
+        flexShrink: 0,
+        flexBasis: '25%'
+      });
+
+      // can flex-basis override the 'flex' expansion?
+      expect(createReactDOMStyle({ display: 'flex', flex: 1, flexBasis: '25%' })).toEqual({
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: '25%'
+      });
     });
 
-    expect(createReactDOMStyle({ display: 'flex', flexShrink: 1 })).toEqual({
-      display: 'flex',
-      flexShrink: 1
-    });
+    test('flexShrink overrides', () => {
+      // is flex-shrink applied?
+      expect(createReactDOMStyle({ display: 'flex', flexShrink: 1 })).toEqual({
+        display: 'flex',
+        flexShrink: 1,
+        flexBasis: 'auto'
+      });
 
-    expect(createReactDOMStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
-      display: 'flex',
-      flexGrow: 1,
-      flexShrink: 2,
-      flexBasis: '0%'
+      // can flex-shrink override the 'flex' expansion?
+      expect(createReactDOMStyle({ display: 'flex', flex: 1, flexShrink: 2 })).toEqual({
+        display: 'flex',
+        flexGrow: 1,
+        flexShrink: 2,
+        flexBasis: '0%'
+      });
     });
   });
 

src/apis/StyleSheet/createReactDOMStyle.js

@@ -146,9 +146,14 @@ const createReducer = (style, styleProps) => {
     switch (prop) {
       case 'display': {
         resolvedStyle.display = value;
-        // default of 'flexShrink:0' has lowest precedence
-        if (style.display === 'flex' && style.flex == null && style.flexShrink == null) {
-          resolvedStyle.flexShrink = 0;
+        // defaults of 'flexBasis:auto' and 'flexShrink:0' have lowest precedence
+        if (style.display === 'flex' && style.flex == null) {
+          if (style.flexShrink == null) {
+            resolvedStyle.flexShrink = 0;
+          }
+          if (style.flexBasis == null) {
+            resolvedStyle.flexBasis = 'auto'
+          }
         }
         break;
       }

src/components/View/index.js

@@ -90,7 +90,6 @@ const styles = StyleSheet.create({
     borderStyle: 'solid',
     boxSizing: 'border-box',
     display: 'flex',
-    flexBasis: 'auto',
     flexDirection: 'column',
     margin: 0,
     padding: 0,