@shopify/react-native-skia 2.7.0 → 2.9.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/web/JsiSkFont.d.ts

@@ -5,7 +5,7 @@ import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
-    measureText(_text: string, _paint?: SkPaint | undefined): SkRect;
+    measureText(text: string, paint?: SkPaint | undefined): SkRect;
     getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;

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/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/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -32,7 +32,8 @@
     "cpp/**/*.{h,cpp}",
     "apple/**",
     "react-native-skia.podspec",
-    "dist/**"
+    "dist/**",
+    "libs/.graphite"
   ],
   "scripts": {
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
@@ -140,6 +141,11 @@
     "react-native-skia-apple-tvos": "150.0.0",
     "react-reconciler": "0.31.0"
   },
+  "graphiteDependencies": {
+    "react-native-skia-graphite-android": "150.0.0",
+    "react-native-skia-graphite-apple-ios": "150.0.0",
+    "react-native-skia-graphite-apple-macos": "150.0.0"
+  },
   "eslintIgnore": [
     "node_modules/",
     "lib/"

package/react-native-skia.podspec

@@ -29,10 +29,8 @@ end
 # re-copied and CocoaPods picks up the change. This is best-effort: if `pod install`
 # does not detect the change, a clean reinstall fixes it (acceptable until the upcoming
 # Swift Package Manager migration).
-install_apple_skia_libs = lambda do |base_dir|
-  { 'ios' => 'react-native-skia-apple-ios',
-    'macos' => 'react-native-skia-apple-macos',
-    'tvos' => 'react-native-skia-apple-tvos' }.each do |platform, pkg_name|
+install_apple_skia_libs = lambda do |base_dir, packages|
+  packages.each do |platform, pkg_name|
     pkg_dir = resolve_node_package.call(pkg_name, base_dir)
     next if pkg_dir.nil?
 
@@ -54,9 +52,18 @@ install_apple_skia_libs = lambda do |base_dir|
   end
 end
 
-# Graphite downloads its binaries directly into libs/; only the default build needs
-# the npm packages copied in.
-install_apple_skia_libs.call(__dir__) unless use_graphite
+# The default (Ganesh) build ships its binaries in the react-native-skia-apple-*
+# npm packages, the Graphite build in react-native-skia-graphite-apple-* (no tvOS).
+# During in-repo development install-skia-graphite downloads the binaries directly
+# into libs/ and the graphite packages are absent from node_modules, in which case
+# the copy below is a no-op and the downloaded binaries are used as-is.
+apple_skia_packages = use_graphite ?
+  { 'ios' => 'react-native-skia-graphite-apple-ios',
+    'macos' => 'react-native-skia-graphite-apple-macos' } :
+  { 'ios' => 'react-native-skia-apple-ios',
+    'macos' => 'react-native-skia-apple-macos',
+    'tvos' => 'react-native-skia-apple-tvos' }
+install_apple_skia_libs.call(__dir__, apple_skia_packages)
 
 # Set preprocessor definitions based on GRAPHITE flag
 preprocessor_defs = use_graphite ?
@@ -71,14 +78,15 @@ framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
 # Add Dawn library for Graphite builds (contains dawn::native symbols)
 framework_names += ['libdawn_combined'] if use_graphite
 
-# Verify that the prebuilt binaries are available (copied in above, or downloaded by
-# install-skia-graphite for Graphite builds).
+# Verify that the prebuilt binaries are available (copied in above from the npm
+# packages, or downloaded by install-skia-graphite for in-repo Graphite builds).
 unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__dir__, 'libs', 'macos'))
+  expected_packages = apple_skia_packages.values.join(', ')
   Pod::UI.warn "#{'-' * 72}"
   Pod::UI.warn "react-native-skia: Skia prebuilt binaries not found in libs/!"
   Pod::UI.warn ""
   Pod::UI.warn "Make sure dependencies are installed (yarn install / npm install) so that"
-  Pod::UI.warn "the react-native-skia-apple-* packages are present, then run `pod install` again."
+  Pod::UI.warn "the #{expected_packages} packages are present, then run `pod install` again."
   Pod::UI.warn "#{'-' * 72}"
   raise "react-native-skia: Skia prebuilt binaries not found. Run `yarn install` then `pod install` to fix this."
 end

package/src/Platform/Platform.ts

@@ -7,7 +7,7 @@ import {
 } from "react-native";
 
 import type { DataModule } from "../skia/types";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
