[add] StyleSheet: support 'flex' style prop

Fix #63

docs/components/View.md

@@ -100,6 +100,7 @@ from `style`.
 + `boxShadow`
 + `boxSizing`
 + `cursor`
++ `flex` (number)
 + `flexBasis`
 + `flexDirection`
 + `flexGrow`
@@ -108,7 +109,7 @@ from `style`.
 + `height`
 + `justifyContent`
 + `left`
-+ `margin`
++ `margin` (single value)
 + `marginBottom`
 + `marginHorizontal`
 + `marginLeft`
@@ -124,7 +125,7 @@ from `style`.
 + `overflow`
 + `overflowX`
 + `overflowY`
-+ `padding`
++ `padding` (single value)
 + `paddingBottom`
 + `paddingHorizontal`
 + `paddingLeft`

src/components/View/ViewStylePropTypes.js

@@ -44,6 +44,7 @@ export default {
     'boxShadow',
     'boxSizing',
     'cursor',
+    'flex',
     'flexBasis',
     'flexDirection',
     'flexGrow',

src/modules/StylePropTypes/index.js

@@ -49,11 +49,11 @@ export default {
   cursor: string,
   display: string,
   direction: string, /* @private */
-  flex: string, /* @private */
+  flex: number,
   flexBasis: string,
   flexDirection: string,
-  flexGrow: numberOrString,
+  flexGrow: number,
-  flexShrink: numberOrString,
+  flexShrink: number,
   flexWrap: string,
   float: string,
   font: string, /* @private */

src/modules/StyleSheet/__tests__/expandStyle-test.js

@@ -4,7 +4,7 @@ import assert from 'assert'
 import expandStyle from '../expandStyle'
 
 suite('modules/StyleSheet/expandStyle', () => {
-  test('style property', () => {
+  test('style resolution', () => {
     const initial = {
       borderTopWidth: 1,
       borderWidth: 2,
@@ -13,7 +13,7 @@ suite('modules/StyleSheet/expandStyle', () => {
       margin: 10
     }
 
-    const expectedStyle = {
+    const expected = {
       borderTopWidth: 1,
       borderLeftWidth: 2,
       borderRightWidth: 2,
@@ -24,6 +24,22 @@ suite('modules/StyleSheet/expandStyle', () => {
       marginRight: 10
     }
 
-    assert.deepEqual(expandStyle(initial), expectedStyle)
+    assert.deepEqual(expandStyle(initial), expected)
+  })
+
+  test('flex', () => {
+    const value = 10
+
+    const initial = {
+      flex: value
+    }
+
+    const expected = {
+      flexGrow: value,
+      flexShrink: 1,
+      flexBasis: 'auto'
+    }
+
+    assert.deepEqual(expandStyle(initial), expected)
   })
 })

src/modules/StyleSheet/expandStyle.js

@@ -42,6 +42,10 @@ const expandStyle = (style) => {
       expandedProps.forEach((prop, i) => {
         resolvedStyle[expandedProps[i]] = value
       })
+    } else if (key === 'flex') {
+      resolvedStyle.flexGrow = value
+      resolvedStyle.flexShrink = 1
+      resolvedStyle.flexBasis = 'auto'
     } else {
       resolvedStyle[key] = value
     }