@shopify/react-native-skia 2.0.6 → 2.1.0

package/src/skia/web/JsiSkImageFilterFactory.ts

@@ -11,6 +11,12 @@ import type {
   SkRuntimeShaderBuilder,
   SkShader,
   TileMode,
+  FilterMode,
+  MipmapMode,
+  SkImage,
+  SkMatrix,
+  SkPicture,
+  SkPoint3,
 } from "../types";
 
 import { Host, throwNotImplementedOnRNWeb, getEnum } from "./Host";
@@ -24,10 +30,180 @@ export class JsiSkImageFilterFactory
   constructor(CanvasKit: CanvasKit) {
     super(CanvasKit);
   }
+  MakeRuntimeShaderWithChildren(
+    _builder: SkRuntimeShaderBuilder,
+    _sampleRadius: number,
+    _childShaderNames: string[],
+    _inputs: Array<SkImageFilter | null>
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeArithmetic(
+    _k1: number,
+    _k2: number,
+    _k3: number,
+    _k4: number,
+    _enforcePMColor: boolean,
+    _background?: SkImageFilter | null,
+    _foreground?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeCrop(
+    _rect: SkRect,
+    _tileMode?: TileMode | null,
+    _input?: SkImageFilter | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeEmpty(): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeImage(
+    _image: SkImage,
+    _srcRect?: SkRect | null,
+    _dstRect?: SkRect | null,
+    _filterMode?: FilterMode,
+    _mipmap?: MipmapMode
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeMagnifier(
+    _lensBounds: SkRect,
+    _zoomAmount: number,
+    _inset: number,
+    _filterMode?: FilterMode,
+    _mipmap?: MipmapMode,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeMatrixConvolution(
+    _kernelSizeX: number,
+    _kernelSizeY: number,
+    _kernel: number[],
+    _gain: number,
+    _bias: number,
+    _kernelOffsetX: number,
+    _kernelOffsetY: number,
+    _tileMode: TileMode,
+    _convolveAlpha: boolean,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeMatrixTransform(
+    _matrix: SkMatrix,
+    _filterMode?: FilterMode,
+    _mipmap?: MipmapMode,
+    _input?: SkImageFilter | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeMerge(
+    _filters: Array<SkImageFilter | null>,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakePicture(_picture: SkPicture, _targetRect?: SkRect | null): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeTile(
+    _src: SkRect,
+    _dst: SkRect,
+    _input?: SkImageFilter | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeDistantLitDiffuse(
+    _direction: SkPoint3,
+    _lightColor: SkColor,
+    _surfaceScale: number,
+    _kd: number,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakePointLitDiffuse(
+    _location: SkPoint3,
+    _lightColor: SkColor,
+    _surfaceScale: number,
+    _kd: number,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeSpotLitDiffuse(
+    _location: SkPoint3,
+    _target: SkPoint3,
+    _falloffExponent: number,
+    _cutoffAngle: number,
+    _lightColor: SkColor,
+    _surfaceScale: number,
+    _kd: number,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeDistantLitSpecular(
+    _direction: SkPoint3,
+    _lightColor: SkColor,
+    _surfaceScale: number,
+    _ks: number,
+    _shininess: number,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakePointLitSpecular(
+    _location: SkPoint3,
+    _lightColor: SkColor,
+    _surfaceScale: number,
+    _ks: number,
+    _shininess: number,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
+  MakeSpotLitSpecular(
+    _location: SkPoint3,
+    _target: SkPoint3,
+    _falloffExponent: number,
+    _cutoffAngle: number,
+    _lightColor: SkColor,
+    _surfaceScale: number,
+    _ks: number,
+    _shininess: number,
+    _input?: SkImageFilter | null,
+    _cropRect?: SkRect | null
+  ): SkImageFilter {
+    throw throwNotImplementedOnRNWeb();
+  }
 
-  MakeOffset(dx: number, dy: number, input: SkImageFilter | null) {
+  MakeOffset(
+    dx: number,
+    dy: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ) {
     const inputFilter =
-      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+      input === null || input === undefined
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeOffset"
+      );
+    }
     const filter = this.CanvasKit.ImageFilter.MakeOffset(dx, dy, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
   }
@@ -37,10 +213,18 @@ export class JsiSkImageFilterFactory
     channelY: ColorChannel,
     scale: number,
     in1: SkImageFilter,
-    input: SkImageFilter | null
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter {
     const inputFilter =
-      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+      input === null || input === undefined
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeDisplacementMap"
+      );
+    }
     const filter = this.CanvasKit.ImageFilter.MakeDisplacementMap(
       getEnum(this.CanvasKit, "ColorChannel", channelX),
       getEnum(this.CanvasKit, "ColorChannel", channelY),
@@ -51,7 +235,21 @@ export class JsiSkImageFilterFactory
     return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
-  MakeShader(shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
+  MakeShader(
+    shader: SkShader,
+    dither?: boolean,
+    cropRect?: SkRect | null
+  ): SkImageFilter {
+    if (dither !== undefined) {
+      console.warn(
+        "dither parameter is not supported on React Native Web for MakeShader"
+      );
+    }
+    if (cropRect) {
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeShader"
+      );
+    }
     const filter = this.CanvasKit.ImageFilter.MakeShader(
       JsiSkImageFilter.fromValue(shader)
     );
@@ -62,25 +260,44 @@ export class JsiSkImageFilterFactory
     sigmaX: number,
     sigmaY: number,
     mode: TileMode,
-    input: SkImageFilter | null
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ) {
+    if (cropRect) {
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeBlur"
+      );
+    }
     return new JsiSkImageFilter(
       this.CanvasKit,
       this.CanvasKit.ImageFilter.MakeBlur(
         sigmaX,
         sigmaY,
         getEnum(this.CanvasKit, "TileMode", mode),
-        input === null ? null : JsiSkImageFilter.fromValue(input)
+        input === null || input === undefined
+          ? null
+          : JsiSkImageFilter.fromValue(input)
       )
     );
   }
 
-  MakeColorFilter(cf: SkColorFilter, input: SkImageFilter | null) {
+  MakeColorFilter(
+    colorFilter: SkColorFilter,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ) {
+    if (cropRect) {
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeColorFilter"
+      );
+    }
     return new JsiSkImageFilter(
       this.CanvasKit,
       this.CanvasKit.ImageFilter.MakeColorFilter(
-        JsiSkColorFilter.fromValue(cf),
-        input === null ? null : JsiSkImageFilter.fromValue(input)
+        JsiSkColorFilter.fromValue(colorFilter),
+        input === null || input === undefined
+          ? null
+          : JsiSkImageFilter.fromValue(input)
       )
     );
   }
@@ -101,13 +318,17 @@ export class JsiSkImageFilterFactory
     sigmaX: number,
     sigmaY: number,
     color: SkColor,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter {
     const inputFilter =
-      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+      input === null || input === undefined
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throwNotImplementedOnRNWeb<SkImageFilter>();
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeDropShadow"
+      );
     }
     const filter = this.CanvasKit.ImageFilter.MakeDropShadow(
       dx,
@@ -126,13 +347,17 @@ export class JsiSkImageFilterFactory
     sigmaX: number,
     sigmaY: number,
     color: SkColor,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter {
     const inputFilter =
-      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+      input === null || input === undefined
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throwNotImplementedOnRNWeb<SkImageFilter>();
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeDropShadowOnly"
+      );
     }
     const filter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(
       dx,
@@ -148,13 +373,17 @@ export class JsiSkImageFilterFactory
   MakeErode(
     rx: number,
     ry: number,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter {
     const inputFilter =
-      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+      input === null || input === undefined
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throwNotImplementedOnRNWeb<SkImageFilter>();
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeErode"
+      );
     }
     const filter = this.CanvasKit.ImageFilter.MakeErode(rx, ry, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
@@ -163,13 +392,17 @@ export class JsiSkImageFilterFactory
   MakeDilate(
     rx: number,
     ry: number,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter {
     const inputFilter =
-      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+      input === null || input === undefined
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(input);
     if (cropRect) {
-      throwNotImplementedOnRNWeb<SkImageFilter>();
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeDilate"
+      );
     }
     const filter = this.CanvasKit.ImageFilter.MakeDilate(rx, ry, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
@@ -178,15 +411,17 @@ export class JsiSkImageFilterFactory
   MakeBlend(
     mode: BlendMode,
     background: SkImageFilter,
-    foreground: SkImageFilter | null,
-    cropRect?: SkRect
+    foreground?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter {
     const inputFilter =
-      foreground === null
+      foreground === null || foreground === undefined
         ? null
         : JsiSkImageFilter.fromValue<ImageFilter>(foreground);
     if (cropRect) {
-      throwNotImplementedOnRNWeb<SkImageFilter>();
+      console.warn(
+        "cropRect is not supported on React Native Web for MakeBlend"
+      );
     }
     const filter = this.CanvasKit.ImageFilter.MakeBlend(
       getEnum(this.CanvasKit, "BlendMode", mode),
@@ -199,7 +434,7 @@ export class JsiSkImageFilterFactory
   MakeRuntimeShader(
     _builder: SkRuntimeShaderBuilder,
     _childShaderName: string | null,
-    _input: SkImageFilter | null
+    _input?: SkImageFilter | null
   ) {
     return throwNotImplementedOnRNWeb<SkImageFilter>();
   }

package/src/skia/web/JsiSkia.ts

@@ -46,6 +46,7 @@ import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
 import { createVideo } from "./JsiVideo";
 import { throwNotImplementedOnRNWeb } from "./Host";
+import { JsiSkottieFactory } from "./JsiSkottieFactory";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -131,6 +132,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
+  Skottie: new JsiSkottieFactory(CanvasKit),
   Video: createVideo.bind(null, CanvasKit),
   Context: (_surface: bigint, _width: number, _height: number) => {
     return throwNotImplementedOnRNWeb<SkiaContext>();

package/src/skia/web/JsiSkottieAnimation.ts

@@ -0,0 +1,259 @@
+import type {
+  CanvasKit,
+  ManagedSkottieAnimation,
+  SlottableTextProperty as CKSlottableTextProperty,
+} from "canvaskit-wasm";
+
+import type {
+  SkSkottieAnimation,
+  SlotInfo,
+  SlottableTextProperty,
+} from "../types/Skottie";
+import type { SkColor, SkPoint, SkRect } from "../types";
+
+import { HostObject } from "./Host";
+import type { JsiSkCanvas } from "./JsiSkCanvas";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+import { Color } from "./JsiSkColor";
+import { JsiSkRect } from "./JsiSkRect";
+
+export class JsiSkottieAnimation
+  extends HostObject<ManagedSkottieAnimation, "SkottieAnimation">
+  implements SkSkottieAnimation
+{
+  constructor(CanvasKit: CanvasKit, ref: ManagedSkottieAnimation) {
+    super(CanvasKit, ref, "SkottieAnimation");
+  }
+  getOpacityProps() {
+    return this.ref.getOpacityProps();
+  }
+  getTextProps() {
+    return this.ref.getTextProps();
+  }
+  getColorProps() {
+    return this.ref
+      .getColorProps()
+      .map(({ key, value }) => ({ key, value: Color(value) }));
+  }
+  getTransformProps() {
+    return this.ref.getTransformProps().map(({ key, value }) => ({
+      key,
+      value: {
+        anchor: { x: value.anchor[0], y: value.anchor[1] },
+        position: { x: value.position[0], y: value.position[1] },
+        scale: { x: value.scale[0], y: value.scale[1] },
+        rotation: value.rotation,
+        skew: value.skew,
+        skewAxis: value.skew_axis,
+      },
+    }));
+  }
+  setColor(key: string, color: SkColor) {
+    return this.ref.setColor(key, color);
+  }
+  setText(key: string, text: string, size: number) {
+    return this.ref.setText(key, text, size);
+  }
+  setOpacity(key: string, opacity: number) {
+    return this.ref.setOpacity(key, opacity);
+  }
+  setTransform(
+    key: string,
+    anchor: SkPoint,
+    position: SkPoint,
+    scale: SkPoint,
+    rotation: number,
+    skew: number,
+    skewAxis: number
+  ) {
+    const a = Float32Array.of(anchor.x, anchor.y);
+    const p = Float32Array.of(position.x, position.y);
+    const s = Float32Array.of(scale.x, scale.y);
+    return this.ref.setTransform(key, a, p, s, rotation, skew, skewAxis);
+  }
+
+  getSlotInfo(): SlotInfo {
+    return this.ref.getSlotInfo();
+  }
+  setColorSlot(key: string, color: SkColor) {
+    return this.ref.setColorSlot(key, color);
+  }
+  setScalarSlot(key: string, scalar: number) {
+    return this.ref.setScalarSlot(key, scalar);
+  }
+  setVec2Slot(key: string, vec2: SkPoint) {
+    return this.ref.setVec2Slot(key, Float32Array.of(vec2.x, vec2.y));
+  }
+  setTextSlot(key: string, text: SlottableTextProperty): boolean {
+    const txt: CKSlottableTextProperty = {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      typeface:
+        text.typeface && text.typeface instanceof JsiSkTypeface
+          ? text.typeface.ref
+          : null,
+      text: text.text ?? "",
+      textSize: text.textSize ?? 0,
+      minTextSize: text.minTextSize ?? 0,
+      maxTextSize: text.maxTextSize ?? Number.MAX_VALUE,
+      strokeWidth: text.strokeWidth ?? 0,
+      lineHeight: text.lineHeight ?? 0,
+      lineShift: text.lineShift ?? 0,
+      ascent: text.ascent,
+      maxLines: text.maxLines,
+      // TODO: implement
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-expect-error
+      horizAlign: this.CanvasKit.TextAlign.Left,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-expect-error
+      vertAlign: this.CanvasKit.VerticalTextAlign.Top,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-expect-error
+      strokeJoin: this.CanvasKit.StrokeJoin.Miter,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-expect-error
+      direction: this.CanvasKit.TextDirection.LTR,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      linebreak: this.CanvasKit.LineBreakType.HardLineBreak,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      resize: this.CanvasKit.ResizePolicy.None,
+      boundingBox: text.boundingBox
+        ? this.CanvasKit.XYWHRect(
+            text.boundingBox.x,
+            text.boundingBox.y,
+            text.boundingBox.width,
+            text.boundingBox.height
+          )
+        : [0, 0, 0, 0],
+      fillColor: text.fillColor
+        ? Color(text.fillColor)
+        : this.CanvasKit.TRANSPARENT,
+      strokeColor: text.strokeColor
+        ? Color(text.strokeColor)
+        : this.CanvasKit.TRANSPARENT,
+    };
+    return this.ref.setTextSlot(key, txt);
+  }
+  setImageSlot(key: string, assetName: string) {
+    return this.ref.setImageSlot(key, assetName);
+  }
+  getColorSlot(key: string): SkColor | null {
+    const color = this.ref.getColorSlot(key);
+    return color;
+  }
+  getScalarSlot(key: string) {
+    return this.ref.getScalarSlot(key);
+  }
+  getVec2Slot(key: string): SkPoint | null {
+    const vec2 = this.ref.getVec2Slot(key);
+    if (!vec2) {
+      return null;
+    }
+    return { x: vec2[0], y: vec2[1] };
+  }
+  getTextSlot(key: string): SlottableTextProperty | null {
+    const result = this.ref.getTextSlot(key);
+    const textSlot: SlottableTextProperty = {};
+    if (result) {
+      if (result.typeface) {
+        textSlot.typeface = new JsiSkTypeface(this.CanvasKit, result.typeface);
+      }
+      if (result.text) {
+        textSlot.text = result.text;
+      }
+      if (result.textSize) {
+        textSlot.textSize = result.textSize;
+      }
+      if (result.minTextSize) {
+        textSlot.minTextSize = result.minTextSize;
+      }
+      if (result.maxTextSize) {
+        textSlot.maxTextSize = result.maxTextSize;
+      }
+      if (result.strokeWidth) {
+        textSlot.strokeWidth = result.strokeWidth;
+      }
+      if (result.lineHeight) {
+        textSlot.lineHeight = result.lineHeight;
+      }
+      if (result.lineShift) {
+        textSlot.lineShift = result.lineShift;
+      }
+      if (result.ascent) {
+        textSlot.ascent = result.ascent;
+      }
+      if (result.maxLines) {
+        textSlot.maxLines = result.maxLines;
+      }
+      // if (result.horizAlign) {
+      //   textSlot.horizAlign = result.horizAlign;
+      // }
+      // if (result.vertAlign) {
+      //   textSlot.vertAlign = result.vertAlign;
+      // }
+      // if (result.strokeJoin) {
+      //   textSlot.strokeJoin = result.strokeJoin;
+      // }
+      // if (result.direction) {
+      //   textSlot.direction = result.direction;
+      // }
+      // if (result.linebreak) {
+      //   textSlot.linebreak = result.linebreak;
+      // }
+      // if (result.resize) {
+      //   textSlot.resize = result.resize;
+      // }
+      // if (result.boundingBox) {
+      //   textSlot.boundingBox = new JsiSkRect(
+      //     this.CanvasKit,
+      //     result.boundingBox
+      //   );
+      // }
+      // if (result.fillColor) {
+      //   textSlot.fillColor = Color(result.fillColor);
+      // }
+      // if (result.strokeColor) {
+      //   textSlot.strokeColor = Color(result.strokeColor);
+      // }
+    }
+    return textSlot;
+  }
+
+  duration() {
+    return this.ref.duration();
+  }
+  fps() {
+    return this.ref.fps();
+  }
+  render(canvas: JsiSkCanvas, dstRect?: SkRect) {
+    const [width, height] = this.ref.size();
+    this.ref.render(
+      canvas.ref,
+      dstRect && dstRect instanceof JsiSkRect
+        ? dstRect.ref
+        : Float32Array.of(0, 0, width, height)
+    );
+  }
+  seekFrame(frame: number, damageRect?: JsiSkRect) {
+    const result = this.ref.seekFrame(frame);
+    if (damageRect && damageRect instanceof JsiSkRect) {
+      damageRect.ref[0] = result[0];
+      damageRect.ref[1] = result[1];
+      damageRect.ref[2] = result[2];
+      damageRect.ref[3] = result[3];
+    }
+  }
+  size() {
+    const [width, height] = this.ref.size();
+    return { width, height };
+  }
+  version() {
+    return this.ref.version();
+  }
+  dispose() {
+    this.ref.delete();
+  }
+}

package/src/skia/web/JsiSkottieFactory.ts

@@ -0,0 +1,25 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkottieFactory } from "../types";
+
+import { Host } from "./Host";
+import { JsiSkottieAnimation } from "./JsiSkottieAnimation";
+import type { JsiSkData } from "./JsiSkData";
+
+export class JsiSkottieFactory extends Host implements SkottieFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make(json: string, assets?: Record<string, JsiSkData>) {
+    const rawAssets: { [key: string]: ArrayBuffer } = {};
+    for (const [key, value] of Object.entries(assets ?? {})) {
+      rawAssets[key] = value.ref;
+    }
+    const animation = this.CanvasKit.MakeManagedAnimation(json, rawAssets);
+    if (!animation) {
+      throw new Error("Failed to create SkottieAnimation");
+    }
+    return new JsiSkottieAnimation(this.CanvasKit, animation);
+  }
+}