@shopify/react-native-skia 0.1.142 → 0.1.143

package/src/skia/web/JsiSkImageFilterFactory.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit } from "canvaskit-wasm";
+import type { CanvasKit, ImageFilter } from "canvaskit-wasm";
 
 import type {
   ColorChannel,
@@ -13,8 +13,9 @@ import type {
   TileMode,
 } from "../types";
 
-import { Host, NotImplementedOnRNWeb, ckEnum, toValue } from "./Host";
+import { Host, NotImplementedOnRNWeb, ckEnum } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
 export class JsiSkImageFilterFactory
   extends Host
@@ -24,26 +25,37 @@ export class JsiSkImageFilterFactory
     super(CanvasKit);
   }
 
-  MakeOffset(
-    _dx: number,
-    _dy: number,
-    _input: SkImageFilter | null
-  ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+  MakeOffset(dx: number, dy: number, input: SkImageFilter | null) {
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    const filter = this.CanvasKit.ImageFilter.MakeOffset(dx, dy, inputFilter);
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeDisplacementMap(
-    _channelX: ColorChannel,
-    _channelY: ColorChannel,
-    _scale: number,
-    _in1: SkImageFilter,
-    _input: SkImageFilter | null
+    channelX: ColorChannel,
+    channelY: ColorChannel,
+    scale: number,
+    in1: SkImageFilter,
+    input: SkImageFilter | null
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    const filter = this.CanvasKit.ImageFilter.MakeDisplacementMap(
+      ckEnum(channelX),
+      ckEnum(channelY),
+      scale,
+      JsiSkImageFilter.fromValue(in1),
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
-  MakeShader(_shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+  MakeShader(shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
+    const filter = this.CanvasKit.ImageFilter.MakeShader(
+      JsiSkImageFilter.fromValue(shader)
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeBlur(
@@ -58,7 +70,7 @@ export class JsiSkImageFilterFactory
         sigmaX,
         sigmaY,
         ckEnum(mode),
-        input === null ? null : toValue(input)
+        input === null ? null : JsiSkImageFilter.fromValue(input)
       )
     );
   }
@@ -67,8 +79,8 @@ export class JsiSkImageFilterFactory
     return new JsiSkImageFilter(
       this.CanvasKit,
       this.CanvasKit.ImageFilter.MakeColorFilter(
-        toValue(cf),
-        input === null ? null : toValue(input)
+        JsiSkColorFilter.fromValue(cf),
+        input === null ? null : JsiSkImageFilter.fromValue(input)
       )
     );
   }
@@ -77,61 +89,121 @@ export class JsiSkImageFilterFactory
     return new JsiSkImageFilter(
       this.CanvasKit,
       this.CanvasKit.ImageFilter.MakeCompose(
-        outer === null ? null : toValue(outer),
-        inner === null ? null : toValue(inner)
+        outer === null ? null : JsiSkImageFilter.fromValue(outer),
+        inner === null ? null : JsiSkImageFilter.fromValue(inner)
       )
     );
   }
 
   MakeDropShadow(
-    _dx: number,
-    _dy: number,
-    _sigmaX: number,
-    _sigmaY: number,
-    _color: SkColor,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    dx: number,
+    dy: number,
+    sigmaX: number,
+    sigmaY: number,
+    color: SkColor,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeDropShadow(
+      dx,
+      dy,
+      sigmaX,
+      sigmaY,
+      color,
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeDropShadowOnly(
-    _dx: number,
-    _dy: number,
-    _sigmaX: number,
-    _sigmaY: number,
-    _color: SkColor,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    dx: number,
+    dy: number,
+    sigmaX: number,
+    sigmaY: number,
+    color: SkColor,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(
+      dx,
+      dy,
+      sigmaX,
+      sigmaY,
+      color,
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeErode(
-    _rx: number,
-    _ry: number,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    rx: number,
+    ry: number,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeErode(rx, ry, inputFilter);
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeDilate(
-    _rx: number,
-    _ry: number,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    rx: number,
+    ry: number,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeDilate(rx, ry, inputFilter);
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeBlend(
-    _mode: BlendMode,
-    _background: SkImageFilter,
-    _foreground: SkImageFilter | null,
-    _cropRect?: SkRect
+    mode: BlendMode,
+    background: SkImageFilter,
+    foreground: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      foreground === null
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(foreground);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeBlend(
+      ckEnum(mode),
+      JsiSkImageFilter.fromValue(background),
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeRuntimeShader(

package/src/skia/web/JsiSkMatrix.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
 
 import type { SkMatrix } from "../types";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
 
 export class JsiSkMatrix
   extends HostObject<Matrix3x3, "Matrix">
@@ -13,7 +13,9 @@ export class JsiSkMatrix
   }
 
   concat(matrix: SkMatrix) {
-    this.ref.set(this.CanvasKit.Matrix.multiply(this.ref, toValue(matrix)));
+    this.ref.set(
+      this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))
+    );
   }
 
   translate(x: number, y: number) {

package/src/skia/web/JsiSkPaint.ts

@@ -14,11 +14,15 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { HostObject, toNullableValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
+import { JsiSkColorFilter } from "./JsiSkColorFilter";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkMaskFilter } from "./JsiSkMaskFilter";
+import { JsiSkPathEffect } from "./JsiSkPathEffect";
+import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   constructor(CanvasKit: CanvasKit, ref: Paint) {
-    ref.setAntiAlias(true);
     super(CanvasKit, ref, "Paint");
   }
 
@@ -63,23 +67,23 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   setColorFilter(filter: SkColorFilter | null) {
-    this.ref.setColorFilter(toNullableValue(filter));
+    this.ref.setColorFilter(filter ? JsiSkColorFilter.fromValue(filter) : null);
   }
 
   setImageFilter(filter: SkImageFilter | null) {
-    this.ref.setImageFilter(toNullableValue(filter));
+    this.ref.setImageFilter(filter ? JsiSkImageFilter.fromValue(filter) : null);
   }
 
   setMaskFilter(filter: SkMaskFilter | null) {
-    this.ref.setMaskFilter(toNullableValue(filter));
+    this.ref.setMaskFilter(filter ? JsiSkMaskFilter.fromValue(filter) : null);
   }
 
   setPathEffect(effect: SkPathEffect | null) {
-    this.ref.setPathEffect(toNullableValue(effect));
+    this.ref.setPathEffect(effect ? JsiSkPathEffect.fromValue(effect) : null);
   }
 
   setShader(shader: SkShader | null) {
-    this.ref.setShader(toNullableValue(shader));
+    this.ref.setShader(shader ? JsiSkShader.fromValue(shader) : null);
   }
 
   setStrokeCap(cap: StrokeCap) {

package/src/skia/web/JsiSkPath.ts

@@ -13,10 +13,11 @@ import type {
   StrokeOpts,
 } from "../types";
 
-import { ckEnum, HostObject, optEnum, toValue } from "./Host";
+import { ckEnum, HostObject, optEnum } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 
 const CommandCount = {
   [PathVerb.Move]: 3,
@@ -27,20 +28,6 @@ const CommandCount = {
   [PathVerb.Close]: 1,
 };
 
-const areCmdsInterpolatable = (cmd1: PathCommand[], cmd2: PathCommand[]) => {
-  if (cmd1.length !== cmd2.length) {
-    return false;
-  }
-  for (let i = 0; i < cmd1.length; i++) {
-    if (cmd1[i][0] !== cmd2[i][0]) {
-      return false;
-    } else if (cmd1[i][0] === PathVerb.Conic && cmd1[i][5] !== cmd2[i][5]) {
-      return false;
-    }
-  }
-  return true;
-};
-
 export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   constructor(CanvasKit: CanvasKit, ref: Path) {
     super(CanvasKit, ref, "Path");
@@ -74,7 +61,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
 
   addPoly(points: SkPoint[], close: boolean) {
     this.ref.addPoly(
-      points.map((p) => toValue(p)),
+      points.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
       close
     );
     return this;
@@ -256,7 +243,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   equals(other: SkPath) {
-    return this.ref.equals(toValue(other));
+    return this.ref.equals(JsiSkPath.fromValue(other));
   }
 
   getBounds() {
@@ -293,9 +280,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   addCircle(x: number, y: number, r: number) {
-    // We leave the comment below to remind us that this is not implemented in CanvasKit
-    // throw new NotImplementedOnRNWeb();
-    this.ref.addOval(this.CanvasKit.LTRBRect(x - r, y - r, x + r, y + r));
+    this.ref.addCircle(x, y, r);
     return this;
   }
 
@@ -307,7 +292,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   op(path: SkPath, op: PathOp) {
-    return this.ref.op(toValue(path), ckEnum(op));
+    return this.ref.op(JsiSkPath.fromValue(path), ckEnum(op));
   }
 
   simplify() {
@@ -324,34 +309,15 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   transform(m3: SkMatrix) {
-    this.ref.transform(toValue(m3));
+    this.ref.transform(JsiSkMatrix.fromValue(m3));
   }
 
   interpolate(end: SkPath, t: number) {
-    // Do not remove the comment below. We use it to track missing APIs in CanvasKit
-    // throw new NotImplementedOnRNWeb();
-    const cmd1 = this.toCmds();
-    const cmd2 = end.toCmds();
-    if (!areCmdsInterpolatable(cmd1, cmd2)) {
-      return null;
-    }
-    const interpolated: PathCommand[] = [];
-    cmd1.forEach((cmd, i) => {
-      const interpolatedCmd = [cmd[0]];
-      interpolated.push(interpolatedCmd);
-      cmd.forEach((c, j) => {
-        if (j === 0) {
-          return;
-        }
-        if (interpolatedCmd[0] === PathVerb.Conic && j === 5) {
-          interpolatedCmd.push(c);
-        } else {
-          const c2 = cmd2[i][j];
-          interpolatedCmd.push(c2 + (c - c2) * t);
-        }
-      });
-    });
-    const path = this.CanvasKit.Path.MakeFromCmds(interpolated.flat());
+    const path = this.CanvasKit.Path.MakeFromPathInterpolation(
+      this.ref,
+      JsiSkPath.fromValue(end),
+      t
+    );
     if (path === null) {
       return null;
     }
@@ -359,11 +325,10 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   isInterpolatable(path2: SkPath): boolean {
-    // Do not remove the comment below. We use it to track missing APIs in CanvasKit
-    // throw new NotImplementedOnRNWeb();
-    const cmd1 = this.toCmds();
-    const cmd2 = path2.toCmds();
-    return areCmdsInterpolatable(cmd1, cmd2);
+    return this.CanvasKit.Path.CanInterpolate(
+      this.ref,
+      JsiSkPath.fromValue(path2)
+    );
   }
 
   toCmds() {

package/src/skia/web/JsiSkPathEffectFactory.ts

@@ -8,7 +8,9 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { ckEnum, Host, NotImplementedOnRNWeb, toValue } from "./Host";
+import { ckEnum, Host, NotImplementedOnRNWeb } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkPathEffect } from "./JsiSkPathEffect";
 
 export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
@@ -47,7 +49,10 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
   }
 
   MakeLine2D(width: number, matrix: SkMatrix) {
-    const pe = this.CanvasKit.PathEffect.MakeLine2D(width, toValue(matrix));
+    const pe = this.CanvasKit.PathEffect.MakeLine2D(
+      width,
+      JsiSkMatrix.fromValue(matrix)
+    );
     if (pe === null) {
       return null;
     }
@@ -61,7 +66,7 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
     style: Path1DEffectStyle
   ) {
     const pe = this.CanvasKit.PathEffect.MakePath1D(
-      toValue(path),
+      JsiSkPath.fromValue(path),
       advance,
       phase,
       ckEnum(style)
@@ -74,8 +79,8 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
 
   MakePath2D(matrix: SkMatrix, path: SkPath) {
     const pe = this.CanvasKit.PathEffect.MakePath2D(
-      toValue(matrix),
-      toValue(path)
+      JsiSkMatrix.fromValue(matrix),
+      JsiSkPath.fromValue(path)
     );
     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, toValue, NotImplementedOnRNWeb } from "./Host";
+import { Host, ckEnum, NotImplementedOnRNWeb } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
 
 export class JsiSkPathFactory extends Host implements PathFactory {
@@ -25,8 +25,8 @@ export class JsiSkPathFactory extends Host implements PathFactory {
 
   MakeFromOp(one: SkPath, two: SkPath, op: PathOp) {
     const path = this.CanvasKit.Path.MakeFromOp(
-      toValue(one),
-      toValue(two),
+      JsiSkPath.fromValue(one),
+      JsiSkPath.fromValue(two),
       ckEnum(op)
     );
     if (path === null) {

package/src/skia/web/JsiSkPicture.ts

@@ -9,8 +9,10 @@ import type {
   SkMatrix,
 } from "../types";
 
-import { HostObject, toValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkPicture
   extends HostObject<Picture, "Picture">
@@ -33,8 +35,8 @@ export class JsiSkPicture
         ckEnum(tmx),
         ckEnum(tmy),
         ckEnum(mode),
-        localMatrix ? toValue(localMatrix) : undefined,
-        tileRect ? toValue(tileRect) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined,
+        tileRect ? JsiSkRect.fromValue(this.CanvasKit, tileRect) : undefined
       )
     );
   }

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -3,9 +3,10 @@ import type { CanvasKit, PictureRecorder } from "canvaskit-wasm";
 import type { SkRect } from "../types";
 import type { SkPictureRecorder } from "../types/Picture/PictureRecorder";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
 import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkPicture } from "./JsiSkPicture";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkPictureRecorder
   extends HostObject<PictureRecorder, "PictureRecorder">
@@ -18,7 +19,7 @@ export class JsiSkPictureRecorder
   beginRecording(bounds: SkRect) {
     return new JsiSkCanvas(
       this.CanvasKit,
-      this.ref.beginRecording(toValue(bounds))
+      this.ref.beginRecording(JsiSkRect.fromValue(this.CanvasKit, bounds))
     );
   }
 

package/src/skia/web/JsiSkPoint.ts

@@ -2,9 +2,19 @@ import type { CanvasKit, Point } from "canvaskit-wasm";
 
 import type { SkPoint } from "../types";
 
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
+
+export class JsiSkPoint
+  extends BaseHostObject<Point, "Point">
+  implements SkPoint
+{
+  static fromValue(point: SkPoint) {
+    if (point instanceof JsiSkPoint) {
+      return point.ref;
+    }
+    return new Float32Array([point.x, point.y]);
+  }
 
-export class JsiSkPoint extends HostObject<Point, "Point"> implements SkPoint {
   constructor(CanvasKit: CanvasKit, ref: Point) {
     super(CanvasKit, ref, "Point");
   }

package/src/skia/web/JsiSkRRect.ts

@@ -2,10 +2,13 @@ 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 class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+export class JsiSkRRect
+  extends BaseHostObject<RRect, "RRect">
+  implements SkRRect
+{
   static fromValue(CanvasKit: CanvasKit, rect: SkRRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;

package/src/skia/web/JsiSkRSXform.ts

@@ -4,7 +4,7 @@ import type { SkRSXform } from "../types";
 
 import { HostObject } from "./Host";
 
-type RSXform = Float32Array;
+export type RSXform = Float32Array;
 
 export class JsiSkRSXform
   extends HostObject<RSXform, "RSXform">

package/src/skia/web/JsiSkRect.ts

@@ -2,9 +2,9 @@ import type { CanvasKit, Rect } from "canvaskit-wasm";
 
 import type { SkRect } from "../types";
 
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 
-export class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
+export class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
   static fromValue(CanvasKit: CanvasKit, rect: SkRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;

package/src/skia/web/JsiSkRuntimeEffect.ts

@@ -3,7 +3,8 @@ import type { CanvasKit, RuntimeEffect } from "canvaskit-wasm";
 import type { SkMatrix, SkShader } from "../types";
 import type { SkRuntimeEffect } from "../types/RuntimeEffect/RuntimeEffect";
 
-import { HostObject, toValue } from "./Host";
+import { HostObject } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkRuntimeEffect
@@ -19,7 +20,9 @@ export class JsiSkRuntimeEffect
       this.CanvasKit,
       this.ref.makeShader(
         uniforms,
-        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+        localMatrix !== undefined
+          ? JsiSkMatrix.fromValue(localMatrix)
+          : localMatrix
       )
     );
   }
@@ -33,8 +36,10 @@ export class JsiSkRuntimeEffect
       this.CanvasKit,
       this.ref.makeShaderWithChildren(
         uniforms,
-        children?.map((child) => toValue(child)),
-        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+        children?.map((child) => JsiSkShader.fromValue(child)),
+        localMatrix !== undefined
+          ? JsiSkMatrix.fromValue(localMatrix)
+          : localMatrix
       )
     );
   }