@shopify/react-native-skia 0.1.142 → 0.1.143

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

@@ -1,8 +1,8 @@
 import type { CanvasKit, RRect } from "canvaskit-wasm";
 import type { SkRRect } from "../types";
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
-export declare class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+export declare class JsiSkRRect extends BaseHostObject<RRect, "RRect"> implements SkRRect {
     static fromValue(CanvasKit: CanvasKit, rect: SkRRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: RRect);
     get rx(): number;

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

@@ -1,8 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
 import type { SkRSXform } from "../types";
 import { HostObject } from "./Host";
-declare type RSXform = Float32Array;
+export declare type RSXform = Float32Array;
 export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
     constructor(CanvasKit: CanvasKit, ref: RSXform);
 }
-export {};

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

@@ -1,7 +1,7 @@
 import type { CanvasKit, Rect } from "canvaskit-wasm";
 import type { SkRect } from "../types";
-import { HostObject } from "./Host";
-export declare class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
+import { BaseHostObject } from "./Host";
+export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
     static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Rect);
     get x(): number;

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

@@ -1,6 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkFont, SkRSXform } from "../types";
+import type { SkFont } from "../types";
 import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
 import { Host } from "./Host";
 import { JsiSkTextBlob } from "./JsiSkTextBlob";
 export declare class JsiSkTextBlobFactory extends Host implements TextBlobFactory {

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.142",
+  "version": "0.1.143",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -89,7 +89,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.35.0",
+    "canvaskit-wasm": "^0.36.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

package/src/renderer/components/Blend.tsx

@@ -1,10 +1,21 @@
 import type { ReactNode } from "react";
 import React from "react";
 
+import type { SkImageFilter, SkShader } from "../../skia/types";
 import { isImageFilter, BlendMode, isShader } from "../../skia/types";
 import { createDeclaration } from "../nodes";
 import type { AnimatedProps, SkEnum } from "../processors";
 import { enumKey } from "../processors/Paint";
+import type { DeclarationResult } from "../nodes/Declaration";
+
+const childrenAreImageFilters = (
+  children: DeclarationResult[]
+): children is SkImageFilter[] =>
+  children.every((child) => isImageFilter(child));
+
+const childrenAreShaders = (
+  children: DeclarationResult[]
+): children is SkShader[] => children.every((child) => isShader(child));
 
 interface BlendProps {
   mode: SkEnum<typeof BlendMode>;
@@ -13,12 +24,21 @@ interface BlendProps {
 
 const onDeclare = createDeclaration<BlendProps>(
   ({ mode }, children, { Skia }) => {
-    const [inner, outer] = children;
     const blend = BlendMode[enumKey(mode)];
-    if (isImageFilter(outer) && isImageFilter(inner)) {
-      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-    } else if (isShader(outer) && isShader(inner)) {
-      return Skia.Shader.MakeBlend(blend, outer, inner);
+    if (childrenAreImageFilters(children)) {
+      return children.reverse().reduce<SkImageFilter | null>((inner, outer) => {
+        if (inner === null) {
+          return outer;
+        }
+        return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+      }, null);
+    } else if (childrenAreShaders(children)) {
+      return children.reverse().reduce<SkShader | null>((inner, outer) => {
+        if (inner === null) {
+          return outer;
+        }
+        return Skia.Shader.MakeBlend(blend, outer, inner);
+      }, null);
     }
     throw new Error("<Blend /> can only blend Shaders or ImageFilters");
   }

package/src/renderer/components/imageFilters/Morphology.tsx

@@ -18,8 +18,8 @@ const onDeclare = createDeclaration<MorphologyProps>(
     const r = processRadius(Skia, radius);
     const factory =
       operator === "dilate"
-        ? Skia.ImageFilter.MakeDilate
-        : Skia.ImageFilter.MakeErode;
+        ? Skia.ImageFilter.MakeDilate.bind(Skia.ImageFilter)
+        : Skia.ImageFilter.MakeErode.bind(Skia.ImageFilter);
     return factory(r.x, r.y, input);
   }
 );

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -30,8 +30,8 @@ const onDeclare = createDeclaration<ShadowProps>(
       factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
     } else {
       factory = shadowOnly
-        ? Skia.ImageFilter.MakeDropShadowOnly
-        : Skia.ImageFilter.MakeDropShadow;
+        ? Skia.ImageFilter.MakeDropShadowOnly.bind(Skia.ImageFilter)
+        : Skia.ImageFilter.MakeDropShadow.bind(Skia.ImageFilter);
     }
     return factory(dx, dy, blur, blur, color, input);
   }

package/src/skia/types/Picture/Picture.ts

@@ -3,8 +3,9 @@ import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
 import type { SkShader } from "../Shader";
 import type { SkMatrix } from "../Matrix";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkPicture {
+export interface SkPicture extends SkJSIInstance<"Picture"> {
   /**
    *  Returns a new shader that will draw with this picture.
    *

package/src/skia/web/Host.ts

@@ -1,11 +1,10 @@
-/* eslint-disable no-nested-ternary */
 import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
 export class NotImplementedOnRNWeb extends Error {
-  constructor() {
-    super("Not implemented on React Native Web");
+  constructor(msg?: string) {
+    super(msg ?? "Not implemented on React Native Web");
   }
 }
 
@@ -17,7 +16,7 @@ export abstract class Host {
   }
 }
 
-export abstract class HostObject<T, N extends string>
+export abstract class BaseHostObject<T, N extends string>
   extends Host
   implements SkJSIInstance<N>
 {
@@ -31,23 +30,14 @@ export abstract class HostObject<T, N extends string>
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type NonNullish = {};
-
-export const toOptionalValue = <T>(
-  value: NonNullish | undefined | null
-): T | undefined | null =>
-  value === undefined ? undefined : value === null ? null : toValue(value);
-
-export const toUndefinedableValue = <T>(
-  value: NonNullish | undefined
-): T | undefined => (value === undefined ? undefined : toValue(value));
-
-export const toNullableValue = <T>(value: NonNullish | null): T | null =>
-  value === null ? null : toValue(value);
-
-export const toValue = <T>(value: NonNullish): T =>
-  (value as HostObject<T, string>).ref;
+export abstract class HostObject<T, N extends string> extends BaseHostObject<
+  T,
+  N
+> {
+  static fromValue<T>(value: SkJSIInstance<string>) {
+    return (value as HostObject<T, string>).ref;
+  }
+}
 
 export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
 export const optEnum = (

package/src/skia/web/JsiSkCanvas.ts

@@ -1,4 +1,4 @@
-import type { Canvas, Image, CanvasKit, Paint } from "canvaskit-wasm";
+import type { Canvas, CanvasKit } from "canvaskit-wasm";
 
 import type {
   BlendMode,
@@ -24,15 +24,19 @@ import type {
   SkVertices,
 } from "../types";
 
-import {
-  ckEnum,
-  HostObject,
-  toValue,
-  toUndefinedableValue,
-  toOptionalValue,
-} from "./Host";
+import { ckEnum, HostObject } from "./Host";
+import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkVertices } from "./JsiSkVertices";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkFont } from "./JsiSkFont";
+import { JsiSkTextBlob } from "./JsiSkTextBlob";
+import { JsiSkPicture } from "./JsiSkPicture";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkPoint } from "./JsiSkPoint";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -45,12 +49,17 @@ export class JsiSkCanvas
   drawRect(rect: SkRect, paint: SkPaint) {
     this.ref.drawRect(
       JsiSkRect.fromValue(this.CanvasKit, rect),
-      toValue<Paint>(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawImage(image: SkImage, x: number, y: number, paint?: SkPaint) {
-    this.ref.drawImage(toValue<Image>(image), x, y, toOptionalValue(paint));
+    this.ref.drawImage(
+      JsiSkImage.fromValue(image),
+      x,
+      y,
+      paint ? JsiSkPaint.fromValue(paint) : paint
+    );
   }
 
   drawImageRect(
@@ -61,10 +70,10 @@ export class JsiSkCanvas
     fastSample?: boolean
   ) {
     this.ref.drawImageRect(
-      toValue<Image>(img),
+      JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
-      toValue<Paint>(paint),
+      JsiSkPaint.fromValue(paint),
       fastSample
     );
   }
@@ -78,12 +87,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageCubic(
-      toValue(img),
+      JsiSkImage.fromValue(img),
       left,
       top,
       B,
       C,
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -96,12 +105,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageOptions(
-      toValue(img),
+      JsiSkImage.fromValue(img),
       left,
       top,
       ckEnum(fm),
       ckEnum(mm),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -113,11 +122,11 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageNine(
-      toValue(img),
-      toValue(center),
-      toValue(dest),
+      JsiSkImage.fromValue(img),
+      Array.from(JsiSkRect.fromValue(this.CanvasKit, center)),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(filter),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -130,12 +139,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageRectCubic(
-      toValue<Image>(img),
+      JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
       B,
       C,
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -148,29 +157,33 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageRectOptions(
-      toValue<Image>(img),
+      JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(fm),
       ckEnum(mm),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
   drawPaint(paint: SkPaint) {
-    this.ref.drawPaint(toValue(paint));
+    this.ref.drawPaint(JsiSkPaint.fromValue(paint));
   }
 
   drawLine(x0: number, y0: number, x1: number, y1: number, paint: SkPaint) {
-    this.ref.drawLine(x0, y0, x1, y1, toValue(paint));
+    this.ref.drawLine(x0, y0, x1, y1, JsiSkPaint.fromValue(paint));
   }
 
   drawCircle(cx: number, cy: number, radius: number, paint: SkPaint) {
-    this.ref.drawCircle(cx, cy, radius, toValue(paint));
+    this.ref.drawCircle(cx, cy, radius, JsiSkPaint.fromValue(paint));
   }
 
   drawVertices(verts: SkVertices, mode: BlendMode, paint: SkPaint) {
-    this.ref.drawVertices(toValue(verts), ckEnum(mode), toValue(paint));
+    this.ref.drawVertices(
+      JsiSkVertices.fromValue(verts),
+      ckEnum(mode),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawPatch(
@@ -183,9 +196,9 @@ export class JsiSkCanvas
     this.ref.drawPatch(
       cubics.map(({ x, y }) => [x, y]).flat(),
       colors,
-      toOptionalValue(texs),
+      texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
       mode ? ckEnum(mode) : null,
-      toUndefinedableValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : undefined
     );
   }
 
@@ -197,7 +210,7 @@ export class JsiSkCanvas
     this.ref.drawPoints(
       ckEnum(mode),
       points.map(({ x, y }) => [x, y]).flat(),
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
@@ -209,39 +222,57 @@ export class JsiSkCanvas
     paint: SkPaint
   ) {
     this.ref.drawArc(
-      toValue(oval),
+      JsiSkRect.fromValue(this.CanvasKit, oval),
       startAngle,
       sweepAngle,
       useCenter,
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawRRect(rrect: SkRRect, paint: SkPaint) {
     this.ref.drawRRect(
       JsiSkRRect.fromValue(this.CanvasKit, rrect),
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
-    this.ref.drawDRRect(toValue(outer), toValue(inner), toValue(paint));
+    this.ref.drawDRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, outer),
+      JsiSkRRect.fromValue(this.CanvasKit, inner),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawOval(oval: SkRect, paint: SkPaint) {
-    this.ref.drawOval(toValue(oval), toValue(paint));
+    this.ref.drawOval(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawPath(path: SkPath, paint: SkPaint) {
-    this.ref.drawPath(toValue(path), toValue(paint));
+    this.ref.drawPath(JsiSkPath.fromValue(path), JsiSkPaint.fromValue(paint));
   }
 
   drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont) {
-    this.ref.drawText(str, x, y, toValue(paint), toValue(font));
+    this.ref.drawText(
+      str,
+      x,
+      y,
+      JsiSkPaint.fromValue(paint),
+      JsiSkFont.fromValue(font)
+    );
   }
 
   drawTextBlob(blob: SkTextBlob, x: number, y: number, paint: SkPaint) {
-    this.ref.drawTextBlob(toValue(blob), x, y, toValue(paint));
+    this.ref.drawTextBlob(
+      JsiSkTextBlob.fromValue(blob),
+      x,
+      y,
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawGlyphs(
@@ -257,8 +288,8 @@ export class JsiSkCanvas
       positions.map((p) => [p.x, p.y]).flat(),
       x,
       y,
-      toValue(font),
-      toValue(paint)
+      JsiSkFont.fromValue(font),
+      JsiSkPaint.fromValue(paint)
     );
   }
 
@@ -277,9 +308,9 @@ export class JsiSkCanvas
     flags?: SaveLayerFlag
   ) {
     return this.ref.saveLayer(
-      toUndefinedableValue(paint),
-      toOptionalValue(bounds),
-      toOptionalValue(backdrop),
+      paint ? JsiSkPaint.fromValue(paint) : undefined,
+      bounds ? JsiSkRect.fromValue(this.CanvasKit, bounds) : bounds,
+      backdrop ? JsiSkImageFilter.fromValue(backdrop) : backdrop,
       flags
     );
   }
@@ -313,7 +344,7 @@ export class JsiSkCanvas
   }
 
   clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipPath(toValue(path), ckEnum(op), doAntiAlias);
+    this.ref.clipPath(JsiSkPath.fromValue(path), ckEnum(op), doAntiAlias);
   }
 
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
@@ -333,10 +364,10 @@ export class JsiSkCanvas
   }
 
   concat(m: SkMatrix) {
-    this.ref.concat(toValue(m));
+    this.ref.concat(JsiSkMatrix.fromValue(m));
   }
 
   drawPicture(skp: SkPicture) {
-    this.ref.drawPicture(toValue(skp));
+    this.ref.drawPicture(JsiSkPicture.fromValue(skp));
   }
 }

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -8,7 +8,7 @@ import type {
   BlendMode,
 } from "../types";
 
-import { ckEnum, Host, toValue, NotImplementedOnRNWeb } from "./Host";
+import { ckEnum, Host } from "./Host";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
 export class JsiSkColorFilterFactory
@@ -29,21 +29,28 @@ export class JsiSkColorFilterFactory
   MakeBlend(color: SkColor, mode: BlendMode) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeBlend(toValue(color), ckEnum(mode))
+      this.CanvasKit.ColorFilter.MakeBlend(color, ckEnum(mode))
     );
   }
 
   MakeCompose(outer: SkColorFilter, inner: SkColorFilter) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeCompose(toValue(outer), toValue(inner))
+      this.CanvasKit.ColorFilter.MakeCompose(
+        JsiSkColorFilter.fromValue(outer),
+        JsiSkColorFilter.fromValue(inner)
+      )
     );
   }
 
   MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeLerp(t, toValue(dst), toValue(src))
+      this.CanvasKit.ColorFilter.MakeLerp(
+        t,
+        JsiSkColorFilter.fromValue(dst),
+        JsiSkColorFilter.fromValue(src)
+      )
     );
   }
 
@@ -62,6 +69,9 @@ export class JsiSkColorFilterFactory
   }
 
   MakeLumaColorFilter(): SkColorFilter {
-    throw new NotImplementedOnRNWeb();
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLuma()
+    );
   }
 }

package/src/skia/web/JsiSkFont.ts

@@ -9,7 +9,9 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, toValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
+import { JsiSkPaint } from "./JsiSkPaint";
+import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 
@@ -43,7 +45,12 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
 
   // TODO: Fix return value in the C++ implementation, it return float32
   getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {
-    return [...this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null)];
+    return [
+      ...this.ref.getGlyphWidths(
+        glyphs,
+        paint ? JsiSkPaint.fromValue(paint) : null
+      ),
+    ];
   }
 
   getGlyphIntercepts(
@@ -55,7 +62,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     return [
       ...this.ref.getGlyphIntercepts(
         glyphs,
-        positions.map((p) => toValue(p)),
+        positions.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
         top,
         bottom
       ),
@@ -120,6 +127,6 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setTypeface(face: SkTypeface | null) {
-    this.ref.setTypeface(face ? toValue(face) : null);
+    this.ref.setTypeface(face ? JsiSkTypeface.fromValue(face) : null);
   }
 }

package/src/skia/web/JsiSkImage.ts

@@ -11,7 +11,8 @@ import type {
   TileMode,
 } from "../types";
 
-import { ckEnum, HostObject, toValue } from "./Host";
+import { ckEnum, HostObject } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
@@ -41,7 +42,7 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
         ckEnum(ty),
         ckEnum(fm),
         ckEnum(mm),
-        localMatrix ? toValue(localMatrix) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
   }
@@ -60,7 +61,7 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
         ckEnum(ty),
         B,
         C,
-        localMatrix ? toValue(localMatrix) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
   }

package/src/skia/web/JsiSkImageFactory.ts

@@ -3,8 +3,9 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { SkData, ImageInfo } from "../types";
 import type { ImageFactory } from "../types/Image/ImageFactory";
 
-import { Host, toValue, ckEnum } from "./Host";
+import { Host, ckEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkData } from "./JsiSkData";
 
 export class JsiSkImageFactory extends Host implements ImageFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -12,7 +13,9 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
   }
 
   MakeImageFromEncoded(encoded: SkData) {
-    const image = this.CanvasKit.MakeImageFromEncoded(toValue(encoded));
+    const image = this.CanvasKit.MakeImageFromEncoded(
+      JsiSkData.fromValue(encoded)
+    );
     if (image === null) {
       return null;
     }
@@ -29,7 +32,7 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
         height: info.height,
         width: info.width,
       },
-      toValue(data),
+      JsiSkData.fromValue(data),
       bytesPerRow
     );
     if (image === null) {