@shopify/react-native-skia 2.7.0 → 2.8.0

package/lib/typescript/src/skia/types/Paragraph/Paragraph.d.ts

@@ -1,6 +1,10 @@
 import type { SkCanvas } from "../Canvas";
+import type { SkFont } from "../Font";
 import type { SkJSIInstance } from "../JsiInstance";
+import type { SkPath } from "../Path";
+import type { SkPoint } from "../Point";
 import type { SkRect } from "../Rect";
+import type { SkSize } from "../Size";
 import type { TextDirection } from "./ParagraphStyle";
 export interface LineMetrics {
     /** The index in the text buffer the line begins. */
@@ -36,6 +40,42 @@ export interface SkRectWithDirection {
     rect: SkRect;
     direction: TextDirection;
 }
+/**
+ * Information about a run of glyphs passed to the visitor of
+ * `SkParagraph.extendedVisit`. All glyphs in a run share the same font: for
+ * text shaped through font fallback, each fallback font produces its own
+ * run(s).
+ */
+export interface ParagraphVisitorInfo {
+    /** The font used to shape this run (the resolved fallback font, if any). */
+    font: SkFont;
+    /** Origin of the run within the paragraph (baseline corrected). */
+    origin: SkPoint;
+    /** Advance of the run. */
+    advance: SkSize;
+    /** The glyph ids of the run. */
+    glyphs: number[];
+    /**
+     * The position of each glyph, relative to the run `origin`. Add `origin`
+     * to obtain paragraph coordinates: for a run shaped through font fallback,
+     * the run placement is carried by `origin`, not by the positions.
+     */
+    positions: SkPoint[];
+    /**
+     * The tight ink bounds of each glyph, relative to the glyph's origin.
+     * Combine with `positions` to compute the exact painted bounds of the run.
+     */
+    bounds: SkRect[];
+    /** The UTF-8 text index of the cluster each glyph belongs to. */
+    utf8Starts: number[];
+    /** Reserved flags (currently always 0). */
+    flags: number;
+}
+/**
+ * Visitor for `SkParagraph.extendedVisit`. Called once per run of glyphs;
+ * `info` is null to signal the end of a line.
+ */
+export type ParagraphExtendedVisitor = (lineNumber: number, info: ParagraphVisitorInfo | null) => void;
 export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
     /**
      * Calculates the position of the the glyphs in the paragraph
@@ -106,4 +146,26 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
      * to the paragraph.
      */
     getRectsForPlaceholders(): SkRectWithDirection[];
+    /**
+     * Converts the glyphs of the given line into an SkPath, with all font
+     * fallbacks already applied. Use `computeTightBounds()` on the resulting
+     * path to measure the exact ink bounds of the rendered text (as opposed to
+     * the font-metrics based bounds returned by `getRectsForRange`).
+     * Note that color glyphs (e.g. emojis) cannot be converted to a path and
+     * are skipped. Returns null if the line number is out of bounds.
+     * This method requires the layout method to have been called first.
+     * Not implemented on React Native Web.
+     * @param lineNumber The line number (zero indexed, see `getLineMetrics`)
+     */
+    getPath(lineNumber: number): SkPath | null;
+    /**
+     * Visits the laid out paragraph, calling the visitor once for every run of
+     * glyphs with the resolved font, glyph ids, positions and per-glyph tight
+     * ink bounds. The visitor is called with a null info to signal the end of
+     * each line. This exposes the exact layout that would be painted.
+     * This method requires the layout method to have been called first.
+     * Not implemented on React Native Web.
+     * @param visitor Called once per glyph run, and once per line end
+     */
+    extendedVisit(visitor: ParagraphExtendedVisitor): void;
 }

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

@@ -1,5 +1,5 @@
 import type { CanvasKit, Paragraph } from "canvaskit-wasm";
-import type { SkRect, SkRectWithDirection, SkParagraph, LineMetrics } from "../types";
+import type { SkRect, SkRectWithDirection, SkParagraph, SkPath, LineMetrics, ParagraphExtendedVisitor } from "../types";
 import { HostObject } from "./Host";
 import type { JsiSkCanvas } from "./JsiSkCanvas";
 export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> implements SkParagraph {
@@ -15,4 +15,6 @@ export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> i
     getRectsForPlaceholders(): SkRectWithDirection[];
     getRectsForRange(start: number, end: number): SkRect[];
     getLineMetrics(): LineMetrics[];
+    getPath(_lineNumber: number): SkPath | null;
+    extendedVisit(_visitor: ParagraphExtendedVisitor): void;
 }

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

