diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js index 2e2dca4..b723471 100644 --- a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js +++ b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js @@ -135,13 +135,25 @@ export function createStrictDOMComponent( } else if (displayValue === 'block' && displayInsideValue === 'flow') { // Force the block emulation styles nextDisplayInsideValue = 'flow'; - nativeProps.style.alignItems = 'stretch'; nativeProps.style.display = 'flex'; - nativeProps.style.flexBasis = 'auto'; - nativeProps.style.flexDirection = 'column'; - nativeProps.style.flexShrink = 0; - nativeProps.style.flexWrap = 'nowrap'; - nativeProps.style.justifyContent = 'flex-start'; + if (nativeProps.style.alignItems != null) { + nativeProps.style.alignItems = 'stretch'; + } + if (nativeProps.style.flexBasis != null) { + nativeProps.style.flexBasis = 'auto'; + } + if (nativeProps.style.flexDirection != null) { + nativeProps.style.flexDirection = 'column'; + } + if (nativeProps.style.flexShrink != null) { + nativeProps.style.flexShrink = 0; + } + if (nativeProps.style.flexWrap != null) { + nativeProps.style.flexWrap = 'nowrap'; + } + if (nativeProps.style.justifyContent != null) { + nativeProps.style.justifyContent = 'flex-start'; + } } if (displayInsideValue === 'flex') { diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js index 8cc5386..ee6d827 100644 --- a/packages/react-strict-dom/tests/html-test.native.js +++ b/packages/react-strict-dom/tests/html-test.native.js @@ -71,10 +71,13 @@ describe('', () => { test('block layout override of flex layout', () => { const styles = css.create({ root: { + display: 'block', + flexBasis: '25%', flexDirection: 'row', alignItems: 'start', flexShrink: '1', - display: 'block' + flexWrap: 'wrap', + justifyContent: 'flex-end' } });