@shopify/react-native-skia 2.13.1 → 2.14.0

package/src/skia/web/JsiSkPath.ts

@@ -4,20 +4,16 @@ import { PathVerb } from "../types";
 import type {
   FillType,
   PathCommand,
-  PathOp,
   SkMatrix,
   SkPath,
   SkPoint,
   SkRect,
-  InputRRect,
-  StrokeOpts,
   InputMatrix,
 } from "../types";
 
-import { getEnum, HostObject, optEnum } from "./Host";
+import { HostObject } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
-import { JsiSkRRect } from "./JsiSkRRect";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 
 const CommandCount = {
@@ -29,22 +25,6 @@ const CommandCount = {
   [PathVerb.Close]: 1,
 };
 
-// Track which deprecation warnings have been shown to avoid spam
-const shownDeprecationWarnings = new Set<string>();
-
-const warnDeprecatedPathMethod = (
-  methodName: string,
-  suggestion: string
-): void => {
-  if (shownDeprecationWarnings.has(methodName)) {
-    return;
-  }
-  shownDeprecationWarnings.add(methodName);
-  console.warn(
-    `[react-native-skia] SkPath.${methodName}() is deprecated and will be removed in a future release. ${suggestion} See migration guide: https://shopify.github.io/react-native-skia/docs/shapes/path-migration`
-  );
-};
-
 export const toMatrix3x3 = (m: InputMatrix): number[] => {
   let matrix =
     m instanceof JsiSkMatrix
@@ -69,8 +49,8 @@ export const toMatrix3x3 = (m: InputMatrix): number[] => {
 };
 
 /**
- * SkPath wraps a CK PathBuilder internally, providing both mutable building
- * methods and immutable query methods. Use snapshot() internally to get
+ * SkPath wraps a CK PathBuilder internally, providing immutable query
+ * methods. Use snapshot() internally to get
  * an immutable CK Path for read-only operations.
  */
 export class JsiSkPath
@@ -91,469 +71,6 @@ export class JsiSkPath
     return JsiSkPath.fromValue<CKPathBuilder>(value).snapshot();
   }
 
-  // ---- Mutable building methods (deprecated) ----
-
-  addPath(src: SkPath, matrix?: SkMatrix, extend = false) {
-    warnDeprecatedPathMethod(
-      "addPath",
-      "Use Skia.PathBuilder.Make().addPath() instead."
-    );
-    const srcBuilder = JsiSkPath.fromValue<CKPathBuilder>(src);
-    const srcPath = srcBuilder.snapshot();
-    const args = [
-      srcPath,
-      ...(matrix ? JsiSkMatrix.fromValue<Float32Array>(matrix) : []),
-      extend,
-    ];
-    this.ref.addPath(...args);
-    srcPath.delete();
-    return this;
-  }
-
-  addArc(
-    oval: SkRect,
-    startAngleInDegrees: number,
-    sweepAngleInDegrees: number
-  ) {
-    warnDeprecatedPathMethod(
-      "addArc",
-      "Use Skia.PathBuilder.Make().addArc() instead."
-    );
-    this.ref.addArc(
-      JsiSkRect.fromValue(this.CanvasKit, oval),
-      startAngleInDegrees,
-      sweepAngleInDegrees
-    );
-    return this;
-  }
-
-  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number) {
-    warnDeprecatedPathMethod(
-      "addOval",
-      "Use Skia.Path.Oval() or Skia.PathBuilder.Make().addOval() instead."
-    );
-    this.ref.addOval(
-      JsiSkRect.fromValue(this.CanvasKit, oval),
-      isCCW,
-      startIndex
-    );
-    return this;
-  }
-
-  addPoly(points: SkPoint[], close: boolean) {
-    warnDeprecatedPathMethod(
-      "addPoly",
-      "Use Skia.Path.Polygon() or Skia.PathBuilder.Make().addPoly() instead."
-    );
-    this.ref.addPolygon(
-      points.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
-      close
-    );
-    return this;
-  }
-
-  addRect(rect: SkRect, isCCW?: boolean) {
-    warnDeprecatedPathMethod(
-      "addRect",
-      "Use Skia.Path.Rect() or Skia.PathBuilder.Make().addRect() instead."
-    );
-    this.ref.addRect(JsiSkRect.fromValue(this.CanvasKit, rect), isCCW);
-    return this;
-  }
-
-  addRRect(rrect: InputRRect, isCCW?: boolean) {
-    warnDeprecatedPathMethod(
-      "addRRect",
-      "Use Skia.Path.RRect() or Skia.PathBuilder.Make().addRRect() instead."
-    );
-    this.ref.addRRect(JsiSkRRect.fromValue(this.CanvasKit, rrect), isCCW);
-    return this;
-  }
-
-  addCircle(x: number, y: number, r: number) {
-    warnDeprecatedPathMethod(
-      "addCircle",
-      "Use Skia.Path.Circle() or Skia.PathBuilder.Make().addCircle() instead."
-    );
-    this.ref.addCircle(x, y, r);
-    return this;
-  }
-
-  moveTo(x: number, y: number) {
-    warnDeprecatedPathMethod(
-      "moveTo",
-      "Use Skia.PathBuilder.Make().moveTo() instead."
-    );
-    this.ref.moveTo(x, y);
-    return this;
-  }
-
-  rMoveTo(x: number, y: number) {
-    warnDeprecatedPathMethod(
-      "rMoveTo",
-      "Use Skia.PathBuilder.Make().rMoveTo() instead."
-    );
-    this.ref.rMoveTo(x, y);
-    return this;
-  }
-
-  lineTo(x: number, y: number) {
-    warnDeprecatedPathMethod(
-      "lineTo",
-      "Use Skia.PathBuilder.Make().lineTo() instead."
-    );
-    this.ref.lineTo(x, y);
-    return this;
-  }
-
-  rLineTo(x: number, y: number) {
-    warnDeprecatedPathMethod(
-      "rLineTo",
-      "Use Skia.PathBuilder.Make().rLineTo() instead."
-    );
-    this.ref.rLineTo(x, y);
-    return this;
-  }
-
-  quadTo(x1: number, y1: number, x2: number, y2: number) {
-    warnDeprecatedPathMethod(
-      "quadTo",
-      "Use Skia.PathBuilder.Make().quadTo() instead."
-    );
-    this.ref.quadTo(x1, y1, x2, y2);
-    return this;
-  }
-
-  rQuadTo(x1: number, y1: number, x2: number, y2: number) {
-    warnDeprecatedPathMethod(
-      "rQuadTo",
-      "Use Skia.PathBuilder.Make().rQuadTo() instead."
-    );
-    this.ref.rQuadTo(x1, y1, x2, y2);
-    return this;
-  }
-
-  conicTo(x1: number, y1: number, x2: number, y2: number, w: number) {
-    warnDeprecatedPathMethod(
-      "conicTo",
-      "Use Skia.PathBuilder.Make().conicTo() instead."
-    );
-    this.ref.conicTo(x1, y1, x2, y2, w);
-    return this;
-  }
-
-  rConicTo(x1: number, y1: number, x2: number, y2: number, w: number) {
-    warnDeprecatedPathMethod(
-      "rConicTo",
-      "Use Skia.PathBuilder.Make().rConicTo() instead."
-    );
-    this.ref.rConicTo(x1, y1, x2, y2, w);
-    return this;
-  }
-
-  cubicTo(
-    cpx1: number,
-    cpy1: number,
-    cpx2: number,
-    cpy2: number,
-    x: number,
-    y: number
-  ) {
-    warnDeprecatedPathMethod(
-      "cubicTo",
-      "Use Skia.PathBuilder.Make().cubicTo() instead."
-    );
-    this.ref.cubicTo(cpx1, cpy1, cpx2, cpy2, x, y);
-    return this;
-  }
-
-  rCubicTo(
-    cpx1: number,
-    cpy1: number,
-    cpx2: number,
-    cpy2: number,
-    x: number,
-    y: number
-  ) {
-    warnDeprecatedPathMethod(
-      "rCubicTo",
-      "Use Skia.PathBuilder.Make().rCubicTo() instead."
-    );
-    this.ref.rCubicTo(cpx1, cpy1, cpx2, cpy2, x, y);
-    return this;
-  }
-
-  close() {
-    warnDeprecatedPathMethod(
-      "close",
-      "Use Skia.PathBuilder.Make().close() instead."
-    );
-    this.ref.close();
-    return this;
-  }
-
-  reset() {
-    warnDeprecatedPathMethod(
-      "reset",
-      "Use Skia.PathBuilder.Make().reset() instead."
-    );
-    // CK PathBuilder has no reset — recreate
-    const newBuilder = new this.CanvasKit.PathBuilder();
-    if (
-      this.ref !== null &&
-      typeof this.ref === "object" &&
-      "delete" in this.ref &&
-      typeof this.ref.delete === "function"
-    ) {
-      this.ref.delete();
-    }
-    this.ref = newBuilder;
-    return this;
-  }
-
-  rewind() {
-    warnDeprecatedPathMethod(
-      "rewind",
-      "Use Skia.PathBuilder.Make().reset() instead."
-    );
-    return this.reset();
-  }
-
-  arcToOval(
-    oval: SkRect,
-    startAngleInDegrees: number,
-    sweepAngleInDegrees: number,
-    forceMoveTo: boolean
-  ) {
-    warnDeprecatedPathMethod(
-      "arcToOval",
-      "Use Skia.PathBuilder.Make().arcToOval() instead."
-    );
-    this.ref.arcToOval(
-      JsiSkRect.fromValue(this.CanvasKit, oval),
-      startAngleInDegrees,
-      sweepAngleInDegrees,
-      forceMoveTo
-    );
-    return this;
-  }
-
-  arcToRotated(
-    rx: number,
-    ry: number,
-    xAxisRotateInDegrees: number,
-    useSmallArc: boolean,
-    isCCW: boolean,
-    x: number,
-    y: number
-  ) {
-    warnDeprecatedPathMethod(
-      "arcToRotated",
-      "Use Skia.PathBuilder.Make().arcToRotated() instead."
-    );
-    this.ref.arcToRotated(
-      rx,
-      ry,
-      xAxisRotateInDegrees,
-      useSmallArc,
-      isCCW,
-      x,
-      y
-    );
-    return this;
-  }
-
-  rArcTo(
-    rx: number,
-    ry: number,
-    xAxisRotateInDegrees: number,
-    useSmallArc: boolean,
-    isCCW: boolean,
-    dx: number,
-    dy: number
-  ) {
-    warnDeprecatedPathMethod(
-      "rArcTo",
-      "Use Skia.PathBuilder.Make().rArcTo() instead."
-    );
-    this.ref.rArcTo(rx, ry, xAxisRotateInDegrees, useSmallArc, isCCW, dx, dy);
-    return this;
-  }
-
-  arcToTangent(x1: number, y1: number, x2: number, y2: number, radius: number) {
-    warnDeprecatedPathMethod(
-      "arcToTangent",
-      "Use Skia.PathBuilder.Make().arcToTangent() instead."
-    );
-    this.ref.arcToTangent(x1, y1, x2, y2, radius);
-    return this;
-  }
-
-  setFillType(fill: FillType) {
-    warnDeprecatedPathMethod(
-      "setFillType",
-      "Use Skia.PathBuilder.Make().setFillType() instead."
-    );
-    this.ref.setFillType(getEnum(this.CanvasKit, "FillType", fill));
-    return this;
-  }
-
-  setIsVolatile(_volatile: boolean) {
-    warnDeprecatedPathMethod(
-      "setIsVolatile",
-      "Use Skia.PathBuilder.Make().setIsVolatile() instead."
-    );
-    // Not supported in CK PathBuilder — no-op
-    return this;
-  }
-
-  // ---- Mutable path operations (deprecated) ----
-
-  offset(dx: number, dy: number) {
-    warnDeprecatedPathMethod(
-      "offset",
-      "Use Skia.PathBuilder.Make().offset() instead."
-    );
-    this.ref.offset(dx, dy);
-    return this;
-  }
-
-  transform(m: InputMatrix) {
-    warnDeprecatedPathMethod(
-      "transform",
-      "Use Skia.PathBuilder.Make().transform() instead."
-    );
-    const matrix = toMatrix3x3(m);
-    this.ref.transform(matrix);
-    return this;
-  }
-
-  makeAsWinding() {
-    warnDeprecatedPathMethod(
-      "makeAsWinding",
-      "Use Skia.Path.AsWinding(path) instead."
-    );
-    const path = this.asPath();
-    const result = path.makeAsWinding();
-    path.delete();
-    if (result === null) {
-      return null;
-    }
-    const old = this.ref;
-    this.ref = new this.CanvasKit.PathBuilder(result);
-    result.delete();
-    old.delete();
-    return this;
-  }
-
-  simplify() {
-    warnDeprecatedPathMethod(
-      "simplify",
-      "Use Skia.Path.Simplify(path) instead."
-    );
-    const path = this.asPath();
-    const result = path.makeSimplified();
-    path.delete();
-    if (result === null) {
-      return false;
-    }
-    const old = this.ref;
-    this.ref = new this.CanvasKit.PathBuilder(result);
-    result.delete();
-    old.delete();
-    return true;
-  }
-
-  op(path: SkPath, op: PathOp) {
-    warnDeprecatedPathMethod("op", "Use Skia.Path.MakeFromOp() instead.");
-    const self = this.asPath();
-    const other = JsiSkPath.fromValue<CKPathBuilder>(path).snapshot();
-    const result = self.makeCombined(
-      other,
-      getEnum(this.CanvasKit, "PathOp", op)
-    );
-    self.delete();
-    other.delete();
-    if (result === null) {
-      return false;
-    }
-    const old = this.ref;
-    this.ref = new this.CanvasKit.PathBuilder(result);
-    result.delete();
-    old.delete();
-    return true;
-  }
-
-  dash(on: number, off: number, phase: number) {
-    warnDeprecatedPathMethod(
-      "dash",
-      "Use Skia.Path.Dash(path, on, off, phase) instead."
-    );
-    const path = this.asPath();
-    const result = path.makeDashed(on, off, phase);
-    path.delete();
-    if (result === null) {
-      return false;
-    }
-    const old = this.ref;
-    this.ref = new this.CanvasKit.PathBuilder(result);
-    result.delete();
-    old.delete();
-    return true;
-  }
-
-  stroke(opts?: StrokeOpts) {
-    warnDeprecatedPathMethod(
-      "stroke",
-      "Use Skia.Path.Stroke(path, opts) instead."
-    );
-    const path = this.asPath();
-    const result = path.makeStroked(
-      opts === undefined
-        ? undefined
-        : {
-            width: opts.width,
-            // eslint-disable-next-line camelcase
-            miter_limit: opts.miter_limit,
-            precision: opts.precision,
-            join: optEnum(this.CanvasKit, "StrokeJoin", opts.join),
-            cap: optEnum(this.CanvasKit, "StrokeCap", opts.cap),
-          }
-    );
-    path.delete();
-    if (result === null) {
-      return null;
-    }
-    const old = this.ref;
-    this.ref = new this.CanvasKit.PathBuilder(result);
-    result.delete();
-    old.delete();
-    return this;
-  }
-
-  trim(start: number, stop: number, isComplement: boolean) {
-    warnDeprecatedPathMethod(
-      "trim",
-      "Use Skia.Path.Trim(path, start, end, isComplement) instead."
-    );
-    const startT = Math.min(Math.max(start, 0), 1);
-    const stopT = Math.min(Math.max(stop, 0), 1);
-    if (startT === 0 && stopT === 1 && !isComplement) {
-      return this;
-    }
-    const path = this.asPath();
-    const result = path.makeTrimmed(startT, stopT, isComplement);
-    path.delete();
-    if (result === null) {
-      return null;
-    }
-    const old = this.ref;
-    this.ref = new this.CanvasKit.PathBuilder(result);
-    result.delete();
-    old.delete();
-    return this;
-  }
-
   // ---- Query methods (use snapshot for read-only) ----
 
   countPoints() {
@@ -646,7 +163,7 @@ export class JsiSkPath
     return result;
   }
 
