@shopify/react-native-skia 1.11.18 → 1.12.1

package/lib/typescript/lib/module/skia/web/JsiSkFontMgr.d.ts

@@ -3,6 +3,6 @@ export class JsiSkFontMgr extends HostObject {
     dispose(): void;
     countFamilies(): any;
     getFamilyName(index: any): any;
-    matchFamilyStyle(_familyName: any, _fontStyle: any): void;
+    matchFamilyStyle(_familyName: any, _fontStyle: any): jest.Mock<any, any, any>;
 }
 import { HostObject } from "./Host";

package/lib/typescript/lib/module/skia/web/JsiSkImageFactory.d.ts

@@ -2,7 +2,7 @@ export class JsiSkImageFactory extends Host {
     MakeImageFromViewTag(viewTag: any): Promise<null>;
     MakeImageFromNativeBuffer(buffer: any, surface: any, image: any): JsiSkImage;
     MakeImageFromEncoded(encoded: any): JsiSkImage | null;
-    MakeImageFromNativeTextureUnstable(): void;
+    MakeImageFromNativeTextureUnstable(): jest.Mock<any, any, any>;
     MakeImage(info: any, data: any, bytesPerRow: any): JsiSkImage | null;
 }
 import { Host } from "./Host";

package/lib/typescript/lib/module/skia/web/JsiSkImageFilterFactory.d.ts

@@ -10,7 +10,7 @@ export class JsiSkImageFilterFactory extends Host {
     MakeErode(rx: any, ry: any, input: any, cropRect: any): JsiSkImageFilter;
     MakeDilate(rx: any, ry: any, input: any, cropRect: any): JsiSkImageFilter;
     MakeBlend(mode: any, background: any, foreground: any, cropRect: any): JsiSkImageFilter;
-    MakeRuntimeShader(_builder: any, _childShaderName: any, _input: any): void;
+    MakeRuntimeShader(_builder: any, _childShaderName: any, _input: any): jest.Mock<any, any, any>;
 }
 import { Host } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";

package/lib/typescript/lib/module/skia/web/JsiSkPathEffectFactory.d.ts

