react-native-livechart 2.0.1 → 3.0.0

package/src/components/ReferenceLineOverlay.tsx

@@ -3,16 +3,14 @@ import {
   Group,
   Path,
   RoundedRect,
-  Skia,
   Text as SkiaText,
   type SkFont,
-  type SkPath,
 } from "@shopify/react-native-skia";
-import { useRef } from "react";
 import { useDerivedValue } from "react-native-reanimated";
 
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 import { useReferenceLine } from "../hooks/useReferenceLine";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { referenceLineForm } from "../math/referenceLines";
@@ -65,131 +63,91 @@ export function ReferenceLineOverlay({
   const badgeBorderColor = line.badgeBorderColor ?? color;
   const badgeRadius = line.badgeRadius ?? OFF_AXIS_PILL_RADIUS;
 
-  const cacheRef = useRef<{
-    lineA: SkPath;
-    lineB: SkPath;
-    lineT: boolean;
-    bandA: SkPath;
-    bandB: SkPath;
-    bandT: boolean;
-    borderA: SkPath;
-    borderB: SkPath;
-    borderT: boolean;
-    offA: SkPath;
-    offB: SkPath;
-    offT: boolean;
-    chevA: SkPath;
-    chevB: SkPath;
-    chevT: boolean;
-  } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = {
-      lineA: Skia.Path.Make(),
-      lineB: Skia.Path.Make(),
-      lineT: false,
-      bandA: Skia.Path.Make(),
-      bandB: Skia.Path.Make(),
-      bandT: false,
-      borderA: Skia.Path.Make(),
-      borderB: Skia.Path.Make(),
-      borderT: false,
-      offA: Skia.Path.Make(),
-      offB: Skia.Path.Make(),
-      offT: false,
-      chevA: Skia.Path.Make(),
-      chevB: Skia.Path.Make(),
-      chevT: false,
-    };
-  }
+  const lineBuilder = usePathBuilder();
+  const bandBuilder = usePathBuilder();
+  const borderBuilder = usePathBuilder();
+  const offBuilder = usePathBuilder();
+  const chevBuilder = usePathBuilder();
 
   const linePath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.lineT = !cache.lineT;
-    const p = cache.lineT ? cache.lineA : cache.lineB;
-    p.reset();
+    const b = lineBuilder.value;
     const l = layout.get();
-    if (!l.visible || l.offAxis || isBand) return p;
-    p.moveTo(l.x1, l.y);
-    p.lineTo(l.x2, l.y);
-    return p;
+    if (l.visible && !l.offAxis && !isBand) {
+      b.moveTo(l.x1, l.y);
+      b.lineTo(l.x2, l.y);
+    }
+    return b.detach();
   });
 
   const bandPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.bandT = !cache.bandT;
-    const p = cache.bandT ? cache.bandA : cache.bandB;
-    p.reset();
+    const b = bandBuilder.value;
     const l = layout.get();
-    if (!l.visible || !isBand) return p;
-    p.moveTo(l.x1, l.y);
-    p.lineTo(l.x2, l.y);
-    p.lineTo(l.x2, l.yBottom);
-    p.lineTo(l.x1, l.yBottom);
-    p.close();
-    return p;
+    if (l.visible && isBand) {
+      b.moveTo(l.x1, l.y);
+      b.lineTo(l.x2, l.y);
+      b.lineTo(l.x2, l.yBottom);
+      b.lineTo(l.x1, l.yBottom);
+      b.close();
+    }
+    return b.detach();
   });
 
   const bandBorderPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.borderT = !cache.borderT;
-    const p = cache.borderT ? cache.borderA : cache.borderB;
-    p.reset();
+    const b = borderBuilder.value;
     const l = layout.get();