-  interpolate(end: SkPath, weight: number, output?: SkPath): SkPath | null {
+  interpolate(end: SkPath, weight: number): SkPath | null {
     const p1 = this.asPath();
     const p2 = JsiSkPath.fromValue<CKPathBuilder>(end).snapshot();
     const path = this.CanvasKit.Path.MakeFromPathInterpolation(p1, p2, weight);
@@ -655,14 +172,6 @@ export class JsiSkPath
     if (path === null) {
       return null;
     }
-    if (output) {
-      const outRef = output as JsiSkPath;
-      const old = outRef.ref;
-      outRef.ref = new this.CanvasKit.PathBuilder(path);
-      path.delete();
-      old.delete();
-      return output;
-    }
     const result = new JsiSkPath(
       this.CanvasKit,
       new this.CanvasKit.PathBuilder(path)

package/src/skia/web/JsiSkSurfaceFactory.ts

@@ -1,8 +1,8 @@
 import type { CanvasKit, Surface } from "canvaskit-wasm";
 
-import type { SurfaceFactory } from "../types";
+import type { SkSurface, SurfaceFactory } from "../types";
 
-import { Host } from "./Host";
+import { Host, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkSurface } from "./JsiSkSurface";
 
 export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
@@ -38,4 +38,8 @@ export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
     }
     return new JsiSkSurface(this.CanvasKit, surface);
   }
+
+  MakeFromNativeTexture(_pointer: bigint): SkSurface {
+    return throwNotImplementedOnRNWeb<SkSurface>();
+  }
 }

