@shopify/react-native-skia 0.1.227 → 0.1.228

package/lib/typescript/src/skia/web/Host.d.ts

@@ -16,6 +16,5 @@ export declare abstract class BaseHostObject<T, N extends string> extends Host i
 export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
     static fromValue<T>(value: SkJSIInstance<string>): T;
 }
-export declare const getCkEnum: (e: EmbindEnum, v: number) => EmbindEnumEntity;
-export declare const ckEnum: (value: number) => EmbindEnumEntity;
-export declare const optEnum: (value: number | undefined) => EmbindEnumEntity | undefined;
+export declare const getEnum: (e: EmbindEnum, v: number) => EmbindEnumEntity;
+export declare const optEnum: (e: EmbindEnum, value: number | undefined) => EmbindEnumEntity | undefined;

package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts

@@ -1,12 +1,12 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
-import type { SkMatrix } from "../types";
+import { type Matrix3, type Matrix4, type SkMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
     private preMultiply;
     private postMultiply;
     dispose: () => void;
-    concat(matrix: SkMatrix | number[]): this;
+    concat(matrix: SkMatrix | number[] | Matrix4 | Matrix3): this;
     translate(x: number, y: number): this;
     postTranslate(x: number, y: number): this;
     scale(x: number, y?: number): this;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.227",
+  "version": "0.1.228",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -94,6 +94,7 @@
     "eslint-config-react-native-wcandillon": "3.10.2",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "29.6.4",
+    "jest-diff": "^29.7.0",
     "merge-dirs": "^0.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",

package/src/dom/types/Common.ts

@@ -3,6 +3,8 @@ import type { ReactNode } from "react";
 import type {
   BlendMode,
   Color,
+  Matrix3,
+  Matrix4,
   PaintStyle,
   SkMatrix,
   SkPaint,
@@ -66,7 +68,7 @@ export type CircleDef = PointCircleDef | ScalarCircleDef;
 export interface TransformProps {
   transform?: Transforms3d;
   origin?: Vector;
-  matrix?: SkMatrix | number[];
+  matrix?: SkMatrix | Matrix4 | Matrix3 | number[];
 }
 
 export interface PaintProps extends ChildrenProps {

package/src/external/reanimated/interpolators.ts

@@ -3,7 +3,7 @@ import type {
   FrameInfo,
   SharedValue,
 } from "react-native-reanimated";
-import { useMemo, useRef } from "react";
+import { useCallback, useMemo } from "react";
 
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
@@ -13,6 +13,7 @@ import {
   useAnimatedReaction,
   useFrameCallback,
   useSharedValue,
+  useDerivedValue,
 } from "./moduleWrapper";
 
 export const notifyChange = (value: SharedValue<unknown>) => {
@@ -23,12 +24,26 @@ export const notifyChange = (value: SharedValue<unknown>) => {
   }
 };
 
+export const usePathValue = (cb: (path: SkPath) => void) => {
+  const pathInit = useMemo(() => Skia.Path.Make(), []);
+  const path = useSharedValue(pathInit);
+  useDerivedValue(() => {
+    path.value.reset();
+    cb(path.value);
+    notifyChange(path);
+  });
+  return path;
+};
+
 export const useClock = () => {
   const clock = useSharedValue(0);
-  const callback = useRef((info: FrameInfo) => {
-    "worklet";
-    clock.value = info.timeSinceFirstFrame;
-  }).current;
+  const callback = useCallback(
+    (info: FrameInfo) => {
+      "worklet";
+      clock.value = info.timeSinceFirstFrame;
+    },
+    [clock]
+  );
   useFrameCallback(callback);
   return clock;
 };

package/src/external/reanimated/moduleWrapper.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DependencyList } from "react";
 import type {
+  DerivedValue,
   FrameCallback,
   FrameInfo,
   SharedValue,
@@ -42,6 +43,11 @@ export const useSharedValue: <T>(
   oneWayReadsOnly?: boolean
 ) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;
 
+export const useDerivedValue: <T>(
+  processor: () => T,
+  dependencies?: DependencyList
+) => DerivedValue<T> = Reanimated2?.useDerivedValue || throwOnMissingReanimated;
+
 export const useFrameCallback: (
   callback: (frameInfo: FrameInfo) => void,
   autostart?: boolean

package/src/skia/core/Vector.ts

@@ -22,10 +22,3 @@ export const dist = (a: Vector, b: Vector) => {
   "worklet";
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
-export const translate = ({
-  x,
-  y,
-}: Vector): [{ translateX: number }, { translateY: number }] => {
-  "worklet";
-  return [{ translateX: x }, { translateY: y }];
-};

package/src/skia/types/Matrix.ts

@@ -1,24 +1,13 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
-import type { Transforms3d } from "./Matrix4";
+import type { Matrix3, Matrix4, Transforms3d } from "./Matrix4";
 import { processTransform3d } from "./Matrix4";
-export enum MatrixIndex {
-  ScaleX = 0,
-  SkewX = 1,
-  TransX = 2,
-  SkewY = 3,
-  ScaleY = 4,
-  TransY = 5,
-  Persp0 = 6,
-  Persp1 = 7,
-  Persp2 = 8,
-}
 
 export const isMatrix = (obj: unknown): obj is SkMatrix =>
   obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
 
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-  concat: (matrix: SkMatrix | number[]) => SkMatrix;
+  concat: (matrix: SkMatrix | Matrix4 | Matrix3 | number[]) => SkMatrix;
   translate: (x: number, y: number) => SkMatrix;
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;

package/src/skia/types/Matrix4.ts

@@ -1,7 +1,20 @@
+type Point = { x: number; y: number };
 type Vec2 = readonly [number, number];
 type Vec3 = readonly [number, number, number];
 type Vec4 = readonly [number, number, number, number];
 
+export type Matrix3 = readonly [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+];
+
 export type Matrix4 = readonly [
   number,
   number,
@@ -78,17 +91,18 @@ export const Matrix4 = (): Matrix4 => {
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 };
 
-const translate = (x: number, y: number, z: number): Matrix4 => {
+/**
+ * @worklet
+ */
+export const translate = (x: number, y: number, z: number = 0): Matrix4 => {
   "worklet";
   return [1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z, 0, 0, 0, 1];
 };
 
-const scale = (sx: number, sy: number, sz: number): Matrix4 => {
-  "worklet";
-  return [sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1];
-};
-
-const perspective = (p: number): Matrix4 => {
+/**
+ * @worklet
+ */
+export const perspective = (p: number): Matrix4 => {
   "worklet";
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1 / p, 1];
 };
@@ -136,15 +150,6 @@ const rotatedUnitSinCos = (
   ];
 };
 
-const rotate = (axis: Vec3, value: number) => {
-  "worklet";
-  return rotatedUnitSinCos(
-    normalizeVec(axis),
-    Math.sin(value),
-    Math.cos(value)
-  );
-};
-
 const matrixVecMul4 = (m: Matrix4, v: Vec4) => {
   "worklet";
   const [vx, vy, vz, vw] = v;
@@ -165,7 +170,10 @@ export const mapPoint3d = (m: Matrix4, v: Vec3) => {
   return [r[0] / r[3], r[1] / r[3], r[2] / r[3]] as const;
 };
 
-const multiply4 = (a: Matrix4, b: Matrix4): Matrix4 => {
+/**
+ * @worklet
+ */
+export const multiply4 = (a: Matrix4, b: Matrix4): Matrix4 => {
   "worklet";
   const result = new Array(16).fill(0);
   for (let i = 0; i < 4; i++) {
@@ -190,11 +198,81 @@ const skewX = (angle: number): Matrix4 => {
   return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 };
 
-const toMatrix3 = (m: Matrix4) => {
+/**
+ * @worklet
+ */
+export const toMatrix3 = (m: Matrix4) => {
   "worklet";
   return [m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]];
 };
 
+const rotate = (axis: Vec3, value: number) => {
+  "worklet";
+  return rotatedUnitSinCos(
+    normalizeVec(axis),
+    Math.sin(value),
+    Math.cos(value)
+  );
+};
+
+/**
+ * @worklet
+ */
+export const pivot = (m: Matrix4, p: Point) => {
+  "worklet";
+  return multiply4(translate(p.x, p.y), multiply4(m, translate(-p.x, -p.y)));
+};
+
+/**
+ * @worklet
+ */
+export const scale = (
+  sx: number,
+  sy: number,
+  sz: number = 1,
+  p?: Point
+): Matrix4 => {
+  "worklet";
+  const m4: Matrix4 = [sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1];
+  if (p) {
+    return pivot(m4, p);
+  }
+  return m4;
+};
+
+const rotateAxis = (axis: Vec3, angle: number, p?: Point) => {
+  "worklet";
+  const result = rotate(axis, angle);
+  if (p) {
+    return pivot(result, p);
+  }
+  return result;
+};
+
+/**
+ * @worklet
+ */
+export const rotateZ = (value: number, p?: Point) => {
+  "worklet";
+  return rotateAxis([0, 0, 1], value, p);
+};
+
+/**
+ * @worklet
+ */
+export const rotateX = (value: number, p?: Point) => {
+  "worklet";
+  return rotateAxis([1, 0, 0], value, p);
+};
+
+/**
+ * @worklet
+ */
+export const rotateY = (value: number, p?: Point) => {
+  "worklet";
+  return rotateAxis([0, 1, 0], value, p);
+};
+
 /**
  * @worklet
  */

package/src/skia/web/Host.ts

@@ -41,10 +41,11 @@ export abstract class HostObject<T, N extends string> extends BaseHostObject<
   }
 }
 
-export const getCkEnum = (e: EmbindEnum, v: number): EmbindEnumEntity =>
+export const getEnum = (e: EmbindEnum, v: number): EmbindEnumEntity =>
   Object.values(e).find(({ value }) => value === v);
-export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
+
 export const optEnum = (
+  e: EmbindEnum,
   value: number | undefined
 ): EmbindEnumEntity | undefined =>
-  value === undefined ? undefined : { value };
+  value === undefined ? undefined : getEnum(e, value);

package/src/skia/web/JsiSkCanvas.ts

@@ -25,7 +25,7 @@ import type {
   SkVertices,
 } from "../types";
 
-import { ckEnum, getCkEnum, HostObject } from "./Host";
+import { getEnum, HostObject } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
@@ -113,8 +113,8 @@ export class JsiSkCanvas
       JsiSkImage.fromValue(img),
       left,
       top,
-      ckEnum(fm),
-      ckEnum(mm),
+      getEnum(this.CanvasKit.FilterMode, fm),
+      getEnum(this.CanvasKit.MipmapMode, mm),
       paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
@@ -130,7 +130,7 @@ export class JsiSkCanvas
       JsiSkImage.fromValue(img),
       Array.from(JsiSkRect.fromValue(this.CanvasKit, center)),
       JsiSkRect.fromValue(this.CanvasKit, dest),
-      ckEnum(filter),
+      getEnum(this.CanvasKit.FilterMode, filter),
       paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
@@ -165,8 +165,8 @@ export class JsiSkCanvas
       JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
-      ckEnum(fm),
-      ckEnum(mm),
+      getEnum(this.CanvasKit.FilterMode, fm),
+      getEnum(this.CanvasKit.MipmapMode, mm),
       paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
@@ -186,7 +186,7 @@ export class JsiSkCanvas
   drawVertices(verts: SkVertices, mode: BlendMode, paint: SkPaint) {
     this.ref.drawVertices(
       JsiSkVertices.fromValue(verts),
-      ckEnum(mode),
+      getEnum(this.CanvasKit.BlendMode, mode),
       JsiSkPaint.fromValue(paint)
     );
   }
@@ -202,7 +202,7 @@ export class JsiSkCanvas
       cubics.map(({ x, y }) => [x, y]).flat(),
       colors,
       texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
-      mode ? ckEnum(mode) : null,
+      mode ? getEnum(this.CanvasKit.BlendMode, mode) : null,
       paint ? JsiSkPaint.fromValue(paint) : undefined
     );
   }
@@ -213,7 +213,7 @@ export class JsiSkCanvas
 
   drawPoints(mode: PointMode, points: SkPoint[], paint: SkPaint) {
     this.ref.drawPoints(
-      ckEnum(mode),
+      getEnum(this.CanvasKit.PointMode, mode),
       points.map(({ x, y }) => [x, y]).flat(),
       JsiSkPaint.fromValue(paint)
     );
@@ -341,7 +341,10 @@ export class JsiSkCanvas
   }
 
   drawColor(color: SkColor, blendMode?: BlendMode) {
-    this.ref.drawColor(color, blendMode ? ckEnum(blendMode) : undefined);
+    this.ref.drawColor(
+      color,
+      blendMode ? getEnum(this.CanvasKit.BlendMode, blendMode) : undefined
+    );
   }
 
   clear(color: SkColor) {
@@ -349,13 +352,17 @@ export class JsiSkCanvas
   }
 
   clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipPath(JsiSkPath.fromValue(path), ckEnum(op), doAntiAlias);
+    this.ref.clipPath(
+      JsiSkPath.fromValue(path),
+      getEnum(this.CanvasKit.PathOp, op),
+      doAntiAlias
+    );
   }
 
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
     this.ref.clipRect(
       JsiSkRect.fromValue(this.CanvasKit, rect),
-      ckEnum(op),
+      getEnum(this.CanvasKit.PathOp, op),
       doAntiAlias
     );
   }
@@ -363,7 +370,7 @@ export class JsiSkCanvas
   clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean) {
     this.ref.clipRRect(
       JsiSkRRect.fromValue(this.CanvasKit, rrect),
-      ckEnum(op),
+      getEnum(this.CanvasKit.PathOp, op),
       doAntiAlias
     );
   }
@@ -381,8 +388,8 @@ export class JsiSkCanvas
       width: imageInfo.width,
       height: imageInfo.height,
       colorSpace: this.CanvasKit.ColorSpace.SRGB,
-      alphaType: getCkEnum(this.CanvasKit.AlphaType, imageInfo.alphaType),
-      colorType: getCkEnum(this.CanvasKit.ColorType, imageInfo.colorType),
+      alphaType: getEnum(this.CanvasKit.AlphaType, imageInfo.alphaType),
+      colorType: getEnum(this.CanvasKit.ColorType, imageInfo.colorType),
     };
     return this.ref.readPixels(srcX, srcY, pxInfo);
   }

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -8,7 +8,7 @@ import type {
   BlendMode,
 } from "../types";
 
-import { ckEnum, Host } from "./Host";
+import { getEnum, Host } from "./Host";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
 export class JsiSkColorFilterFactory
@@ -29,7 +29,10 @@ export class JsiSkColorFilterFactory
   MakeBlend(color: SkColor, mode: BlendMode) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeBlend(color, ckEnum(mode))
+      this.CanvasKit.ColorFilter.MakeBlend(
+        color,
+        getEnum(this.CanvasKit.BlendMode, mode)
+      )
     );
   }
 

