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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261021212209",
+	"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.20261021212209",
+		"@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

@@ -53,10 +53,6 @@ standalone SVG document, or as a PNG.
   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 canvas imports `lib/skia-native-id` for its effect**, as `Sketch.Canvas`
-  does. After a JS reload Skia reused the old runtime's canvas ids, which its
-  native registry still held as torn down, so the pad came up blank until a
-  stroke re-rendered it.
 - **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

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

@@ -3,7 +3,6 @@ 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 "../../lib/skia-native-id";
 import { recordSignaturePicture } from "./signature.skia";
 import { traceStroke } from "./signature.stroke";
 import type { SignaturePoint, SignatureStroke } from "./signature.types";

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