Merge pull request #1085 from Shopify/fix/color-parsing

Fix color parsing on RN Web

Author: chrfalch

package/src/skia/__tests__/Geometry.spec.ts

@@ -12,4 +12,28 @@ describe("Geometry", () => {
     expect(result.width).toBe(140);
     expect(result.height).toBe(60);
   });
+
+  test("parse #hex without opacity", () => {
+    const { Skia } = importSkia();
+
+    const color = Skia.Color("#808080");
+    expect(color[0]).toBeCloseTo(0.5);
+    expect(color[1]).toBeCloseTo(0.5);
+    expect(color[2]).toBeCloseTo(0.5);
+  });
+  test("parse #hex with opacity", () => {
+    const { Skia } = importSkia();
+
+    let color = Skia.Color("#80808080");
+    expect(color[0]).toBeCloseTo(0.5);
+    expect(color[1]).toBeCloseTo(0.5);
+    expect(color[2]).toBeCloseTo(0.5);
+    expect(color[3]).toBeCloseTo(0.5);
+
+    color = Skia.Color("#ff800080");
+    expect(color[0]).toBeCloseTo(1);
+    expect(color[1]).toBeCloseTo(0.5);
+    expect(color[2]).toBeCloseTo(0);
+    expect(color[3]).toBeCloseTo(0.5);
+  });
 });

package/src/skia/web/JsiSkColor.ts

@@ -241,6 +241,17 @@ const parseCSSColor = (cssStr: string) => {
         return null;
       } // Covers NaN.
       return [(iv & 0xff0000) >> 16, (iv & 0xff00) >> 8, iv & 0xff, 1];
+    } else if (str.length === 9) {
+      var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xffffffff)) {
+        return null; // Covers NaN.
+      }
+      return [
+        ((iv & 0xff000000) >> 24) & 0xff,
+        (iv & 0xff0000) >> 16,
+        (iv & 0xff00) >> 8,
+        (iv & 0xff) / 255,
+      ];
     }
 
     return null;