react-native-livechart 1.0.0

package/src/hooks/useCandlePaths.ts

@@ -0,0 +1,165 @@
+import { Skia, type SkPath } from "@shopify/react-native-skia";
+import { useRef } from "react";
+import {
+  useDerivedValue,
+  useFrameCallback,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+import { MS_PER_FRAME_60FPS } from "../constants";
+import type { SingleEngineState } from "../core/useLiveChartEngine";
+import { buildCandleGeometry } from "../draw/candle";
+import type { ChartPadding } from "../draw/line";
+import { lerp } from "../math/lerp";
+import type { CandlePoint } from "../types";
+
+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).
+ */
+export function useCandlePaths(
+  engine: SingleEngineState,
+  padding: ChartPadding,
+  candles: SharedValue<CandlePoint[]> | undefined,
+  liveCandle: SharedValue<CandlePoint | null> | undefined,
+  candleWidthSecs: number,
+  active: boolean,
+) {
+  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,
+    };
+  }
+
+  useFrameCallback((frameInfo) => {
+    "worklet";
+    if (!active) return;
+    const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
+    displayCandleWidth.set(
+      lerp(
+        displayCandleWidth.get(),
+        targetCandleWidth.get(),
+        CANDLE_WIDTH_LERP_SPEED,
+        dt,
+      ),
+    );
+  });
+
+  /* istanbul ignore next -- worklet */
+  const geometry = useDerivedValue(() => {
+    if (!active || !candles) return { bodies: [], wicks: [] };
+    return buildCandleGeometry(
+      candles.value,
+      liveCandle?.value ?? null,
+      padding,
+      engine.canvasWidth.value,
+      engine.canvasHeight.value,
+      engine.timestamp.value - engine.displayWindow.value,
+      engine.displayWindow.value,
+      engine.displayMin.value,
+      engine.displayMax.value,
+      displayCandleWidth.get(),
+    );
+  });
+
+  /* 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 { bodies } = geometry.value;
+    for (let i = 0; i < bodies.length; i++) {
+      if (bodies[i].up) {
+        path.addRect(
+          Skia.XYWHRect(bodies[i].x, bodies[i].y, bodies[i].w, bodies[i].h),
+        );
+      }
+    }
+    return path;
+  });
+
+  /* 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 { bodies } = geometry.value;
+    for (let i = 0; i < bodies.length; i++) {
+      if (!bodies[i].up) {
+        path.addRect(
+          Skia.XYWHRect(bodies[i].x, bodies[i].y, bodies[i].w, bodies[i].h),
+        );
+      }
+    }
+    return path;
+  });
+
+  /* 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 { 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);
+      }
+    }
+    return path;
+  });
+
+  /* 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 { 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);
+      }
+    }
+    return path;
+  });
+
+  return { upBodiesPath, downBodiesPath, upWicksPath, downWicksPath } as const;
+}

package/src/hooks/useCanvasLayout.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+import type { LayoutChangeEvent } from "react-native";
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+
+/**
+ * Track canvas dimensions via `onLayout` and sync them into engine shared values.
+ * Returns `{ layoutHeight, onLayout }` — pass `onLayout` to the container View
+ * and use `layoutHeight` for conditional rendering (e.g. minimum height guards).
+ */
+export function useCanvasLayout(engine: ChartEngineLayout) {
+  const [layoutHeight, setLayoutHeight] = useState(0);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    engine.canvasWidth.set(width);
+    engine.canvasHeight.set(height);
+    setLayoutHeight(height);
+  };
+
+  return { layoutHeight, onLayout } as const;
+}

package/src/hooks/useChartColors.ts

@@ -0,0 +1,48 @@
+import type { ResolvedGradientConfig } from "../core/resolveConfig";
+import type { ChartPadding } from "../draw/line";
+import { parseColorRgb } from "../theme";
+import type { LiveChartPalette } from "../types";
+
+export interface ChartColors {
+  /** Background color derived from the theme palette. */
+  backgroundColor: string;
+  /** Y coordinate of the gradient bottom edge — accounts for bottom inset. */
+  gradientEnd: number;
+  /** Top gradient stop — custom opacity or palette default. */
+  gradientTopColor: string;
+  /** Bottom gradient stop — custom opacity or palette default. */
+  gradientBottomColor: string;
+}
+
+/**
+ * Derives background and gradient colors from the resolved palette and
+ * optional GradientConfig opacities. The React Compiler memoizes the result
+ * so strings are only recomputed when inputs change.
+ */
+export function useChartColors(
+  palette: LiveChartPalette,
+  gradientCfg: ResolvedGradientConfig | null,
+  accentColor: string,
+  layoutHeight: number,
+  padding: ChartPadding,
+): ChartColors {
+  const backgroundColor = `rgb(${palette.bgRgb[0]}, ${palette.bgRgb[1]}, ${palette.bgRgb[2]})`;
+  const gradientEnd = Math.max(1, layoutHeight - padding.bottom);
+
+  const [r, g, b] = parseColorRgb(accentColor);
+  const gradientTopColor =
+    gradientCfg?.topOpacity !== undefined
+      ? `rgba(${r}, ${g}, ${b}, ${gradientCfg.topOpacity})`
+      : palette.fillTop;
+  const gradientBottomColor =
+    gradientCfg?.bottomOpacity !== undefined
+      ? `rgba(${r}, ${g}, ${b}, ${gradientCfg.bottomOpacity})`
+      : palette.fillBottom;
+
+  return {
+    backgroundColor,
+    gradientEnd,
+    gradientTopColor,
+    gradientBottomColor,
+  };
+}

