diff --git a/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js b/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js index 2ec5027b..ec06ef83 100644 --- a/src/apis/StyleSheet/__tests__/createReactDOMStyle-test.js +++ b/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%' + }); }); }); diff --git a/src/apis/StyleSheet/createReactDOMStyle.js b/src/apis/StyleSheet/createReactDOMStyle.js index 7e1ed86f..7f1c7f86 100644 --- a/src/apis/StyleSheet/createReactDOMStyle.js +++ b/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; } diff --git a/src/components/View/index.js b/src/components/View/index.js index 5b83c050..7523bd5f 100644 --- a/src/components/View/index.js +++ b/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,