react-native-livechart 4.22.2 → 4.23.0

package/src/core/liveChartEngineTick.ts

@@ -41,6 +41,10 @@ export interface EngineTickMutable {
   extremaMaxTime: number;
   /** Previous frame's yRangeScale — detects an in-flight scale drag. */
   lastYRangeScale?: number;
+  /** Canvas width observed by the previous measured tick. */
+  lastCanvasWidth?: number;
+  /** Canvas height observed by the previous measured tick. */
+  lastCanvasHeight?: number;
 }
 
 export interface EngineTickInput {
@@ -142,6 +146,40 @@ export interface EngineTickInput {
   candleGapBridgeUnknown?: boolean;
 }
 
+const SUBPIXEL_SETTLE_THRESHOLD = 0.5;
+
+/**
+ * Lerps toward a target, then lands exactly once the remaining distance is
+ * smaller than half a rendered pixel.
+ */
+export function lerpAndSettle(
+  current: number,
+  target: number,
+  speed: number,
+  dt: number,
+  unitsPerPixel: number,
+): number {
+  "worklet";
+  const next = lerp(current, target, speed, dt);
+  const epsilon = Math.abs(unitsPerPixel) * SUBPIXEL_SETTLE_THRESHOLD;
+  return epsilon > 0 && Math.abs(target - next) <= epsilon ? target : next;
+}
+
+/**
+ * Advances a live timestamp only after the chart has moved by half a pixel.
+ */
+export function advanceTimestampByPixel(
+  current: number,
+  target: number,
+  secondsPerPixel: number,
+): number {
+  "worklet";
+  const step = Math.abs(secondsPerPixel) * SUBPIXEL_SETTLE_THRESHOLD;
+  if (!(step > 0) || !Number.isFinite(step) || target <= current) return target;
+  const elapsedSteps = Math.floor((target - current) / step);
+  return elapsedSteps > 0 ? current + elapsedSteps * step : current;
+}
+
 /**
  * One frame of the live chart engine (mirrors `useLiveChartEngine` worklet body).
  * Mutates `state` in place for testability and reuse from the hook.
@@ -153,7 +191,6 @@ export function tickLiveChartEngineFrame(
   "worklet";
   const baseNow = input.nowOverride ?? input.nowSeconds ?? Date.now() / 1000;
   const liveEdge = baseNow + (input.windowBuffer ?? 0) * input.timeWindow;
-  state.liveEdge = liveEdge;
   const viewEnd = input.viewEnd;
   // First time of the visible series' data — the floor a frozen edge must stay
   // at or above. `-Infinity` when there's no data to bound against, so the freeze
@@ -177,6 +214,17 @@ export function tickLiveChartEngineFrame(
     viewEnd != null &&
     viewEnd >= firstDataTime &&
     (viewEnd < liveEdge || input.allowFutureViewEnd === true);
+  const canvasChanged =
+    state.lastCanvasWidth !== input.canvasWidth ||
+    state.lastCanvasHeight !== input.canvasHeight;
+  state.liveEdge =
+    !canvasChanged && input.canvasWidth > 0 && input.timeWindow > 0
+      ? advanceTimestampByPixel(
+          state.liveEdge,
+          liveEdge,
+          input.timeWindow / input.canvasWidth,
+        )
+      : liveEdge;
   if (scrolledBack) {
     state.timestamp = viewEnd;
   } else if (!input.paused) {
@@ -188,6 +236,16 @@ export function tickLiveChartEngineFrame(
     if (returnT != null && returnT < 1 && input.returnFrom != null) {
       state.timestamp =
         input.returnFrom + (liveEdge - input.returnFrom) * returnT;
+    } else if (
+      !canvasChanged &&
+      input.canvasWidth > 0 &&
+      input.timeWindow > 0
+    ) {
+      state.timestamp = advanceTimestampByPixel(
+        state.timestamp,
+        liveEdge,
+        input.timeWindow / input.canvasWidth,
+      );
     } else {
       state.timestamp = liveEdge;
     }
@@ -195,6 +253,8 @@ export function tickLiveChartEngineFrame(
   // else: paused with no active pan → leave the frozen timestamp untouched.
 
   if (input.canvasWidth === 0 || input.canvasHeight === 0) return;
+  state.lastCanvasWidth = input.canvasWidth;
+  state.lastCanvasHeight = input.canvasHeight;
 
   const speed = input.smoothing;
   // One-shot settle (snapKey change): collapse this frame's easing so the
@@ -214,16 +274,30 @@ export function tickLiveChartEngineFrame(
     (1 - gapRatio) *
       (input.adaptiveSpeedBoost ?? MOTION_METRICS_DEFAULTS.adaptiveSpeedBoost);
 
+  const valueUnitsPerPixel =
+    (state.displayMax - state.displayMin) / input.canvasHeight;
   state.displayValue = snap
     ? target
-    : lerp(state.displayValue, target, adaptiveSpeed, input.dt);
+    : lerpAndSettle(
+        state.displayValue,
+        target,
+        adaptiveSpeed,
+        input.dt,
+        valueUnitsPerPixel,
+      );
 
   // Pinch-zoom: ease toward the zoom override when set, else the configured
   // window. Mirrors the viewEnd freeze above (width vs. right edge).
   const targetWindow = input.viewWindow ?? input.timeWindow;
   state.displayWindow = snap
     ? targetWindow
-    : lerp(state.displayWindow, targetWindow, speed, input.dt);
+    : lerpAndSettle(
+        state.displayWindow,
+        targetWindow,
+        speed,
+        input.dt,
+        targetWindow / input.canvasWidth,
+      );
 
   const winStart = state.timestamp - state.displayWindow;
 
@@ -437,16 +511,29 @@ export function tickLiveChartEngineFrame(
     const maxV = input.maxValue;
     if (maxV !== undefined && tMax > maxV) tMax = maxV;
 
+    const rangeUnitsPerPixel = (tMax - tMin) / input.canvasHeight;
     if (snap || yScaleDragging || tMin < state.displayMin) {
       state.displayMin = tMin;
     } else {
-      state.displayMin = lerp(state.displayMin, tMin, speed, input.dt);
+      state.displayMin = lerpAndSettle(
+        state.displayMin,
+        tMin,
+        speed,
+        input.dt,
+        rangeUnitsPerPixel,
+      );
     }
 
     if (snap || yScaleDragging || tMax > state.displayMax) {
       state.displayMax = tMax;
     } else {
-      state.displayMax = lerp(state.displayMax, tMax, speed, input.dt);
+      state.displayMax = lerpAndSettle(
+        state.displayMax,
+        tMax,
+        speed,
+        input.dt,
+        rangeUnitsPerPixel,
+      );
     }
   }
 
@@ -485,6 +572,12 @@ export function tickLiveChartEngineFrame(
     }
     state.edgeValue = snap
       ? edgeTarget
-      : lerp(state.edgeValue, edgeTarget, speed, input.dt);
+      : lerpAndSettle(
+          state.edgeValue,
+          edgeTarget,
+          speed,
+          input.dt,
+          valueUnitsPerPixel,
+        );
   }
 }

package/src/core/resolveConfig.ts

@@ -94,6 +94,7 @@ export interface ResolvedBadgeConfig {
 }
 
 export interface ResolvedYAxisConfig {
+  side: "left" | "right";
   minGap: number;
   /** Multiplier used to choose and align representable dynamic nice intervals. */
   intervalScale: number;
@@ -531,6 +532,7 @@ export function resolveBadge(
 }
 
 const Y_AXIS_DEFAULTS: ResolvedYAxisConfig = {
+  side: "right",
   minGap: 36,
   intervalScale: 1,
   count: 0,

package/src/core/useLiveChartEngine.ts

@@ -20,6 +20,7 @@ import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type {
   CandleGap,
   CandlePoint,
+  LiveChartFrameStats,
   LiveChartPoint,
   SeriesConfig,
 } from "../types";
@@ -93,6 +94,10 @@ export interface EngineConfig {
    * {@link LiveChartProps.static}.
    */
   static?: boolean;
+  /** Runtime gate for the frame loop. Gestures and configuration stay mounted. */
+  isFrameLoopActive?: SharedValue<boolean>;
+  /** Optional development-only frame publication counters. */
+  debugFrameStats?: SharedValue<LiveChartFrameStats>;
   /**
    * Opaque key that snaps the framing to its target in one frame whenever it
    * changes (the next tick bypasses `smoothing` for the window, Y-range, and
@@ -282,6 +287,8 @@ export function makeEngineFrameScratch(): EngineFrameScratch {
       extremaMaxValue: NaN,
       extremaMinTime: NaN,
       extremaMaxTime: NaN,
+      lastCanvasWidth: undefined,
+      lastCanvasHeight: undefined,
     },
     input: {
       dt: MS_PER_FRAME_60FPS,
@@ -323,6 +330,8 @@ export function applyLiveChartEngineFrame(
     extremaMaxValue: NaN,
     extremaMinTime: NaN,
     extremaMaxTime: NaN,
+    lastCanvasWidth: undefined,
+    lastCanvasHeight: undefined,
   };
   state.displayValue = sv.displayValue.value;
   state.displayMin = sv.displayMin.value;
@@ -408,6 +417,40 @@ export function applyLiveChartEngineFrame(
 export function useLiveChartEngine(
   config: EngineConfig,
 ): SingleEngineState & ChartEngineScroll & ChartEngineEdge {
+  const {
+    data,
+    value,
+    timeWindow: configuredTimeWindow,
+    smoothing: configuredSmoothing,
+    adaptiveSpeedBoost,
+    exaggerate,
+    referenceValue: configuredReferenceValue,
+    referenceValues: configuredReferenceValues,
+    liveReferenceValues,
+    thresholdRangePoints: configuredThresholdRangePoints,
+    thresholdRangeExtendToNow: configuredThresholdRangeExtendToNow,
+    thresholdRangeExtendToStart: configuredThresholdRangeExtendToStart,
+    nonNegative,
+    maxValue,
+    yRangeScale,
+    nowOverride,
+    windowBuffer,
+    paused,
+    scrollEnabled,
+    allowFutureViewEnd,
+    returnToLiveMs,
+    static: isStatic,
+    isFrameLoopActive,
+    debugFrameStats,
+    snapKey,
+    mode,
+    candles,
+    liveCandle,
+    candleGaps,
+    candleGapBridgeNoTrades,
+    candleGapBridgeUnavailable,
+    candleGapBridgeUnknown,
+  } = config;
   // Pinch-zoom window-width override (null = follow the configured window).
   // Declared first so `timeWindow` below can fold it in. Defaults to null so
   // charts without `zoom` behave exactly as before.
@@ -418,26 +461,28 @@ export function useLiveChartEngine(
   // the new prop forever, and prop-driven window changes would silently no-op.
   useEffect(() => {
     viewWindow.set(null);
-  }, [config.timeWindow, viewWindow]);
+  }, [configuredTimeWindow, viewWindow]);
 
   // Low-frequency config → UI thread via useDerivedValue. `timeWindow` is the
   // *effective* target window: the zoom override when set, else the prop. Both
   // the tick's window lerp and the X-axis tick selection read it, so zoom flows
   // downstream for free (mirrors how viewEnd drives `timestamp`).
-  const timeWindow = useDerivedValue(() => viewWindow.value ?? config.timeWindow);
+  const timeWindow = useDerivedValue(
+    () => viewWindow.value ?? configuredTimeWindow,
+  );
   // Static charts snap to their target in one tick (smoothing=1), so the single
   // settle reaction below produces the final state with no per-frame easing.
   const smoothing = useDerivedValue(() =>
-    config.static ? 1 : config.smoothing,
+    isStatic ? 1 : configuredSmoothing,
   );
-  const adaptiveSpeedBoostSV = useDerivedValue(() => config.adaptiveSpeedBoost);
-  const exaggerateSV = useDerivedValue(() => config.exaggerate ?? false);
-  const referenceValue = useDerivedValue(() => config.referenceValue);
+  const adaptiveSpeedBoostSV = useDerivedValue(() => adaptiveSpeedBoost);
+  const exaggerateSV = useDerivedValue(() => exaggerate ?? false);
+  const referenceValue = useDerivedValue(() => configuredReferenceValue);
   // Captured directly (not via `config.`) so Reanimated tracks the SharedValue and
   // the merge re-runs each frame while a line is dragged; stable when idle.
-  const liveReferenceValuesSV = config.liveReferenceValues;
+  const liveReferenceValuesSV = liveReferenceValues;
   const referenceValues = useDerivedValue(() => {
-    const base = config.referenceValues;
+    const base = configuredReferenceValues;
     const live = liveReferenceValuesSV?.value;
     if (!live || live.length === 0) return base;
     return base && base.length > 0 ? base.concat(live) : live;
@@ -446,56 +491,56 @@ export function useLiveChartEngine(
   // directly (not via `config.`) like `liveReferenceValues`, so the live
   // `threshold.series` SharedValue is tracked and the tick sees fresh points.
   const thresholdRangeSourceSV =
-    config.thresholdRangePoints !== undefined &&
-    !Array.isArray(config.thresholdRangePoints)
-      ? config.thresholdRangePoints
+    configuredThresholdRangePoints !== undefined &&
+    !Array.isArray(configuredThresholdRangePoints)
+      ? configuredThresholdRangePoints
       : null;
   const thresholdRangePoints = useDerivedValue<LiveChartPoint[] | undefined>(
     () =>
       thresholdRangeSourceSV
         ? thresholdRangeSourceSV.value
-        : (config.thresholdRangePoints as LiveChartPoint[] | undefined),
+        : (configuredThresholdRangePoints as LiveChartPoint[] | undefined),
   );
   const thresholdRangeExtendToNow = useDerivedValue(
-    () => config.thresholdRangeExtendToNow ?? true,
+    () => configuredThresholdRangeExtendToNow ?? true,
   );
   const thresholdRangeExtendToStart = useDerivedValue(
-    () => config.thresholdRangeExtendToStart ?? true,
+    () => configuredThresholdRangeExtendToStart ?? true,
   );
-  const nonNegativeSV = useDerivedValue(() => config.nonNegative ?? false);
-  const maxValueSV = useDerivedValue(() => config.maxValue);
-  const nowOverrideSV = useDerivedValue(() => config.nowOverride);
-  const windowBufferSV = useDerivedValue(() => config.windowBuffer ?? 0);
-  const pausedSV = useDerivedValue(() => config.paused ?? false);
+  const nonNegativeSV = useDerivedValue(() => nonNegative ?? false);
+  const maxValueSV = useDerivedValue(() => maxValue);
+  const nowOverrideSV = useDerivedValue(() => nowOverride);
+  const windowBufferSV = useDerivedValue(() => windowBuffer ?? 0);
+  const pausedSV = useDerivedValue(() => paused ?? false);
   // Whether time-scroll is active. Drives the return-to-live reaction below
   // (the tick no longer reads it — clearing `viewEnd` is what makes it follow).
   // Defaults to enabled so a caller that omits it behaves as before.
-  const scrollEnabledSV = useDerivedValue(() => config.scrollEnabled ?? true);
+  const scrollEnabledSV = useDerivedValue(() => scrollEnabled ?? true);
   // Honor a viewEnd parked past the live edge (timeScroll.overscroll).
   const allowFutureViewEndSV = useDerivedValue(
-    () => config.allowFutureViewEnd ?? false,
+    () => allowFutureViewEnd ?? false,
   );
   // Return-to-live glide duration (ms); 0 = instant snap. Read by the reaction.
   const returnToLiveMsSV = useDerivedValue(
-    () => config.returnToLiveMs ?? RETURN_TO_LIVE_MS,
+    () => returnToLiveMs ?? RETURN_TO_LIVE_MS,
   );
-  const modeSV = useDerivedValue(() => config.mode ?? "line");
-  const candleGapsSV = useDerivedValue(() => config.candleGaps);
+  const modeSV = useDerivedValue(() => mode ?? "line");
+  const candleGapsSV = useDerivedValue(() => candleGaps);
   const candleGapBridgeNoTradesSV = useDerivedValue(
-    () => config.candleGapBridgeNoTrades ?? false,
+    () => candleGapBridgeNoTrades ?? false,
   );
   const candleGapBridgeUnavailableSV = useDerivedValue(
-    () => config.candleGapBridgeUnavailable ?? false,
+    () => candleGapBridgeUnavailable ?? false,
   );
   const candleGapBridgeUnknownSV = useDerivedValue(
-    () => config.candleGapBridgeUnknown ?? false,
+    () => candleGapBridgeUnknown ?? false,
   );
 
   // Animation state (mutated on UI thread each frame)
   const displayValue = useSharedValue(0);
   const displayMin = useSharedValue(0);
   const displayMax = useSharedValue(1);
-  const displayWindow = useSharedValue(config.timeWindow);
+  const displayWindow = useSharedValue(configuredTimeWindow);
   const canvasWidth = useSharedValue(0);
   const canvasHeight = useSharedValue(0);
   // Seed once; overwritten by the frame callback on the first tick.
@@ -525,8 +570,6 @@ export function useLiveChartEngine(
 
   // High-frequency data reads directly from the caller's shared values —
   // no useDerivedValue bridging, no closure serialization per tick.
-  const { data, value, candles, liveCandle } = config;
-
   // One-shot "snap the framing" flag. The effect below flips it to `true` when
   // `snapKey` changes; the next frame consumes it (bypassing `smoothing` for the
   // window / range / value) and clears it, so a timeframe / dataset switch lands
@@ -534,20 +577,20 @@ export function useLiveChartEngine(
   const snapSV = useSharedValue(false);
   // Compare against the previous key (not a "first render" flag) so React 18
   // StrictMode's double-invoked mount effect can't fire a spurious snap.
-  const lastSnapKey = useRef(config.snapKey);
+  const lastSnapKey = useRef(snapKey);
   // Layout effect, not passive: a passive effect runs after the commit has
   // painted, so the frame between them draws the new data/candleWidth against
   // the OLD framing (a one-frame squeeze on a timeframe switch). Flipping the
   // flag before paint lets the first frame with the new props consume the snap.
   useLayoutEffect(() => {
-    if (config.snapKey === lastSnapKey.current) return;
-    lastSnapKey.current = config.snapKey;
+    if (snapKey === lastSnapKey.current) return;
+    lastSnapKey.current = snapKey;
     snapSV.set(true);
-  }, [config.snapKey, snapSV]);
+  }, [snapKey, snapSV]);
 
   // Static charts run zero per-frame loops. `isStaticSV` gates both the
   // frame-callback autostart and the one-shot settle reaction below.
-  const isStaticSV = useDerivedValue(() => config.static ?? false);
+  const isStaticSV = useDerivedValue(() => isStatic ?? false);
 
   // Single refs object shared by the frame callback and the settle reaction so
   // they can never drift out of sync. Keep its identity stable across unrelated
@@ -576,7 +619,7 @@ export function useLiveChartEngine(
       thresholdRangeExtendToNow,
       nonNegativeSV,
       maxValueSV,
-      yRangeScaleSV: config.yRangeScale,
+      yRangeScaleSV: yRangeScale,
       nowOverrideSV,
       windowBufferSV,
       pausedSV,
@@ -610,7 +653,6 @@ export function useLiveChartEngine(
       candles,
       canvasHeight,
       canvasWidth,
-      config.yRangeScale,
       data,
       displayMax,
       displayMin,
@@ -638,12 +680,13 @@ export function useLiveChartEngine(
       thresholdRangeExtendToNow,
       thresholdRangeExtendToStart,
       thresholdRangePoints,
-      timestamp,
       timeWindow,
+      timestamp,
       value,
       viewEnd,
       viewWindow,
       windowBufferSV,
+      yRangeScale,
     ],
   );
   const frameScratchRef = useRef<EngineFrameScratch | null>(null);
@@ -657,13 +700,37 @@ export function useLiveChartEngine(
   // loop is fully inert in static mode (the invariant that makes this worth it).
   const engineFrameCallback = useFrameCallback((frameInfo) => {
     "worklet";
+    if (isFrameLoopActive?.get() === false) return;
+    const beforeValue = debugFrameStats ? displayValue.get() : 0;
+    const beforeMin = debugFrameStats ? displayMin.get() : 0;
+    const beforeMax = debugFrameStats ? displayMax.get() : 0;
+    const beforeWindow = debugFrameStats ? displayWindow.get() : 0;
+    const beforeTimestamp = debugFrameStats ? timestamp.get() : 0;
+    const beforeLiveEdge = debugFrameStats ? liveEdge.get() : 0;
+    const beforeEdgeValue = debugFrameStats ? edgeValue.get() : 0;
     applyLiveChartEngineFrame(frameInfo, frameRefs, frameScratchRef.current!);
-  }, !config.static);
+    if (debugFrameStats) {
+      const didPublish =
+        beforeValue !== displayValue.get() ||
+        beforeMin !== displayMin.get() ||
+        beforeMax !== displayMax.get() ||
+        beforeWindow !== displayWindow.get() ||
+        beforeTimestamp !== timestamp.get() ||
+        beforeLiveEdge !== liveEdge.get() ||
+        beforeEdgeValue !== edgeValue.get();
+      const previous = debugFrameStats.get();
+      debugFrameStats.set({
+        frames: previous.frames + 1,
+        published: previous.published + (didPublish ? 1 : 0),
+        skipped: previous.skipped + (didPublish ? 0 : 1),
+      });
+    }
+  }, !isStatic);
   useEffect(() => {
     // Reanimated only seeds `isActive` from `autostart` on mount. Keep the
     // imperative state aligned when a chart switches between static and live.
-    engineFrameCallback.setActive(!config.static);
-  }, [config.static, engineFrameCallback]);
+    engineFrameCallback.setActive(!isStatic);
+  }, [isStatic, engineFrameCallback]);
 
   // When time-scroll is disabled while scrolled back, return the window to the
   // live edge. With a positive duration this glides: snapshot the frozen edge into

package/src/hooks/useBadge.ts

@@ -1,4 +1,5 @@
 import { type SkFont } from "@shopify/react-native-skia";
+import { useRef } from "react";
 import {
   useDerivedValue,
   useSharedValue,
@@ -9,7 +10,10 @@ import {
   MOTION_METRICS_DEFAULTS,
   MS_PER_FRAME_60FPS,
 } from "../constants";
-import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import {
+  measureFontTextWidth,
+  type TextWidthCache,
+} from "../lib/measureFontTextWidth";
 import type { ChartEngineWithLiveValue } from "../core/useLiveChartEngine";
 import {
   badgeTailAndCap,
@@ -64,6 +68,7 @@ export function useBadge(
   const colorR = useSharedValue(0);
   const colorG = useSharedValue(0);
   const colorB = useSharedValue(0);
+  const textWidthCacheRef = useRef<TextWidthCache>({});
 
   const upRgb = hexToRgb(palette.dotUp);
   const downRgb = hexToRgb(palette.dotDown);
@@ -103,7 +108,7 @@ export function useBadge(
         : padding.top + ((dMax - liveVal) / valRange) * chartH;
 
     const text = formatValue(liveVal);
-    const textW = measureFontTextWidth(font, text);
+    const textW = measureFontTextWidth(font, text, textWidthCacheRef.current);
 
     const pillH = font.getSize() + badgeMetrics.padY * 2;
     // `midY` is the pill's vertical center (the tail anchors here); `capR` is the

package/src/hooks/useCandlePaths.ts

@@ -38,6 +38,8 @@ export function useCandleWidthLerp(
   autostart: boolean,
   /** Only advance the displayed width while candle mode is active. */
   active: boolean,
+  /** Runtime gate shared with the chart engine. */
+  isFrameLoopActive?: SharedValue<boolean>,
 ): SharedValue<number> {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
@@ -51,16 +53,16 @@ export function useCandleWidthLerp(
 
   const widthFrameCallback = useFrameCallback((frameInfo) => {
     "worklet";
-    if (!active) return;
+    if (!active || isFrameLoopActive?.get() === false) return;
     const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
-    displayCandleWidth.set(
-      lerp(
-        displayCandleWidth.get(),
-        targetCandleWidth.get(),
-        widthLerpSpeed.get(),
-        dt,
-      ),
+    const target = targetCandleWidth.get();
+    const next = lerp(
+      displayCandleWidth.get(),
+      target,
+      widthLerpSpeed.get(),
+      dt,
     );
+    displayCandleWidth.set(Math.abs(target - next) < 0.01 ? target : next);
   }, autostart);
   useEffect(() => {
     // `autostart` is an initial seed in Reanimated, not a reactive switch.

package/src/hooks/useDegen.ts

@@ -46,6 +46,7 @@ export function useDegen(
   momentumSV: SharedValue<Momentum>,
   cfg: ResolvedDegenConfig | null,
   onShake?: (payload: DegenShakePayload) => void,
+  isFrameLoopActive?: SharedValue<boolean>,
 ): {
   pack: SharedValue<Float64Array<ArrayBuffer>>;
   packRevision: SharedValue<number>;
@@ -186,6 +187,7 @@ export function useDegen(
   useFrameCallback(
     /* istanbul ignore next -- worklet runs on UI thread, not in Jest */ () => {
       "worklet";
+      if (isFrameLoopActive?.get() === false) return;
       const now = engine.timestamp.get();
       const buf = pack.get();
       const slots = slotCountSV.get();

package/src/hooks/useMarkers.ts

@@ -55,6 +55,8 @@ export function useMarkers(
   lineLinear = false,
   /** Collision config; default `"anchored"` (no stacking). */
   cluster: ResolvedMarkerCluster = ANCHORED_CLUSTER,
+  /** Runtime gate shared with the chart engine. */
+  isFrameLoopActive?: SharedValue<boolean>,
 ): {
   projected: SharedValue<ProjectedMarker[]>;
   tapGesture: ReturnType<typeof Gesture.Tap>;
@@ -80,6 +82,7 @@ export function useMarkers(
   const markerFrameCallback = useFrameCallback(
     /* istanbul ignore next -- worklet runs on UI thread, not in Jest */ () => {
       "worklet";
+      if (isFrameLoopActive?.get() === false) return;
       const cache = cacheRef.current!;
       if (!active) {
         if (projected.get().length > 0) projected.set([]);

package/src/hooks/useReferenceDrag.ts

@@ -12,6 +12,7 @@ import type { ChartPadding } from "../draw/line";
 import {
   clampToBounds,
   nearestDraggableIndex,
+  referenceDragOwnsTouch,
   referenceValueOut,
   resolveDragIntent,
 } from "../math/referenceDrag";
@@ -257,17 +258,21 @@ export function useReferenceDrag(
     activated.set(false);
   };
 
-  // Geometric hit-test shared with the scrub gesture: is (x,y) within reach of a
-  // draggable line's handle? The scrub's `onStart` consults this to bail on a
-  // press over a line, so it never drops a crosshair there even though it activates
-  // independently of this manual-activation pan (the `Exclusive` priority alone
-  // doesn't hold scrub back while this gesture is merely pressed). x is unused —
-  // a Form-A line spans the full width, so only the y-reach matters.
+  // Hit-test shared with the scrub gesture: does this drag own the touch? The
+  // scrub's `onStart` consults it to bail, so it never drops a crosshair on a
+  // line even though it activates independently of this manual-activation pan
+  // (the `Exclusive` priority alone doesn't hold scrub back — not while this
+  // gesture is merely pressed, and not while it is dragging either). Once a line
+  // is grabbed the answer is yes regardless of position: the scrub asks with its
+  // touch-DOWN point, which a longer drag has carried the line away from, so the
+  // geometric test alone said "no line here" and a crosshair opened mid-drag.
+  // Otherwise it is the y-reach around the handles (x is unused — a Form-A line
+  // spans the full width).
   /* istanbul ignore next -- worklet, runs on the UI thread */
   const hitTest = (_x: number, y: number): boolean => {
     "worklet";
     if (!anyDraggable) return false;
-    return nearestDraggableIndex(handleYs.get(), y, GRAB_SLOP) >= 0;
+    return referenceDragOwnsTouch(dragIndex.get(), handleYs.get(), y, GRAB_SLOP);
   };
 
   const gesture = Gesture.Pan()