@delacour/react-native-charts 0.1.0 → 0.2.0-alpha.20261021201504

package/README.md

@@ -17,10 +17,10 @@ Docs: [ui.delacour.co.nz/docs/charts](https://ui.delacour.co.nz/docs/charts).
 
 ```bash
 bun add @delacour/react-native-charts
-bunx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets
+bunx expo install react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets
 ```
 
-Peers: `@shopify/react-native-skia`, `react-native-reanimated`,
+Peers: `react-native-skia`, `react-native-reanimated`,
 `react-native-gesture-handler`, `react-native-worklets`, `react`,
 `react-native`. The native four go through `expo install`, so the SDK picks
 versions it can build; `react` and `react-native` are already in any app.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-charts",
-	"version": "0.1.0",
+	"version": "0.2.0-alpha.20261021201504",
 	"description": "Headless Skia charting primitives for React Native \u2014 no tokens, no className",
 	"type": "module",
 	"license": "MIT",
@@ -43,7 +43,7 @@
 		"d3-shape": "^3.2.0"
 	},
 	"peerDependencies": {
-		"@shopify/react-native-skia": ">=2.6",
+		"react-native-skia": ">=3",
 		"react": ">=19",
 		"react-native": ">=0.81",
 		"react-native-gesture-handler": ">=2.28",
@@ -53,9 +53,9 @@
 	"devDependencies": {
 		"@delacour/biome-config": "workspace:*",
 		"@delacour/tsconfig": "workspace:*",
-		"@shopify/react-native-skia": "catalog:",
+		"react-native-skia": "catalog:",
 		"@types/bun": "^1.3.8",
 		"@types/react": "catalog:",
-		"typescript": "^5.9.3"
+		"typescript": "~6.0.3"
 	}
 }

package/src/animation/use-animated-path.ts

@@ -1,6 +1,6 @@
-import { type SkPath, usePathInterpolation } from "@shopify/react-native-skia";
 import { useEffect, useRef, useState } from "react";
 import { type SharedValue, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { type SkPath, usePathInterpolation } from "react-native-skia";
 import { type ChartAnimation, DEFAULT_CHART_ANIMATION } from "./animation.types";
 
 export type AnimatedPathOptions = {

package/src/cartesian/axes/chart-x-axis.tsx

@@ -1,5 +1,5 @@
-import { Text } from "@shopify/react-native-skia";
 import type { ReactElement } from "react";
+import { Text } from "react-native-skia";
 import { anchorX, anchorY } from "../../core/text/label-anchor";
 import { measureLabelWidth } from "../../skia/font";
 import { useChartContext } from "../cartesian-chart.context";

package/src/cartesian/axes/chart-y-axis.tsx

@@ -1,5 +1,5 @@
-import { Text } from "@shopify/react-native-skia";
 import type { ReactElement } from "react";
+import { Text } from "react-native-skia";
 import { anchorX, anchorY } from "../../core/text/label-anchor";
 import { measureLabelWidth } from "../../skia/font";
 import { useChartContext } from "../cartesian-chart.context";

package/src/cartesian/cartesian-chart.tsx

@@ -1,7 +1,8 @@
-import { Canvas } from "@shopify/react-native-skia";
 import { type ReactElement, useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
+import { Canvas } from "react-native-skia";
+import "../skia/native-id";
 import type { ChartRow } from "../core/chart.types";
 import { buildLinePath } from "../core/curve/build-line";
 import { toCurvePath } from "../core/interaction/path-segments";

package/src/cartesian/cartesian-chart.types.ts

@@ -1,5 +1,5 @@
-import type { SkFont } from "@shopify/react-native-skia";
 import type { ReactNode } from "react";
+import type { SkFont } from "react-native-skia";
 import type { ChartAnimation } from "../animation/animation.types";
 import type { ChartBounds, ChartOrientation, ChartPoint, ChartRow, ChartSegment, ChartSize } from "../core/chart.types";
 import type { CurveType } from "../core/curve/curves";

package/src/cartesian/hooks/use-chart-model.ts

@@ -1,5 +1,5 @@
-import type { SkFont } from "@shopify/react-native-skia";
 import { useMemo } from "react";
+import type { SkFont } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { DEFAULT_CHART_ANIMATION } from "../../animation/animation.types";
 import type { ChartRow, ChartSize } from "../../core/chart.types";

package/src/cartesian/marks/chart-area.tsx

@@ -1,5 +1,5 @@
-import { LinearGradient, Path, vec } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo } from "react";
+import { LinearGradient, Path, vec } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import type { ChartPoint, ChartSegment } from "../../core/chart.types";

package/src/cartesian/marks/chart-bar-group.tsx

@@ -1,5 +1,5 @@
-import { Path } from "@shopify/react-native-skia";
 import { type ReactElement, useEffect, useMemo } from "react";
+import { Path } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import type { ChartOrientation, ChartPoint } from "../../core/chart.types";

package/src/cartesian/marks/chart-bar-stack.tsx

@@ -1,5 +1,5 @@
-import { Path } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo } from "react";
+import { Path } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import type { ChartOrientation, ChartSegment } from "../../core/chart.types";

package/src/cartesian/marks/chart-bar.tsx

@@ -1,5 +1,5 @@
-import { Path, type SkFont, Text } from "@shopify/react-native-skia";
 import { type ReactElement, type ReactNode, useEffect, useMemo } from "react";
+import { Path, type SkFont, Text } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import type { ChartBounds, ChartOrientation, ChartPoint } from "../../core/chart.types";

package/src/cartesian/marks/chart-candlestick.tsx

@@ -1,5 +1,5 @@
-import { Path, type SkPath } from "@shopify/react-native-skia";
 import { type ReactElement, useEffect, useMemo } from "react";
+import { Path, type SkPath } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import { resolveBand } from "../../core/geometry/band";

package/src/cartesian/marks/chart-cursor.tsx

@@ -1,6 +1,6 @@
-import { Circle, DashPathEffect, Line } from "@shopify/react-native-skia";
 import type { ReactElement } from "react";
 import { useDerivedValue } from "react-native-reanimated";
+import { Circle, DashPathEffect, Line } from "react-native-skia";
 import type { ChartBounds } from "../../core/chart.types";
 import type { ChartScrubSeriesState, ChartScrubState } from "../../gesture/gesture.types";
 import { useChartContext } from "../cartesian-chart.context";

package/src/cartesian/marks/chart-grid.tsx

@@ -1,5 +1,5 @@
-import { Path, Skia } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo } from "react";
+import { Path, Skia } from "react-native-skia";
 import { type GridAxis, gridSegments } from "../../core/geometry/grid-lines";
 import { useChartContext } from "../cartesian-chart.context";
 