package/src/hooks/useChartPaths.ts

@@ -0,0 +1,121 @@
+import { Skia, type SkPath } from "@shopify/react-native-skia";
+import { useRef } from "react";
+import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+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";
+
+/**
+ * Persistent `linePath` / `fillPath` `SkPath`s that are **mutated in place** each frame.
+ *
+ * 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).
+ */
+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 cacheRef = useRef<{
+    lineA: SkPath;
+    lineB: SkPath;
+    fillA: SkPath;
+    fillB: SkPath;
+    tick: boolean;
+    ptsA: number[];
+    ptsB: number[];
+    ptsTick: boolean;
+    scratch: ReturnType<typeof makeSplineScratch>;
+  } | 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.
+      ptsA: [] as number[],
+      ptsB: [] as number[],
+      ptsTick: false,
+      scratch: makeSplineScratch(),
+    };
+  }
+
+  const flatPts = useDerivedValue(() => {
+    const cache = cacheRef.current!;
+    cache.ptsTick = !cache.ptsTick;
+    const buf = cache.ptsTick ? cache.ptsA : cache.ptsB;
+    const realPts = buildLinePoints(
+      engine.data.get(),
+      engine.displayValue.get(),
+      engine.timestamp.get(),
+      engine.displayWindow.get(),
+      engine.displayMin.get(),
+      engine.displayMax.get(),
+      engine.canvasWidth.get(),
+      engine.canvasHeight.get(),
+      padding,
+      buf,
+    );
+
+    // Skip blending when fully revealed or no morphT provided
+    const t = morphT?.get() ?? 1;
+    if (t >= 1 || realPts.length === 0) return realPts;
+
+    // Compute squiggly Y values at the same X positions as the real line
+    const centerY =
+      (engine.canvasHeight.get() - padding.bottom + padding.top) / 2;
+    const squigglyPts = squigglifyPts(realPts, engine.timestamp.get(), centerY);
+
+    // Blend center-out: centre of chart reveals first, edges last
+    return blendPtsY(
+      squigglyPts,
+      realPts,
+      t,
+      padding,
+      engine.canvasWidth.get(),
+    );
+  });
+
+  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;
+  });
+
+  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);
+    const bottom = engine.canvasHeight.get() - padding.bottom;
+    path.lineTo(pts[(n - 1) * 2], bottom);
+    path.lineTo(pts[0], bottom);
+    path.close();
+    return path;
+  });
+
+  return { linePath, fillPath } as const;
+}

package/src/hooks/useChartReveal.ts

