react-native-livechart 2.0.1 → 3.1.0

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;

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,
@@ -30,40 +29,16 @@ export function useCandlePaths(
   candleWidthSecs: number,
   active: boolean,
   candleMetrics: CandleMetrics = CANDLE_METRICS_DEFAULTS,
+  /** Static charts run no loops: register without starting. Default `true`. */
+  autostart = true,
 ) {
   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";
@@ -77,7 +52,7 @@ export function useCandlePaths(
         dt,
       ),
     );
-  });
+  }, autostart);
 
   /* istanbul ignore next -- worklet */
   const geometry = useDerivedValue(() => {
@@ -99,68 +74,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/useChartColors.ts

@@ -12,6 +12,11 @@ export interface ChartColors {
   gradientTopColor: string;
   /** Bottom gradient stop — custom opacity or palette default. */
   gradientBottomColor: string;
+  /** Gradient color stops (top → bottom). Custom `colors` when provided, else the
+   *  2-stop `[gradientTopColor, gradientBottomColor]` fallback. */
+  gradientColors: string[];
+  /** Stop positions matching `gradientColors`, or undefined for even spacing. */
+  gradientPositions: number[] | undefined;
 }
 
 /**
@@ -39,10 +44,24 @@ export function useChartColors(
       ? `rgba(${r}, ${g}, ${b}, ${gradientCfg.bottomOpacity})`
       : palette.fillBottom;
 
+  const customColors = gradientCfg?.colors;
+  const hasCustomColors = Array.isArray(customColors) && customColors.length >= 2;
+  const gradientColors = hasCustomColors
+    ? customColors
+    : [gradientTopColor, gradientBottomColor];
+  const gradientPositions =
+    hasCustomColors &&
+    gradientCfg?.positions !== undefined &&
+    gradientCfg.positions.length === customColors.length
+      ? gradientCfg.positions
+      : undefined;
+
   return {
     backgroundColor,
     gradientEnd,
     gradientTopColor,
     gradientBottomColor,
+    gradientColors,
+    gradientPositions,
   };
 }

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/useChartReveal.ts

@@ -58,6 +58,8 @@ export interface ChartRevealState {
 export function useChartReveal(
   loading: boolean,
   hasData: SharedValue<boolean>,
+  /** Static charts skip the entry ramp: morphT snaps to its target, no `withTiming`. */
+  isStatic = false,
 ): 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
@@ -71,13 +73,14 @@ export function useChartReveal(
 
   // 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.
+  // exact reveal state on its first run, then animates on later changes. Static
+  // charts always snap (no `withTiming` ramp) so no entry animation ever runs.
   useAnimatedReaction(
     () => !isLoading.get() && hasData.get(),
     (chartVisible, prev) => {
       "worklet";
-      if (prev === null || prev === undefined) {
-        // First run: snap to the correct initial reveal state (no animation).
+      if (isStatic || prev === null || prev === undefined) {
+        // Static, or first run: snap to the correct reveal state (no animation).
         morphT.set(chartVisible ? 1 : 0);
         return;
       }
@@ -90,7 +93,7 @@ export function useChartReveal(
         );
       }
     },
-    [hasData],
+    [hasData, isStatic],
   );
 
   const isEmpty = useDerivedValue(() => !isLoading.get() && !hasData.get());

package/src/hooks/useCrosshair.ts

@@ -16,6 +16,7 @@ import type { CandlePoint, LiveChartPalette, ScrubPoint } from "../types";
 import {
   computeCandleTooltipLayout,
   computeCrosshairOpacity,
+  computeScrubDotY,
   computeScrubTime,
   deriveCrosshairTooltipSingle,
   type CrosshairState,
@@ -57,9 +58,14 @@ export function useCrosshair(
   candleOpts?: CrosshairCandleOpts,
   /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
   panGestureDelay = 0,
+  onGestureStart?: () => void,
+  onGestureEnd?: () => void,
 ): CrosshairState {
   const scrubX = useSharedValue(-1);
   const scrubActive = useSharedValue(false);
+  // Tracks whether the active scrub phase actually began, so a tap that never
+  // activates doesn't emit a spurious onGestureEnd.
+  const gestureStarted = useSharedValue(false);
 
   const scrubTime = useDerivedValue(() =>
     computeScrubTime(
@@ -112,6 +118,19 @@ export function useCrosshair(
     ),
   );
 
+  // Y pixel of the scrub intersection — used by the selection dot. -1 when
+  // there's no value to mark.
+  const scrubDotY = useDerivedValue(() =>
+    computeScrubDotY(
+      scrubValue.get(),
+      engine.displayMin.get(),
+      engine.displayMax.get(),
+      engine.canvasHeight.get(),
+      padding.top,
+      padding.bottom,
+    ),
+  );
+
   // Monospace advance width, measured once per render (not per scrub frame) so
   // the tooltip layout worklet can size text by character count instead of a
   // per-frame Skia measureText.
@@ -165,7 +184,19 @@ export function useCrosshair(
     onScrub?.(null);
   }
 
+  /* istanbul ignore next */
+  function handleGestureStart() {
+    onGestureStart?.();
+  }
+
+  /* istanbul ignore next */
+  function handleGestureEnd() {
+    onGestureEnd?.();
+  }
+
   const hasOnScrub = onScrub != null;
+  const hasOnGestureStart = onGestureStart != null;
+  const hasOnGestureEnd = onGestureEnd != null;
 
   useAnimatedReaction(
     () => {
@@ -178,13 +209,14 @@ export function useCrosshair(
       if (val === null || time < 0) return "__pending__";
       const chartW = engine.canvasWidth.get() - padding.left - padding.right;
       if (chartW <= 0) return "__pending__";
-      const h = engine.canvasHeight.get();
-      const chartH = h - padding.top - padding.bottom;
-      const valRange = engine.displayMax.get() - engine.displayMin.get();
-      const dotY =
-        valRange === 0
-          ? padding.top + chartH / 2
-          : padding.top + ((engine.displayMax.get() - val) / valRange) * chartH;
+      const dotY = computeScrubDotY(
+        val,
+        engine.displayMin.get(),
+        engine.displayMax.get(),
+        engine.canvasHeight.get(),
+        padding.top,
+        padding.bottom,
+      );
       let candleJson: string | null = null;
       if (isCandleMode) {
         const c = scrubCandle.get();
@@ -229,6 +261,8 @@ export function useCrosshair(
         if (!enabled) return;
         scrubX.set(e.x);
         scrubActive.set(true);
+        gestureStarted.set(true);
+        if (hasOnGestureStart) scheduleOnRN(handleGestureStart);
       },
     )
     .onUpdate(
@@ -243,6 +277,10 @@ export function useCrosshair(
         "worklet";
         scrubActive.set(false);
         if (hasOnScrub) scheduleOnRN(handleScrubEnd);
+        if (gestureStarted.get()) {
+          gestureStarted.set(false);
+          if (hasOnGestureEnd) scheduleOnRN(handleGestureEnd);
+        }
       },
     );
 
@@ -258,6 +296,7 @@ export function useCrosshair(
     scrubValue,
     crosshairOpacity,
     tooltipLayout,
+    scrubDotY,
     gesture,
   };
 }

package/src/hooks/useCrosshairSeries.ts

@@ -5,6 +5,7 @@ import {
   useDerivedValue,
   useSharedValue,
 } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
 import { type ChartPadding } from "../draw/line";
 import type { ScrubPointMulti } from "../types";
@@ -14,6 +15,7 @@ import {
 } from "./crosshairSeries";
 import {
   computeCrosshairOpacity,
+  computeScrubDotY,
   computeScrubTime,
   HIDDEN_TOOLTIP,
   type CrosshairState,
@@ -30,9 +32,14 @@ export function useCrosshairSeries(
   onScrub?: (point: ScrubPointMulti | null) => void,
   /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
   panGestureDelay = 0,
+  onGestureStart?: () => void,
+  onGestureEnd?: () => void,
 ): CrosshairState {
   const scrubX = useSharedValue(-1);
   const scrubActive = useSharedValue(false);
+  // Tracks whether the active scrub phase actually began, so a tap that never
+  // activates doesn't emit a spurious onGestureEnd.
+  const gestureStarted = useSharedValue(false);
 
   const scrubTime = useDerivedValue(() =>
     computeScrubTime(
@@ -62,9 +69,34 @@ export function useCrosshairSeries(
     ),
   );
 
+  // Y pixel of the scrub intersection (leading-series value) — used by the
+  // selection dot. -1 when there's no value to mark.
+  const scrubDotY = useDerivedValue(() =>
+    computeScrubDotY(
+      scrubValue.get(),
+      engine.displayMin.get(),
+      engine.displayMax.get(),
+      engine.canvasHeight.get(),
+      padding.top,
+      padding.bottom,
+    ),
+  );
+
   const tooltipLayout = useSharedValue(HIDDEN_TOOLTIP);
 
+  /* istanbul ignore next */
+  function handleGestureStart() {
+    onGestureStart?.();
+  }
+
+  /* istanbul ignore next */
+  function handleGestureEnd() {
+    onGestureEnd?.();
+  }
+
   const hasOnScrub = onScrub != null;
+  const hasOnGestureStart = onGestureStart != null;
+  const hasOnGestureEnd = onGestureEnd != null;
 
   useAnimatedReaction(
     () => {
@@ -77,14 +109,14 @@ export function useCrosshairSeries(
       if (chartW <= 0) return "__pending__";
       const r = interpolateSeriesAtTime(engine.series.get(), time);
       if (r.primary === null) return "__pending__";
-      const h = engine.canvasHeight.get();
-      const chartH = h - padding.top - padding.bottom;
-      const valRange = engine.displayMax.get() - engine.displayMin.get();
-      const dotY =
-        valRange === 0
-          ? padding.top + chartH / 2
-          : padding.top +
-            ((engine.displayMax.get() - r.primary) / valRange) * chartH;
+      const dotY = computeScrubDotY(
+        r.primary,
+        engine.displayMin.get(),
+        engine.displayMax.get(),
+        engine.canvasHeight.get(),
+        padding.top,
+        padding.bottom,
+      );
       return JSON.stringify({
         time,
         x,
@@ -136,6 +168,8 @@ export function useCrosshairSeries(
         if (!enabled) return;
         scrubX.set(e.x);
         scrubActive.set(true);
+        gestureStarted.set(true);
+        if (hasOnGestureStart) scheduleOnRN(handleGestureStart);
       },
     )
     .onUpdate(
@@ -149,6 +183,10 @@ export function useCrosshairSeries(
       /* istanbul ignore next */ () => {
         "worklet";
         scrubActive.set(false);
+        if (gestureStarted.get()) {
+          gestureStarted.set(false);
+          if (hasOnGestureEnd) scheduleOnRN(handleGestureEnd);
+        }
       },
     );
 
@@ -164,6 +202,7 @@ export function useCrosshairSeries(
     scrubValue,
     crosshairOpacity,
     tooltipLayout,
+    scrubDotY,
     gesture,
   };
 }