[fix] minor inconsistency in textShadow style resolution

React Native doesn't apply textShadow styles when the 'height' or 'width' offset is 0.
necolas · Jun 4, 2018 · da38e87 · da38e87
1 parent a40521f
commit da38e87
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 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
@@ -252,15 +252,49 @@ describe('StyleSheet/createReactDOMStyle', () => {
     });
   });
 
-  test('textShadowOffset', () => {
-    expect(
-      createReactDOMStyle({
-        textShadowColor: 'red',
-        textShadowOffset: { width: 1, height: 2 },
-        textShadowRadius: 5
-      })
-    ).toEqual({
-      textShadow: '1px 2px 5px rgba(255,0,0,1.00)'
+  describe('textShadow styles', () => {
+    test('textShadowColor only', () => {
+      expect(createReactDOMStyle({ textShadowColor: 'red' })).toEqual({});
+    });
+
+    test('textShadowOffset only', () => {
+      expect(createReactDOMStyle({ textShadowOffset: { width: 1, height: 2 } })).toEqual({});
+    });
+
+    test('textShadowRadius only', () => {
+      expect(createReactDOMStyle({ textShadowRadius: 5 })).toEqual({});
+    });
+
+    test('textShadowColor and textShadowOffset only', () => {
+      expect(
+        createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: 0, height: 0 } })
+      ).toEqual({});
+      expect(
+        createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: -1, height: 0 } })
+      ).toEqual({
+        textShadow: '-1px 0px 0px rgba(255,0,0,1.00)'
+      });
+      expect(
+        createReactDOMStyle({ textShadowColor: 'red', textShadowOffset: { width: 1, height: 2 } })
+      ).toEqual({
+        textShadow: '1px 2px 0px rgba(255,0,0,1.00)'
+      });
+    });
+
+    test('textShadowColor and textShadowRadius only', () => {
+      expect(createReactDOMStyle({ textShadowColor: 'red', textShadowRadius: 5 })).toEqual({});
+    });
+
+    test('textShadowColor, textShadowOffset, textShadowRadius', () => {
+      expect(
+        createReactDOMStyle({
+          textShadowColor: 'rgba(50,60,70,0.50)',
+          textShadowOffset: { width: 5, height: 10 },
+          textShadowRadius: 15
+        })
+      ).toEqual({
+        textShadow: '5px 10px 15px rgba(50,60,70,0.50)'
+      });
     });
   });
 

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