@delacour/react-native-ui 0.4.1 → 0.5.0-alpha.20261021201504

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.4.1",
+	"version": "0.5.0-alpha.20261021201504",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -162,6 +162,7 @@
 		"./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",
@@ -183,9 +184,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.1.0",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261021201504",
 		"@legendapp/list": ">=3.3",
-		"@shopify/react-native-skia": ">=2",
+		"react-native-skia": ">=3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",
 		"react": ">=19",
@@ -218,7 +219,7 @@
 		"@legendapp/list": {
 			"optional": true
 		},
-		"@shopify/react-native-skia": {
+		"react-native-skia": {
 			"optional": true
 		},
 		"expo-router": {

package/src/components/chart/chart-tooltip-x.tsx

@@ -1,8 +1,8 @@
 import type { ChartBounds, ChartOrientation, ChartScrubState, ChartStep } from "@delacour/react-native-charts";
 import { ChartCursorLine, useChartContext as useEngineChart } from "@delacour/react-native-charts";
-import { Rect } from "@shopify/react-native-skia";
 import type { ReactElement } from "react";
 import { useDerivedValue } from "react-native-reanimated";
+import { Rect } from "react-native-skia";
 import { useChart } from "./chart.context";
 
 export type ChartTooltipXProps = {

package/src/components/sketch/AGENTS.md

@@ -2,7 +2,7 @@
 
 A freehand drawing surface with its tools around it: a pen, eight shapes, an
 eraser, colour swatches, a stroke width and undo — delivered as SVG or PNG.
-Drawn with Skia (`@shopify/react-native-skia`, an optional peer), driven by one
+Drawn with Skia (`react-native-skia`, an optional peer), driven by one
 Gesture Handler pan on the UI thread.
 
 `import { Sketch } from "@delacour/react-native-ui/sketch";`
@@ -136,7 +136,11 @@ 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.
-- **`toPNG()` renders off screen**, on a CPU surface (`Skia.Surface.Make`) sized
+- **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,
   which would need the view mounted and would capture nothing of the background

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

@@ -1,9 +1,10 @@
-import { Canvas, Group, Path, Picture, Skia } from "@shopify/react-native-skia";
 import { type ReactElement, type ReactNode, useCallback, useEffect, useMemo } from "react";
 import { type AccessibilityActionEvent, type LayoutChangeEvent, StyleSheet, View, type ViewProps } from "react-native";
 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/sketch/sketch.paths.test.ts

@@ -352,7 +352,7 @@ describe("the drawing surface is Skia", () => {
 	test("the canvas and the renderer import Skia and not react-native-svg", () => {
 		for (const file of ["sketch-canvas.tsx", "sketch.skia.ts"]) {
 			const source = readFileSync(join(import.meta.dirname, file), "utf-8");
-			expect(source).toContain('from "@shopify/react-native-skia"');
+			expect(source).toContain('from "react-native-skia"');
 			expect(source).not.toContain("react-native-svg");
 		}
 	});

package/src/components/sketch/sketch.skia.ts

@@ -7,7 +7,7 @@ import {
 	type SkPicture,
 	StrokeCap,
 	StrokeJoin,
-} from "@shopify/react-native-skia";
+} from "react-native-skia";
 import type { SketchItem } from "./sketch.paths";
 
 /** What `drawSketchItems` paints into: the canvas size in points. */
@@ -77,7 +77,7 @@ export function renderSketchPng(items: readonly SketchItem[], target: SketchPngT
 	const pixelHeight = Math.round(target.height * target.scale);
 	if (pixelWidth <= 0 || pixelHeight <= 0) return "";
 
-	const surface = Skia.Surface.Make(pixelWidth, pixelHeight);
+	const surface = Skia.Surface.MakeRaster(pixelWidth, pixelHeight);
 	if (surface === null) return "";
 	const canvas = surface.getCanvas();
 	canvas.scale(target.scale, target.scale);

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,42 @@
+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());