@shopify/react-native-skia 2.5.4 → 2.6.0

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

@@ -0,0 +1,45 @@
+import type { CanvasKit, PathBuilder as CKPathBuilder } from "canvaskit-wasm";
+import type { FillType, InputMatrix, InputRRect, SkMatrix, SkPath, SkPathBuilder, SkPoint, SkRect } from "../types";
+import { HostObject } from "./Host";
+/**
+ * Web implementation of SkPathBuilder using CanvasKit's native PathBuilder.
+ */
+export declare class JsiSkPathBuilder extends HostObject<CKPathBuilder, "PathBuilder"> implements SkPathBuilder {
+    constructor(CanvasKit: CanvasKit, ref: CKPathBuilder);
+    moveTo(x: number, y: number): this;
+    rMoveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    rLineTo(x: number, y: number): this;
+    quadTo(x1: number, y1: number, x2: number, y2: number): this;
+    rQuadTo(x1: number, y1: number, x2: number, y2: number): this;
+    conicTo(x1: number, y1: number, x2: number, y2: number, w: number): this;
+    rConicTo(x1: number, y1: number, x2: number, y2: number, w: number): this;
+    cubicTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): this;
+    rCubicTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): this;
+    close(): this;
+    arcToOval(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number, forceMoveTo: boolean): this;
+    arcToRotated(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, x: number, y: number): this;
+    rArcTo(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, dx: number, dy: number): this;
+    arcToTangent(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    addRect(rect: SkRect, isCCW?: boolean): this;
+    addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): this;
+    addArc(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number): this;
+    addRRect(rrect: InputRRect, isCCW?: boolean): this;
+    addCircle(x: number, y: number, r: number, _isCCW?: boolean): this;
+    addPoly(points: SkPoint[], close: boolean): this;
+    addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): this;
+    setFillType(fill: FillType): this;
+    setIsVolatile(_isVolatile: boolean): this;
+    reset(): this;
+    offset(dx: number, dy: number): this;
+    transform(m: InputMatrix): this;
+    computeBounds(): SkRect;
+    isEmpty(): boolean;
+    getLastPt(): {
+        x: number;
+        y: number;
+    };
+    countPoints(): number;
+    build(): SkPath;
+    detach(): SkPath;
+}

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

@@ -0,0 +1,9 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { PathBuilderFactory, SkPath } from "../types";
+import { Host } from "./Host";
+import { JsiSkPathBuilder } from "./JsiSkPathBuilder";
+export declare class JsiSkPathBuilderFactory extends Host implements PathBuilderFactory {
+    constructor(CanvasKit: CanvasKit);
+    Make(): JsiSkPathBuilder;
+    MakeFromPath(path: SkPath): JsiSkPathBuilder;
+}

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

@@ -1,5 +1,5 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { PathCommand, PathOp, SkFont, SkPath } from "../types";
+import type { InputRRect, PathCommand, PathOp, SkFont, SkPath, SkPoint, SkRect, StrokeOpts } from "../types";
 import type { PathFactory } from "../types/Path/PathFactory";
 import { Host } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
@@ -10,4 +10,16 @@ export declare class JsiSkPathFactory extends Host implements PathFactory {
     MakeFromOp(one: SkPath, two: SkPath, op: PathOp): JsiSkPath | null;
     MakeFromCmds(cmds: PathCommand[]): JsiSkPath | null;
     MakeFromText(_text: string, _x: number, _y: number, _font: SkFont): SkPath;
+    Rect(rect: SkRect, isCCW?: boolean): JsiSkPath;
+    Oval(rect: SkRect, isCCW?: boolean, startIndex?: number): JsiSkPath;
+    Circle(x: number, y: number, r: number): JsiSkPath;
+    RRect(rrect: InputRRect, isCCW?: boolean): JsiSkPath;
+    Line(p1: SkPoint, p2: SkPoint): JsiSkPath;
+    Polygon(points: SkPoint[], close: boolean): JsiSkPath;
+    Stroke(srcPath: SkPath, opts?: StrokeOpts): JsiSkPath | null;
+    Trim(srcPath: SkPath, start: number, end: number, isComplement: boolean): JsiSkPath | null;
+    Simplify(srcPath: SkPath): JsiSkPath | null;
+    Dash(srcPath: SkPath, on: number, off: number, phase: number): JsiSkPath | null;
+    AsWinding(srcPath: SkPath): JsiSkPath | null;
+    Interpolate(start: SkPath, end: SkPath, weight: number): JsiSkPath | null;
 }

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.d.ts

