[fix] set textShadow if only blur and color provided

Mirrors a recent fix to React Native. Close #1182
necolas · Mar 8, 2019 · cf7b020 · cf7b020
1 parent 49edcb2
commit cf7b020
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
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
@@ -284,7 +284,10 @@ describe('StyleSheet/createReactDOMStyle', () => {
     });
 
     test('textShadowColor and textShadowRadius only', () => {
-      expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({});
+      expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 0 })).toEqual({});
+      expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({
+        textShadow: '0px 0px 5px rgba(255,0,0,1.00)'
+      });
     });
 
     test('textShadowColor, textShadowOffset, textShadowRadius', () => {

diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -106,12 +106,13 @@ const resolveTextDecoration = (resolvedStyle, style) => {
 const resolveTextShadow = (resolvedStyle, style) => {
   const { textShadowColor, textShadowOffset, textShadowRadius } = style;
   const { height, width } = textShadowOffset || defaultOffset;
+  const radius = textShadowRadius || 0;
   const offsetX = normalizeValue(null, width);
   const offsetY = normalizeValue(null, height);
-  const blurRadius = normalizeValue(null, textShadowRadius || 0);
+  const blurRadius = normalizeValue(null, radius);
   const color = normalizeColor(textShadowColor);
 
-  if (color && (height !== 0 || width !== 0)) {
+  if (color && (height !== 0 || width !== 0 || radius !== 0)) {
     resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
   }
 };