react-native-livechart 2.0.1 → 3.0.0

package/src/hooks/useCandlePaths.ts

@@ -1,5 +1,4 @@
-import { Skia, type SkPath } from "@shopify/react-native-skia";
-import { useRef } from "react";
+import { Skia } from "@shopify/react-native-skia";
 import {
   useDerivedValue,
   useFrameCallback,
@@ -12,15 +11,15 @@ import { buildCandleGeometry } from "../draw/candle";
 import type { ChartPadding } from "../draw/line";
 import { lerp } from "../math/lerp";
 import type { CandleMetrics, CandlePoint } from "../types";
+import { usePathBuilder } from "./usePathBuilder";
 
 const CANDLE_WIDTH_LERP_SPEED = 0.08;
 
 /**
- * Persistent candle `SkPath`s — two per geometry slot (up/down bodies + up/down wicks).
- * Each derived value ping-pongs between its pair and mutates the picked path in place
- * so we don't allocate a new JSI-backed `SkPath` per frame. See {@link useChartPaths}
- * for the rationale (this was the primary driver of the iOS memory climb under live
- * ticking).
+ * Candle paths (up/down bodies + up/down wicks). Each is built into a reused
+ * `Skia.PathBuilder` and finalized with `detach()` each frame — a fresh
+ * immutable `SkPath`, so Skia repaints without a per-curve ping-pong and no
+ * mutable `SkPath` is retained across frames.
  */
 export function useCandlePaths(
   engine: SingleEngineState,
@@ -34,36 +33,10 @@ export function useCandlePaths(
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
 
-  const cacheRef = useRef<{
-    upBodiesA: SkPath;
-    upBodiesB: SkPath;
-    downBodiesA: SkPath;
-    downBodiesB: SkPath;
-    upWicksA: SkPath;
-    upWicksB: SkPath;
-    downWicksA: SkPath;
-    downWicksB: SkPath;
-    ubTick: boolean;
-    dbTick: boolean;
-    uwTick: boolean;
-    dwTick: boolean;
-  } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = {
-      upBodiesA: Skia.Path.Make(),
-      upBodiesB: Skia.Path.Make(),
-      downBodiesA: Skia.Path.Make(),
-      downBodiesB: Skia.Path.Make(),
-      upWicksA: Skia.Path.Make(),
-      upWicksB: Skia.Path.Make(),
-      downWicksA: Skia.Path.Make(),
-      downWicksB: Skia.Path.Make(),
-      ubTick: false,
-      dbTick: false,
-      uwTick: false,
-      dwTick: false,
-    };
-  }
+  const upBodiesBuilder = usePathBuilder();
+  const downBodiesBuilder = usePathBuilder();
+  const upWicksBuilder = usePathBuilder();
+  const downWicksBuilder = usePathBuilder();
 
   useFrameCallback((frameInfo) => {
     "worklet";
@@ -99,68 +72,56 @@ export function useCandlePaths(
 
   /* istanbul ignore next -- worklet */
   const upBodiesPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.ubTick = !cache.ubTick;
-    const path = cache.ubTick ? cache.upBodiesA : cache.upBodiesB;
-    path.reset();
+    const b = upBodiesBuilder.value;
     const { bodies } = geometry.value;
     for (let i = 0; i < bodies.length; i++) {
       if (bodies[i].up) {
-        path.addRect(
+        b.addRect(
           Skia.XYWHRect(bodies[i].x, bodies[i].y, bodies[i].w, bodies[i].h),
         );
       }
     }
-    return path;
+    return b.detach();
   });
 
   /* istanbul ignore next -- worklet */
   const downBodiesPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.dbTick = !cache.dbTick;
-    const path = cache.dbTick ? cache.downBodiesA : cache.downBodiesB;
-    path.reset();
+    const b = downBodiesBuilder.value;
     const { bodies } = geometry.value;
     for (let i = 0; i < bodies.length; i++) {
       if (!bodies[i].up) {
-        path.addRect(
+        b.addRect(
           Skia.XYWHRect(bodies[i].x, bodies[i].y, bodies[i].w, bodies[i].h),
         );
       }
     }
-    return path;
+    return b.detach();
   });
 
   /* istanbul ignore next -- worklet */
   const upWicksPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.uwTick = !cache.uwTick;
-    const path = cache.uwTick ? cache.upWicksA : cache.upWicksB;
-    path.reset();
+    const b = upWicksBuilder.value;
     const { wicks } = geometry.value;
     for (let i = 0; i < wicks.length; i++) {
       if (wicks[i].up) {
-        path.moveTo(wicks[i].x, wicks[i].y1);
-        path.lineTo(wicks[i].x, wicks[i].y2);
+        b.moveTo(wicks[i].x, wicks[i].y1);
+        b.lineTo(wicks[i].x, wicks[i].y2);
       }
     }
-    return path;
+    return b.detach();
   });
 
   /* istanbul ignore next -- worklet */
   const downWicksPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.dwTick = !cache.dwTick;
-    const path = cache.dwTick ? cache.downWicksA : cache.downWicksB;
-    path.reset();
+    const b = downWicksBuilder.value;
     const { wicks } = geometry.value;
     for (let i = 0; i < wicks.length; i++) {
       if (!wicks[i].up) {
-        path.moveTo(wicks[i].x, wicks[i].y1);
-        path.lineTo(wicks[i].x, wicks[i].y2);
+        b.moveTo(wicks[i].x, wicks[i].y1);
+        b.lineTo(wicks[i].x, wicks[i].y2);
       }
     }
-    return path;
+    return b.detach();
   });
 
   return { upBodiesPath, downBodiesPath, upWicksPath, downWicksPath } as const;