package/src/cartesian/marks/chart-line.tsx

@@ -1,5 +1,5 @@
-import { Path } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo } from "react";
+import { Path } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import type { ChartPoint } from "../../core/chart.types";

package/src/cartesian/marks/chart-scatter.tsx

@@ -1,5 +1,5 @@
-import { Path } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo } from "react";
+import { Path } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import type { ChartPoint } from "../../core/chart.types";

package/src/core/AGENTS.md

@@ -4,7 +4,7 @@ Every number this package computes, and nothing that draws.
 
 ## The rule
 
-**No runtime import of `react`, `react-native`, `@shopify/react-native-skia`,
+**No runtime import of `react`, `react-native`, `react-native-skia`,
 `react-native-reanimated`, `react-native-gesture-handler` or
 `react-native-worklets`.** Type-only imports are fine. `d3-scale` and
 `d3-shape` are fine — they are pure ESM JavaScript that Bun can parse.

package/src/polar/hooks/use-polar-model.ts

@@ -1,5 +1,5 @@
-import type { SkFont } from "@shopify/react-native-skia";
 import { useMemo } from "react";
+import type { SkFont } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { DEFAULT_CHART_ANIMATION } from "../../animation/animation.types";
 import type { ChartRow, ChartSize } from "../../core/chart.types";

package/src/polar/marks/pie-inset.tsx

@@ -1,5 +1,5 @@
-import { Path, type SkPath } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo } from "react";
+import { Path, type SkPath } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import { buildSliceEdgePath } from "../../core/polar/build-slice-path";

package/src/polar/marks/pie-label.tsx

@@ -1,5 +1,5 @@
-import { type SkFont, Text } from "@shopify/react-native-skia";
 import type { ReactElement, ReactNode } from "react";
+import { type SkFont, Text } from "react-native-skia";
 import { sliceLabelPosition } from "../../core/polar/label-position";
 import type { PieSliceData } from "../../core/polar/polar.types";
 import { anchorX, anchorY } from "../../core/text/label-anchor";

package/src/polar/marks/pie-slice.tsx

