diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js index c2d3d980..e49c05b0 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js @@ -177,11 +177,15 @@ describe('StyleSheet/createReactDOMStyle', () => { }); test('shadowOffset only', () => { - expect(createReactDOMStyle({ shadowOffset: { width: 1, height: 2 } })).toEqual({}); + expect(createReactDOMStyle({ shadowOffset: { width: 1, height: 2 } })).toEqual({ + boxShadow: '1px 2px 0px rgba(0,0,0,1.00)' + }); }); test('shadowRadius only', () => { - expect(createReactDOMStyle({ shadowRadius: 5 })).toEqual({}); + expect(createReactDOMStyle({ shadowRadius: 5 })).toEqual({ + boxShadow: '0px 0px 5px rgba(0,0,0,1.00)' + }); }); test('shadowOffset, shadowRadius, shadowColor', () => { diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js index a7e85f7e..c5b7f555 100644 --- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js @@ -89,14 +89,10 @@ const resolveShadow = (resolvedStyle, style) => { const offsetX = normalizeValue(null, width); const offsetY = normalizeValue(null, height); const blurRadius = normalizeValue(null, shadowRadius || 0); - const color = normalizeColor(shadowColor, shadowOpacity); + const color = normalizeColor(shadowColor || 'black', shadowOpacity); - if (color) { - const shadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`; - resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow; - } else if (boxShadow) { - resolvedStyle.boxShadow = boxShadow; - } + const shadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`; + resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow; }; /**