-    if (!l.visible || !hasBandBorder) return p;
-    if (form === "time-band") {
-      // Vertical edges at the band's left / right.
-      p.moveTo(l.x1, l.y);
-      p.lineTo(l.x1, l.yBottom);
-      p.moveTo(l.x2, l.y);
-      p.lineTo(l.x2, l.yBottom);
-    } else {
-      // Horizontal edges at the band's top / bottom.
-      p.moveTo(l.x1, l.y);
-      p.lineTo(l.x2, l.y);
-      p.moveTo(l.x1, l.yBottom);
-      p.lineTo(l.x2, l.yBottom);
+    if (l.visible && hasBandBorder) {
+      if (form === "time-band") {
+        // Vertical edges at the band's left / right.
+        b.moveTo(l.x1, l.y);
+        b.lineTo(l.x1, l.yBottom);
+        b.moveTo(l.x2, l.y);
+        b.lineTo(l.x2, l.yBottom);
+      } else {
+        // Horizontal edges at the band's top / bottom.
+        b.moveTo(l.x1, l.y);
+        b.lineTo(l.x2, l.y);
+        b.moveTo(l.x1, l.yBottom);
+        b.lineTo(l.x2, l.yBottom);
+      }
     }
-    return p;
+    return b.detach();
   });
 
   const offLinePath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.offT = !cache.offT;
-    const p = cache.offT ? cache.offA : cache.offB;
-    p.reset();
+    const b = offBuilder.value;
     const l = layout.get();
-    if (!l.visible || !l.offAxis) return p;
-    // Start the connector just past the badge pill's right edge so the dashed
-    // line runs out to the chart edge rather than behind the badge.
-    const pillRight =
-      l.labelX + measureFontTextWidth(font, l.label) + OFF_AXIS_PILL_PAD_X;
-    const start = pillRight + 4;
-    if (start >= l.x2) return p;
-    p.moveTo(start, l.y);
-    p.lineTo(l.x2, l.y);
-    return p;
+    if (l.visible && l.offAxis) {
+      // Start the connector just past the badge pill's right edge so the dashed
+      // line runs out to the chart edge rather than behind the badge.
+      const pillRight =
+        l.labelX + measureFontTextWidth(font, l.label) + OFF_AXIS_PILL_PAD_X;
+      const start = pillRight + 4;
+      if (start < l.x2) {
+        b.moveTo(start, l.y);
+        b.lineTo(l.x2, l.y);
+      }
+    }
+    return b.detach();
   });
 
   const chevronPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.chevT = !cache.chevT;
-    const p = cache.chevT ? cache.chevA : cache.chevB;
-    p.reset();
+    const b = chevBuilder.value;
     const l = layout.get();
