[fix] flex style resolution

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

@@ -31,14 +31,34 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
       });
     });
 
-    test('flex property expansion', () => {
+    test('flex: -1', () => {
+      expect(createReactDOMStyle({ display: 'flex', flex: -1 })).toEqual({
+        display: 'flex',
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: 'auto'
+      });
+    });
+
+    test('flex: 0', () => {
+      expect(createReactDOMStyle({ display: 'flex', flex: 0 })).toEqual({
+        display: 'flex',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto'
+      });
+    });
+
+    test('flex: 1', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 1 })).toEqual({
         display: 'flex',
         flexGrow: 1,
         flexShrink: 1,
         flexBasis: '0%'
       });
+    });
 
+    test('flex: 10', () => {
       expect(createReactDOMStyle({ display: 'flex', flex: 10 })).toEqual({
         display: 'flex',
         flexGrow: 10,
@@ -47,7 +67,7 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
       });
     });
 
-    test('flexBasis', () => {
+    test('flexBasis overrides', () => {
       // is flex-basis applied?
       expect(createReactDOMStyle({ display: 'flex', flexBasis: '25%' })).toEqual({
         display: 'flex',

src/apis/StyleSheet/createReactDOMStyle.js

@@ -147,7 +147,7 @@ const createReducer = (style, styleProps) => {
       case 'display': {
         resolvedStyle.display = value;
         // defaults of 'flexBasis:auto' and 'flexShrink:0' have lowest precedence
-        if (style.display === 'flex' && style.flex == null) {
+        if (style.display === 'flex') {
           if (style.flexShrink == null) {
             resolvedStyle.flexShrink = 0;
           }
@@ -166,9 +166,17 @@ const createReducer = (style, styleProps) => {
         break;
       }
       case 'flex': {
-        resolvedStyle.flexGrow = value;
+        if (value > 0) {
-        resolvedStyle.flexShrink = 1;
+          resolvedStyle.flexGrow = value;
-        resolvedStyle.flexBasis = '0%';
+          resolvedStyle.flexShrink = 1;
+          resolvedStyle.flexBasis = '0%';
+        } else if (value === 0) {
+          resolvedStyle.flexGrow = 0;
+          resolvedStyle.flexShrink = 0;
+        } else if (value === -1) {
+          resolvedStyle.flexGrow = 0;
+          resolvedStyle.flexShrink = 1;
+        }
         break;
       }
       case 'shadowColor':