@@ -1,5 +1,5 @@
-import { Path, type SkPath } from "@shopify/react-native-skia";
 import { type ReactElement, type ReactNode, useMemo } from "react";
+import { Path, type SkPath } from "react-native-skia";
 import type { ChartAnimation } from "../../animation/animation.types";
 import { useAnimatedPath } from "../../animation/use-animated-path";
 import { buildSlicePath } from "../../core/polar/build-slice-path";

package/src/polar/polar-chart.tsx

@@ -1,7 +1,8 @@
-import { Canvas } from "@shopify/react-native-skia";
 import { type ReactElement, useMemo, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, type GestureType } from "react-native-gesture-handler";
+import { Canvas } from "react-native-skia";
+import "../skia/native-id";
 import { useCanvasSize } from "../cartesian/hooks/use-canvas-size";
 import type { ChartRow } from "../core/chart.types";
 import { sliceIndexAt } from "../core/polar/slice-index-at";

package/src/polar/polar-chart.types.ts

@@ -1,5 +1,5 @@
-import type { SkFont } from "@shopify/react-native-skia";
 import type { ReactNode } from "react";
+import type { SkFont } from "react-native-skia";
 import type { ChartAnimation } from "../animation/animation.types";
 import type { ChartRow, ChartSize } from "../core/chart.types";
 import type { InnerRadius, PieSliceData, PolarPoint } from "../core/polar/polar.types";

package/src/purity.test.ts

@@ -17,7 +17,7 @@ const FORBIDDEN = [
 	"react",
 	"react-native",
 	"react-dom",
-	"@shopify/react-native-skia",
+	"react-native-skia",
 	"react-native-reanimated",
 	"react-native-gesture-handler",
 	"react-native-worklets",

package/src/skia/AGENTS.md

@@ -1,6 +1,6 @@
 # skia
 
-The only folder that imports Skia values. Four small translators.
+The only folder that imports Skia values. Small translators, plus the canvas-id seed.
 
 Everything below `core/` computes numbers; this turns them into things Skia can
 draw. Keeping the surface this narrow is deliberate — Skia 2.x renamed and
@@ -13,6 +13,8 @@ files and nothing else.
 | --- | --- |
 | `build-path.ts` | An SVG path string from `core/curve` into an `SkPath` |
 | `font.ts` | A system font, label advance widths, and line height |
+| `native-id.ts` | Seeds Skia's canvas-id counter per JS runtime, imported for its effect by both chart roots |
+| `native-id.test.ts` | The seed: floor, spacing between runtimes, idempotence, the 32-bit bound |
 
 ## Design
 
@@ -37,3 +39,11 @@ files and nothing else.
 - **Line height comes from the font's metrics, not its point size.** An axis
   gutter has to reserve the full glyph box — ascent plus descent — and the
   nominal size is neither.
+
+- **Each JS runtime numbers its canvases from somewhere new.** Skia's counter restarts at 1000 on
+  every reload while its native view registry outlives the runtime, so the reloaded app's first
+  canvases reused ids the old views had tombstoned and drew nothing until they re-rendered — a
+  chart came up empty after a dev reload or an OTA `Updates.reloadAsync`. `native-id.ts` moves the
+  counter to a random range on import, before any canvas asks for an id. It reaches
+  `SkiaViewNativeId` by path because the package root does not export it; `react-native-ui` holds
+  an identical copy for `Flow` and `Sketch`.

package/src/skia/build-path.ts

@@ -1,4 +1,4 @@
-import { Skia, type SkPath } from "@shopify/react-native-skia";
+import { Skia, type SkPath } from "react-native-skia";
 
 /** A path with nothing in it — what an empty series draws. */
 export function emptyPath(): SkPath {

package/src/skia/font.ts

@@ -1,5 +1,5 @@
-import { matchFont, type SkFont } from "@shopify/react-native-skia";
 import { useMemo } from "react";
+import { matchFont, type SkFont } from "react-native-skia";
 import type { LabelMetrics } from "../core/text/label-anchor";
 
 /** Re-exported so a consumer can hold a font without importing Skia itself. */

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

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test";
+import { resolveSkiaNativeId, SKIA_NATIVE_ID_FLOOR } from "./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/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-ui` keeps an identical copy in `src/lib/skia-native-id.ts` for `Flow` and
+ * `Sketch`, which do not depend on this package; change both together.
+ */
+SkiaViewNativeId.current = resolveSkiaNativeId(SkiaViewNativeId.current, Math.random());