@shopify/react-native-skia 2.7.0 → 2.8.0

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;
     }
   }
 }