package/src/hooks/useChartPaths.ts

@@ -5,30 +5,29 @@ import type { SingleEngineState } from "../core/useLiveChartEngine";
 import { buildLinePoints, type ChartPadding } from "../draw/line";
 import { drawSpline, makeSplineScratch } from "../math/spline";
 import { blendPtsY, squigglifyPts } from "../math/squiggly";
+import { usePathBuilder } from "./usePathBuilder";
 
 /**
- * Persistent `linePath` / `fillPath` `SkPath`s that are **mutated in place** each frame.
+ * Builds the `linePath` / `fillPath` with `Skia.PathBuilder`s reused across
+ * frames (one per curve, held in a SharedValue) and finalized with `detach()` —
+ * which returns a fresh immutable `SkPath` each frame and resets the builder.
+ * The fresh reference makes Reanimated notify subscribers (re-record + repaint)
+ * without the two-SkPath ping-pong the mutable-path pool needed.
  *
- * Why not `useDerivedValue(() => Skia.Path.Make())`? Each call would allocate a brand-new
- * JSI-backed `SkPath`, and on iOS the native GC lags the JS GC under a steady firehose —
- * resident memory climbs steadily for as long as the chart is mounted. Here we allocate
- * two paths per curve once and ping-pong the reference each frame so Reanimated's
- * value-equality early-return still fires its subscribers (i.e. the Skia reanimated
- * container re-records and repaints).
+ * The flat point buffer still ping-pongs (ptsA/ptsB) so the intermediate
+ * `flatPts` derived value changes reference each frame and re-runs linePath /
+ * fillPath.
  */
 export function useChartPaths(
   engine: SingleEngineState,
   padding: ChartPadding,
   morphT?: SharedValue<number>,
 ) {
-  // Two persistent paths per curve; ping-pong so the returned reference changes
-  // every frame, which keeps Reanimated's setter from short-circuiting the notify.
+  const lineBuilder = usePathBuilder();
+  const fillBuilder = usePathBuilder();
+
   const cacheRef = useRef<{
-    lineA: SkPath;
-    lineB: SkPath;
-    fillA: SkPath;
-    fillB: SkPath;
-    tick: boolean;
+    emptyPath: SkPath;
     ptsA: number[];
     ptsB: number[];
     ptsTick: boolean;
@@ -36,13 +35,7 @@ export function useChartPaths(
   } | null>(null);
   if (cacheRef.current === null) {
     cacheRef.current = {
-      lineA: Skia.Path.Make(),
-      lineB: Skia.Path.Make(),
-      fillA: Skia.Path.Make(),
-      fillB: Skia.Path.Make(),
-      tick: false,
-      // Ping-pong point buffers: reused across frames but the returned reference
-      // still alternates, so Reanimated keeps notifying linePath/fillPath.
+      emptyPath: Skia.Path.Make(),
       ptsA: [] as number[],
       ptsB: [] as number[],
       ptsTick: false,
@@ -89,32 +82,27 @@ export function useChartPaths(
   const linePath = useDerivedValue(() => {
     const cache = cacheRef.current!;
     const pts = flatPts.get();
-    cache.tick = !cache.tick;
-    const path = cache.tick ? cache.lineA : cache.lineB;
-    path.reset();
     const n = pts.length >> 1;
-    if (n < 2) return path;
-    path.moveTo(pts[0], pts[1]);
-    drawSpline(path, pts, cache.scratch);
-    return path;
+    if (n < 2) return cache.emptyPath;
+    const b = lineBuilder.value;
+    b.moveTo(pts[0], pts[1]);
+    drawSpline(b, pts, cache.scratch);
+    return b.detach();
   });
 
   const fillPath = useDerivedValue(() => {
     const cache = cacheRef.current!;
     const pts = flatPts.get();
-    // Use the same tick flag flipped by linePath — flipping again here would
-    // keep both paths in sync, so just read the current parity.
-    const path = cache.tick ? cache.fillA : cache.fillB;
-    path.reset();
     const n = pts.length >> 1;
-    if (n < 2) return path;
-    path.moveTo(pts[0], pts[1]);
-    drawSpline(path, pts, cache.scratch);
+    if (n < 2) return cache.emptyPath;
+    const b = fillBuilder.value;
+    b.moveTo(pts[0], pts[1]);
+    drawSpline(b, pts, cache.scratch);
     const bottom = engine.canvasHeight.get() - padding.bottom;
-    path.lineTo(pts[(n - 1) * 2], bottom);
-    path.lineTo(pts[0], bottom);
-    path.close();
-    return path;
+    b.lineTo(pts[(n - 1) * 2], bottom);
+    b.lineTo(pts[0], bottom);
+    b.close();
+    return b.detach();
   });
 
   return { linePath, fillPath } as const;

package/src/hooks/useMultiSeriesLinePaths.ts

@@ -5,51 +5,46 @@ import { MAX_MULTI_SERIES } from "../constants";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
 import { buildLinePoints, type ChartPadding } from "../draw/line";
 import { drawSpline, makeSplineScratch } from "../math/spline";
+import { usePathBuilders } from "./usePathBuilder";
 
 /**
- * One derived shared value holding up to `MAX_MULTI_SERIES` Skia paths (unused slots are empty paths).
+ * One derived shared value holding up to `MAX_MULTI_SERIES` Skia paths (unused
+ * slots reuse one cached empty path).
  *
- * Each slot ping-pongs between two persistent `SkPath`s so `MultiSeriesStroke`'s
- * per-slot `useDerivedValue(() => paths.value[index])` sees a fresh reference each
- * tick (otherwise Reanimated's setter short-circuits and Skia never repaints).
- * No new JSI-backed `SkPath` is allocated per frame. See {@link useChartPaths}
- * for the memory rationale.
+ * Each visible series' path is built into a per-slot `Skia.PathBuilder` (reused
+ * across frames via a SharedValue) and finalized with `detach()` — a fresh
+ * immutable `SkPath` per frame, so `MultiSeriesStroke`'s per-slot
+ * `useDerivedValue(() => paths.value[index])` repaints without the two-SkPath
+ * ping-pong. Only visible series allocate a path.
  */
 export function useMultiSeriesLinePaths(
   engine: MultiEngineState,
   padding: ChartPadding,
-): SharedValue<ReturnType<typeof Skia.Path.Make>[]> {
+): SharedValue<SkPath[]> {
+  const builders = usePathBuilders(MAX_MULTI_SERIES);
+
   const poolRef = useRef<{
-    a: SkPath[];
-    b: SkPath[];
-    tick: boolean;
+    empty: SkPath;
     ptsBuf: number[];
     scratch: ReturnType<typeof makeSplineScratch>;
   } | null>(null);
   if (poolRef.current === null) {
-    const a: SkPath[] = [];
-    const b: SkPath[] = [];
-    for (let i = 0; i < MAX_MULTI_SERIES; i++) {
-      a.push(Skia.Path.Make());
-      b.push(Skia.Path.Make());
-    }
-    // One point buffer + spline scratch, reused across slots (built sequentially)
-    // and across frames — no per-frame, per-series array allocation.
-    poolRef.current = { a, b, tick: false, ptsBuf: [] as number[], scratch: makeSplineScratch() };
+    poolRef.current = {
+      empty: Skia.Path.Make(),
+      ptsBuf: [] as number[],
+      scratch: makeSplineScratch(),
+    };
   }
 
   return useDerivedValue(() => {
     const pool = poolRef.current!;
-    pool.tick = !pool.tick;
-    const slots = pool.tick ? pool.a : pool.b;
+    const slots = builders.value;
     const s = engine.series.get();
     const displays = engine.displaySeriesValues.get();
-    const out: ReturnType<typeof Skia.Path.Make>[] = [];
+    const out: SkPath[] = [];
     for (let i = 0; i < MAX_MULTI_SERIES; i++) {
-      const path = slots[i];
-      path.reset();
       if (i >= s.length) {
-        out.push(path);
+        out.push(pool.empty);
         continue;
       }
       const pts = buildLinePoints(
@@ -66,10 +61,13 @@ export function useMultiSeriesLinePaths(
       );
       const n = pts.length >> 1;
       if (n >= 2) {
-        path.moveTo(pts[0], pts[1]);
-        drawSpline(path, pts, pool.scratch);
+        const b = slots[i];
+        b.moveTo(pts[0], pts[1]);
+        drawSpline(b, pts, pool.scratch);
+        out.push(b.detach());
+      } else {
+        out.push(pool.empty);
       }
-      out.push(path);
     }
     return out;
   });

package/src/hooks/usePathBuilder.ts

@@ -0,0 +1,42 @@
+import { Skia } from "@shopify/react-native-skia";
+import { useMemo } from "react";
+import { useSharedValue, type SharedValue } from "react-native-reanimated";
+
+/** A `Skia.PathBuilder` instance (typed without depending on a named export). */
+export type ReanimatedPathBuilder = ReturnType<typeof Skia.PathBuilder.Make>;
+
+/**
+ * A `Skia.PathBuilder` made accessible inside Reanimated worklets.
+ *
+ * Unlike `SkPath`, an `SkPathBuilder` is **not** a Reanimated-shareable host
+ * object: stashing one in a `useRef` and reading it from a `useDerivedValue`
+ * worklet yields `undefined`. Wrapping it in a `SharedValue` is the supported
+ * way to cross the JS→UI boundary, so the builder is created once on the JS
+ * thread and reused every frame on the UI thread.
+ *
+ * Per-frame usage in a worklet:
+ *
+ *   const b = builder.value;
+ *   b.moveTo(x, y); b.lineTo(...);   // emit verbs
+ *   return b.detach();               // fresh immutable SkPath; resets the builder
+ *
+ * `detach()` returns a new `SkPath` and resets the builder for the next frame,
+ * so the returned reference changes every frame and Reanimated notifies
+ * subscribers without the two-path ping-pong the mutable-`SkPath` pool needs.
+ */
+export function usePathBuilder(): SharedValue<ReanimatedPathBuilder> {
+  const builder = useMemo(() => Skia.PathBuilder.Make(), []);
+  return useSharedValue(builder);
+}
+
+/** Like {@link usePathBuilder} but a fixed-length array of builders (e.g. one per series). */
+export function usePathBuilders(
+  count: number,
+): SharedValue<ReanimatedPathBuilder[]> {
+  const builders = useMemo(() => {
+    const arr: ReanimatedPathBuilder[] = [];
+    for (let i = 0; i < count; i++) arr.push(Skia.PathBuilder.Make());
+    return arr;
+  }, [count]);
+  return useSharedValue(builders);
+}

package/src/math/spline.ts

@@ -1,4 +1,3 @@
-import type { SkPath } from "@shopify/react-native-skia";
 import type { LiveChartPoint } from "../types";
 
 /**
@@ -33,7 +32,28 @@ export function makeSplineScratch(): SplineScratch {
  *
  * @see https://github.com/benjitaylor/liveline
  */
-export function drawSpline(path: SkPath, pts: number[], scratch?: SplineScratch) {
+/**
+ * Minimal structural sink for {@link drawSpline}: just the verb-emitting methods
+ * it calls. Both `SkPath` and `SkPathBuilder` satisfy it, so the spline can be
+ * built into either a mutable `SkPath` or a `Skia.PathBuilder`.
+ */
+export type SplinePathSink = {
+  lineTo: (x: number, y: number) => unknown;
+  cubicTo: (
+    c1x: number,
+    c1y: number,
+    c2x: number,
+    c2y: number,
+    x: number,
+    y: number,
+  ) => unknown;
+};
+
+export function drawSpline(
+  path: SplinePathSink,
+  pts: number[],
+  scratch?: SplineScratch,
+) {
   "worklet";
   const n = pts.length >> 1;
   if (n < 2) return;