-    if (!l.visible || !l.offAxis) return p;
-    const cx = l.x1 + 6;
-    const cy = l.y;
-    const s = 4;
-    if (l.chevronUp) {
-      p.moveTo(cx - s, cy + s);
-      p.lineTo(cx, cy - s);
-      p.lineTo(cx + s, cy + s);
-    } else {
-      p.moveTo(cx - s, cy - s);
-      p.lineTo(cx, cy + s);
-      p.lineTo(cx + s, cy - s);
+    if (l.visible && l.offAxis) {
+      const cx = l.x1 + 6;
+      const cy = l.y;
+      const s = 4;
+      if (l.chevronUp) {
+        b.moveTo(cx - s, cy + s);
+        b.lineTo(cx, cy - s);
+        b.lineTo(cx + s, cy + s);
+      } else {
+        b.moveTo(cx - s, cy - s);
+        b.lineTo(cx, cy + s);
+        b.lineTo(cx + s, cy - s);
+      }
     }
-    return p;
+    return b.detach();
   });
 
   const lineOpacity = useDerivedValue(() =>

package/src/components/ValueLineOverlay.tsx

@@ -1,14 +1,9 @@
-import {
-  DashPathEffect,
-  Path,
-  Skia,
-  type SkPath,
-} from "@shopify/react-native-skia";
-import { useRef } from "react";
+import { DashPathEffect, Path } from "@shopify/react-native-skia";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 
 import type { ChartPadding } from "../draw/line";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 
 /**
  * A dashed horizontal line that tracks the live display value — sitting at
@@ -29,30 +24,16 @@ export function ValueLineOverlay({
   intervals: [number, number];
   color: string;
 }) {
-  // Ping-pong persistent paths — avoid allocating a JSI-backed SkPath per frame.
-  const cacheRef = useRef<{
-    a: SkPath;
-    b: SkPath;
-    tick: boolean;
-  } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = {
-      a: Skia.Path.Make(),
-      b: Skia.Path.Make(),
-      tick: false,
-    };
-  }
+  const builder = usePathBuilder();
 
   const path = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    cache.tick = !cache.tick;
-    const p = cache.tick ? cache.a : cache.b;
-    p.reset();
+    const b = builder.value;
     const y = dotY.get();
-    if (y < 0) return p;
-    p.moveTo(padding.left, y);
-    p.lineTo(engine.canvasWidth.get() - padding.right, y);
-    return p;
+    if (y >= 0) {
+      b.moveTo(padding.left, y);
+      b.lineTo(engine.canvasWidth.get() - padding.right, y);
+    }
+    return b.detach();
   });
 
   return (

package/src/components/XAxisOverlay.tsx

@@ -1,15 +1,9 @@
-import {
-  Group,
-  Path,
-  Skia,
-  type SkFont,
-  type SkPath,
-} from "@shopify/react-native-skia";
-import { useRef } from "react";
+import { Group, Path, type SkFont } from "@shopify/react-native-skia";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ChartPadding } from "../draw/line";
 import type { XAxisEntry } from "../hooks/useXAxis";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import type { LiveChartPalette } from "../types";
 import { AnimatedLabel } from "./AnimatedLabel";
@@ -31,40 +25,26 @@ export function XAxisOverlay({
   palette: LiveChartPalette;
   font: SkFont;
 }) {
-  const axisCacheRef = useRef<{
-    a: SkPath;
-    b: SkPath;
-    tick: boolean;
-  } | null>(null);
-  if (axisCacheRef.current === null) {
-    axisCacheRef.current = {
-      a: Skia.Path.Make(),
-      b: Skia.Path.Make(),
-      tick: false,
-    };
-  }
+  const axisBuilder = usePathBuilder();
 
   const axisPath = useDerivedValue(() => {
     "worklet";
-    const axisCache = axisCacheRef.current!;
-    axisCache.tick = !axisCache.tick;
-    const path = axisCache.tick ? axisCache.a : axisCache.b;
-    path.reset();
+    const b = axisBuilder.value;
     const w = engine.canvasWidth.get();
     const h = engine.canvasHeight.get();
     const lineY = h - padding.bottom;
 
     // Bottom axis line
-    path.moveTo(padding.left, lineY);
-    path.lineTo(w - padding.right, lineY);
+    b.moveTo(padding.left, lineY);
+    b.lineTo(w - padding.right, lineY);
 
     // Tick marks
     const items = entries.get();
     for (let i = 0; i < items.length; i++) {
-      path.moveTo(items[i].x, lineY);
-      path.lineTo(items[i].x, lineY + TICK_HEIGHT);
+      b.moveTo(items[i].x, lineY);
+      b.lineTo(items[i].x, lineY + TICK_HEIGHT);
     }
-    return path;
+    return b.detach();
   });
 
   // Transform XAxisEntry[] into { x, y, label, alpha } for AnimatedLabel

package/src/components/YAxisOverlay.tsx

@@ -2,11 +2,8 @@ import {
   DashPathEffect,
   Group,
   Path,
-  Skia,
   type SkFont,
-  type SkPath,
 } from "@shopify/react-native-skia";
-import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import { BADGE_METRICS_DEFAULTS } from "../constants";
 import type { ResolvedGridStyleConfig } from "../core/resolveConfig";
@@ -18,6 +15,7 @@ import {
   pillTextLeftX,
   type ChartPadding,
 } from "../draw/line";
+import { usePathBuilder } from "../hooks/usePathBuilder";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import type { BadgeMetrics, LiveChartPalette } from "../types";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
@@ -57,31 +55,17 @@ export function YAxisOverlay({
   const gridWidth = gridStyle?.strokeWidth ?? 1;
   const gridIntervals = gridStyle?.intervals ?? [];
   const gridOpacity = gridStyle?.opacity ?? 1;
-  const gridCacheRef = useRef<{
-    a: SkPath;
-    b: SkPath;
-    tick: boolean;
-  } | null>(null);
-  if (gridCacheRef.current === null) {
-    gridCacheRef.current = {
-      a: Skia.Path.Make(),
-      b: Skia.Path.Make(),
-      tick: false,
-    };
-  }
+  const gridBuilder = usePathBuilder();
 
   const gridLinesPath = useDerivedValue(() => {
-    const gridCache = gridCacheRef.current!;
-    gridCache.tick = !gridCache.tick;
-    const path = gridCache.tick ? gridCache.a : gridCache.b;
-    path.reset();
+    const b = gridBuilder.value;
     const items = entries.get();
     const w = engine.canvasWidth.get();
     for (let i = 0; i < items.length; i++) {
-      path.moveTo(padding.left, items[i].y);
-      path.lineTo(w - padding.right, items[i].y);
+      b.moveTo(padding.left, items[i].y);
+      b.lineTo(w - padding.right, items[i].y);
     }
-    return path;
+    return b.detach();
   });
 
   const leftInset =

package/src/draw/markerAtlas.ts

@@ -207,17 +207,17 @@ function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec
       w: box,
       h: box,
       draw: (canvas, cx, cy) => {
-        const p = Skia.Path.Make();
+        const pb = Skia.PathBuilder.Make();
         for (let k = 0; k < 10; k++) {
           const ang = -Math.PI / 2 + (k * Math.PI) / 5;
           const rad = k % 2 === 0 ? outer : inner;
           const px = cx + rad * Math.cos(ang);
           const py = cy + rad * Math.sin(ang);
-          if (k === 0) p.moveTo(px, py);
-          else p.lineTo(px, py);
+          if (k === 0) pb.moveTo(px, py);
+          else pb.lineTo(px, py);
         }
-        p.close();
-        canvas.drawPath(p, fillPaint(color));
+        pb.close();
+        canvas.drawPath(pb.detach(), fillPaint(color));
       },
     };
   }
@@ -229,15 +229,15 @@ function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec
       w: box,
       h: box,
       draw: (canvas, cx, cy) => {
-        const p = Skia.Path.Make();
+        const pb = Skia.PathBuilder.Make();
         for (let k = 0; k < 4; k++) {
           const ang = (k * Math.PI) / 4;
           const dx = L * Math.cos(ang);
           const dy = L * Math.sin(ang);
-          p.moveTo(cx - dx, cy - dy);
-          p.lineTo(cx + dx, cy + dy);
+          pb.moveTo(cx - dx, cy - dy);
+          pb.lineTo(cx + dx, cy + dy);
         }
-        canvas.drawPath(p, strokePaint(color, 1.5, true));
+        canvas.drawPath(pb.detach(), strokePaint(color, 1.5, true));
       },
     };
   }

package/src/hooks/useBadge.ts

@@ -1,5 +1,4 @@
-import { Skia, type SkFont, type SkPath } from "@shopify/react-native-skia";
-import { useRef } from "react";
+import { type SkFont } from "@shopify/react-native-skia";
 import {
   useDerivedValue,
   useSharedValue,
@@ -25,6 +24,7 @@ import type {
   LiveChartPalette,
   Momentum,
 } from "../types";
+import { usePathBuilder } from "./usePathBuilder";
 
 export function useBadge(
   engine: ChartEngineWithLiveValue,
@@ -48,32 +48,17 @@ export function useBadge(
   const downRgb = hexToRgb(palette.dotDown);
   const accentRgb = hexToRgb(palette.badgeBg);
 
-  // Ping-pong between two persistent badge paths so the derived value always
-  // returns a freshly-mutated SkPath without allocating a new one every frame.
-  // See useChartPaths for the full rationale on per-frame Skia.Path.Make().
-  const cacheRef = useRef<{
-    a: SkPath;
-    b: SkPath;
-    tick: boolean;
-  } | null>(null);
-  if (cacheRef.current === null) {
-    cacheRef.current = {
-      a: Skia.Path.Make(),
-      b: Skia.Path.Make(),
-      tick: false,
-    };
-  }
+  // Pill path is built into a reused PathBuilder and finalized with detach()
+  // each frame — a fresh immutable SkPath, no per-frame Skia.Path.Make().
+  const badgeBuilder = usePathBuilder();
 
   const badge = useDerivedValue(() => {
-    const cache = cacheRef.current!;
+    const b = badgeBuilder.value;
     const w = engine.canvasWidth.get();
     const h = engine.canvasHeight.get();
-    cache.tick = !cache.tick;
-    const path = cache.tick ? cache.a : cache.b;
-    path.reset();
     if (w === 0 || h === 0) {
       return {
-        path,
+        path: b.detach(),
         textX: 0,
         textY: 0,
         text: "",
@@ -108,7 +93,7 @@ export function useBadge(
       const bodyLeft = Math.max(badgeMetrics.marginEdge, bodyRight - pillW);
       const pillBodyW = bodyRight - bodyLeft;
       textX = (bodyLeft + bodyRight - textW) / 2;
-      path.addRRect({
+      b.addRRect({
         rect: { x: bodyLeft, y: badgeY, width: pillBodyW, height: pillH },
         rx: r,
         ry: r,
@@ -132,16 +117,16 @@ export function useBadge(
         const badgeX = w - padding.right + badgeMetrics.dotGap;
         const cx = tl + pillW - r;
 
-        path.moveTo(badgeX + tl, badgeY);
-        path.lineTo(badgeX + cx, badgeY);
-        path.arcToOval(
+        b.moveTo(badgeX + tl, badgeY);
+        b.lineTo(badgeX + cx, badgeY);
+        b.arcToOval(
           { x: badgeX + cx - r, y: badgeY, width: r * 2, height: pillH },
           -90,
           180,
           false,
         );
-        path.lineTo(badgeX + tl, badgeY + pillH);
-        path.cubicTo(
+        b.lineTo(badgeX + tl, badgeY + pillH);
+        b.cubicTo(
           badgeX + badgeMetrics.tailLength + 2,
           badgeY + pillH,
           badgeX + 3,
@@ -149,7 +134,7 @@ export function useBadge(
           badgeX,
           badgeY + r,
         );
-        path.cubicTo(
+        b.cubicTo(
           badgeX + 3,
           badgeY + r - badgeMetrics.tailSpread,
           badgeX + badgeMetrics.tailLength + 2,
@@ -157,9 +142,9 @@ export function useBadge(
           badgeX + tl,
           badgeY,
         );
-        path.close();
+        b.close();
       } else {
-        path.addRRect({
+        b.addRRect({
           rect: { x: bodyLeft, y: badgeY, width: pillW, height: pillH },
           rx: r,
           ry: r,
@@ -199,7 +184,7 @@ export function useBadge(
     const textColor =
       variant === "minimal" ? "rgba(100,100,100,1)" : palette.badgeText;
 
-    return { path, textX, textY, text, bgColor, textColor };
+    return { path: b.detach(), textX, textY, text, bgColor, textColor };
   });
 
   return badge;