@@ -0,0 +1,123 @@
+import { useLayoutEffect } from "react";
+import {
+  Easing,
+  useAnimatedReaction,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+  type SharedValue,
+} from "react-native-reanimated";
+import { smoothstep } from "../math/squiggly";
+
+/** Duration for chart reveal (loading/empty → live) and collapse (live → empty). */
+export const CHART_REVEAL_DURATION_MS = 600;
+
+/**
+ * Per-overlay reveal delay (fraction of morphT at which the overlay starts
+ * fading in). Earlier delays = earlier appearance.
+ */
+const DELAY = {
+  fill: 0.05,
+  yAxis: 0.15,
+  line: 0.0,
+  dot: 0.4,
+  badge: 0.55,
+} as const;
+
+/**
+ * Maps a [0,1] morphT to a [0,1] opacity, starting at `delay` and reaching
+ * 1 at morphT=1. Uses smoothstep for a polished ease-in/out.
+ */
+export function revealRamp(morphT: number, delay: number): number {
+  "worklet";
+  if (delay >= 1) return 0;
+  return smoothstep((morphT - delay) / (1 - delay));
+}
+
+export interface ChartRevealState {
+  /** 0 = loading/empty shell, 1 = fully live chart (matches web chartReveal). */
+  morphT: SharedValue<number>;
+  /** True while loading=true */
+  isLoading: SharedValue<boolean>;
+  /** True when not loading and fewer than two samples. */
+  isEmpty: SharedValue<boolean>;
+  yAxisOpacity: SharedValue<number>;
+  fillOpacity: SharedValue<number>;
+  lineOpacity: SharedValue<number>;
+  dotOpacity: SharedValue<number>;
+  badgeOpacity: SharedValue<number>;
+}
+
+/**
+ * Drives loading / empty / live visibility.
+ *
+ * Chart is fully revealed only when `!loading && hasData`. `morphT` animates
+ * between 0 and 1 when that condition changes. `isEmpty` is derived as
+ * `!loading && !hasData` for the empty overlay label.
+ */
+export function useChartReveal(
+  loading: boolean,
+  hasData: SharedValue<boolean>,
+): ChartRevealState {
+  // Best-guess initial so the common case — a live chart that already has data
+  // and isn't loading — paints fully revealed with no flash. The reaction below
+  // snaps it to the exact state on its first run.
+  const morphT = useSharedValue(loading ? 0 : 1);
+  const isLoading = useSharedValue(loading);
+
+  useLayoutEffect(() => {
+    isLoading.set(loading);
+  }, [loading, isLoading]);
+
+  // The reaction reads presence/loading on the UI thread (a worklet, never during
+  // render — so no Reanimated "reading `value` during render" warning), seeds the
+  // exact reveal state on its first run, then animates on later changes.
+  useAnimatedReaction(
+    () => !isLoading.get() && hasData.get(),
+    (chartVisible, prev) => {
+      "worklet";
+      if (prev === null || prev === undefined) {
+        // First run: snap to the correct initial reveal state (no animation).
+        morphT.set(chartVisible ? 1 : 0);
+        return;
+      }
+      if (prev !== chartVisible) {
+        morphT.set(
+          withTiming(chartVisible ? 1 : 0, {
+            duration: CHART_REVEAL_DURATION_MS,
+            easing: Easing.out(Easing.cubic),
+          }),
+        );
+      }
+    },
+    [hasData],
+  );
+
+  const isEmpty = useDerivedValue(() => !isLoading.get() && !hasData.get());
+
+  const yAxisOpacity = useDerivedValue(() =>
+    revealRamp(morphT.get(), DELAY.yAxis),
+  );
+  const fillOpacity = useDerivedValue(() =>
+    revealRamp(morphT.get(), DELAY.fill),
+  );
+  const lineOpacity = useDerivedValue(() =>
+    revealRamp(morphT.get(), DELAY.line),
+  );
+  const dotOpacity = useDerivedValue(() => revealRamp(morphT.get(), DELAY.dot));
+  const badgeOpacity = useDerivedValue(() =>
+    revealRamp(morphT.get(), DELAY.badge),
+  );
+
+  return {
+    morphT,
+    isLoading,
+    // useDerivedValue is SharedValue-compatible for `.value` reads in Skia.
+    isEmpty: isEmpty as unknown as SharedValue<boolean>,
+    yAxisOpacity,
+    fillOpacity,
+    lineOpacity,
+    dotOpacity,
+    badgeOpacity,
+  };
+}

package/src/hooks/useChartSkiaFont.ts

@@ -0,0 +1,34 @@
+import {
+  matchFont,
+  Skia,
+  useFont,
+  type SkFont,
+} from "@shopify/react-native-skia";
+
+import { resolveFontConfig } from "../core/resolveConfig";
+import type { FontConfig } from "../types";
+
+/**
+ * Resolves Skia text for charts: optional bundled `typeface` via `useFont`, otherwise
+ * `matchFont` with optional custom `fontManager`.
+ */
+export function useChartSkiaFont(
+  fontProp: FontConfig | undefined,
+  defaultFamily: string,
+  defaultSize: number,
+): SkFont {
+  const resolved = resolveFontConfig(fontProp, defaultFamily, defaultSize);
+  const { fontFamily, fontSize, fontWeight } = resolved;
+  const typefaceSource = fontProp?.typeface ?? null;
+  const customFont = useFont(typefaceSource, fontSize);
+
+  const fallbackFont = matchFont(
+    { fontFamily, fontSize, fontWeight },
+    fontProp?.fontManager ?? Skia.FontMgr.System(),
+  );
+
+  if (typefaceSource != null) {
+    return customFont ?? fallbackFont;
+  }
+  return fallbackFont;
+}