@@ -15,12 +15,11 @@ export const Platform: IPlatform = {
   OS: RNPlatform.OS,
   PixelRatio: PixelRatio.get(),
   resolveAsset: (source: DataModule) => {
-    // eslint-disable-next-line no-nested-ternary
-    return isRNModule(source)
-      ? Image.resolveAssetSource(source).uri
-      : "uri" in source
-        ? source.uri
-        : source.default;
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    return isRNModule(asset) ? Image.resolveAssetSource(asset).uri : asset.uri;
   },
   findNodeHandle,
   View,

package/src/Platform/Platform.web.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import type { ViewComponent, ViewProps } from "react-native";
 
 import type { DataModule } from "../skia/types";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
@@ -40,12 +40,16 @@ export const Platform: IPlatform = {
   OS: "web",
   PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1, // window is not defined on node
   resolveAsset: (source: DataModule) => {
-    if (isRNModule(source)) {
-      if (typeof source === "number" && typeof require === "function") {
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    if (isRNModule(asset)) {
+      if (typeof require === "function") {
         const {
           getAssetByID,
         } = require("react-native/Libraries/Image/AssetRegistry");
-        const { httpServerLocation, name, type } = getAssetByID(source);
+        const { httpServerLocation, name, type } = getAssetByID(asset);
         const uri = `${httpServerLocation}/${name}.${type}`;
         return uri;
       }
@@ -53,10 +57,7 @@ export const Platform: IPlatform = {
         "Asset source is a number - this is not supported on the web"
       );
     }
-    if ("uri" in source) {
-      return source.uri;
-    }
-    return source.default;
+    return asset.uri;
   },
   findNodeHandle: () => {
     throw new Error("findNodeHandle is not supported on the web");

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/skia/core/Font.ts

@@ -2,7 +2,7 @@
 import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../Skia";
-import { FontSlant } from "../types";
+import { FontSlant, FontWeight } from "../types";
 import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
 import { Platform } from "../../Platform";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
@@ -29,8 +29,18 @@ export const useFont = (
   }, [size, typeface]);
 };
 
-type Slant = "normal" | "italic" | "oblique";
-type Weight =
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+export type RNFontSlant = "normal" | "italic" | "oblique" | FontSlant;
+
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+export type RNFontWeight =
   | "normal"
   | "bold"
   | "100"
@@ -41,13 +51,20 @@ type Weight =
   | "600"
   | "700"
   | "800"
-  | "900";
+  | "900"
+  | FontWeight;
 
-interface RNFontStyle {
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+export interface RNFontStyle {
   fontFamily: string;
   fontSize: number;
-  fontStyle: Slant;
-  fontWeight: Weight;
+  fontStyle: RNFontSlant;
+  fontWeight: RNFontWeight;
 }
 
 const defaultFontStyle: RNFontStyle = {
@@ -57,8 +74,10 @@ const defaultFontStyle: RNFontStyle = {
   fontWeight: "normal",
 };
 
-const slant = (s: Slant) => {
-  if (s === "italic") {
+const slant = (s: RNFontSlant): FontSlant => {
+  if (typeof s === "number") {
+    return s;
+  } else if (s === "italic") {
     return FontSlant.Italic;
   } else if (s === "oblique") {
     return FontSlant.Oblique;
@@ -67,14 +86,16 @@ const slant = (s: Slant) => {
   }
 };
 
-const weight = (fontWeight: Weight) => {
+const weight = (fontWeight: RNFontWeight): FontWeight => {
   switch (fontWeight) {
     case "normal":
-      return 400;
+      return FontWeight.Normal;
     case "bold":
-      return 700;
+      return FontWeight.Bold;
     default:
-      return parseInt(fontWeight, 10);
+      return typeof fontWeight === "number"
+        ? fontWeight
+        : (parseInt(fontWeight, 10) as FontWeight);
   }
 };
 

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/Data/Data.ts

@@ -3,15 +3,15 @@ import type { SkJSIInstance } from "../JsiInstance";
 export type SkData = SkJSIInstance<"Data">;
 
 type RNModule = number;
-type ESModule = {
-  __esModule: true;
-  default: string;
-};
 type MetroAsset = {
   uri: string;
   width: number;
   height: number;
 };
+type ESModule = {
+  __esModule: true;
+  default: RNModule | MetroAsset | string;
+};
 
 export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
@@ -19,3 +19,13 @@ export type DataSourceParam = DataSource | null | undefined;
 
 export const isRNModule = (mod: DataModule): mod is RNModule =>
   typeof mod === "number";
+
+// Since Expo SDK 52, on web, require() may return an ES module interop
+// object ({ default: <asset> }) instead of the asset itself.
+// See https://github.com/Shopify/react-native-skia/issues/2784
+export const unwrapModule = (
+  mod: DataModule
+): RNModule | MetroAsset | string =>
+  typeof mod === "object" && mod !== null && "default" in mod
+    ? mod.default
+    : mod;

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/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();
     }
   }