@shopify/react-native-skia 2.6.9 → 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/types/Surface/Surface.d.ts

@@ -35,8 +35,12 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
     makeImageSnapshot(bounds?: SkRect, outputImage?: SkImage): SkImage;
     /**
      * Make sure any queued draws are sent to the screen or the GPU.
+     * @param sync - When true, block until the GPU has finished executing the
+     * submitted work. Use this before reading the surface's texture from a native
+     * consumer on a different command queue (see {@link getNativeTextureUnstable}).
+     * Defaults to false.
      */
-    flush(): void;
+    flush(sync?: boolean): void;
     /**
      * Returns the possibly scaled width of the surface.
      */

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

@@ -5,7 +5,7 @@ import { JsiSkImage } from "./JsiSkImage";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
     constructor(CanvasKit: CanvasKit, ref: Surface);
     [Symbol.dispose](): void;
-    flush(): void;
+    flush(_sync?: boolean): void;
     width(): number;
     height(): number;
     getCanvas(): SkCanvas;

package/lib/typescript/src/sksg/Container.native.d.ts

@@ -7,6 +7,7 @@ declare class NativeReanimatedContainer extends Container {
     private mapperId;
     private picture;
     constructor(Skia: Skia, nativeId: number);
+    unmount(): void;
     redraw(): void;
 }
 export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | NativeReanimatedContainer;

package/lib/typescript/src/sksg/Container.web.d.ts

@@ -6,6 +6,7 @@ declare class ReanimatedContainer extends Container {
     private nativeId;
     private mapperId;
     constructor(Skia: Skia, nativeId: number);
+    unmount(): void;
     redraw(): void;
 }
 export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | ReanimatedContainer;

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/lib/typescript/src/specs/NativeSkiaModule.web.d.ts

@@ -4,7 +4,9 @@ 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;
 };
 declare const _default: {};
 export default _default;

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

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

package/lib/typescript/src/views/formats.d.ts

@@ -0,0 +1 @@
+export declare const getPreferredHighBitDepthCanvasFormat: () => GPUTextureFormat;

package/lib/typescript/src/views/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./SkiaPictureView";
 export * from "./types";
 export * from "./WebGPUCanvas";
+export * from "./formats";

package/lib/typescript/src/views/types.d.ts

@@ -26,6 +26,12 @@ export interface SkiaBaseViewProps extends ViewProps {
      */
     onSize?: SharedValue<SkSize>;
     opaque?: boolean;
+    /**
+     * Renders into a surface with more than 8 bits per channel (16-bit float on
+     * iOS, 10-bit on Android) to avoid banding in subtle gradients. On Android
+     * the extra precision survives composition only when combined with `opaque`.
+     */
+    highBitDepth?: boolean;
     __destroyWebGLContextAfterRender?: boolean;
 }
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.6.9",
+  "version": "2.8.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -104,6 +104,7 @@
     "@types/jest": "30.0.0",
     "@types/pngjs": "6.0.1",
     "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-reconciler": "0.28.9",
     "@types/ws": "8.5.3",
     "eslint": "9.36.0",
@@ -112,10 +113,12 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "30.0.0",
     "jest-diff": "29.7.0",
+    "jest-environment-jsdom": "30.0.0",
     "merge-dirs": "0.2.1",
     "pngjs": "6.0.0",
     "prettier": "2.8.7",
     "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-native": "0.83.1",
     "react-native-builder-bob": "0.18.2",
     "react-native-reanimated": "4.3.1",

package/react-native-skia.podspec