@@ -2,8 +2,8 @@ export class JsiSkPathEffectFactory extends Host {
     MakeCorner(radius: any): JsiSkPathEffect | null;
     MakeDash(intervals: any, phase: any): JsiSkPathEffect;
     MakeDiscrete(segLength: any, dev: any, seedAssist: any): JsiSkPathEffect;
-    MakeCompose(_outer: any, _inner: any): void;
-    MakeSum(_outer: any, _inner: any): void;
+    MakeCompose(_outer: any, _inner: any): jest.Mock<any, any, any>;
+    MakeSum(_outer: any, _inner: any): jest.Mock<any, any, any>;
     MakeLine2D(width: any, matrix: any): JsiSkPathEffect | null;
     MakePath1D(path: any, advance: any, phase: any, style: any): JsiSkPathEffect | null;
     MakePath2D(matrix: any, path: any): JsiSkPathEffect | null;

package/lib/typescript/lib/module/skia/web/JsiSkPathFactory.d.ts

@@ -3,7 +3,7 @@ export class JsiSkPathFactory extends Host {
     MakeFromSVGString(str: any): JsiSkPath | null;
     MakeFromOp(one: any, two: any, op: any): JsiSkPath | null;
     MakeFromCmds(cmds: any): JsiSkPath | null;
-    MakeFromText(_text: any, _x: any, _y: any, _font: any): void;
+    MakeFromText(_text: any, _x: any, _y: any, _font: any): jest.Mock<any, any, any>;
 }
 import { Host } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";

package/lib/typescript/lib/module/skia/web/JsiSkTypefaceFontProvider.d.ts

@@ -1,6 +1,6 @@
 export class JsiSkTypefaceFontProvider extends HostObject {
     constructor(CanvasKit: any, ref: any);
-    matchFamilyStyle(_name: any, _style: any): void;
+    matchFamilyStyle(_name: any, _style: any): jest.Mock<any, any, any>;
     countFamilies(): any;
     getFamilyName(index: any): any;
     registerFont(typeface: any, familyName: any): void;

package/lib/typescript/lib/module/skia/web/JsiSkia.d.ts

@@ -1,6 +1,6 @@
 export function JsiSkApi(CanvasKit: any): {
     Point: (x: any, y: any) => JsiSkPoint;
-    RuntimeShaderBuilder: (_: any) => never;
+    RuntimeShaderBuilder: (_: any) => jest.Mock<any, any, any>;
     RRectXY: (rect: any, rx: any, ry: any) => JsiSkRRect;
     RSXform: (scos: any, ssin: any, tx: any, ty: any) => JsiSkRSXform;
     RSXformFromRadians: (scale: any, r: any, tx: any, ty: any, px: any, py: any) => JsiSkRSXform;
@@ -32,8 +32,8 @@ export function JsiSkApi(CanvasKit: any): {
     ParagraphBuilder: JsiSkParagraphBuilderFactory;
     NativeBuffer: JsiSkNativeBufferFactory;
     Video: (url?: any) => Promise<any>;
-    Context: (_surface: any, _width: any, _height: any) => never;
-    Recorder: () => never;
+    Context: (_surface: any, _width: any, _height: any) => jest.Mock<any, any, any>;
+    Recorder: () => jest.Mock<any, any, any>;
 };
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRRect } from "./JsiSkRRect";

package/lib/typescript/lib/module/skia/web/JsiVideo.d.ts

@@ -4,7 +4,7 @@ export class JsiVideo {
     ImageFactory: any;
     videoElement: any;
     duration(): number;
-    framerate(): void;
+    framerate(): jest.Mock<any, any, any>;
     setSurface(surface: any): void;
     webglBuffer: CanvasKitWebGLBufferImpl | undefined;
     nextImage(): any;

package/lib/typescript/lib/module/sksg/Recorder/Core.d.ts

@@ -1,5 +1,5 @@
 export let CommandType: {};
-export function materializeProps(command: any): void;
+export function materializeCommand(command: any): any;
 export function isCommand(command: any, type: any): boolean;
 export function isGroup(command: any): boolean;
 export function isDrawCommand(command: any, type: any): boolean;

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

@@ -1,8 +1,6 @@
 import type { CanvasKit, EmbindEnumEntity, EmbindEnum } from "canvaskit-wasm";
 import type { SkJSIInstance } from "../types";
-export declare class NotImplementedOnRNWeb extends Error {
-    constructor(msg?: string);
-}
+export declare const throwNotImplementedOnRNWeb: <T>() => T;
 export declare abstract class Host {
     readonly CanvasKit: CanvasKit;
     constructor(CanvasKit: CanvasKit);

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

@@ -9,5 +9,5 @@ export declare class JsiSkPathFactory extends Host implements PathFactory {
     MakeFromSVGString(str: string): JsiSkPath | null;
     MakeFromOp(one: SkPath, two: SkPath, op: PathOp): JsiSkPath | null;
     MakeFromCmds(cmds: PathCommand[]): JsiSkPath | null;
-    MakeFromText(_text: string, _x: number, _y: number, _font: SkFont): SkPath | null;
+    MakeFromText(_text: string, _x: number, _y: number, _font: SkFont): SkPath;
 }

package/lib/typescript/src/sksg/Recorder/Core.d.ts

@@ -1,4 +1,3 @@
-import type { SharedValue } from "react-native-reanimated";
 import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, DrawingNodeProps } from "../../dom/types";
 export declare enum CommandType {
     Group = 0,
@@ -44,10 +43,7 @@ export type Command<T extends CommandType = CommandType> = {
     type: T;
     [key: string]: unknown;
 };
-export declare const materializeProps: (command: {
-    props: Record<string, unknown>;
-    animatedProps?: Record<string, SharedValue<unknown>>;
-}) => void;
+export declare const materializeCommand: (command: any) => any;
 export declare const isCommand: <T extends CommandType>(command: Command, type: T) => command is Command<T>;
 interface GroupCommand extends Command<CommandType.Group> {
     children: Command[];

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.11.18",
+  "version": "1.12.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/react-native-skia.podspec

@@ -41,7 +41,7 @@ Pod::Spec.new do |s|
     "Christian Falch" => "christian.falch@gmail.com",
     "William Candillon" => "wcandillon@gmail.com"
   }
-  s.platforms    = { :ios => "13.0", :tvos => "13.0" }
+  s.platforms    = { :ios => "13.0", :tvos => "13.0", :osx => "11" }
   s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true
@@ -54,13 +54,13 @@ Pod::Spec.new do |s|
 
   s.frameworks = ['MetalKit', 'AVFoundation', 'AVKit', 'CoreMedia']
 
-  s.vendored_frameworks = use_graphite ?
+  s.vendored_frameworks = use_graphite ? 
   base_frameworks + graphite_frameworks :
   base_frameworks
 
   # All iOS cpp/h files
   s.source_files = [
-    "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "apple/**/*.{h,c,cc,cpp,m,mm,swift}",  
     "cpp/**/*.{h,cpp}"
   ]
 

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -40,10 +40,11 @@ export const useAnimatedImageValue = (
 
     // Update the current frame
     animatedImage.decodeNextFrame();
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
+    const oldFrame = currentFrame.value;
     currentFrame.value = animatedImage.getCurrentFrame();
+    if (oldFrame) {
+      oldFrame.dispose();
+    }
 
     // Update the last timestamp
     lastTimestamp.value = timestamp;

package/src/mock/index.ts

@@ -21,8 +21,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../animation"),
     ...require("../dom/types"),
     ...require("../dom/nodes"),
-    // We could use the real Canvas if we mock the SkiaView component for node
-    Canvas: Noop,
+    Canvas: require("react-native").View,
     // Skia Animations
     useValue: NoopValue,
     useComputedValue: NoopValue,

package/src/skia/web/Host.ts

@@ -2,11 +2,12 @@ import type { CanvasKit, EmbindEnumEntity, EmbindEnum } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
-export class NotImplementedOnRNWeb extends Error {
-  constructor(msg?: string) {
-    super(msg ?? "Not implemented on React Native Web");
+export const throwNotImplementedOnRNWeb = <T>(): T => {
+  if (typeof jest !== "undefined") {
+    return jest.fn() as unknown as T;
   }
-}
+  throw new Error("Not implemented on React Native Web");
+};
 
 export abstract class Host {
   readonly CanvasKit: CanvasKit;

package/src/skia/web/JsiSkFont.ts

@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb, getEnum } from "./Host";
+import { HostObject, getEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -21,8 +21,8 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint | undefined): SkRect {
-    throw new NotImplementedOnRNWeb();
+  measureText(_text: string, _paint?: SkPaint | undefined) {
+    return throwNotImplementedOnRNWeb<SkRect>();
   }
 
   dispose = () => {

package/src/skia/web/JsiSkFontMgr.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, FontMgr } from "canvaskit-wasm";
 
 import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb } from "./Host";
+import { HostObject, throwNotImplementedOnRNWeb } from "./Host";
 
 export class JsiSkFontMgr
   extends HostObject<FontMgr, "FontMgr">
@@ -20,7 +20,7 @@ export class JsiSkFontMgr
   getFamilyName(index: number) {
     return this.ref.getFamilyName(index);
   }
-  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle): SkTypeface {
-    throw new NotImplementedOnRNWeb();
+  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle) {
+    return throwNotImplementedOnRNWeb<SkTypeface>();
   }
 }

package/src/skia/web/JsiSkImageFactory.ts

@@ -9,7 +9,7 @@ import type {
   ImageFactory,
 } from "../types";
 
-import { Host, getEnum } from "./Host";
+import { Host, getEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 import { JsiSkData } from "./JsiSkData";
 import type { JsiSkSurface } from "./JsiSkSurface";
@@ -75,8 +75,8 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     return new JsiSkImage(this.CanvasKit, image);
   }
 
-  MakeImageFromNativeTextureUnstable(): SkImage {
-    throw new Error("MakeImageFromNativeTexture is not implemented on web");
+  MakeImageFromNativeTextureUnstable() {
+    return throwNotImplementedOnRNWeb<SkImage>();
   }
 
   MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number) {

package/src/skia/web/JsiSkImageFilterFactory.ts

@@ -13,7 +13,7 @@ import type {
   TileMode,
 } from "../types";
 
-import { Host, NotImplementedOnRNWeb, getEnum } from "./Host";
+import { Host, throwNotImplementedOnRNWeb, getEnum } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
@@ -107,9 +107,7 @@ export class JsiSkImageFilterFactory
     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."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeDropShadow(
       dx,
@@ -134,9 +132,7 @@ export class JsiSkImageFilterFactory
     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."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(
       dx,
@@ -158,9 +154,7 @@ export class JsiSkImageFilterFactory
     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."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeErode(rx, ry, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
@@ -175,9 +169,7 @@ export class JsiSkImageFilterFactory
     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."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeDilate(rx, ry, inputFilter);
     return new JsiSkImageFilter(this.CanvasKit, filter);
@@ -194,9 +186,7 @@ export class JsiSkImageFilterFactory
         ? null
         : JsiSkImageFilter.fromValue<ImageFilter>(foreground);
     if (cropRect) {
-      throw new NotImplementedOnRNWeb(
-        "The cropRect argument is not yet supported on React Native Web."
-      );
+      throwNotImplementedOnRNWeb<SkImageFilter>();
     }
     const filter = this.CanvasKit.ImageFilter.MakeBlend(
       getEnum(this.CanvasKit.BlendMode, mode),
@@ -210,7 +200,7 @@ export class JsiSkImageFilterFactory
     _builder: SkRuntimeShaderBuilder,
     _childShaderName: string | null,
     _input: SkImageFilter | null
-  ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+  ) {
+    return throwNotImplementedOnRNWeb<SkImageFilter>();
   }
 }

package/src/skia/web/JsiSkPathEffectFactory.ts

@@ -8,7 +8,7 @@ import type {
   SkPathEffect,
 } from "../types";
 
-import { getEnum, Host, NotImplementedOnRNWeb } from "./Host";
+import { getEnum, Host, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkPathEffect } from "./JsiSkPathEffect";
@@ -40,12 +40,12 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
     return new JsiSkPathEffect(this.CanvasKit, pe);
   }
 
-  MakeCompose(_outer: SkPathEffect, _inner: SkPathEffect): SkPathEffect {
-    throw new NotImplementedOnRNWeb();
+  MakeCompose(_outer: SkPathEffect, _inner: SkPathEffect) {
+    return throwNotImplementedOnRNWeb<SkPathEffect>();
   }
 
-  MakeSum(_outer: SkPathEffect, _inner: SkPathEffect): SkPathEffect {
-    throw new NotImplementedOnRNWeb();
+  MakeSum(_outer: SkPathEffect, _inner: SkPathEffect) {
+    return throwNotImplementedOnRNWeb<SkPathEffect>();
   }
 
   MakeLine2D(width: number, matrix: SkMatrix) {

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, getEnum, NotImplementedOnRNWeb } from "./Host";
+import { Host, getEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
 
 export class JsiSkPathFactory extends Host implements PathFactory {
@@ -43,12 +43,7 @@ export class JsiSkPathFactory extends Host implements PathFactory {
     return new JsiSkPath(this.CanvasKit, path);
   }
 
-  MakeFromText(
-    _text: string,
-    _x: number,
-    _y: number,
-    _font: SkFont
-  ): SkPath | null {
-    throw new NotImplementedOnRNWeb();
+  MakeFromText(_text: string, _x: number, _y: number, _font: SkFont) {
+    return throwNotImplementedOnRNWeb<SkPath>();
   }
 }

package/src/skia/web/JsiSkTypefaceFontProvider.ts

@@ -3,7 +3,7 @@ import type { CanvasKit, TypefaceFontProvider } from "canvaskit-wasm";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
 import type { FontStyle, SkTypeface } from "../types";
 
-import { HostObject, NotImplementedOnRNWeb } from "./Host";
+import { HostObject, throwNotImplementedOnRNWeb } from "./Host";
 
 export class JsiSkTypefaceFontProvider
   extends HostObject<TypefaceFontProvider, "FontMgr">
@@ -15,8 +15,8 @@ export class JsiSkTypefaceFontProvider
     super(CanvasKit, ref, "FontMgr");
   }
 
-  matchFamilyStyle(_name: string, _style: FontStyle): SkTypeface {
-    throw new NotImplementedOnRNWeb();
+  matchFamilyStyle(_name: string, _style: FontStyle) {
+    return throwNotImplementedOnRNWeb<SkTypeface>();
   }
   countFamilies() {
     return this.ref.countFamilies();

package/src/skia/web/JsiSkia.ts

@@ -1,8 +1,10 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
 import type {
+  JsiRecorder,
   SkContourMeasureIter,
   Skia,
+  SkiaContext,
   SkPath,
   SkRect,
   SkRuntimeEffect,
@@ -43,12 +45,13 @@ import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
 import { createVideo } from "./JsiVideo";
+import { throwNotImplementedOnRNWeb } from "./Host";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
     new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),
-  RuntimeShaderBuilder: (_: SkRuntimeEffect): SkRuntimeShaderBuilder => {
-    throw new Error("Not implemented on React Native Web");
+  RuntimeShaderBuilder: (_: SkRuntimeEffect) => {
+    return throwNotImplementedOnRNWeb<SkRuntimeShaderBuilder>();
   },
   RRectXY: (rect: SkRect, rx: number, ry: number) =>
     new JsiSkRRect(CanvasKit, rect, rx, ry),
@@ -130,9 +133,9 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
   Video: createVideo.bind(null, CanvasKit),
   Context: (_surface: bigint, _width: number, _height: number) => {
-    throw new Error("Not implemented on React Native Web");
+    return throwNotImplementedOnRNWeb<SkiaContext>();
   },
   Recorder: () => {
-    throw new Error("Not implemented on React Native Web");
+    return throwNotImplementedOnRNWeb<JsiRecorder>();
   },
 });

package/src/skia/web/JsiVideo.ts

@@ -4,6 +4,7 @@ import type { CanvasKitWebGLBuffer, Video, ImageFactory } from "../types";
 
 import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
 import { JsiSkImageFactory } from "./JsiSkImageFactory";
+import { throwNotImplementedOnRNWeb } from "./Host";
 
 export const createVideo = async (
   CanvasKit: CanvasKit,
@@ -42,7 +43,7 @@ export class JsiVideo implements Video {
   }
 
   framerate(): number {
-    throw new Error("Video.frame is not available on React Native Web");
+    return throwNotImplementedOnRNWeb<number>();
   }
 
   setSurface(surface: Surface) {

package/src/sksg/Recorder/Core.ts

@@ -1,5 +1,3 @@
-import type { SharedValue } from "react-native-reanimated";
-
 import type {
   BlurMaskFilterProps,
   CircleProps,
@@ -115,16 +113,16 @@ export type Command<T extends CommandType = CommandType> = {
   [key: string]: unknown;
 };
 
-export const materializeProps = (command: {
-  props: Record<string, unknown>;
-  animatedProps?: Record<string, SharedValue<unknown>>;
-}) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const materializeCommand = (command: any) => {
   "worklet";
+  const newProps = { ...command.props };
   if (command.animatedProps) {
     for (const key in command.animatedProps) {
-      command.props[key] = command.animatedProps[key].value;
+      newProps[key] = command.animatedProps[key].value;
     }
   }
+  return { ...command, props: newProps };
 };
 
 export const isCommand = <T extends CommandType>(

package/src/sksg/Recorder/Player.ts

@@ -44,19 +44,18 @@ import {
   isCommand,
   isDrawCommand,
   isGroup,
-  materializeProps,
+  materializeCommand,
   type Command,
 } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
-function play(ctx: DrawingContext, command: Command) {
+function play(ctx: DrawingContext, _command: Command) {
   "worklet";
-  if (isGroup(command)) {
-    command.children.forEach((child) => play(ctx, child));
+  if (isGroup(_command)) {
+    _command.children.forEach((child) => play(ctx, child));
     return;
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  materializeProps(command as any);
+  const command = materializeCommand(_command);
   if (isCommand(command, CommandType.SaveBackdropFilter)) {
     ctx.saveBackdropFilter();
   } else if (isCommand(command, CommandType.SaveLayer)) {

package/src/sksg/Recorder/commands/Box.ts

@@ -2,7 +2,7 @@ import { deflate, inflate, processColor } from "../../../dom/nodes";
 import type { BoxProps, BoxShadowProps } from "../../../dom/types";
 import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
 import type { Command } from "../Core";
-import { CommandType, materializeProps } from "../Core";
+import { CommandType, materializeCommand } from "../Core";
 import type { DrawingContext } from "../DrawingContext";
 
 interface BoxCommand extends Command<CommandType.DrawBox> {
@@ -17,11 +17,9 @@ export const isBoxCommand = (command: Command): command is BoxCommand => {
 
 export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
   "worklet";
-  command.shadows.forEach((shadow) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    materializeProps(shadow as any);
+  const shadows = command.shadows.map((shadow) => {
+    return materializeCommand(shadow).props;
   });
-  const shadows = command.shadows.map((shadow) => shadow.props);
   const { paint, Skia, canvas } = ctx;
   const { box: defaultBox } = command.props;
   const opacity = paint.getAlphaf();