package/src/skia/web/JsiSkFont.ts

@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb, ckEnum } from "./Host";
+import { HostObject, NotImplementedOnRNWeb, getEnum } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -100,7 +100,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setEdging(edging: FontEdging) {
-    this.ref.setEdging(ckEnum(edging));
+    this.ref.setEdging(getEnum(this.CanvasKit.FontEdging, edging));
   }
 
   setEmbeddedBitmaps(embeddedBitmaps: boolean) {
@@ -108,7 +108,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setHinting(hinting: FontHinting) {
-    this.ref.setHinting(ckEnum(hinting));
+    this.ref.setHinting(getEnum(this.CanvasKit.FontHinting, hinting));
   }
 
   setLinearMetrics(linearMetrics: boolean) {

package/src/skia/web/JsiSkImage.ts

@@ -15,7 +15,7 @@ import type {
   ImageInfo,
 } from "../types";
 
-import { ckEnum, getCkEnum, HostObject } from "./Host";
+import { getEnum, HostObject } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
@@ -77,10 +77,10 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return new JsiSkShader(
       this.CanvasKit,
       this.ref.makeShaderOptions(
-        ckEnum(tx),
-        ckEnum(ty),
-        ckEnum(fm),
-        ckEnum(mm),
+        getEnum(this.CanvasKit.TileMode, tx),
+        getEnum(this.CanvasKit.TileMode, ty),
+        getEnum(this.CanvasKit.FilterMode, fm),
+        getEnum(this.CanvasKit.MipmapMode, mm),
         localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
@@ -96,8 +96,8 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return new JsiSkShader(
       this.CanvasKit,
       this.ref.makeShaderCubic(
-        ckEnum(tx),
-        ckEnum(ty),
+        getEnum(this.CanvasKit.TileMode, tx),
+        getEnum(this.CanvasKit.TileMode, ty),
         B,
         C,
         localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
@@ -108,9 +108,12 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
   encodeToBytes(fmt?: ImageFormat, quality?: number) {
     let result: Uint8Array | null;
     if (fmt && quality) {
-      result = this.ref.encodeToBytes(ckEnum(fmt), quality);
+      result = this.ref.encodeToBytes(
+        getEnum(this.CanvasKit.ImageFormat, fmt),
+        quality
+      );
     } else if (fmt) {
-      result = this.ref.encodeToBytes(ckEnum(fmt));
+      result = this.ref.encodeToBytes(getEnum(this.CanvasKit.ImageFormat, fmt));
     } else {
       result = this.ref.encodeToBytes();
     }
@@ -131,11 +134,11 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
       colorSpace: this.CanvasKit.ColorSpace.SRGB,
       width: imageInfo?.width ?? info.width,
       height: imageInfo?.height ?? info.height,
-      alphaType: getCkEnum(
+      alphaType: getEnum(
         this.CanvasKit.AlphaType,
         (imageInfo ?? info).alphaType
       ),
-      colorType: getCkEnum(
+      colorType: getEnum(
         this.CanvasKit.ColorType,
         (imageInfo ?? info).colorType
       ),

package/src/skia/web/JsiSkImageFactory.ts

@@ -3,7 +3,7 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { SkData, ImageInfo, SkImage } from "../types";
 import type { ImageFactory } from "../types/Image/ImageFactory";
 
-import { Host, ckEnum } from "./Host";
+import { Host, getEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 import { JsiSkData } from "./JsiSkData";
 
@@ -33,9 +33,9 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     // see toSkImageInfo() from canvaskit
     const image = this.CanvasKit.MakeImage(
       {
-        alphaType: ckEnum(info.alphaType),
+        alphaType: getEnum(this.CanvasKit.AlphaType, info.alphaType),
         colorSpace: this.CanvasKit.ColorSpace.SRGB,
-        colorType: ckEnum(info.colorType),
+        colorType: getEnum(this.CanvasKit.ColorType, info.colorType),
         height: info.height,
         width: info.width,
       },

package/src/skia/web/JsiSkImageFilterFactory.ts

@@ -13,7 +13,7 @@ import type {
   TileMode,
 } from "../types";
 
-import { Host, NotImplementedOnRNWeb, ckEnum } from "./Host";
+import { Host, NotImplementedOnRNWeb, getEnum } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
@@ -42,8 +42,8 @@ export class JsiSkImageFilterFactory
     const inputFilter =
       input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
     const filter = this.CanvasKit.ImageFilter.MakeDisplacementMap(
-      ckEnum(channelX),
-      ckEnum(channelY),
+      getEnum(this.CanvasKit.ColorChannel, channelX),
+      getEnum(this.CanvasKit.ColorChannel, channelY),
       scale,
       JsiSkImageFilter.fromValue(in1),
       inputFilter
@@ -69,7 +69,7 @@ export class JsiSkImageFilterFactory
       this.CanvasKit.ImageFilter.MakeBlur(
         sigmaX,
         sigmaY,
-        ckEnum(mode),
+        getEnum(this.CanvasKit.TileMode, mode),
         input === null ? null : JsiSkImageFilter.fromValue(input)
       )
     );
@@ -199,7 +199,7 @@ export class JsiSkImageFilterFactory
       );
     }
     const filter = this.CanvasKit.ImageFilter.MakeBlend(
-      ckEnum(mode),
+      getEnum(this.CanvasKit.BlendMode, mode),
       JsiSkImageFilter.fromValue(background),
       inputFilter
     );

package/src/skia/web/JsiSkMaskFilterFactory.ts

@@ -3,7 +3,7 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { BlurStyle } from "../types";
 import type { MaskFilterFactory } from "../types/MaskFilter";
 
-import { Host, ckEnum } from "./Host";
+import { Host, getEnum } from "./Host";
 import { JsiSkMaskFilter } from "./JsiSkMaskFilter";
 
 export class JsiSkMaskFilterFactory extends Host implements MaskFilterFactory {
@@ -14,7 +14,11 @@ export class JsiSkMaskFilterFactory extends Host implements MaskFilterFactory {
   MakeBlur(style: BlurStyle, sigma: number, respectCTM: boolean) {
     return new JsiSkMaskFilter(
       this.CanvasKit,
-      this.CanvasKit.MaskFilter.MakeBlur(ckEnum(style), sigma, respectCTM)
+      this.CanvasKit.MaskFilter.MakeBlur(
+        getEnum(this.CanvasKit.BlurStyle, style),
+        sigma,
+        respectCTM
+      )
     );
   }
 }