diff --git a/docs/components/View.md b/docs/components/View.md index a1d6aac0..5c146f8f 100644 --- a/docs/components/View.md +++ b/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` diff --git a/src/components/View/ViewStylePropTypes.js b/src/components/View/ViewStylePropTypes.js index 219347a9..c1b07e6d 100644 --- a/src/components/View/ViewStylePropTypes.js +++ b/src/components/View/ViewStylePropTypes.js @@ -44,6 +44,7 @@ export default { 'boxShadow', 'boxSizing', 'cursor', + 'flex', 'flexBasis', 'flexDirection', 'flexGrow', diff --git a/src/modules/StylePropTypes/index.js b/src/modules/StylePropTypes/index.js index dd328aa9..5b05a786 100644 --- a/src/modules/StylePropTypes/index.js +++ b/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, - flexShrink: numberOrString, + flexGrow: number, + flexShrink: number, flexWrap: string, float: string, font: string, /* @private */ diff --git a/src/modules/StyleSheet/__tests__/expandStyle-test.js b/src/modules/StyleSheet/__tests__/expandStyle-test.js index 381c4e8e..a68de4e4 100644 --- a/src/modules/StyleSheet/__tests__/expandStyle-test.js +++ b/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) }) }) diff --git a/src/modules/StyleSheet/expandStyle.js b/src/modules/StyleSheet/expandStyle.js index dcc2481f..31b2c6c6 100644 --- a/src/modules/StyleSheet/expandStyle.js +++ b/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 }