package/src/sksg/Container.native.ts

@@ -1,11 +1,10 @@
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkPicture } from "../skia/types";
+import type { Skia } from "../skia/types";
 import {
   HAS_REANIMATED_3,
   HAS_REANIMATED_4,
   REANIMATED_VERSION_MAJOR,
 } from "../external/reanimated/renderHelpers";
-import type { JsiRecorder } from "../skia/types/Recorder";
 
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 import { Container, StaticContainer } from "./StaticContainer";
@@ -17,67 +16,65 @@ import "../views/api";
 // create local reference for `strictGlobal` option in Worklets
 const { SkiaViewApi } = globalThis;
 
-const nativeDrawOnscreen = (
-  nativeId: number,
-  recorder: JsiRecorder,
-  picture: SkPicture
-) => {
-  "worklet";
-
-  //const start = performance.now();
-  recorder.play(picture);
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-
+/**
+ * Records the scene graph on the JS thread and hands the native recorder to
+ * the view, which owns it and replays it on every draw. The Reanimated mapper
+ * only pushes the shared values into that recorder through the view id: no
+ * Skia object is captured by a worklet, so nothing on the UI runtime holds
+ * native memory. The JS wrapper is disposed right after the handoff, so the
+ * view is the sole owner and the resources referenced by the recording
+ * (images, pictures) are released when the view replaces it or is torn down,
+ * not when a garbage collector gets around to a wrapper.
+ *
+ * Unmounting does not clear the view: the native view can outlive the React
+ * tree (exit animations, screen transitions) and keeps showing its last frame
+ * until it is torn down, which is when the recording is released.
+ */
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
-  private picture: SkPicture;
 
   constructor(
     Skia: Skia,
     private nativeId: number
   ) {
     super(Skia);
-    this.picture = Skia.Picture.MakePicture(null)!;
   }
 
-  unmount() {
-    super.unmount();
+  private stopMapper() {
     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;
     }
   }
 
+  unmount() {
+    super.unmount();
+    this.stopMapper();
+  }
+
   redraw() {
-    if (this.mapperId !== null) {
-      Rea.stopMapper(this.mapperId);
-      this.mapperId = null;
-    }
+    this.stopMapper();
     if (this.unmounted) {
       return;
     }
     const recorder = new ReanimatedRecorder(this.Skia);
-    const { nativeId, picture } = this;
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
-    const sharedRecorder = recorder.getRecorder();
-    // Draw first frame
-    Rea.runOnUI(() => {
-      "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
-    })();
-    // Animate
+    const { nativeId } = this;
+    const nativeRecorder = recorder.getRecorder();
+    // stopMapper() only takes effect on the UI thread later, so the previous
+    // mapper can still fire after the new recording is installed. Tagging the
+    // updates with the recording id lets the view ignore them.
+    const recorderId = nativeRecorder.getId();
+    // The view takes ownership of the recorder and draws the first frame. The
+    // wrapper is disposed right away: it would otherwise co-own the recording
+    // until the JS garbage collector finalizes it.
+    SkiaViewApi.setJsiProperty(nativeId, "recorder", nativeRecorder);
+    nativeRecorder.dispose();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
-        sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder, picture);
+        SkiaViewApi.applyUpdates(nativeId, recorderId, sharedValues);
       }, sharedValues);
     }
   }

package/src/specs/NativeSkiaModule.web.ts

@@ -58,6 +58,10 @@ global.SkiaViewApi = {
     // The view may already have unmounted (e.g. a trailing animation frame).
     this.views[`${nativeId}`]?.redraw();
   },
+  applyUpdates() {
+    // Web canvases are driven from JS (see Container.web.ts); there is no
+    // view-owned recorder to update.
+  },
   makeImageSnapshot(nativeId: number, rect?: SkRect) {
     const view = this.views[`${nativeId}`];
     if (!view) {