@@ -2,6 +2,8 @@ import type { Skia, SkCanvas, SkColorFilter, SkPaint, SkShader, SkImageFilter, S
 export declare const createDrawingContext: (Skia: Skia, paintPool: SkPaint[], canvas: SkCanvas) => {
     Skia: Skia;
     canvas: SkCanvas;
+    track: <T>(value: T) => T;
+    dispose: () => void;
     paints: SkPaint[];
     colorFilters: SkColorFilter[];
     shaders: SkShader[];

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

@@ -0,0 +1,18 @@
+import type { Skia } from "../../skia/types";
+export interface FrameScope {
+    Skia: Skia;
+    track: <T>(value: T) => T;
+    dispose: () => void;
+}
+/**
+ * Wraps a Skia instance so that every object created through its factories is
+ * collected and deleted when the scope is disposed. The renderer only keeps
+ * the objects it creates alive for the duration of a frame: once the frame
+ * has been recorded they can be deleted. This is required on Web where
+ * CanvasKit objects live in WASM memory that the JS garbage collector does
+ * not perceive, so it (almost) never reclaims them on its own.
+ *
+ * Objects passed in via props are user-owned: they are not created through
+ * this facade and are therefore never tracked nor disposed.
+ */
+export declare const createFrameScope: (Skia: Skia) => FrameScope;

package/lib/typescript/src/sksg/Recorder/FrameScope.native.d.ts

@@ -0,0 +1,10 @@
+import type { Skia } from "../../skia/types";
+import type { FrameScope } from "./FrameScope";
+/**
+ * No-op on native. The JSI wrappers report the size of the native objects
+ * they hold to the garbage collector (setExternalMemoryPressure), so the GC
+ * is aware of the real cost of the objects the renderer creates and reclaims
+ * them on its own. The tracking scope is only needed on Web, where CanvasKit
+ * objects live in WASM memory the GC cannot see (see FrameScope.ts).
+ */
+export declare const createFrameScope: (Skia: Skia) => FrameScope;

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

@@ -2,12 +2,14 @@ import type { SharedValue } from "react-native-reanimated";
 import { NodeType } from "../../dom/types";
 import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PaintProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, BoxProps, BoxShadowProps, SkottieProps, DrawingNodeProps } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
-import type { SkPaint, BaseRecorder } from "../../skia/types";
+import type { SkPaint, SkPicture, BaseRecorder } from "../../skia/types";
 import type { Command } from "./Core";
 export interface Recording {
     commands: Command[];
     paintPool: SkPaint[];
+    lastPicture?: SkPicture | null;
 }
+export declare const disposeRecording: (recording: Recording) => void;
 interface AnimationValues {
     animationValues: Set<SharedValue<unknown>>;
 }

package/lib/typescript/src/sksg/StaticContainer.d.ts

@@ -18,5 +18,6 @@ export declare abstract class Container {
 export declare class StaticContainer extends Container {
     private nativeId;
     constructor(Skia: Skia, nativeId: number);
+    unmount(): void;
     redraw(): void;
 }

package/package.json

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

package/src/external/reanimated/useVideoLoading.ts

@@ -1,11 +1,21 @@
 import { useCallback, useEffect, useState } from "react";
+import type { WorkletRuntime } from "react-native-reanimated";
 
 import type { Video } from "../../skia/types";
 import { Skia } from "../../skia";
 
 import Rea from "./ReanimatedProxy";
 
-const runtime = Rea.createWorkletRuntime("video-metadata-runtime");
+// Created lazily: accessing the proxy at module scope would require
+// react-native-reanimated as soon as the package is imported, and would spawn
+// the runtime even for apps that never load a video.
+let runtime: WorkletRuntime | undefined;
+const getRuntime = () => {
+  if (runtime === undefined) {
+    runtime = Rea.createWorkletRuntime("video-metadata-runtime");
+  }
+  return runtime;
+};
 
 type VideoSource = string | null;
 
@@ -22,7 +32,7 @@ export const useVideoLoading = (source: VideoSource) => {
   );
   useEffect(() => {
     if (source) {
-      Rea.runOnRuntime(runtime, cb)(source);
+      Rea.runOnRuntime(getRuntime(), cb)(source);
     }
   }, [cb, source]);
   return video;

package/src/skia/core/SVG.web.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import { Skia } from "../Skia";
 import type { DataSourceParam, SkSVG } from "../types";
+import { Platform } from "../../Platform";
 
 export const useSVG = (
   source: DataSourceParam,
@@ -16,22 +17,12 @@ export const useSVG = (
       let src: string;
       if (typeof source === "string") {
         src = source;
-      } else if (
-        typeof source === "object" &&
-        "default" in source &&
-        typeof source.default === "string"
-      ) {
-        src = source.default;
-      } else if (typeof source === "object" && "uri" in source) {
-        src = source.uri;
-      } else {
+      } else if (source instanceof Uint8Array) {
         throw new Error(
-          `Invalid svg data source. Make sure that the source resolves to a string. Got: ${JSON.stringify(
-            source,
-            null,
-            2
-          )}`
+          `Invalid svg data source. Make sure that the source resolves to a string. Got: ${source}`
         );
+      } else {
+        src = Platform.resolveAsset(source);
       }
       const result = await fetch(src);
       const svgStr = await result.text();

package/src/skia/types/Paragraph/Paragraph.ts

@@ -1,6 +1,10 @@
 import type { SkCanvas } from "../Canvas";
+import type { SkFont } from "../Font";
 import type { SkJSIInstance } from "../JsiInstance";
+import type { SkPath } from "../Path";
+import type { SkPoint } from "../Point";
 import type { SkRect } from "../Rect";
+import type { SkSize } from "../Size";
 
 import type { TextDirection } from "./ParagraphStyle";
 
@@ -40,6 +44,47 @@ export interface SkRectWithDirection {
   direction: TextDirection;
 }
 
+/**
+ * Information about a run of glyphs passed to the visitor of
+ * `SkParagraph.extendedVisit`. All glyphs in a run share the same font: for
+ * text shaped through font fallback, each fallback font produces its own
+ * run(s).
+ */
+export interface ParagraphVisitorInfo {
+  /** The font used to shape this run (the resolved fallback font, if any). */
+  font: SkFont;
+  /** Origin of the run within the paragraph (baseline corrected). */
+  origin: SkPoint;
+  /** Advance of the run. */
+  advance: SkSize;
+  /** The glyph ids of the run. */
+  glyphs: number[];
+  /**
+   * The position of each glyph, relative to the run `origin`. Add `origin`
+   * to obtain paragraph coordinates: for a run shaped through font fallback,
+   * the run placement is carried by `origin`, not by the positions.
+   */
+  positions: SkPoint[];
+  /**
+   * The tight ink bounds of each glyph, relative to the glyph's origin.
+   * Combine with `positions` to compute the exact painted bounds of the run.
+   */
+  bounds: SkRect[];
+  /** The UTF-8 text index of the cluster each glyph belongs to. */
+  utf8Starts: number[];
+  /** Reserved flags (currently always 0). */
+  flags: number;
+}
+
+/**
+ * Visitor for `SkParagraph.extendedVisit`. Called once per run of glyphs;
+ * `info` is null to signal the end of a line.
+ */
+export type ParagraphExtendedVisitor = (
+  lineNumber: number,
+  info: ParagraphVisitorInfo | null
+) => void;
+
 export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
   /**
    * Calculates the position of the the glyphs in the paragraph
@@ -112,4 +157,26 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
    * to the paragraph.
    */
   getRectsForPlaceholders(): SkRectWithDirection[];
+  /**
+   * Converts the glyphs of the given line into an SkPath, with all font
+   * fallbacks already applied. Use `computeTightBounds()` on the resulting
+   * path to measure the exact ink bounds of the rendered text (as opposed to
+   * the font-metrics based bounds returned by `getRectsForRange`).
+   * Note that color glyphs (e.g. emojis) cannot be converted to a path and
+   * are skipped. Returns null if the line number is out of bounds.
+   * This method requires the layout method to have been called first.
+   * Not implemented on React Native Web.
+   * @param lineNumber The line number (zero indexed, see `getLineMetrics`)
+   */
+  getPath(lineNumber: number): SkPath | null;
+  /**
+   * Visits the laid out paragraph, calling the visitor once for every run of
+   * glyphs with the resolved font, glyph ids, positions and per-glyph tight
+   * ink bounds. The visitor is called with a null info to signal the end of
+   * each line. This exposes the exact layout that would be painted.
+   * This method requires the layout method to have been called first.
+   * Not implemented on React Native Web.
+   * @param visitor Called once per glyph run, and once per line end
+   */
+  extendedVisit(visitor: ParagraphExtendedVisitor): void;
 }

package/src/skia/web/Host.ts

@@ -41,6 +41,13 @@ export abstract class BaseHostObject<T, N extends string>
       "delete" in this.ref &&
       typeof this.ref.delete === "function"
     ) {
+      // Renderer-owned and user-owned disposal can overlap (and emscripten
+      // throws on double delete) — make disposing an already-deleted object
+      // a no-op.
+      const ref = this.ref as unknown as { isDeleted?: () => boolean };
+      if (typeof ref.isDeleted === "function" && ref.isDeleted()) {
+        return;
+      }
       this.ref.delete();
     }
   }

package/src/skia/web/JsiSkPaint.ts

@@ -76,11 +76,16 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   assign(paint: JsiSkPaint) {
+    const previous = this.ref;
     this.ref = paint.ref.copy();
+    // The replaced ref is a WASM object the GC will not reclaim.
+    previous.delete();
   }
 
   reset() {
+    const previous = this.ref;
     this.ref = new this.CanvasKit.Paint();
+    previous.delete();
   }
 
   getAlphaf() {

package/src/skia/web/JsiSkParagraph.ts

@@ -4,10 +4,12 @@ import type {
   SkRect,
   SkRectWithDirection,
   SkParagraph,
+  SkPath,
   LineMetrics,
+  ParagraphExtendedVisitor,
 } from "../types";
 
-import { HostObject } from "./Host";
+import { HostObject, throwNotImplementedOnRNWeb } from "./Host";
 import type { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkRect } from "./JsiSkRect";
 
@@ -64,4 +66,10 @@ export class JsiSkParagraph
   getLineMetrics(): LineMetrics[] {
     return this.ref.getLineMetrics();
   }
+  getPath(_lineNumber: number): SkPath | null {
+    return throwNotImplementedOnRNWeb<SkPath | null>();
+  }
+  extendedVisit(_visitor: ParagraphExtendedVisitor): void {
+    return throwNotImplementedOnRNWeb<void>();
+  }
 }

package/src/sksg/Container.web.ts

@@ -3,7 +3,7 @@ import type { Skia } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 
 import type { Recording } from "./Recorder/Recorder";
-import { Recorder } from "./Recorder/Recorder";
+import { Recorder, disposeRecording } from "./Recorder/Recorder";
 import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
@@ -22,12 +22,24 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   //const start = performance.now();
 
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
-  replay(ctx, recording.commands);
-  const picture = rec.finishRecordingAsPicture();
-  rec.dispose();
+  let picture;
+  try {
+    replay(ctx, recording.commands);
+    picture = rec.finishRecordingAsPicture();
+  } finally {
+    // Frame-scoped objects (shaders, filters, paint copies, ...) are
+    // referenced by the picture once it is finished — delete the JS handles,
+    // otherwise they leak on Web where the GC cannot see WASM memory.
+    ctx.dispose();
+    rec.dispose();
+  }
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+  // The view now references the new picture; the previous one is ours to
+  // delete.
+  recording.lastPicture?.dispose();
+  recording.lastPicture = picture;
 };
 
 class ReanimatedContainer extends Container {
@@ -49,6 +61,16 @@ class ReanimatedContainer extends Container {
       Rea.stopMapper(this.mapperId);
       this.mapperId = null;
     }
+    const { recording } = this;
+    if (recording) {
+      this.recording = null;
+      // Deferred through the same channel as the draw calls so it runs after
+      // any of them that are still queued.
+      Rea.runOnUI(() => {
+        "worklet";
+        disposeRecording(recording);
+      })();
+    }
   }
 
   redraw() {
@@ -59,6 +81,7 @@ class ReanimatedContainer extends Container {
     if (this.unmounted) {
       return;
     }
+    const previousRecording = this.recording;
     const recorder = new Recorder();
     visit(recorder, this.root);
     const record = recorder.getRecording();
@@ -76,6 +99,10 @@ class ReanimatedContainer extends Container {
     }
     Rea.runOnUI(() => {
       "worklet";
+      if (previousRecording) {
+        // Runs after any still-queued draw of the previous recording.
+        disposeRecording(previousRecording);
+      }
       drawOnscreen(Skia, nativeId, recording!);
     })();
   }

package/src/sksg/Recorder/DrawingContext.ts

@@ -8,6 +8,8 @@ import type {
   SkPathEffect,
 } from "../../skia/types";
 
+import { createFrameScope } from "./FrameScope";
+
 export const createDrawingContext = (
   Skia: Skia,
   paintPool: SkPaint[],
@@ -15,6 +17,11 @@ export const createDrawingContext = (
 ) => {
   "worklet";
 
+  // Everything the renderer creates through frameSkia is frame-scoped and
+  // deleted by dispose() once the frame has been recorded. The paint pool is
+  // recording-scoped and deliberately allocated with the raw Skia instance.
+  const { Skia: frameSkia, track, dispose } = createFrameScope(Skia);
+
   // State (formerly class fields)
   const paints: SkPaint[] = [];
   const colorFilters: SkColorFilter[] = [];
@@ -27,7 +34,11 @@ export const createDrawingContext = (
   let nextPaintIndex = 1;
 
   // Initialize first paint and opacity
-  paintPool[0] = Skia.Paint();
+  if (paintPool.length === 0) {
+    paintPool.push(Skia.Paint());
+  } else {
+    paintPool[0].reset();
+  }
   paints.push(paintPool[0]);
   opacities.push(1);
 
@@ -61,7 +72,7 @@ export const createDrawingContext = (
     } else {
       const cf = colorFilters.pop();
       if (cf) {
-        imageFilter = Skia.ImageFilter.MakeColorFilter(cf, null);
+        imageFilter = frameSkia.ImageFilter.MakeColorFilter(cf, null);
       }
     }
     canvas.saveLayer(undefined, null, imageFilter);
@@ -83,7 +94,7 @@ export const createDrawingContext = (
     if (colorFilters.length > 0) {
       getCurrentPaint().setColorFilter(
         colorFilters.reduceRight((inner, outer) =>
-          inner ? Skia.ColorFilter.MakeCompose(outer, inner) : outer
+          inner ? frameSkia.ColorFilter.MakeCompose(outer, inner) : outer
         )
       );
     }
@@ -95,7 +106,7 @@ export const createDrawingContext = (
     if (imageFilters.length > 0) {
       getCurrentPaint().setImageFilter(
         imageFilters.reduceRight((inner, outer) =>
-          inner ? Skia.ImageFilter.MakeCompose(outer, inner) : outer
+          inner ? frameSkia.ImageFilter.MakeCompose(outer, inner) : outer
         )
       );
     }
@@ -104,7 +115,7 @@ export const createDrawingContext = (
     if (pathEffects.length > 0) {
       getCurrentPaint().setPathEffect(
         pathEffects.reduceRight((inner, outer) =>
-          inner ? Skia.PathEffect.MakeCompose(outer, inner) : outer
+          inner ? frameSkia.PathEffect.MakeCompose(outer, inner) : outer
         )
       );
     }
@@ -119,8 +130,10 @@ export const createDrawingContext = (
   // Return an object containing the Skia reference, the canvas, and the methods
   return {
     // Public fields
-    Skia,
+    Skia: frameSkia,
     canvas,
+    track,
+    dispose,
     paints,
     colorFilters,
     shaders,

package/src/sksg/Recorder/FrameScope.native.ts

@@ -0,0 +1,21 @@
+import type { Skia } from "../../skia/types";
+
+import type { FrameScope } from "./FrameScope";
+
+/**
+ * No-op on native. The JSI wrappers report the size of the native objects
+ * they hold to the garbage collector (setExternalMemoryPressure), so the GC
+ * is aware of the real cost of the objects the renderer creates and reclaims
+ * them on its own. The tracking scope is only needed on Web, where CanvasKit
+ * objects live in WASM memory the GC cannot see (see FrameScope.ts).
+ */
+export const createFrameScope = (Skia: Skia): FrameScope => {
+  "worklet";
+  return {
+    Skia,
+    track: <T>(value: T): T => value,
+    dispose: () => {
+      // nothing to dispose: no objects are tracked on native
+    },
+  };
+};

package/src/sksg/Recorder/FrameScope.ts

@@ -0,0 +1,69 @@
+import type { Skia } from "../../skia/types";
+
+interface Disposable {
+  dispose: () => void;
+}
+
+const isDisposable = (value: unknown): value is Disposable => {
+  "worklet";
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    typeof (value as Disposable).dispose === "function"
+  );
+};
+
+export interface FrameScope {
+  Skia: Skia;
+  track: <T>(value: T) => T;
+  dispose: () => void;
+}
+
+/**
+ * Wraps a Skia instance so that every object created through its factories is
+ * collected and deleted when the scope is disposed. The renderer only keeps
+ * the objects it creates alive for the duration of a frame: once the frame
+ * has been recorded they can be deleted. This is required on Web where
+ * CanvasKit objects live in WASM memory that the JS garbage collector does
+ * not perceive, so it (almost) never reclaims them on its own.
+ *
+ * Objects passed in via props are user-owned: they are not created through
+ * this facade and are therefore never tracked nor disposed.
+ */
+export const createFrameScope = (Skia: Skia): FrameScope => {
+  "worklet";
+  const disposables: Disposable[] = [];
+  const track = <T>(value: T): T => {
+    if (isDisposable(value)) {
+      disposables.push(value);
+    }
+    return value;
+  };
+  const wrap = <T extends object>(obj: T): T => {
+    const cache = new Map<PropertyKey, unknown>();
+    return new Proxy(obj, {
+      get(target, prop) {
+        if (cache.has(prop)) {
+          return cache.get(prop);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value = (target as any)[prop];
+        let wrapped: unknown = value;
+        if (typeof value === "function") {
+          wrapped = (...args: unknown[]) => track(value.apply(target, args));
+        } else if (value !== null && typeof value === "object") {
+          wrapped = wrap(value);
+        }
+        cache.set(prop, wrapped);
+        return wrapped;
+      },
+    }) as T;
+  };
+  const dispose = () => {
+    for (let i = 0; i < disposables.length; i++) {
+      disposables[i].dispose();
+    }
+    disposables.length = 0;
+  };
+  return { Skia: wrap(Skia), track, dispose };
+};

package/src/sksg/Recorder/Player.ts

@@ -166,9 +166,8 @@ const play = (ctx: DrawingContext, _command: Command) => {
   } else if (isCommand(command, CommandType.RestoreCTM)) {
     ctx.canvas.restore();
   } else {
-    // TODO: is a copy needed here?
     // apply opacity to the current paint.
-    const paint = ctx.paint.copy();
+    const paint = ctx.track(ctx.paint.copy());
     paint.setAlphaf(paint.getAlphaf() * ctx.getOpacity());
     const paints = [paint, ...ctx.paintDeclarations];
     ctx.paintDeclarations = [];

package/src/sksg/Recorder/Recorder.ts

@@ -32,7 +32,7 @@ import type {
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
 import { isColorFilter, isImageFilter, isPathEffect, isShader } from "../Node";
-import type { SkPaint, BaseRecorder } from "../../skia/types";
+import type { SkPaint, SkPicture, BaseRecorder } from "../../skia/types";
 
 import { CommandType } from "./Core";
 import type { Command } from "./Core";
@@ -40,8 +40,22 @@ import type { Command } from "./Core";
 export interface Recording {
   commands: Command[];
   paintPool: SkPaint[];
+  // Last picture produced from this recording. The view keeps its own
+  // reference to the picture it displays, so the renderer owns this one and
+  // disposes it when the next frame replaces it or the recording is disposed.
+  lastPicture?: SkPicture | null;
 }
 
+export const disposeRecording = (recording: Recording) => {
+  "worklet";
+  recording.paintPool.forEach((paint) => paint.dispose());
+  recording.paintPool.length = 0;
+  if (recording.lastPicture) {
+    recording.lastPicture.dispose();
+    recording.lastPicture = null;
+  }
+};
+
 interface AnimationValues {
   animationValues: Set<SharedValue<unknown>>;
 }