@@ -143,6 +143,7 @@ Pod::Spec.new do |s|
   graphite_exclusions = [
     'cpp/rnskia/RNDawnContext.h',
     'cpp/rnskia/RNDawnUtils.h',
+    'cpp/rnskia/RNMetalLayerColorSpace.h',
     'cpp/rnskia/RNDawnWindowContext.h',
     'cpp/rnskia/RNDawnWindowContext.cpp',
     'cpp/rnskia/RNImageProvider.h',

package/src/Platform/Platform.web.tsx

@@ -1,104 +1,16 @@
-import type { RefObject, CSSProperties } from "react";
-import React, { useLayoutEffect, useMemo, useRef } from "react";
-import type { LayoutChangeEvent, ViewComponent, ViewProps } from "react-native";
+import type { CSSProperties } from "react";
+import React, { useMemo } from "react";
+import type { ViewComponent, ViewProps } from "react-native";
 
 import type { DataModule } from "../skia/types";
 import { isRNModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
-// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
-const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
-type OnLayout = ((event: LayoutChangeEvent) => void) | undefined;
-type Div = HTMLDivElement & {
-  __reactLayoutHandler: OnLayout;
-};
-
-let resizeObserver: ResizeObserver | null = null;
-
-const getObserver = () => {
-  if (resizeObserver == null) {
-    resizeObserver = new window.ResizeObserver(function (entries) {
-      entries.forEach((entry) => {
-        const node = entry.target as Div;
-        const { left, top, width, height } = entry.contentRect;
-        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
-        if (typeof onLayout === "function") {
-          // setTimeout 0 is taken from react-native-web (UIManager)
-          setTimeout(
-            () =>
-              onLayout({
-                timeStamp: Date.now(),
-                nativeEvent: { layout: { x: left, y: top, width, height } },
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                currentTarget: 0,
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                target: 0,
-                bubbles: false,
-                cancelable: false,
-                defaultPrevented: false,
-                eventPhase: 0,
-                isDefaultPrevented() {
-                  throw new Error("Method not supported on web.");
-                },
-                isPropagationStopped() {
-                  throw new Error("Method not supported on web.");
-                },
-                persist() {
-                  throw new Error("Method not supported on web.");
-                },
-                preventDefault() {
-                  throw new Error("Method not supported on web.");
-                },
-                stopPropagation() {
-                  throw new Error("Method not supported on web.");
-                },
-                isTrusted: true,
-                type: "",
-              }),
-            0
-          );
-        }
-      });
-    });
-  }
-  return resizeObserver;
-};
-
-const useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {
-  const observer = getObserver();
-
-  useLayoutEffect(() => {
-    const node = ref.current;
-    if (node !== null) {
-      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
-    }
-  }, [ref, onLayout]);
-
-  useLayoutEffect(() => {
-    const node = ref.current;
-    if (node != null && observer != null) {
-      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
-        observer.observe(node);
-      } else {
-        observer.unobserve(node);
-      }
-    }
-    return () => {
-      if (node != null && observer != null) {
-        observer.unobserve(node);
-      }
-    };
-  }, [observer, ref]);
-};
-
-const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
+// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):
+// this shim only reproduces react-native-web's default View styling.
+const View = (({ children, style: rawStyle }: ViewProps) => {
   const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
-  const ref = useRef<Div>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useElementLayout(ref as any, onLayout);
   const cssStyles = useMemo(() => {
     return {
       alignItems: "stretch" as const,
@@ -121,11 +33,7 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
     };
   }, [style]);
 
-  return (
-    <div ref={ref} style={cssStyles}>
-      {children}
-    </div>
-  );
+  return <div style={cssStyles}>{children}</div>;
 }) as unknown as typeof ViewComponent;
 
 export const Platform: IPlatform = {

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/mock/index.ts

@@ -24,6 +24,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
     WebGPUCanvas: require("react-native").View,
+    getPreferredHighBitDepthCanvasFormat: () => "rgba16float",
     SkiaPictureView: require("react-native").View,
     JsiSkImage: JsiSkImage,
     drawAsPicture: Noop,

package/src/renderer/Canvas.tsx

@@ -69,6 +69,15 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
+  /**
+   * Renders into a surface with more than 8 bits per channel (16-bit float on
+   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are
+   * identical to the default 8-bit surface, only with more precision (this is
+   * about bit depth, not HDR). On Android the extra precision survives
+   * composition only when combined with `opaque`, and the prop must be set
+   * before the canvas is mounted.
+   */
+  highBitDepth?: boolean;
   ref?: React.Ref<CanvasRef>;
   androidWarmup?: boolean;
   __destroyWebGLContextAfterRender?: boolean;
@@ -80,6 +89,7 @@ export const Canvas = ({
   children,
   onSize,
   colorSpace = "p3",
+  highBitDepth = false,
   androidWarmup = false,
   ref,
   onLayout,
@@ -180,6 +190,7 @@ export const Canvas = ({
       debug={debug}
       opaque={opaque}
       colorSpace={colorSpace}
+      highBitDepth={highBitDepth}
       androidWarmup={androidWarmup}
       onLayout={
         Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout

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/types/Surface/Surface.ts

@@ -39,8 +39,12 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
 
   /**
    * Make sure any queued draws are sent to the screen or the GPU.
+   * @param sync - When true, block until the GPU has finished executing the
+   * submitted work. Use this before reading the surface's texture from a native
+   * consumer on a different command queue (see {@link getNativeTextureUnstable}).
+   * Defaults to false.
    */
-  flush(): void;
+  flush(sync?: boolean): void;
 
   /**
    * Returns the possibly scaled width of the surface.

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() {