@shopify/react-native-skia 0.1.225 → 0.1.228

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,13 +370,13 @@ 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
     );
   }
 
-  concat(m: SkMatrix) {
-    this.ref.concat(JsiSkMatrix.fromValue(m));
+  concat(m: SkMatrix | number[]) {
+    this.ref.concat(Array.isArray(m) ? m : JsiSkMatrix.fromValue(m));
   }
 
   drawPicture(skp: SkPicture) {
@@ -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
+      )
     );
   }
 }

package/src/skia/web/JsiSkMatrix.ts

@@ -1,9 +1,13 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
 
-import type { SkMatrix } from "../types";
+import { toMatrix3, type Matrix3, type Matrix4, type SkMatrix } from "../types";
 
 import { HostObject } from "./Host";
 
+const isMatrixHostObject = (
+  obj: SkMatrix | number[] | Matrix4 | Matrix3
+): obj is SkMatrix => !Array.isArray(obj);
+
 export class JsiSkMatrix
   extends HostObject<Matrix3x3, "Matrix">
   implements SkMatrix
@@ -24,8 +28,15 @@ export class JsiSkMatrix
     // Do nothing - the matrix is represenetd by a Float32Array
   };
 
-  concat(matrix: SkMatrix) {
-    this.preMultiply(JsiSkMatrix.fromValue(matrix));
+  concat(matrix: SkMatrix | number[] | Matrix4 | Matrix3) {
+    this.preMultiply(
+      // eslint-disable-next-line no-nested-ternary
+      isMatrixHostObject(matrix)
+        ? JsiSkMatrix.fromValue(matrix)
+        : matrix.length === 16
+        ? toMatrix3(matrix as Matrix4)
+        : [...matrix]
+    );
     return this;
   }
 

package/src/skia/web/JsiSkPaint.ts

@@ -14,7 +14,7 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { HostObject, ckEnum } from "./Host";
+import { HostObject, getEnum } from "./Host";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 import { JsiSkMaskFilter } from "./JsiSkMaskFilter";
@@ -75,7 +75,7 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   setBlendMode(blendMode: BlendMode) {
-    this.ref.setBlendMode(ckEnum(blendMode));
+    this.ref.setBlendMode(getEnum(this.CanvasKit.BlendMode, blendMode));
   }
 
   setColor(color: SkColor) {
@@ -103,11 +103,11 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   setStrokeCap(cap: StrokeCap) {
-    this.ref.setStrokeCap(ckEnum(cap));
+    this.ref.setStrokeCap(getEnum(this.CanvasKit.StrokeCap, cap));
   }
 
   setStrokeJoin(join: StrokeJoin) {
-    this.ref.setStrokeJoin(ckEnum(join));
+    this.ref.setStrokeJoin(getEnum(this.CanvasKit.StrokeJoin, join));
   }
 
   setStrokeMiter(limit: number) {

package/src/skia/web/JsiSkPath.ts

@@ -13,7 +13,7 @@ import type {
   StrokeOpts,
 } from "../types";
 
-import { ckEnum, HostObject, optEnum } from "./Host";
+import { getEnum, HostObject, optEnum } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
@@ -149,7 +149,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   setFillType(fill: FillType) {
-    this.ref.setFillType(ckEnum(fill));
+    this.ref.setFillType(getEnum(this.CanvasKit.FillType, fill));
     return this;
   }
 
@@ -167,8 +167,8 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
             // eslint-disable-next-line camelcase
             miter_limit: opts.width,
             precision: opts.width,
-            join: optEnum(opts.join),
-            cap: optEnum(opts.cap),
+            join: optEnum(this.CanvasKit.StrokeJoin, opts.join),
+            cap: optEnum(this.CanvasKit.StrokeCap, opts.cap),
           }
     );
     return result === null ? result : this;
@@ -315,7 +315,10 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   op(path: SkPath, op: PathOp) {
-    return this.ref.op(JsiSkPath.fromValue(path), ckEnum(op));
+    return this.ref.op(
+      JsiSkPath.fromValue(path),
+      getEnum(this.CanvasKit.PathOp, op)
+    );
   }
 
   simplify() {
@@ -337,7 +340,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   transform(m3: SkMatrix) {
-    this.ref.transform(JsiSkMatrix.fromValue(m3));
+    this.ref.transform(Array.isArray(m3) ? m3 : JsiSkMatrix.fromValue(m3));
     return this;
   }
 

package/src/skia/web/JsiSkPathEffectFactory.ts

@@ -8,7 +8,7 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { ckEnum, Host, NotImplementedOnRNWeb } from "./Host";
+import { getEnum, Host, NotImplementedOnRNWeb } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkPathEffect } from "./JsiSkPathEffect";
@@ -69,7 +69,7 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
       JsiSkPath.fromValue(path),
       advance,
       phase,
-      ckEnum(style)
+      getEnum(this.CanvasKit.Path1DEffect, style)
     );
     if (pe === null) {
       return null;

package/src/skia/web/JsiSkPathFactory.ts

@@ -3,7 +3,7 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { PathCommand, PathOp, SkFont, SkPath } from "../types";
 import type { PathFactory } from "../types/Path/PathFactory";
 
-import { Host, ckEnum, NotImplementedOnRNWeb } from "./Host";
+import { Host, getEnum, NotImplementedOnRNWeb } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
 
 export class JsiSkPathFactory extends Host implements PathFactory {
@@ -27,7 +27,7 @@ export class JsiSkPathFactory extends Host implements PathFactory {
     const path = this.CanvasKit.Path.MakeFromOp(
       JsiSkPath.fromValue(one),
       JsiSkPath.fromValue(two),
-      ckEnum(op)
+      getEnum(this.CanvasKit.PathOp, op)
     );
     if (path === null) {
       return null;

package/src/skia/web/JsiSkPicture.ts

@@ -9,7 +9,7 @@ import type {
   SkMatrix,
 } from "../types";
 
-import { HostObject, ckEnum } from "./Host";
+import { HostObject, getEnum } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkRect } from "./JsiSkRect";
@@ -36,9 +36,9 @@ export class JsiSkPicture
     return new JsiSkShader(
       this.CanvasKit,
       this.ref.makeShader(
-        ckEnum(tmx),
-        ckEnum(tmy),
-        ckEnum(mode),
+        getEnum(this.CanvasKit.TileMode, tmx),
+        getEnum(this.CanvasKit.TileMode, tmy),
+        getEnum(this.CanvasKit.FilterMode, mode),
         localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined,
         tileRect ? JsiSkRect.fromValue(this.CanvasKit, tileRect) : undefined
       )

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -20,10 +20,14 @@ export class JsiSkPictureRecorder
     this.ref.delete();
   };
 
-  beginRecording(bounds: SkRect) {
+  beginRecording(bounds?: SkRect) {
     return new JsiSkCanvas(
       this.CanvasKit,
-      this.ref.beginRecording(JsiSkRect.fromValue(this.CanvasKit, bounds))
+      this.ref.beginRecording(
+        bounds
+          ? JsiSkRect.fromValue(this.CanvasKit, bounds)
+          : Float32Array.of(0, 0, 2_000_000, 2_000_000)
+      )
     );
   }
 

package/src/skia/web/JsiSkShaderFactory.ts

@@ -10,7 +10,7 @@ import type {
 } from "../types";
 import type { ShaderFactory } from "../types/Shader/ShaderFactory";
 
-import { Host, ckEnum } from "./Host";
+import { Host, getEnum } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkShader } from "./JsiSkShader";
@@ -36,7 +36,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
         JsiSkPoint.fromValue(end),
         colors,
         pos,
-        ckEnum(mode),
+        getEnum(this.CanvasKit.TileMode, mode),
         localMatrix === undefined
           ? undefined
           : JsiSkMatrix.fromValue(localMatrix),
@@ -61,7 +61,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
         radius,
         colors,
         pos,
-        ckEnum(mode),
+        getEnum(this.CanvasKit.TileMode, mode),
         localMatrix === undefined
           ? undefined
           : JsiSkMatrix.fromValue(localMatrix),
@@ -90,7 +90,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
         endRadius,
         colors,
         pos,
-        ckEnum(mode),
+        getEnum(this.CanvasKit.TileMode, mode),
         localMatrix === undefined
           ? undefined
           : JsiSkMatrix.fromValue(localMatrix),
@@ -117,7 +117,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
         cy,
         colors,
         pos,
-        ckEnum(mode),
+        getEnum(this.CanvasKit.TileMode, mode),
         localMatrix === undefined || localMatrix === null
           ? undefined
           : JsiSkMatrix.fromValue(localMatrix),
@@ -174,7 +174,7 @@ export class JsiSkShaderFactory extends Host implements ShaderFactory {
     return new JsiSkShader(
       this.CanvasKit,
       this.CanvasKit.Shader.MakeBlend(
-        ckEnum(mode),
+        getEnum(this.CanvasKit.BlendMode, mode),
         JsiSkShader.fromValue(one),
         JsiSkShader.fromValue(two)
       )

package/src/skia/web/JsiSkVerticesFactory.ts

@@ -2,8 +2,8 @@ import type { CanvasKit } from "canvaskit-wasm";
 
 import type { SkColor, SkPoint, VertexMode } from "../types";
 
-import { ckEnum } from "./Host";
 import { JsiSkVertices } from "./JsiSkVertices";
+import { getEnum } from "./Host";
 
 const concat = (...arrays: Float32Array[]) => {
   let totalLength = 0;
@@ -31,7 +31,7 @@ export const MakeVertices = (
   new JsiSkVertices(
     CanvasKit,
     CanvasKit.MakeVertices(
-      ckEnum(mode),
+      getEnum(CanvasKit.VertexMode, mode),
       positions.map(({ x, y }) => [x, y]).flat(),
       (textureCoordinates || []).map(({ x, y }) => [x, y]).flat(),
       !colors ? null : colors.reduce((a, c) => concat(a, c)),

package/src/values/api.ts

@@ -1,8 +1,61 @@
-import type { ISkiaValueApi } from "./types";
+import type {
+  AnimationState,
+  ISkiaValueApi,
+  SkiaAnimation,
+  SkiaClockValue,
+  SkiaMutableValue,
+  SkiaValue,
+} from "./types";
 
 declare global {
   var SkiaValueApi: ISkiaValueApi;
 }
 
 const { SkiaValueApi } = global;
-export const ValueApi = SkiaValueApi;
+
+const deprecatedWarning = () => {
+  console.warn(
+    `Skia values are deprecated and will be removed in the next Skia release.
+Please use Reanimated instead: https://shopify.github.io/react-native-skia/docs/animations/animations`
+  );
+};
+
+export const ValueApi = {
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createValue<T>(initialValue: T): SkiaMutableValue<T> {
+    deprecatedWarning();
+    return SkiaValueApi.createValue(initialValue);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createComputedValue<R>(
+    cb: () => R,
+    values: SkiaValue<unknown>[]
+  ): SkiaValue<R> {
+    deprecatedWarning();
+    return SkiaValueApi.createComputedValue(cb, values);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createClockValue(): SkiaClockValue {
+    deprecatedWarning();
+    return SkiaValueApi.createClockValue();
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createAnimation<S extends AnimationState = AnimationState>(
+    cb: (t: number, state: S | undefined) => S
+  ): SkiaAnimation {
+    deprecatedWarning();
+    return SkiaValueApi.createAnimation(cb);
+  },
+};

package/src/values/hooks/useClockValue.ts

@@ -3,6 +3,9 @@ import { useEffect, useMemo } from "react";
 import { ValueApi } from "../api";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * @returns A new value that will be updated on every frame redraw with the
  * number of milliseconds elapsed since the value was started.
  * The clock is created in the stopped state.