@shopify/react-native-skia 2.6.9 → 2.8.0

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/skia/web/JsiSkParagraphStyle.ts

@@ -1,8 +1,10 @@
-import type { CanvasKit, ParagraphStyle } from "canvaskit-wasm";
+import type { CanvasKit, ParagraphStyle, TextStyle } from "canvaskit-wasm";
 
 import { TextDirection } from "../types";
 import type { SkParagraphStyle } from "../types";
 
+import { JsiSkTextStyle } from "./JsiSkTextStyle";
+
 export class JsiSkParagraphStyle {
   static toParagraphStyle(
     ck: CanvasKit,
@@ -10,7 +12,19 @@ export class JsiSkParagraphStyle {
   ): ParagraphStyle {
     // Seems like we need to provide the textStyle.color value, otherwise
     // the constructor crashes.
-    const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } });
+    const textStyle: TextStyle = { color: ck.BLACK };
+    if (value.textStyle) {
+      // Only merge the properties that are set; toTextStyle() emits undefined
+      // for the others and the ParagraphStyle constructor requires a color.
+      Object.entries(JsiSkTextStyle.toTextStyle(value.textStyle)).forEach(
+        ([key, v]) => {
+          if (v !== undefined) {
+            (textStyle as Record<string, unknown>)[key] = v;
+          }
+        }
+      );
+    }
+    const ps = new ck.ParagraphStyle({ textStyle });
 
     ps.disableHinting = value.disableHinting ?? ps.disableHinting;
     ps.ellipsis = value.ellipsis ?? ps.ellipsis;

package/src/skia/web/JsiSkSurface.ts

@@ -19,7 +19,8 @@ export class JsiSkSurface
     this.ref.dispose();
   }
 
