@delacour/react-native-ui 0.5.0-alpha.20261021211439 → 0.5.0-alpha.20261022200024

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261021211439",
+	"version": "0.5.0-alpha.20261022200024",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -162,7 +162,6 @@
 		"./lib/scroll-edges": "./src/lib/scroll-edges.ts",
 		"./lib/scroll-maths": "./src/lib/scroll-maths.ts",
 		"./lib/scroll-sections": "./src/lib/scroll-sections.ts",
-		"./lib/skia-native-id": "./src/lib/skia-native-id.ts",
 		"./lib/slot": "./src/lib/slot.tsx",
 		"./lib/tv": "./src/lib/tv.ts",
 		"./lib/wrap-text-children": "./src/lib/wrap-text-children.ts",
@@ -184,9 +183,9 @@
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
 		"@delacour/react-native-bottom-sheet": ">=0.2.0",
-		"@delacour/react-native-charts": "0.2.0-alpha.20261021211439",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261022200024",
 		"@legendapp/list": ">=3.3",
-		"react-native-skia": ">=3",
+		"react-native-skia": ">=3.7.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",
 		"react": ">=19",

package/src/components/flow/AGENTS.md

@@ -79,10 +79,6 @@ parts: `Background`, `Node`, `Handle`, `Edge`, `Group`, `Controls`, `MiniMap`, a
   the canvas — the trick `@delacour/react-native-charts` uses. A part off the canvas gets `null`
   from `useFlowCanvasLayer()` and warns. The preview and the minimap own their canvases and
   resolve their colours just outside them.
-- **`flow.tsx` imports `lib/skia-native-id` for its effect.** After a JS reload Skia reused the old
-  runtime's canvas ids, which its native registry still held as torn down, so the edges and the
-  background came up blank — the minimap too — until a re-render (pressing the lock was enough).
-  The import moves this runtime's ids to a fresh range before any of the three canvases asks for one.
 - **Shared values go straight into Skia props.** The pan and zoom are one derived `transform` on
   the canvas's `Group`; an edge's route is a derived `SkPath` (`Skia.Path.MakeFromSVGString` in
   the worklet), its march a `DashPathEffect` `phase`. Nothing crosses to the JS thread per frame.

package/src/components/flow/flow.tsx

@@ -21,7 +21,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { Canvas, Group } from "react-native-skia";
 import { scheduleOnRN } from "react-native-worklets";
