@shopify/react-native-skia 0.1.121 → 0.1.124

package/src/skia/Skia.ts

@@ -1,3 +1,5 @@
+import { Platform, processColor } from "react-native";
+
 /*global SkiaApi*/
 import type { ImageFilterFactory } from "./ImageFilter";
 import type { PathFactory } from "./Path";
@@ -11,8 +13,6 @@ import type { SkRect } from "./Rect";
 import type { SkRRect } from "./RRect";
 import type { RuntimeEffectFactory } from "./RuntimeEffect";
 import type { ShaderFactory } from "./Shader";
-import type { SkColor } from "./Color";
-import { processColor } from "./Color";
 import type { SkMatrix } from "./Matrix";
 import type { PathEffectFactory } from "./PathEffect";
 import type { SkPoint } from "./Point";
@@ -27,6 +27,45 @@ import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
 import type { PictureFactory, SkPictureRecorder } from "./Picture";
+import type { Color, SkColor } from "./Color";
+
+/*
+ * Parse CSS colors
+ */
+const SkiaColor = (cl: Color) => {
+  if (typeof cl === "number") {
+    return cl;
+  }
+  const color = Skia.parseColorString(cl);
+  if (color !== undefined) {
+    return color;
+  } else {
+    // If the color is not recognized, we fallback to React Native
+    let rnColor = processColor(cl);
+    // 1. Neither Skia or RN could parse the color
+    if (typeof rnColor !== "number") {
+      console.warn("Skia couldn't parse the following color " + cl);
+      return BLACK;
+      // 2. The color is recognized by RN but not by Skia
+    } else {
+      console.warn(
+        "Skia couldn't parse the following color " +
+          cl +
+          ". The color parsing was delegated to React Native. Please file on issue with that color."
+      );
+      // On android we need to move the alpha byte to the start of the structure
+      if (Platform.OS === "android") {
+        rnColor = rnColor >>> 0;
+        const a = (rnColor >> 24) & 0xff;
+        const r = (rnColor >> 16) & 0xff;
+        const g = (rnColor >> 8) & 0xff;
+        const b = rnColor & 0xff;
+        rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
+      }
+      return rnColor;
+    }
+  }
+};
 
 /**
  * Declares the interface for the native Skia API
@@ -36,6 +75,8 @@ export interface Skia {
   XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
   RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
   RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+  Color: (color: Color) => SkColor;
+  parseColorString: (color: string) => SkColor | undefined;
   ContourMeasureIter: (
     path: SkPath,
     forceClosed: boolean,
@@ -115,7 +156,8 @@ export const Skia = {
   ColorFilter: SkiaApi.ColorFilter,
   ContourMeasureIter: SkiaApi.ContourMeasureIter,
   // Here are constructors for data types which are represented as typed arrays in CanvasKit
-  Color: (color: Parameters<typeof processColor>[0]) => processColor(color, 1),
+  Color: SkiaColor,
+  parseColorString: SkiaApi.parseColorString,
   RSXform: SkiaApi.RSXform,
   // For the following methods the factory symmetry is broken to be comptatible with CanvasKit
   MakeSurface: SkiaApi.Surface.Make,
@@ -123,3 +165,5 @@ export const Skia = {
   MakeImage: SkiaApi.Image.MakeImage,
   MakeVertices: SkiaApi.MakeVertices,
 };
+
+const BLACK = Skia.parseColorString("black")!;

package/src/values/animation/timing/functions/getResolvedParams.ts

@@ -42,8 +42,8 @@ export const getResolvedParams = (
 
   const resolvedConfig: Required<TimingConfig> = { ...DefaultTimingConfig };
   if (config) {
-    resolvedConfig.duration = config.duration;
-    resolvedConfig.easing = config.easing ?? ((t) => t);
+    resolvedConfig.duration = config.duration ?? DefaultTimingConfig.duration;
+    resolvedConfig.easing = config.easing ?? DefaultTimingConfig.easing;
   }
 
   return { ...resolvedParameters, ...resolvedConfig };

package/src/values/animation/types.ts

@@ -1,12 +1,12 @@
 export interface SpringConfig {
-  mass: number;
-  stiffness: number;
-  damping: number;
-  velocity: number;
+  mass?: number;
+  stiffness?: number;
+  damping?: number;
+  velocity?: number;
 }
 
 export interface TimingConfig {
-  duration: number;
+  duration?: number;
   easing?: (t: number) => number;
 }