-  flush() {
+  flush(_sync?: boolean) {
+    // CanvasKit has no separate CPU sync; flush() is sufficient on the web backend.
     this.ref.flush();
   }
 

package/src/sksg/Container.native.ts

@@ -39,9 +39,21 @@ class NativeReanimatedContainer extends Container {
     this.picture = Skia.Picture.MakePicture(null)!;
   }
 
+  unmount() {
+    super.unmount();
+    if (this.mapperId !== null) {
+      // The mapper closure retains the recorder and its resources (e.g.
+      // images) on the UI runtime and keeps updating the picture of an
+      // unmounted view — stop it or it leaks for the lifetime of the app.
+      Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
+    }
+  }
+
   redraw() {
     if (this.mapperId !== null) {
       Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
     }
     if (this.unmounted) {
       return;

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 {
@@ -40,13 +52,36 @@ class ReanimatedContainer extends Container {
     super(Skia);
   }
 
+  unmount() {
+    super.unmount();
+    if (this.mapperId !== null) {
+      // The mapper closure retains the recording and keeps updating the
+      // picture of an unmounted view — stop it or it leaks for the
+      // lifetime of the app.
+      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() {
     if (this.mapperId !== null) {
       Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
     }
     if (this.unmounted) {
       return;
     }
+    const previousRecording = this.recording;
     const recorder = new Recorder();
     visit(recorder, this.root);
     const record = recorder.getRecording();
@@ -64,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>>;
 }

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

@@ -131,14 +131,14 @@ export const drawTextPath = (ctx: DrawingContext, props: TextPathProps) => {
     const widths = font.getGlyphWidths(ids);
     const rsx: SkRSXform[] = [];
     const meas = ctx.Skia.ContourMeasureIter(path, false, 1);
-    let cont = meas.next();
+    let cont = ctx.track(meas.next());
     let dist = initialOffset;
     for (let i = 0; i < text.length && cont; i++) {
       const width = widths[i];
       dist += width / 2;
       if (dist > cont.length()) {
         // jump to next contour
-        cont = meas.next();
+        cont = ctx.track(meas.next());
         if (!cont) {
           // We have come to the end of the path - terminate the string
           // right here.
@@ -221,7 +221,7 @@ export const drawPath = (ctx: DrawingContext, props: PathProps) => {
   if (hasFillType) {
     const builder = ctx.Skia.PathBuilder.MakeFromPath(path);
     builder.setFillType(FillType[enumKey(fillType)]);
-    path = builder.build();
+    path = ctx.track(builder.build());
   }
 
   // Apply stroke using static Path.Stroke

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

@@ -43,10 +43,12 @@ const declareShader = (
   const { source, uniforms, ...transform } = props;
   const m3 = ctx.Skia.Matrix();
   processTransformProps(m3, transform);
-  const shader = source.makeShaderWithChildren(
-    processUniforms(source, uniforms),
-    ctx.shaders.splice(0, children),
-    m3
+  const shader = ctx.track(
+    source.makeShaderWithChildren(
+      processUniforms(source, uniforms),
+      ctx.shaders.splice(0, children),
+      m3
+    )
   );
   ctx.shaders.push(shader);
 };
@@ -208,20 +210,24 @@ const declareImageShader = (ctx: DrawingContext, props: ImageShaderProps) => {
   processTransformProps(lm, imageShaderProps);
   let shader: SkShader;
   if (sampling && isCubicSampling(sampling)) {
-    shader = image.makeShaderCubic(
-      TileMode[enumKey(tx)],
-      TileMode[enumKey(ty)],
-      sampling.B,
-      sampling.C,
-      lm
+    shader = ctx.track(
+      image.makeShaderCubic(
+        TileMode[enumKey(tx)],
+        TileMode[enumKey(ty)],
+        sampling.B,
+        sampling.C,
+        lm
+      )
     );
   } else {
-    shader = image.makeShaderCubic(
-      TileMode[enumKey(tx)],
-      TileMode[enumKey(ty)],
-      sampling?.filter ?? FilterMode.Linear,
-      sampling?.mipmap ?? MipmapMode.None,
-      lm
+    shader = ctx.track(
+      image.makeShaderCubic(
+        TileMode[enumKey(tx)],
+        TileMode[enumKey(ty)],
+        sampling?.filter ?? FilterMode.Linear,
+        sampling?.mipmap ?? MipmapMode.None,
+        lm
+      )
     );
   }
   ctx.shaders.push(shader);

package/src/sksg/StaticContainer.ts

@@ -2,7 +2,7 @@ import type { Skia, SkCanvas } from "../skia/types";
 
 import type { Node } from "./Node";
 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";
@@ -41,7 +41,14 @@ export abstract class Container {
       this.recording.paintPool,
       canvas
     );
-    replay(ctx, this.recording.commands);
+    try {
+      replay(ctx, this.recording.commands);
+    } finally {
+      // Frame-scoped objects created during the replay are no longer needed
+      // once drawn — delete them, otherwise they leak on Web where the GC
+      // cannot see WASM memory.
+      ctx.dispose();
+    }
   }
 
   abstract redraw(): void;
@@ -55,7 +62,24 @@ export class StaticContainer extends Container {
     super(Skia);
   }
 
+  unmount() {
+    super.unmount();
+    if (this.recording) {
+      disposeRecording(this.recording);
+      this.recording = null;
+    }
+  }
+
   redraw() {
+    if (this.unmounted) {
+      // The unmount commit triggers a last redraw — recording it would
+      // resurrect a recording for a container that has just disposed it.
+      return;
+    }
+    if (this.recording) {
+      disposeRecording(this.recording);
+      this.recording = null;
+    }
     const recorder = new Recorder();
     visit(recorder, this.root);
     this.recording = recorder.getRecording();
@@ -67,6 +91,9 @@ export class StaticContainer extends Container {
       const picture = rec.finishRecordingAsPicture();
       rec.dispose();
       SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
+      // The view keeps its own reference to the picture it displays; this
+      // one is renderer-owned and disposed with the recording.
+      this.recording.lastPicture = picture;
     }
   }
 }

package/src/specs/NativeSkiaModule.web.ts

@@ -6,29 +6,45 @@ import type { SkiaPictureViewHandle } from "../views/SkiaPictureView.web";
 export type ISkiaViewApiWeb = ISkiaViewApi & {
   views: Record<string, SkiaPictureViewHandle>;
   deferedPictures: Record<string, SkPicture>;
+  unregisteredViews: Set<string>;
   registerView(nativeId: string, view: SkiaPictureViewHandle): void;
+  unregisterView(nativeId: string): void;
 };
 
 global.SkiaViewApi = {
   views: {},
   deferedPictures: {},
+  unregisteredViews: new Set<string>(),
   deferedOnSize: {},
   web: true,
   registerView(nativeId: string, view: SkiaPictureViewHandle) {
+    this.unregisteredViews.delete(nativeId);
     // Maybe a picture for this view was already set
     if (this.deferedPictures[nativeId]) {
       view.setPicture(this.deferedPictures[nativeId] as SkPicture);
+      delete this.deferedPictures[nativeId];
     }
     this.views[nativeId] = view;
   },
+  unregisterView(nativeId: string) {
+    // Views must be removed on unmount: the handle's closures capture the
+    // canvas element, so a stale entry retains the whole detached DOM tree.
+    this.unregisteredViews.add(nativeId);
+    delete this.views[nativeId];
+    delete this.deferedPictures[nativeId];
+  },
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setJsiProperty(nativeId: number, name: string, value: any) {
     if (name === "picture") {
-      if (!this.views[`${nativeId}`]) {
-        this.deferedPictures[`${nativeId}`] = value;
-      } else {
-        this.views[`${nativeId}`].setPicture(value);
+      const id = `${nativeId}`;
+      if (this.views[id]) {
+        this.views[id].setPicture(value);
+      } else if (!this.unregisteredViews.has(id)) {
+        this.deferedPictures[id] = value;
       }
+      // Otherwise the view has unmounted (e.g. a trailing animation frame):
+      // drop the picture instead of deferring it for an id that will never
+      // register again, which would retain it forever.
     }
   },
   size(nativeId: number) {
@@ -39,14 +55,30 @@ global.SkiaViewApi = {
     }
   },
   requestRedraw(nativeId: number) {
-    this.views[`${nativeId}`].redraw();
+    // The view may already have unmounted (e.g. a trailing animation frame).
+    this.views[`${nativeId}`]?.redraw();
   },
   makeImageSnapshot(nativeId: number, rect?: SkRect) {
-    return this.views[`${nativeId}`].makeImageSnapshot(rect);
+    const view = this.views[`${nativeId}`];
+    if (!view) {
+      throw new Error(
+        `Cannot make image snapshot: view with nativeID ${nativeId} is not registered (it may have unmounted)`
+      );
+    }
+    return view.makeImageSnapshot(rect);
   },
   makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {
     return new Promise((resolve, reject) => {
-      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);
+      const view = this.views[`${nativeId}`];
+      if (!view) {
+        reject(
+          new Error(
+            `Cannot make image snapshot: view with nativeID ${nativeId} is not registered (it may have unmounted)`
+          )
+        );
+        return;
+      }
+      const result = view.makeImageSnapshot(rect);
       if (result) {
         resolve(result);
       } else {

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -7,6 +7,7 @@ export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   colorSpace?: string;
+  highBitDepth?: boolean;
   androidWarmup?: boolean;
   pointerEvents?: WithDefault<
     "auto" | "none" | "box-none" | "box-only",

package/src/views/SkiaPictureView.tsx

@@ -87,6 +87,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       mode,
       debug = false,
       opaque = false,
+      highBitDepth = false,
       androidWarmup = false,
       ...viewProps
     } = this.props;
@@ -96,6 +97,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
         nativeID={`${this._nativeId}`}
         debug={debug}
         opaque={opaque}
+        highBitDepth={highBitDepth}
         androidWarmup={androidWarmup}
         {...viewProps}
       />