-import "../../lib/skia-native-id";
 import { useCalmMotion } from "../../hooks/use-calm-motion";
 import { useThemeColors } from "../../hooks/use-theme-color";
 import {

package/src/components/section-progress/AGENTS.md

@@ -167,9 +167,6 @@ rule keeps such a type in its consumer's file.
 
 - **`react-native-skia` (3 or later) is an optional peer, needed here.** The ring draws with it, as
   `Chart`, `Flow` and `Sketch` do; `react-native-svg` is no longer imported by this component.
-- **The ring imports `lib/skia-native-id` for its effect.** After a JS reload Skia reuses the old
-  runtime's canvas ids, so a ring mounted then would draw nothing until it re-rendered. The import
-  moves this runtime's ids to a fresh range before the canvas asks for one, as `Sketch` does.
 
 ## What it does not do
 

package/src/components/section-progress/section-progress-ring.tsx

@@ -2,7 +2,6 @@ import type { ReactElement } from "react";
 import { View } from "react-native";
 import { useDerivedValue } from "react-native-reanimated";
 import { Canvas, Circle, Path, Skia } from "react-native-skia";
-import "../../lib/skia-native-id";
 import { useThemeColor } from "../../hooks/use-theme-color";
 import { useSectionProgressPart } from "./section-progress.context";
 import {

package/src/components/signature/AGENTS.md

@@ -2,8 +2,8 @@
 
 A pad to sign with a finger or a stylus. Compound root plus `Signature.Pad`,
 `Signature.Toolbar`, `Signature.Undo`, `Signature.Redo`, `Signature.Clear` and
-`Signature.Alternative`. Hands back the strokes as JSON, as SVG path data, or as
-a standalone SVG document.
+`Signature.Alternative`. Hands back the strokes as JSON, as SVG path data, as a
+standalone SVG document, or as a PNG.
 
 `import { Signature } from "@delacour/react-native-ui/signature";`
 
@@ -14,8 +14,8 @@ a standalone SVG document.
 | `index.ts` | → `@delacour/react-native-ui/signature` |
 | `signature.tsx` | Root: the history, the controlled-value sync, the imperative handle, the announcements, and the `Object.assign` surface |
 | `signature-pad.tsx` | `Signature.Pad` — the pan, the live stroke, the guideline, the placeholder and the accessibility surface |
-| `signature-path.tsx` | The finished strokes as static SVG paths. Internal |
-| `signature-live-path.tsx` | The stroke under the finger, an animated `d` rebuilt on the UI thread. Internal |
+| `signature-ink.tsx` | The one Skia canvas: the finished strokes' picture, the live stroke traced on the UI thread, and the clear's fade. Internal |
+| `signature.skia.ts` | Skia only: a stroke's cached `SkPath`, the recorded picture of the finished strokes, and the off-screen PNG render |
 | `signature-toolbar.tsx` | `Signature.Toolbar` |
 | `signature-action-button.tsx` | The shared body of the three action buttons. Internal |
 | `signature-undo.tsx` | `Signature.Undo` |
@@ -23,8 +23,8 @@ a standalone SVG document.
 | `signature-clear.tsx` | `Signature.Clear` |
 | `signature-alternative.tsx` | `Signature.Alternative` — the typed-name link |
 | `signature.context.tsx` | `SignatureContext`, `useSignature()`, `useSignatureContext()`, `useSignaturePart()` |
-| `signature.types.ts` | `SignaturePoint`, `SignatureStroke`, `SignatureValue`, `SignatureHandle`, `SignatureExportOptions` |
-| `signature.stroke.ts` | Pure, no RN: point filter and smoother (worklets), history reducer, bounds, re-fit, SVG export, JSON round trip |
+| `signature.types.ts` | `SignaturePoint`, `SignatureStroke`, `SignatureValue`, `SignatureHandle`, `SignatureExportOptions`, `SignaturePngOptions` |
+| `signature.stroke.ts` | Pure, no RN: point filter, smoother and path tracer (worklets), history reducer, bounds, re-fit, the export frame and PNG size, SVG export, JSON round trip |
 | `signature.stroke.test.ts` | |
 | `signature.variants.ts` | Pure `tv()` slots, the size tables, the axis ladder and the accessibility resolvers |
 | `signature.variants.test.ts` | |
@@ -40,17 +40,27 @@ a standalone SVG document.
   test pins the classes to the numbers so the decision is visible if that
   changes.
 - **Drawing is on the UI thread, and React sees a stroke once.** The pan writes
-  points into a shared value and the live stroke's `d` is an animated prop
-  rebuilt from it, so a moving finger renders nothing. On finger-up the stroke
-  crosses to the JS thread with `scheduleOnRN` and joins the static paths: one
-  render per stroke, none per move. A signature is a few dozen strokes of a few
-  hundred points; a render per move would be thousands.
-- **The live and the static path are drawn by the same function.**
-  `smoothStroke` is a worklet, so the UI thread and the committed path compute
-  the identical string and a stroke does not shift by a hair when it is handed
+  points into a shared value and a derived value traces them into a Skia path,
+  so a moving finger renders nothing. On finger-up the stroke crosses to the JS
+  thread with `scheduleOnRN` and joins the finished strokes' picture: one render
+  per stroke, none per move. A signature is a few dozen strokes of a few hundred
+  points; a render per move would be thousands.
+- **One Skia canvas holds all the ink, and no path is a string on screen.** The
+  finished strokes are one recorded `SkPicture` — one draw call however many
+  strokes — and each stroke's `SkPath` is cached against the immutable stroke,
+  so a commit traces one path, not the signature. The live stroke is traced
+  straight into a `PathBuilder` each frame: the SVG version wrote a `d` string
+  and had it parsed back on every move. Each stroke is still its own `drawPath`,
+  so a translucent ink darkens where two strokes cross exactly as separate SVG
+  paths did.
+- **The live and the finished stroke are traced by the same function.**
+  `traceStroke` is a worklet, so the UI thread and the committed picture build
+  the identical path and a stroke does not shift by a hair when it is handed
   over. Points are midpoint-quadratic smoothed — each sampled point is a control
   and each midpoint an end — which passes near every point without overshooting
-  any, the failure a Catmull-Rom spline has on a sharp turn.
+  any, the failure a Catmull-Rom spline has on a sharp turn. `smoothStroke`
+  writes that curve as path data for the exports, verb for verb the same.<!-- registry:omit -->
+  `signature.stroke.test.ts` holds the two to identical output.<!-- /registry:omit -->
 - **The live stroke is cleared after its committed copy renders, and only if it
   is still that stroke.** Cleared at finger-up, the ink blinks out for a frame;
   cleared unconditionally, a fast second stroke — the dot on an i — loses its
@@ -72,9 +82,13 @@ a standalone SVG document.
 - **Clear is final.** It empties the redo stack too and is not undoable. A clear
   that undo could reverse is a clear that needs explaining, and the button is
   labelled "Clear signature" because that label is the only warning there is.
-  The ink fades out over 150 ms by keying the ink layer on a clear counter and
-  letting the old layer's `exiting` animation run — instant under
-  `useCalmMotion()`.
+  The ink fades out over 150 ms: a clear counter bumps, the canvas keeps the
+  picture from before it as a ghost inside a layer whose paint's alpha runs to
+  zero, then drops it — instant under `useCalmMotion()`. A layer and not a group
+  opacity, because a picture replays with its own paints and ignores one. The
+  ghost is picked during the render the clear lands in, not in an effect after
+  it: from an effect it reaches the canvas a commit late, so the ink blinked out
+  and then popped back at full strength before fading.
 - **`value` re-seeds; it does not gate.** The pad reports a value at each stroke
   end and remembers it, so a parent echoing it back is a no-op and a parent
   passing anything else replaces the drawing and its history. A parent cannot
@@ -108,7 +122,12 @@ a standalone SVG document.
 - **Haptics**: the `haptic` preset (default `light`) as each stroke begins,
   nothing while drawing — a buzz per point would be a motor running — and a
   selection tick on clear. `haptic={false}` silences both.
-- **No raster export.** A PNG needs `react-native-view-shot` or Skia, and neither
-  is worth a peer for a format SVG already covers; it is an open question rather
-  than a missing feature. The point's `t` is stored so a speed-eased stroke width
-  can follow without a format change.
+- **`toPNG()` is `toSVG()` rasterised.** Both resolve their options through one
+  `resolveSignatureExport`, so the same options give the same box, the same
+  literal ink and the same background or none — a PNG is transparent unless
+  `background` is set. It renders the cached stroke paths off screen on a CPU
+  surface (`Skia.Surface.MakeRaster`) at `scale` pixels per point (default the screen's ratio) and returns
+  base64 with no `data:` prefix, as `Sketch.toPNG` does. Off screen rather than a
+  snapshot of the pad, so the guideline, the placeholder and the pad's fill never
+  reach the file. `""` before the pad is measured. The point's `t` is stored so
+  a speed-eased stroke width can follow without a format change.

package/src/components/signature/index.ts

@@ -10,20 +10,26 @@ export {
 	boundsOf,
 	isSignatureValue,
 	parseSignature,
+	resolveSignatureExport,
 	SIGNATURE_EXPORT_PADDING,
 	SIGNATURE_EXPORT_STROKE_COLOR,
 	SIGNATURE_MIN_DISTANCE,
 	SIGNATURE_STROKE_WIDTH,
 	type SignatureBounds,
+	type SignatureExport,
+	type SignaturePathSink,
 	scaleValue,
 	serializeSignature,
+	signaturePngSize,
 	smoothStroke,
 	strokesToPaths,
 	toSVG,
+	traceStroke,
 } from "./signature.stroke";
 export type {
 	SignatureExportOptions,
 	SignatureHandle,
+	SignaturePngOptions,
 	SignaturePoint,
 	SignatureStroke,
 	SignatureValue,

package/src/components/signature/signature-ink.tsx

@@ -0,0 +1,109 @@
+import { type ReactElement, useLayoutEffect, useMemo, useState } from "react";
+import { StyleSheet } from "react-native";
+import { type SharedValue, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
+import { Canvas, Group, Path, Picture, Skia, type SkPicture } from "react-native-skia";
+import { scheduleOnRN } from "react-native-worklets";
+import { recordSignaturePicture } from "./signature.skia";
+import { traceStroke } from "./signature.stroke";
+import type { SignaturePoint, SignatureStroke } from "./signature.types";
+
+/** A cleared signature's ink fades rather than vanishing, so the clear reads as an action. */
+const CLEAR_FADE_MS = 150;
+
+export type SignatureInkProps = {
+	/** The finished strokes. */
+	strokes: readonly SignatureStroke[];
+	/** The stroke under the finger, written by the pad's gesture on the UI thread. */
+	live: SharedValue<SignaturePoint[]>;
+	/** The ink, already resolved against the theme — a canvas cannot read one. */
+	color: string | undefined;
+	strokeWidth: number;
+	/** Bumped by every clear; a change fades out the ink it replaced. */
+	clearCount: number;
+	/** Under calm motion a clear is instant. */
+	isCalm: boolean;
+};
+
+/**
+ * Every stroke, finished and live, on one Skia canvas.
+ *
+ * Internal. **The finished strokes are one recorded picture**, re-recorded once
+ * per commit and never while a finger moves. **The live stroke is a path built on
+ * the UI thread** by tracing the shared points straight into a path builder — no
+ * string is written or parsed per frame — and it is traced by the same
+ * `traceStroke` the picture's paths are, so a stroke does not shift by a hair
+ * when it is committed.
+ *
+ * **A clear fades the ink it replaced.** The picture from before the clear is
+ * kept as a ghost inside a layer whose paint's alpha runs to zero, then dropped.
+ * A layer rather than a group opacity: a picture replays with its own paints, so
+ * only the layer it is composited through can fade it, and fading the layer as a
+ * whole is what the old fading view did. Under calm motion there is no ghost.
+ */
+export function SignatureInk({
+	strokes,
+	live,
+	color,
+	strokeWidth,
+	clearCount,
+	isCalm,
+}: SignatureInkProps): ReactElement {
+	const picture = useMemo(() => recordSignaturePicture(strokes, { color, strokeWidth }), [color, strokes, strokeWidth]);
+
+	const livePath = useDerivedValue(() => {
+		const builder = Skia.PathBuilder.Make();
+		traceStroke(live.value, builder);
+		return builder.detach();
+	});
+
+	// The picture and clear count the last render drew. A clear swaps the strokes
+	// and bumps the count in one render, so the ghost is decided here, during
+	// that render, and lands in the same commit as the empty picture — set from
+	// an effect instead, the ink blinks out for a frame and then pops back.
+	const [drawn, setDrawn] = useState({ clearCount, picture });
+	const [ghost, setGhost] = useState<SkPicture | null>(null);
+	if (drawn.clearCount !== clearCount || drawn.picture !== picture) {
+		setDrawn({ clearCount, picture });
+		if (drawn.clearCount !== clearCount) setGhost(isCalm ? null : drawn.picture);
+	}
+
+	// Rests at 1 while there is no ghost, so a ghost is drawn opaque on its first
+	// frame, before the fade below has started.
+	const ghostAlpha = useSharedValue(1);
+	const ghostLayer = useDerivedValue(() => {
+		const paint = Skia.Paint();
+		paint.setAlphaf(ghostAlpha.value);
+		return paint;
+	});
+
+	useLayoutEffect(() => {
+		if (ghost === null) {
+			ghostAlpha.value = 1;
+			return;
+		}
+		ghostAlpha.value = withTiming(0, { duration: CLEAR_FADE_MS }, (isFinished) => {
+			"worklet";
+			if (isFinished) scheduleOnRN(setGhost, null);
+		});
+	}, [ghost, ghostAlpha]);
+
+	return (
+		<Canvas pointerEvents="none" style={StyleSheet.absoluteFill}>
+			{ghost === null ? null : (
+				<Group layer={ghostLayer}>
+					<Picture picture={ghost} />
+				</Group>
+			)}
+			<Picture picture={picture} />
+			<Path
+				color={color ?? "transparent"}
+				path={livePath}
+				strokeCap="round"
+				strokeJoin="round"
+				strokeWidth={strokeWidth}
+				style="stroke"
+			/>
+		</Canvas>
+	);
+}
+SignatureInk.displayName = "DelacourUI.Signature.Ink";

package/src/components/signature/signature-pad.tsx

@@ -1,7 +1,7 @@
 import { type ReactElement, useCallback, useEffect, useMemo, useRef } from "react";
-import { type AccessibilityActionEvent, type LayoutChangeEvent, StyleSheet, View, type ViewProps } from "react-native";
+import { type AccessibilityActionEvent, type LayoutChangeEvent, View, type ViewProps } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { FadeOut, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
 import { useCalmMotion } from "../../hooks/use-calm-motion";
 import { useThemeColor } from "../../hooks/use-theme-color";
@@ -19,11 +19,7 @@ import {
 	type SignatureAction,
 	signatureVariants,
 } from "./signature.variants";
-import { SignatureLivePath } from "./signature-live-path";
-import { SignaturePath } from "./signature-path";
-
-/** A cleared signature's ink fades rather than vanishing, so the clear reads as an action. */
-const CLEAR_EXITING = FadeOut.duration(150);
+import { SignatureInk } from "./signature-ink";
 
 /** How long the placeholder takes to fade on first touch, in ms. */
 const PLACEHOLDER_FADE_MS = 150;
@@ -40,10 +36,11 @@ export type SignaturePadProps = Omit<ViewProps, "children" | "style"> & {
  * the whole accessibility surface.
  *
  * **Drawing happens on the UI thread.** One `Gesture.Pan()` samples the finger
- * into a shared value and the live stroke's path is an animated prop rebuilt
- * from it, so a finger moving across the pad renders nothing in React. When the
- * finger lifts, the stroke crosses to the JS thread once and joins the finished
- * paths — **one render per stroke, none per move**.
+ * into a shared value and the live stroke is a Skia path traced from it on the
+ * UI thread, so a finger moving across the pad renders nothing in React. When
+ * the finger lifts, the stroke crosses to the JS thread once and joins the
+ * finished strokes' picture — **one render per stroke, none per move**. Both
+ * draw on one Skia canvas; see `SignatureInk`.
  *
  * **The stroke starts in `onBegin`**, with `minDistance(0)`, so a tap that never
  * moves still leaves a dot and the pad wins the touch from an enclosing scroll
@@ -203,15 +200,14 @@ export function SignaturePad({ className, onLayout, ...props }: SignaturePadProp
 				<Animated.View className={slots.placeholder()} pointerEvents="none" style={placeholderStyle}>
 					<Text.Paragraph color="muted">{placeholder}</Text.Paragraph>
 				</Animated.View>
-				<Animated.View
-					exiting={isCalm ? undefined : CLEAR_EXITING}
-					key={clearCount}
-					pointerEvents="none"
-					style={StyleSheet.absoluteFill}
-				>
-					<SignaturePath color={ink} strokes={strokes} strokeWidth={strokeWidth} />
-				</Animated.View>
-				<SignatureLivePath color={ink} points={live} strokeWidth={strokeWidth} />
+				<SignatureInk
+					clearCount={clearCount}
+					color={ink}
+					isCalm={isCalm}
+					live={live}
+					strokes={strokes}
+					strokeWidth={strokeWidth}
+				/>
 			</View>
 		</GestureDetector>
 	);

package/src/components/signature/signature.context.tsx

@@ -36,8 +36,8 @@ export type SignatureContextValue = SignatureState & {
 	/** Played as a stroke begins. `false` silences every haptic the signature plays. */
 	haptic: false | HapticFeedback;
 	/**
-	 * Bumped by every clear. The pad keys its ink layer on it, so a clear unmounts
-	 * the old layer and lets it fade out rather than snapping the paths away.
+	 * Bumped by every clear. The pad's ink fades out the picture a clear replaced
+	 * when it changes, rather than snapping the strokes away.
 	 */
 	clearCount: number;
 	/** The typed-name escape hatch, when the caller offers one. */

package/src/components/signature/signature.skia.ts

@@ -0,0 +1,89 @@
+import {
+	ImageFormat,
+	PaintStyle,
+	type SkCanvas,
+	Skia,
+	type SkPath,
+	type SkPicture,
+	StrokeCap,
+	StrokeJoin,
+} from "react-native-skia";
+import { resolveSignatureExport, signaturePngSize, traceStroke } from "./signature.stroke";
+import type { SignaturePngOptions, SignatureStroke, SignatureValue } from "./signature.types";
+
+/**
+ * Every stroke's traced path, keyed by the stroke itself.
+ *
+ * Strokes are immutable — the history only ever appends, pops or replaces the
+ * array — so a stroke traced once never needs tracing again, and a commit costs
+ * one new path rather than a pass over the whole signature. A `WeakMap` lets a
+ * stroke undone and dropped take its path with it.
+ */
+const PATH_CACHE = new WeakMap<SignatureStroke, SkPath>();
+
+/** One stroke as a Skia path, traced by the same {@link traceStroke} the live stroke is. */
+export function signatureStrokePath(stroke: SignatureStroke): SkPath {
+	const cached = PATH_CACHE.get(stroke);
+	if (cached !== undefined) return cached;
+	const builder = Skia.PathBuilder.Make();
+	traceStroke(stroke, builder);
+	const path = builder.detach();
+	PATH_CACHE.set(stroke, path);
+	return path;
+}
+
+/** What {@link recordSignaturePicture} draws with. `color` is already resolved, or `undefined`. */
+type SignatureInkStyle = { color: string | undefined; strokeWidth: number };
+
+/**
+ * The finished strokes, recorded once per change of the strokes or the ink.
+ *
+ * A picture replays as one draw call, so the canvas holds one node however many
+ * strokes there are. Each stroke is its own `drawPath`, as each was its own SVG
+ * path before, so a translucent ink still darkens where two strokes cross. An ink
+ * that did not resolve draws nothing, as an SVG `stroke={undefined}` did.
+ */
+export function recordSignaturePicture(strokes: readonly SignatureStroke[], ink: SignatureInkStyle): SkPicture {
+	const recorder = Skia.PictureRecorder();
+	drawSignatureStrokes(recorder.beginRecording(), strokes, ink);
+	return recorder.finishRecordingAsPicture();
+}
+
+/** Each stroke as its own `drawPath`, with a round-capped pen. Nothing when the ink did not resolve. */
+function drawSignatureStrokes(canvas: SkCanvas, strokes: readonly SignatureStroke[], ink: SignatureInkStyle): void {
+	if (ink.color === undefined) return;
+	const paint = Skia.Paint();
+	paint.setAntiAlias(true);
+	paint.setStyle(PaintStyle.Stroke);
+	paint.setStrokeCap(StrokeCap.Round);
+	paint.setStrokeJoin(StrokeJoin.Round);
+	paint.setStrokeWidth(ink.strokeWidth);
+	paint.setColor(Skia.Color(ink.color));
+	for (const stroke of strokes) canvas.drawPath(signatureStrokePath(stroke), paint);
+}
+
+/**
+ * The signature as a base64 PNG, rendered off screen on a CPU surface.
+ *
+ * Framed and coloured by {@link resolveSignatureExport}, the function `toSVG`
+ * uses, so the PNG is the SVG rasterised: the same box, the same literal ink,
+ * the same background or none. Off screen rather than a snapshot of the pad, so
+ * the guideline, the placeholder and the pad's own fill never reach the file.
+ * The strokes are the cached paths the pad draws. Returns `""` when the frame
+ * has no pixels — an unmeasured pad.
+ */
+export function renderSignaturePng(value: SignatureValue, options: SignaturePngOptions & { scale: number }): string {
+	const { background, box, strokeColor, strokeWidth } = resolveSignatureExport(value, options);
+	const size = signaturePngSize(box, options.scale);
+	if (size === null) return "";
+
+	const surface = Skia.Surface.MakeRaster(size.width, size.height);
+	if (surface === null) return "";
+	const canvas = surface.getCanvas();
+	canvas.scale(size.width / box.width, size.height / box.height);
+	canvas.translate(-box.x, -box.y);
+	if (background !== null) canvas.drawColor(Skia.Color(background));
+	drawSignatureStrokes(canvas, value.strokes, { color: strokeColor, strokeWidth });
+	surface.flush();
+	return surface.makeImageSnapshot().encodeToBase64(ImageFormat.PNG);
+}

package/src/components/signature/signature.stroke.test.ts

@@ -10,16 +10,20 @@ import {
 	historyToValue,
 	isHistoryEmpty,
 	parseSignature,
+	resolveSignatureExport,
 	SIGNATURE_EXPORT_PADDING,
 	SIGNATURE_EXPORT_STROKE_COLOR,
 	type SignatureHistory,
+	type SignaturePathSink,
 	scaleValue,
 	serializeSignature,
 	shouldAddPoint,
+	signaturePngSize,
 	smoothStroke,
 	strokeCount,
 	strokesToPaths,
 	toSVG,
+	traceStroke,
 } from "./signature.stroke";
 import type { SignatureStroke, SignatureValue } from "./signature.types";
 
@@ -104,6 +108,83 @@ describe("strokesToPaths", () => {
 	});
 });
 
+/** A sink that writes what it is handed back out as path data, rounded the way `smoothStroke` rounds. */
+function recordingSink(): SignaturePathSink & { calls: string[]; d: () => string } {
+	const calls: string[] = [];
+	const n = (value: number): string => {
+		const rounded = Math.round(value * 100) / 100;
+		return String(rounded === 0 ? 0 : rounded);
+	};
+	return {
+		calls,
+		d: () => calls.join(" "),
+		lineTo: (x, y) => calls.push(`L${n(x)} ${n(y)}`),
+		moveTo: (x, y) => calls.push(`M${n(x)} ${n(y)}`),
+		quadTo: (x1, y1, x2, y2) => calls.push(`Q${n(x1)} ${n(y1)} ${n(x2)} ${n(y2)}`),
+	};
+}
+
+describe("traceStroke", () => {
+	test("no points draws nothing", () => {
+		const sink = recordingSink();
+		traceStroke([], sink);
+		expect(sink.calls).toEqual([]);
+	});
+
+	test("one point is a zero-length segment, which a round cap draws as a dot", () => {
+		const sink = recordingSink();
+		traceStroke([{ x: 4, y: 6 }], sink);
+		expect(sink.calls).toEqual(["M4 6", "L4 6"]);
+	});
+
+	test("two points are a line", () => {
+		const sink = recordingSink();
+		traceStroke(LINE, sink);
+		expect(sink.calls).toEqual(["M0 0", "L10 10"]);
+	});
+
+	test("three or more points are midpoint quadratics ending on the last point", () => {
+		const sink = recordingSink();
+		traceStroke(CURVE, sink);
+		expect(sink.calls).toEqual(["M0 0", "Q10 0 15 5", "Q20 10 25 10", "L30 10"]);
+	});
+
+	test("coordinates are passed unrounded", () => {
+		const calls: number[][] = [];
+		traceStroke([{ x: 1.23456, y: 2.34567 }], {
+			lineTo: (x, y) => calls.push([x, y]),
+			moveTo: (x, y) => calls.push([x, y]),
+			quadTo: () => undefined,
+		});
+		expect(calls).toEqual([
+			[1.23456, 2.34567],
+			[1.23456, 2.34567],
+		]);
+	});
+
+	test("a non-finite coordinate is traced as zero, as the string form writes it", () => {
+		const sink = recordingSink();
+		traceStroke([{ x: Number.NaN, y: Number.POSITIVE_INFINITY }], sink);
+		expect(sink.calls).toEqual(["M0 0", "L0 0"]);
+	});
+
+	const SAMPLES: readonly SignatureStroke[] = [
+		[],
+		[{ x: 0.004, y: -0.004 }],
+		LINE,
+		CURVE,
+		Array.from({ length: 40 }, (_, index) => ({ x: index * 3.137, y: Math.sin(index / 3) * 21.5 + 40 })),
+	];
+
+	for (const [index, stroke] of SAMPLES.entries()) {
+		test(`draws exactly what smoothStroke writes (sample ${index})`, () => {
+			const sink = recordingSink();
+			traceStroke(stroke, sink);
+			expect(sink.d()).toBe(smoothStroke(stroke));
+		});
+	}
+});
+
 describe("the smoother is a worklet", () => {
 	const source = readFileSync(join(import.meta.dirname, "signature.stroke.ts"), "utf-8");
 
@@ -111,7 +192,7 @@ describe("the smoother is a worklet", () => {
 		expect(source).not.toMatch(/from "react-native/);
 	});
 
-	for (const name of ["shouldAddPoint", "smoothStroke", "formatCoordinate"]) {
+	for (const name of ["shouldAddPoint", "smoothStroke", "formatCoordinate", "traceStroke"]) {
 		test(`${name} carries the worklet directive`, () => {
 			const body = source.slice(source.indexOf(`function ${name}(`));
 			expect(body.slice(0, body.indexOf("\n}"))).toContain('"worklet";');
@@ -352,6 +433,66 @@ describe("toSVG", () => {
 	});
 });
 
+describe("resolveSignatureExport", () => {
+	test("the default is the whole pad, black ink, the default width, no background", () => {
+		expect(resolveSignatureExport(VALUE)).toEqual({
+			background: null,
+			box: { x: 0, y: 0, width: 200, height: 100 },
+			strokeColor: SIGNATURE_EXPORT_STROKE_COLOR,
+			strokeWidth: 2.5,
+		});
+	});
+
+	test("literal colours and the width pass through", () => {
+		const resolved = resolveSignatureExport(VALUE, { background: "#fff", strokeColor: "#123456", strokeWidth: 4 });
+		expect(resolved.background).toBe("#fff");
+		expect(resolved.strokeColor).toBe("#123456");
+		expect(resolved.strokeWidth).toBe(4);
+	});
+
+	test("a token name or transparent is no colour", () => {
+		const resolved = resolveSignatureExport(VALUE, { background: "transparent", strokeColor: "foreground" });
+		expect(resolved.background).toBeNull();
+		expect(resolved.strokeColor).toBe(SIGNATURE_EXPORT_STROKE_COLOR);
+	});
+
+	test("tight crops to the ink plus padding", () => {
+		const value: SignatureValue = { width: 200, height: 100, strokes: [CURVE] };
+		expect(resolveSignatureExport(value, { padding: 0, strokeWidth: 2, viewBox: "tight" }).box).toEqual({
+			x: -1,
+			y: -1,
+			width: 32,
+			height: 12,
+		});
+		const pad = SIGNATURE_EXPORT_PADDING;
+		expect(resolveSignatureExport(value, { strokeWidth: 2, viewBox: "tight" }).box).toEqual({
+			x: -1 - pad,
+			y: -1 - pad,
+			width: 32 + pad * 2,
+			height: 12 + pad * 2,
+		});
+	});
+
+	test("tight with no ink falls back to the pad", () => {
+		const resolved = resolveSignatureExport({ width: 200, height: 100, strokes: [] }, { viewBox: "tight" });
+		expect(resolved.box).toEqual({ x: 0, y: 0, width: 200, height: 100 });
+	});
+});
+
+describe("signaturePngSize", () => {
+	test("points times scale, rounded to whole pixels", () => {
+		expect(signaturePngSize({ x: 0, y: 0, width: 200, height: 100 }, 3)).toEqual({ width: 600, height: 300 });
+		expect(signaturePngSize({ x: -9, y: -9, width: 50.4, height: 10.2 }, 2)).toEqual({ width: 101, height: 20 });
+	});
+
+	test("an unmeasured box or a bad scale has no pixels", () => {
+		expect(signaturePngSize({ x: 0, y: 0, width: 0, height: 100 }, 3)).toBeNull();
+		expect(signaturePngSize({ x: 0, y: 0, width: 200, height: 100 }, 0)).toBeNull();
+		expect(signaturePngSize({ x: 0, y: 0, width: 200, height: 100 }, Number.NaN)).toBeNull();
+		expect(signaturePngSize({ x: 0, y: 0, width: 0.1, height: 0.1 }, 1)).toBeNull();
+	});
+});
+
 describe("scaleValue", () => {
 	test("the same size is the same value", () => {
 		expect(scaleValue(VALUE, 200, 100)).toBe(VALUE);

package/src/components/signature/signature.stroke.ts

@@ -93,6 +93,56 @@ export function smoothStroke(points: SignatureStroke): string {
 	return `${path}${end}`;
 }
 
+/**
+ * What {@link traceStroke} draws into — the three path verbs it uses. A Skia
+ * `SkPathBuilder` is one; so is anything that records the calls.
+ */
+export type SignaturePathSink = {
+	moveTo: (x: number, y: number) => unknown;
+	lineTo: (x: number, y: number) => unknown;
+	quadTo: (x1: number, y1: number, x2: number, y2: number) => unknown;
+};
+
+/**
+ * One stroke drawn straight into a path, verb by verb — the curve
+ * {@link smoothStroke} writes, without a string to build and parse back.
+ *
+ * Coordinates go in unrounded, so the live stroke and its committed copy, both
+ * traced here, match to the bit; a non-finite one is traced as zero, as the
+ * string form writes it. Self-contained, with no helper of this module's: a
+ * module-scope function called from a worklet can be missing from its closure on
+ * the UI thread.
+ *
+ * A worklet: the live stroke calls this on the UI thread on every move.
+ */
+export function traceStroke(points: SignatureStroke, sink: SignaturePathSink): void {
+	"worklet";
+	const count = points.length;
+	if (count === 0) return;
+
+	const first = points[0] as SignaturePoint;
+	const firstX = Number.isFinite(first.x) ? first.x : 0;
+	const firstY = Number.isFinite(first.y) ? first.y : 0;
+	sink.moveTo(firstX, firstY);
+	if (count === 1) {
+		sink.lineTo(firstX, firstY);
+		return;
+	}
+
+	for (let index = 1; index < count - 1; index++) {
+		const control = points[index] as SignaturePoint;
+		const next = points[index + 1] as SignaturePoint;
+		const controlX = Number.isFinite(control.x) ? control.x : 0;
+		const controlY = Number.isFinite(control.y) ? control.y : 0;
+		const midX = (control.x + next.x) / 2;
+		const midY = (control.y + next.y) / 2;
+		sink.quadTo(controlX, controlY, Number.isFinite(midX) ? midX : 0, Number.isFinite(midY) ? midY : 0);
+	}
+
+	const last = points[count - 1] as SignaturePoint;
+	sink.lineTo(Number.isFinite(last.x) ? last.x : 0, Number.isFinite(last.y) ? last.y : 0);
+}
+
 /** One smoothed path per stroke, in order. */
 export function strokesToPaths(strokes: readonly SignatureStroke[]): readonly string[] {
 	return strokes.map((stroke) => smoothStroke(stroke));
@@ -300,19 +350,25 @@ function formatNumber(value: number): string {
 	return formatCoordinate(value);
 }
 
+/** What an export draws, with every option resolved: the same for `toSVG` and `toPNG`. */
+export type SignatureExport = {
+	/** The frame, in pad coordinates. */
+	box: SignatureBounds;
+	strokeColor: string;
+	strokeWidth: number;
+	/** A literal colour, or `null` for none. */
+	background: string | null;
+};
+
 /**
- * The signature as a standalone SVG document.
+ * An export's options resolved against a value.
  *
- * One `<path>` per stroke, unfilled, with round caps and joins — the same
- * geometry the pad draws, so the file opens looking like what was signed.
- * `viewBox: "pad"` keeps the whole pad; `"tight"` crops to the ink plus
- * `padding`, and falls back to the pad when there is no ink to crop to.
- *
- * Colours must be literal. A token name is ignored — the ink falls back to
- * {@link SIGNATURE_EXPORT_STROKE_COLOR} and the background to none — because a
- * file has no theme to resolve one against. Every attribute is escaped.
+ * One function so the SVG and the PNG frame and colour a signature identically:
+ * `viewBox: "pad"` keeps the whole pad, `"tight"` crops to the ink plus
+ * `padding` and falls back to the pad with no ink; a token name or
+ * `transparent` is no colour.
  */
-export function toSVG(value: SignatureValue, options: SignatureExportOptions = {}): string {
+export function resolveSignatureExport(value: SignatureValue, options: SignatureExportOptions = {}): SignatureExport {
 	const strokeWidth = options.strokeWidth ?? SIGNATURE_STROKE_WIDTH;
 	const strokeColor =
 		options.strokeColor !== undefined && isLiteralColor(options.strokeColor)
@@ -331,6 +387,36 @@ export function toSVG(value: SignatureValue, options: SignatureExportOptions = {
 			}
 		: { x: 0, y: 0, width: value.width, height: value.height };
 
+	return { background, box, strokeColor, strokeWidth };
+}
+
+/**
+ * A PNG's size in whole pixels: the box times `scale`, rounded. `null` when that
+ * is no pixels at all — an unmeasured pad, or a scale that is not positive.
+ */
+export function signaturePngSize(box: SignatureBounds, scale: number): { width: number; height: number } | null {
+	if (!(Number.isFinite(scale) && scale > 0)) return null;
+	const width = Math.round(box.width * scale);
+	const height = Math.round(box.height * scale);
+	if (!(width > 0 && height > 0)) return null;
+	return { width, height };
+}
+
+/**
+ * The signature as a standalone SVG document.
+ *
+ * One `<path>` per stroke, unfilled, with round caps and joins — the same
+ * geometry the pad draws, so the file opens looking like what was signed.
+ * `viewBox: "pad"` keeps the whole pad; `"tight"` crops to the ink plus
+ * `padding`, and falls back to the pad when there is no ink to crop to.
+ *
+ * Colours must be literal. A token name is ignored — the ink falls back to
+ * {@link SIGNATURE_EXPORT_STROKE_COLOR} and the background to none — because a
+ * file has no theme to resolve one against. Every attribute is escaped.
+ */
+export function toSVG(value: SignatureValue, options: SignatureExportOptions = {}): string {
+	const { background, box, strokeColor, strokeWidth } = resolveSignatureExport(value, options);
+
 	const x = formatNumber(box.x);
 	const y = formatNumber(box.y);
 	const width = formatNumber(box.width);

package/src/components/signature/signature.tsx

@@ -9,10 +9,11 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { AccessibilityInfo, View, type ViewProps } from "react-native";
+import { AccessibilityInfo, PixelRatio, View, type ViewProps } from "react-native";
 import { useFieldContext } from "../field/field.context";
 import { type HapticFeedback, playHaptic } from "../pressable";
 import { type SignatureContextValue, SignatureProvider } from "./signature.context";
+import { renderSignaturePng } from "./signature.skia";
 import {
 	canRedo,
 	canUndo,
@@ -88,7 +89,7 @@ export type SignatureProps = Omit<ViewProps, "children" | "style"> & {
 	haptic?: false | HapticFeedback;
 	/** Offers a typed-name route for anyone who cannot draw; renders `Signature.Alternative`. */
 	onRequestAlternative?: () => void;
-	/** `undo`, `redo`, `clear`, `isEmpty`, `strokeCount`, `value`, `toSVG()` and `toPaths()`. */
+	/** `undo`, `redo`, `clear`, `isEmpty`, `strokeCount`, `value`, `toSVG()`, `toPNG()` and `toPaths()`. */
 	ref?: Ref<SignatureHandle>;
 	className?: string;
 	/** Classes for the default pad, when no children are given. */
@@ -231,6 +232,13 @@ function SignatureRoot({
 					{ strokeWidth, ...options }
 				);
 			},
+			toPNG: (options) => {
+				const current = historyRef.current;
+				return renderSignaturePng(
+					{ height: current.height, strokes: current.strokes, width: current.width },
+					{ strokeWidth, ...options, scale: options?.scale ?? PixelRatio.get() }
+				);
+			},
 			toPaths: () => strokesToPaths(historyRef.current.strokes),
 		}),
 		[clear, redo, strokeWidth, undo]
@@ -330,8 +338,8 @@ function SignatureRoot({
  *
  * **The value is plain JSON** — `{ width, height, strokes }` — so it can be stored
  * and handed back as `value` or `defaultValue` later. A pad rendered at another
- * size re-fits it, keeping its aspect. The ref adds `toSVG()` for a file and
- * `toPaths()` for drawing it elsewhere.
+ * size re-fits it, keeping its aspect. The ref adds `toSVG()` and `toPNG()` for a
+ * file, framed and coloured alike, and `toPaths()` for drawing it elsewhere.
  *
  * **Offer `onRequestAlternative`.** A signature is a path a finger has to trace,
  * and no accessibility label makes that possible for everyone; the prop renders
@@ -361,6 +369,7 @@ function SignatureRoot({
  *
  * @example
  * const svg = pad.current?.toSVG({ viewBox: "tight", background: "#ffffff" });
+ * const png = pad.current?.toPNG({ viewBox: "tight", background: "#ffffff" }); // base64
  */
 export const Signature = Object.assign(SignatureRoot, {
 	/** The drawing surface — the gesture, the ink, the guideline and the accessibility surface. */

package/src/components/signature/signature.types.ts

@@ -46,6 +46,12 @@ export type SignatureExportOptions = {
 	padding?: number;
 };
 
+/** Options for `toPNG()`: the SVG's, plus the pixel density. */
+export type SignaturePngOptions = SignatureExportOptions & {
+	/** Pixels per point. Default: the screen's pixel ratio. */
+	scale?: number;
+};
+
 /** What a signature's ref is handed. */
 export type SignatureHandle = {
 	/** Removes the last stroke. A no-op with nothing to undo. */
@@ -60,6 +66,12 @@ export type SignatureHandle = {
 	readonly value: SignatureValue | null;
 	/** The signature as a standalone SVG document. Valid, if blank, when empty. */
 	toSVG: (options?: SignatureExportOptions) => string;
+	/**
+	 * The signature as a base64-encoded PNG (no `data:` prefix), framed and
+	 * coloured as `toSVG` with the same options would be, at `scale` pixels per
+	 * point. Transparent unless `background` is set. `""` before the pad is measured.
+	 */
+	toPNG: (options?: SignaturePngOptions) => string;
 	/** One smoothed SVG path `d` per stroke, in pad coordinates. */
 	toPaths: () => readonly string[];
 };

package/src/components/sketch/AGENTS.md

@@ -136,10 +136,6 @@ DisplayNames: `DelacourUI.Sketch`, `.Sketch.Canvas`, `.Toolbar`, `.Tool`,
 - **`toSVG()` is vector and `toPNG()` is raster; both hold the marks and the
   background only.** Neither includes what `Sketch.Canvas` children paint under
   the marks.
-- **The canvas imports `lib/skia-native-id` for its effect.** After a JS reload Skia reused the
-  old runtime's canvas ids, which its native registry still held as torn down, so a sketch came up
-  blank until something re-rendered it. The import moves this runtime's ids to a fresh range
-  before the canvas asks for one.
 - **`toPNG()` renders off screen**, on a CPU surface (`Skia.Surface.MakeRaster`) sized
   to the canvas times `scale` (default the screen's pixel ratio), by the same
   `drawSketchItems` the picture records — not a snapshot of the visible canvas,

package/src/components/sketch/sketch-canvas.tsx

@@ -4,7 +4,6 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { Canvas, Group, Path, Picture, Skia } from "react-native-skia";
 import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
-import "../../lib/skia-native-id";
 import { useSketchPart } from "./sketch.context";
 import {
 	appendSketchSegment,

package/src/components/tour/tour-mask.tsx

@@ -2,7 +2,6 @@ import type { ReactElement } from "react";
 import { StyleSheet } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { Canvas, Group, Rect, RoundedRect, Skia } from "react-native-skia";
-import "../../lib/skia-native-id";
 import { useThemeColor } from "../../hooks/use-theme-color";
 import { resolveMaskHole, TOUR_SCRIM_TOKEN, type TourSize } from "./tour.variants";
 

package/src/components/signature/signature-live-path.tsx

@@ -1,41 +0,0 @@
-import type { ReactElement } from "react";
-import { StyleSheet } from "react-native";
-import Animated, { type SharedValue, useAnimatedProps } from "react-native-reanimated";
-import Svg, { Path } from "react-native-svg";
-import { smoothStroke } from "./signature.stroke";
-import type { SignaturePoint } from "./signature.types";
-
-/** Created once at module scope: per render it would mint a new component type and remount the path. */
-const AnimatedPath = Animated.createAnimatedComponent(Path);
-
-export type SignatureLivePathProps = {
-	/** The stroke under the finger, written by the pad's gesture on the UI thread. */
-	points: SharedValue<SignaturePoint[]>;
-	color: string | undefined;
-	strokeWidth: number;
-};
-
-/**
- * The stroke being drawn, rebuilt on the UI thread on every move.
- *
- * Internal. Its `d` is an animated prop computed by the same `smoothStroke` the
- * finished paths use, so React never renders while a finger moves and the
- * stroke does not shift by a hair when it is committed.
- */
-export function SignatureLivePath({ points, color, strokeWidth }: SignatureLivePathProps): ReactElement {
-	const animatedProps = useAnimatedProps(() => ({ d: smoothStroke(points.value) }));
-
-	return (
-		<Svg height="100%" pointerEvents="none" style={StyleSheet.absoluteFill} width="100%">
-			<AnimatedPath
-				animatedProps={animatedProps}
-				fill="none"
-				stroke={color}
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth={strokeWidth}
-			/>
-		</Svg>
-	);
-}
-SignatureLivePath.displayName = "DelacourUI.Signature.LivePath";

package/src/components/signature/signature-path.tsx

@@ -1,56 +0,0 @@
-import { type ReactElement, useMemo } from "react";
-import { StyleSheet } from "react-native";
-import Svg, { Path } from "react-native-svg";
-import { smoothStroke } from "./signature.stroke";
-import type { SignatureStroke } from "./signature.types";
-
-export type SignaturePathProps = {
-	strokes: readonly SignatureStroke[];
-	color: string | undefined;
-	strokeWidth: number;
-};
-
-/**
- * Every stroke's smoothed path, keyed by the stroke itself.
- *
- * Strokes are immutable — the history only ever appends, pops or replaces the
- * array — so a stroke that has been smoothed once never needs smoothing again,
- * and a commit costs one new path rather than a pass over the whole signature.
- * A `WeakMap` lets a stroke undone and dropped take its path with it.
- */
-const PATH_CACHE = new WeakMap<SignatureStroke, string>();
-
-function pathOf(stroke: SignatureStroke): string {
-	const cached = PATH_CACHE.get(stroke);
-	if (cached !== undefined) return cached;
-	const path = smoothStroke(stroke);
-	PATH_CACHE.set(stroke, path);
-	return path;
-}
-
-/**
- * The finished strokes, as static SVG paths filling the pad.
- *
- * Internal. Re-renders once per committed stroke and never while a finger moves
- * — the stroke under the finger is {@link SignatureLivePath}'s.
- */
-export function SignaturePath({ strokes, color, strokeWidth }: SignaturePathProps): ReactElement {
-	const paths = useMemo(() => strokes.map(pathOf), [strokes]);
-
-	return (
-		<Svg height="100%" pointerEvents="none" style={StyleSheet.absoluteFill} width="100%">
-			{paths.map((d, index) => (
-				<Path
-					d={d}
-					fill="none"
-					key={index}
-					stroke={color}
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					strokeWidth={strokeWidth}
-				/>
-			))}
-		</Svg>
-	);
-}
-SignaturePath.displayName = "DelacourUI.Signature.Path";

package/src/lib/skia-native-id.test.ts

@@ -1,29 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { resolveSkiaNativeId, SKIA_NATIVE_ID_FLOOR } from "./skia-native-id";
-
-describe("resolveSkiaNativeId", () => {
-	test("moves a fresh runtime's counter off Skia's starting id", () => {
-		expect(resolveSkiaNativeId(1000, 0)).toBe(SKIA_NATIVE_ID_FLOOR);
-		expect(resolveSkiaNativeId(1000, 0.5)).toBeGreaterThan(SKIA_NATIVE_ID_FLOOR);
-	});
-
-	test("keeps the ids a runtime already handed out behind the new counter", () => {
-		expect(resolveSkiaNativeId(1003, 0)).toBe(SKIA_NATIVE_ID_FLOOR + 3);
-	});
-
-	test("leaves a counter that is already seeded alone, so two copies seed once", () => {
-		const seeded = resolveSkiaNativeId(1000, 0.25);
-		expect(resolveSkiaNativeId(seeded, 0.75)).toBe(seeded);
-		expect(resolveSkiaNativeId(seeded + 12, 0.75)).toBe(seeded + 12);
-	});
-
-	test("spreads runtimes far enough apart that one's ids never reach the next's", () => {
-		const a = resolveSkiaNativeId(1000, 0.1);
-		const b = resolveSkiaNativeId(1000, 0.1 + 1 / 100_000);
-		expect(b - a).toBeGreaterThanOrEqual(10_000);
-	});
-
-	test("stays inside a signed 32-bit int, which Skia's native side casts ids to", () => {
-		expect(resolveSkiaNativeId(1000, 0.999_999_999)).toBeLessThan(2 ** 31 - 1_000_000);
-	});
-});

package/src/lib/skia-native-id.ts

@@ -1,42 +0,0 @@
-import { SkiaViewNativeId } from "react-native-skia/src/views/SkiaViewNativeId";
-
-/** Skia's counter starts at 1000; anything at or above this has been seeded. */
-export const SKIA_NATIVE_ID_FLOOR = 10_000;
-
-/** Ids a runtime may hand out before it reaches the next runtime's range. */
-const SKIA_NATIVE_ID_SPAN = 10_000;
-
-/** How many ranges a runtime can land in — 1e9 at the top, inside a signed 32-bit int. */
-const SKIA_NATIVE_ID_SLOTS = 100_000;
-
-/**
- * Where a JS runtime's Skia canvas ids should start, given the counter as it stands and a number
- * in `[0, 1)`. A counter already at or above the floor is returned as it is, so every copy of this
- * module in an app can run it and only the first moves anything.
- */
-export function resolveSkiaNativeId(current: number, random: number): number {
-	if (current >= SKIA_NATIVE_ID_FLOOR) return current;
-	const slot = Math.floor(random * SKIA_NATIVE_ID_SLOTS);
-	return SKIA_NATIVE_ID_FLOOR + slot * SKIA_NATIVE_ID_SPAN + (current - 1000);
-}
-
-/**
- * Starts this runtime's canvas ids somewhere the last runtime's never were.
- *
- * **A canvas mounted after a JS reload drew nothing until it re-rendered.** Skia numbers canvases
- * from a module-level counter that restarts at 1000 in every runtime, while its native
- * `ViewRegistry` is a process-wide singleton that outlives the reload. The old runtime's views are
- * torn down after the new one has started, and each leaves a tombstone for its id; the new
- * runtime's first canvases reuse those ids, their pictures are handed to a throwaway entry, and the
- * view registers to an empty one. Nothing draws until the next React commit sends the picture again.
- * A dev-menu reload hits it, and so does `Updates.reloadAsync` after an OTA update.
- * Reported upstream as wcandillon/react-native-skia#4312; drop this once a release fixes it.
- *
- * Evaluated once per runtime, on import, before any canvas has asked for an id. `SkiaViewNativeId`
- * is not exported from the package root, so this reaches it by path — the same file Metro resolves
- * `Canvas` from through the package's `react-native` field.
- *
- * `@delacour/react-native-charts` keeps an identical copy in `src/skia/native-id.ts` for its own
- * canvases, since `Chart` draws through it; change both together.
- */
-SkiaViewNativeId.current = resolveSkiaNativeId(SkiaViewNativeId.current, Math.random());