@@ -1,4 +1,4 @@
-import type { ViewProps } from "react-native";
+import { type ViewProps } from "react-native";
 import type { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
 export interface NativeProps extends ViewProps {
     debug?: boolean;
@@ -7,5 +7,5 @@ export interface NativeProps extends ViewProps {
     androidWarmup?: boolean;
     pointerEvents?: WithDefault<"auto" | "none" | "box-none" | "box-only", "auto">;
 }
-declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+declare const _default: import("react-native").HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/src/specs/WebGPUViewNativeComponent.d.ts

@@ -1,8 +1,8 @@
-import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import type { ViewProps } from "react-native";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 export interface NativeProps extends ViewProps {
     contextId: Int32;
     transparent: boolean;
 }
-declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+declare const _default: import("react-native").HostComponent<NativeProps>;
 export default _default;

package/package.json

@@ -9,7 +9,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -48,6 +48,7 @@
     "build-skia": "tsx ./scripts/build-skia.ts",
     "copy-skia-headers": "tsx ./scripts/copy-skia-headers.ts",
     "install-skia-graphite": "tsx ./scripts/install-skia-graphite.ts",
+    "install-skia": "node scripts/install-libs.js",
     "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
     "clang-format-ios": "find apple/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",
@@ -127,7 +128,7 @@
     "ws": "8.18.0"
   },
   "dependencies": {
-    "canvaskit-wasm": "0.40.0",
+    "canvaskit-wasm": "0.41.0",
     "react-native-skia-android": "144.3.0",
     "react-native-skia-apple-ios": "144.3.0",
     "react-native-skia-apple-macos": "144.3.0",
@@ -148,7 +149,7 @@
     "ios": {
       "componentProvider": {
         "SkiaPictureView": "SkiaPictureView",
-        "WebGPUView": "WebGPUView"
+        "SkiaWebGPUView": "SkiaWebGPUView"
       }
     }
   },

package/scripts/install-libs.js

@@ -19,9 +19,13 @@ function copySync(src, dest, options) {
   const basePath = wildcardSplit[0];
   const files = fs.readdirSync(basePath);
   files
-    .filter(file => file.endsWith(wildcardSplit[1]))
+    .filter((file) => file.endsWith(wildcardSplit[1]))
     .forEach((file) => {
-      return fs.cpSync(path.join(basePath, file), path.join(dest, file), options);
+      return fs.cpSync(
+        path.join(basePath, file),
+        path.join(dest, file),
+        options
+      );
     });
 }
 
@@ -69,8 +73,12 @@ fs.rmSync(path.join(libsDir, "tvos"), { recursive: true, force: true });
 fs.mkdirSync(path.join(libsDir, "ios"), { recursive: true });
 fs.mkdirSync(path.join(libsDir, "macos"), { recursive: true });
 
-copySync(iosPackage + '/libs/*.xcframework', path.join(libsDir, "ios"), {recursive: true});
-copySync(macosPackage + '/libs/*.xcframework', path.join(libsDir, "macos"), {recursive: true});
+copySync(iosPackage + "/libs/*.xcframework", path.join(libsDir, "ios"), {
+  recursive: true,
+});
+copySync(macosPackage + "/libs/*.xcframework", path.join(libsDir, "macos"), {
+  recursive: true,
+});
 
 // Handle tvOS (non-Graphite only)
 if (!useGraphite) {
@@ -80,7 +88,9 @@ if (!useGraphite) {
     );
     console.log("-- Skia tvOS package: " + tvosPackage);
     fs.mkdirSync(path.join(libsDir, "tvos"), { recursive: true });
-    copySync(tvosPackage + '/libs/*.xcframework', path.join(libsDir, "tvos"), {recursive: true});
+    copySync(tvosPackage + "/libs/*.xcframework", path.join(libsDir, "tvos"), {
+      recursive: true,
+    });
   } catch (e) {
     console.log("-- tvOS package not found, skipping");
   }
@@ -118,6 +128,6 @@ console.log("-- Skia Android package: " + androidPackage);
 // Copy Android libs (per-ABI static libraries)
 const androidDest = path.join(libsDir, "android");
 fs.rmSync(androidDest, { recursive: true, force: true });
-copySync(androidSrcLibs, androidDest, {recursive: true});
+copySync(androidSrcLibs, androidDest, { recursive: true });
 
 console.log("-- Copied Android libs to libs/android/");

package/src/animation/functions/interpolatePaths.ts

@@ -9,12 +9,12 @@ const lerp = (
   from: number,
   to: number,
   p1: SkPath,
-  p2: SkPath,
-  output?: SkPath
+  p2: SkPath
 ) => {
   "worklet";
   const t = (value - from) / (to - from);
-  return p2.interpolate(p1, t, output)!;
+  // interpolate returns a new path (immutable operation)
+  return p2.interpolate(p1, t)!;
 };
 
 /**
@@ -38,7 +38,7 @@ export const interpolatePaths = (
   input: number[],
   outputRange: SkPath[],
   options?: ExtrapolationType,
-  output?: SkPath
+  _output?: SkPath
 ) => {
   "worklet";
   const extrapolation = validateInterpolationOptions(options);
@@ -86,7 +86,6 @@ export const interpolatePaths = (
     input[i],
     input[i + 1],
     outputRange[i],
-    outputRange[i + 1],
-    output
+    outputRange[i + 1]
   );
 };

package/src/external/reanimated/interpolators.ts

@@ -5,7 +5,7 @@ import type {
 } from "react-native-reanimated";
 import { useCallback, useMemo } from "react";
 
-import type { SkPath, SkPoint } from "../../skia/types";
+import type { SkPath, SkPathBuilder, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
 import { isOnMainThread } from "../../renderer/Offscreen";
@@ -20,15 +20,35 @@ export const notifyChange = <T>(value: SharedValue<T>) => {
   }
 };
 
-export const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {
+/**
+ * Hook for creating animated paths using PathBuilder.
+ * The callback receives a mutable PathBuilder that can be used to construct the path.
+ * The resulting immutable SkPath is stored in a shared value.
+ *
+ * @param cb - Callback that receives the PathBuilder to construct the path
+ * @param init - Optional initial path to add to the builder
+ * @param transform - Optional transform function applied to the built path
+ */
+export const usePathValue = (
+  cb: (builder: SkPathBuilder) => void,
+  init?: SkPath,
+  transform?: (path: SkPath) => SkPath
+) => {
+  const builderInit = useMemo(() => Skia.PathBuilder.Make(), []);
   const pathInit = useMemo(() => Skia.Path.Make(), []);
+  const builder = Rea.useSharedValue(builderInit);
   const path = Rea.useSharedValue(pathInit);
   Rea.useDerivedValue(() => {
-    path.value.reset();
+    builder.value.reset();
     if (init !== undefined) {
-      path.value.addPath(init);
+      builder.value.addPath(init);
+    }
+    cb(builder.value);
+    let result = builder.value.build();
+    if (transform !== undefined) {
+      result = transform(result);
     }
-    cb(path.value);
+    path.value = result;
     notifyChange(path);
   });
   return path;

package/src/skia/types/Path/PathBuilder.ts

@@ -0,0 +1,303 @@
+import type { SkRect } from "../Rect";
+import type { SkPoint } from "../Point";
+import type { InputRRect } from "../RRect";
+import type { InputMatrix, SkMatrix } from "../Matrix";
+import type { SkJSIInstance } from "../JsiInstance";
+
+import type { FillType, SkPath } from "./Path";
+
+/**
+ * SkPathBuilder is a mutable builder for constructing SkPath objects.
+ * Once construction is complete, call build() or detach() to get the immutable SkPath.
+ */
+export interface SkPathBuilder extends SkJSIInstance<"PathBuilder"> {
+  // Movement methods
+
+  /**
+   * Adds beginning of contour at point (x, y).
+   * @param x - x-axis value of contour start
+   * @param y - y-axis value of contour start
+   * @returns reference to this PathBuilder for chaining
+   */
+  moveTo(x: number, y: number): SkPathBuilder;
+
+  /**
+   * Adds beginning of contour relative to the last point.
+   * @param x - offset from last point on x-axis
+   * @param y - offset from last point on y-axis
+   * @returns reference to this PathBuilder for chaining
+   */
+  rMoveTo(x: number, y: number): SkPathBuilder;
+
+  /**
+   * Adds line from last point to (x, y).
+   * @param x - end of line on x-axis
+   * @param y - end of line on y-axis
+   * @returns reference to this PathBuilder for chaining
+   */
+  lineTo(x: number, y: number): SkPathBuilder;
+
+  /**
+   * Adds line from last point, relative to last point.
+   * @param x - offset from last point on x-axis
+   * @param y - offset from last point on y-axis
+   * @returns reference to this PathBuilder for chaining
+   */
+  rLineTo(x: number, y: number): SkPathBuilder;
+
+  // Curve methods
+
+  /**
+   * Adds quad from last point towards (x1, y1), to (x2, y2).
+   */
+  quadTo(x1: number, y1: number, x2: number, y2: number): SkPathBuilder;
+
+  /**
+   * Relative version of quadTo.
+   */
+  rQuadTo(x1: number, y1: number, x2: number, y2: number): SkPathBuilder;
+
+  /**
+   * Adds conic from last point towards (x1, y1), to (x2, y2), weighted by w.
+   */
+  conicTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    w: number
+  ): SkPathBuilder;
+
+  /**
+   * Relative version of conicTo.
+   */
+  rConicTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    w: number
+  ): SkPathBuilder;
+
+  /**
+   * Adds cubic from last point towards (x1, y1), then towards (x2, y2), ending at (x3, y3).
+   */
+  cubicTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number
+  ): SkPathBuilder;
+
+  /**
+   * Relative version of cubicTo.
+   */
+  rCubicTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number
+  ): SkPathBuilder;
+
+  /**
+   * Appends CLOSE_VERB to the builder, connecting first and last points.
+   */
+  close(): SkPathBuilder;
+
+  // Arc methods
+
+  /**
+   * Appends arc to the builder. Arc is part of ellipse bounded by oval.
+   * @param oval - bounds of ellipse containing arc
+   * @param startAngleInDegrees - starting angle of arc in degrees
+   * @param sweepAngleInDegrees - sweep, in degrees. Positive is clockwise
+   * @param forceMoveTo - true to start a new contour with arc
+   */
+  arcToOval(
+    oval: SkRect,
+    startAngleInDegrees: number,
+    sweepAngleInDegrees: number,
+    forceMoveTo: boolean
+  ): SkPathBuilder;
+
+  /**
+   * Appends arc to the builder with SVG-style parameters.
+   * @param rx - x-radius of ellipse
+   * @param ry - y-radius of ellipse
+   * @param xAxisRotateInDegrees - rotation of ellipse
+   * @param useSmallArc - if true, use smaller of two arcs
+   * @param isCCW - if true, arc sweeps counter-clockwise
+   * @param x - end point x
+   * @param y - end point y
+   */
+  arcToRotated(
+    rx: number,
+    ry: number,
+    xAxisRotateInDegrees: number,
+    useSmallArc: boolean,
+    isCCW: boolean,
+    x: number,
+    y: number
+  ): SkPathBuilder;
+
+  /**
+   * Relative version of arcToRotated.
+   */
+  rArcTo(
+    rx: number,
+    ry: number,
+    xAxisRotateInDegrees: number,
+    useSmallArc: boolean,
+    isCCW: boolean,
+    dx: number,
+    dy: number
+  ): SkPathBuilder;
+
+  /**
+   * Appends arc to the builder, tangent to two lines.
+   * @param x1 - x of first tangent point
+   * @param y1 - y of first tangent point
+   * @param x2 - x of second tangent point
+   * @param y2 - y of second tangent point
+   * @param radius - arc radius
+   */
+  arcToTangent(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    radius: number
+  ): SkPathBuilder;
+
+  // Shape methods
+
+  /**
+   * Adds Rect to the builder.
+   * @param rect - rectangle to add
+   * @param isCCW - if true, draws counter-clockwise
+   */
+  addRect(rect: SkRect, isCCW?: boolean): SkPathBuilder;
+
+  /**
+   * Adds oval to the builder.
+   * @param oval - bounds of ellipse
+   * @param isCCW - if true, draws counter-clockwise
+   * @param startIndex - index of initial point
+   */
+  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): SkPathBuilder;
+
+  /**
+   * Appends arc to the builder as a new contour.
+   * @param oval - bounds of ellipse
+   * @param startAngleInDegrees - starting angle
+   * @param sweepAngleInDegrees - sweep angle
+   */
+  addArc(
+    oval: SkRect,
+    startAngleInDegrees: number,
+    sweepAngleInDegrees: number
+  ): SkPathBuilder;
+
+  /**
+   * Adds rounded rectangle to the builder.
+   * @param rrect - rounded rectangle to add
+   * @param isCCW - if true, draws counter-clockwise
+   */
+  addRRect(rrect: InputRRect, isCCW?: boolean): SkPathBuilder;
+
+  /**
+   * Adds circle to the builder.
+   * @param x - center x
+   * @param y - center y
+   * @param r - radius
+   * @param isCCW - if true, draws counter-clockwise
+   */
+  addCircle(x: number, y: number, r: number, isCCW?: boolean): SkPathBuilder;
+
+  /**
+   * Adds polygon to the builder from array of points.
+   * @param points - array of points
+   * @param close - if true, close the polygon
+   */
+  addPoly(points: SkPoint[], close: boolean): SkPathBuilder;
+
+  /**
+   * Adds the path to the builder.
+   * @param src - path to add
+   * @param matrix - optional transform matrix
+   * @param extend - if true, extend rather than append
+   */
+  addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): SkPathBuilder;
+
+  // Configuration methods
+
+  /**
+   * Sets the fill type for the path.
+   * @param fill - fill type to set
+   */
+  setFillType(fill: FillType): SkPathBuilder;
+
+  /**
+   * Sets whether the path is volatile (temporary/animating).
+   * @param isVolatile - true if path will be altered frequently
+   */
+  setIsVolatile(isVolatile: boolean): SkPathBuilder;
+
+  /**
+   * Resets the builder to empty state.
+   */
+  reset(): SkPathBuilder;
+
+  /**
+   * Translates all points in the builder.
+   * @param dx - translation in x
+   * @param dy - translation in y
+   */
+  offset(dx: number, dy: number): SkPathBuilder;
+
+  /**
+   * Transforms all points in the builder by the matrix.
+   * @param m - transformation matrix
+   */
+  transform(m: InputMatrix): SkPathBuilder;
+
+  // Query methods
+
+  /**
+   * Returns the bounds of the path being built.
+   */
+  computeBounds(): SkRect;
+
+  /**
+   * Returns true if the builder has no verbs.
+   */
+  isEmpty(): boolean;
+
+  /**
+   * Returns the last point added to the builder.
+   */
+  getLastPt(): { x: number; y: number };
+
+  /**
+   * Returns the number of points in the builder.
+   */
+  countPoints(): number;
+
+  // Build methods
+
+  /**
+   * Returns a new SkPath with the current builder state.
+   * The builder is NOT reset and can continue to be used.
+   */
+  build(): SkPath;
+
+  /**
+   * Returns a new SkPath with the current builder state and resets the builder.
+   * More efficient than build() when you're done with this builder.
+   */
+  detach(): SkPath;
+}

package/src/skia/types/Path/PathBuilderFactory.ts

@@ -0,0 +1,15 @@
+import type { SkPath } from "./Path";
+import type { SkPathBuilder } from "./PathBuilder";
+
+export interface PathBuilderFactory {
+  /**
+   * Creates a new empty PathBuilder.
+   */
+  Make(): SkPathBuilder;
+
+  /**
+   * Creates a new PathBuilder initialized with the given path's contents.
+   * @param path - path to copy into the builder
+   */
+  MakeFromPath(path: SkPath): SkPathBuilder;
+}