react-native-livechart 1.0.0 → 1.1.0

package/src/components/LiveChart.tsx

@@ -21,6 +21,7 @@ import { DEFAULT_ACCENT_COLOR } from "../constants";
 import {
   resolveBadge,
   resolveDegen,
+  resolveDot,
   resolveGradient,
   resolveGridStyle,
   resolveLeftEdgeFade,
@@ -32,6 +33,7 @@ import {
   resolveYAxis,
 } from "../core/resolveConfig";
 import { useLiveChartEngine } from "../core/useLiveChartEngine";
+import { pulseRadialOutset } from "../draw/line";
 import { resolveChartLayout } from "../hooks/resolveChartLayout";
 import { useBadge } from "../hooks/useBadge";
 import { useCandlePaths } from "../hooks/useCandlePaths";
@@ -126,6 +128,7 @@ function useLiveChartController({
   badge = true,
   momentum = true,
   pulse = true,
+  dot,
   valueLine = true,
   showValue = false,
   valueMomentumColor = false,
@@ -158,6 +161,9 @@ function useLiveChartController({
   const gradientCfg = isCandle ? null : resolveGradient(gradient);
   const valueLineCfg = resolveValueLine(valueLine);
   const pulseCfg = resolvePulse(pulse);
+  const dotCfg = resolveDot(dot);
+  // Outer footprint of the dot (color-filled radius plus the halo ring).
+  const dotOuterRadius = dotCfg.radius + (dotCfg.ring?.width ?? 0);
   const gridStyleCfg = resolveGridStyle(gridStyle);
   const degenCfg = resolveDegen(degen);
   const tradeStreamResolved = resolveTradeStream(tradeStream);
@@ -361,6 +367,7 @@ function useLiveChartController({
     scrubCfg !== null,
     onScrub,
     candleOpts,
+    scrubCfg?.panGestureDelay ?? 0,
   );
 
   const markersActive = markers != null;
@@ -414,6 +421,8 @@ function useLiveChartController({
     gradientCfg,
     valueLineCfg,
     pulseCfg,
+    dotCfg,
+    dotOuterRadius,
     gridStyleCfg,
     degenCfg,
     tradeStreamResolved,
@@ -498,9 +507,9 @@ function ChartStack({ model }: { model: LiveChartModel }) {
     downBodiesPath,
     xAxisCfg,
     xAxisEntries,
-    badgeData,
     dotX,
     pulseCfg,
+    dotCfg,
     degenCfg,
     degenPack,
     degenPackRevision,
@@ -611,23 +620,23 @@ function ChartStack({ model }: { model: LiveChartModel }) {
         />
       )}
 
-      {/* Badge and live dot */}
-      {badgeCfg && (
-        <Group opacity={reveal.badgeOpacity}>
-          <BadgeOverlay badge={badgeData} font={skiaFont} />
+      {/* Live dot — the badge is drawn later (after the scrub layer) so the
+          scrub dim never clips the live-price badge's left edge. */}
+      {dotCfg.show && (
+        <Group opacity={reveal.dotOpacity}>
+          <DotOverlay
+            dotX={dotX}
+            dotY={dotY}
+            palette={palette}
+            engine={engine}
+            pulse={pulseCfg}
+            radius={dotCfg.radius}
+            ring={dotCfg.ring}
+            color={dotCfg.color}
+          />
         </Group>
       )}
 
-      <Group opacity={reveal.dotOpacity}>
-        <DotOverlay
-          dotX={dotX}
-          dotY={dotY}
-          palette={palette}
-          engine={engine}
-          pulse={pulseCfg}
-        />
-      </Group>
-
       {degenCfg && (
         <Group opacity={reveal.dotOpacity}>
           <DegenParticlesOverlay
@@ -688,10 +697,20 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
     reveal,
     crosshair,
     isCandle,
+    pulseCfg,
+    dotOuterRadius,
   } = model;
 
   if (!tradeStreamResolved && !scrubCfg) return null;
 
+  // Extend the scrub dim past the plot's right edge to fully cover the live dot
+  // (with its halo) and pulse ring, all centered on that edge. The gutter
+  // reserves an 8px gap beyond this for the Y-axis labels, so they stay readable.
+  const liveDotExtent = Math.max(
+    dotOuterRadius,
+    pulseCfg ? pulseRadialOutset(pulseCfg.maxRadius, pulseCfg.strokeWidth) : 0,
+  );
+
   return (
     <Group transform={degenShakeTransform}>
       {tradeStreamResolved && (
@@ -716,6 +735,7 @@ function ChartScrubLayer({ model }: { model: LiveChartModel }) {
           font={skiaFont}
           showTooltip={scrubCfg.tooltip}
           dimOpacity={scrubCfg.dimOpacity}
+          liveDotExtent={liveDotExtent}
           crosshairLineColor={scrubCfg.crosshairLineColor}
           crosshairDimColor={scrubCfg.crosshairDimColor}
           tooltipBackground={scrubCfg.tooltipBackground}
@@ -774,6 +794,20 @@ function ChartValueOverlay({ model }: { model: LiveChartModel }) {
   );
 }
 
+/** Live-price badge, drawn above the scrub dim so the dim never clips its left
+ *  edge. Shares the degen shake transform so it tracks the shaken stack. */
+function ChartBadgeLayer({ model }: { model: LiveChartModel }) {
+  const { badgeCfg, badgeData, skiaFont, reveal, degenShakeTransform } = model;
+  if (!badgeCfg) return null;
+  return (
+    <Group transform={degenShakeTransform}>
+      <Group opacity={reveal.badgeOpacity}>
+        <BadgeOverlay badge={badgeData} font={skiaFont} />
+      </Group>
+    </Group>
+  );
+}
+
 export function LiveChart(props: LiveChartProps) {
   const model = useLiveChartController(props);
   const {
@@ -814,6 +848,10 @@ export function LiveChart(props: LiveChartProps) {
           <ChartValueOverlay model={model} />
 
           <ChartScrubLayer model={model} />
+
+          {/* Live-price badge on top of the scrub dim so the dim never clips
+              its left edge (the badge tracks the live value, not the scrub). */}
+          <ChartBadgeLayer model={model} />
         </Canvas>
       </View>
     </GestureDetector>

package/src/components/LiveChartSeries.tsx

@@ -34,6 +34,7 @@ import {
   resolveYAxis,
 } from "../core/resolveConfig";
 import { useLiveChartSeriesEngine } from "../core/useLiveChartSeriesEngine";
+import { pulseRadialOutset } from "../draw/line";
 import { resolveChartLayout } from "../hooks/resolveChartLayout";
 import { useCanvasLayout } from "../hooks/useCanvasLayout";
 import { useChartReveal } from "../hooks/useChartReveal";
@@ -143,6 +144,9 @@ function useLiveChartSeriesController({
   const scrubEnabled = scrubCfg !== null;
   const gridStyleCfg = resolveGridStyle(gridStyle);
   const dotCfg = resolveMultiSeriesDot(dotProp);
+  // Outer footprint of a dot (the color-filled radius plus the halo ring).
+  // Used to keep the gutter labels clear of the haloed dot.
+  const dotOuterRadius = dotCfg.radius + (dotCfg.ring?.width ?? 0);
   const legendCfg = resolveLegend(legendProp);
   const degenCfg = resolveDegen(degen);
 
@@ -190,7 +194,7 @@ function useLiveChartSeriesController({
     : 0;
 
   const seriesLabelInset = dotCfg.valueLabel
-    ? dotCfg.radius + 8 + maxSeriesLabelWidth + 8
+    ? dotOuterRadius + 8 + maxSeriesLabelWidth + 8
     : 0;
 
   const representativeValue =
@@ -209,7 +213,7 @@ function useLiveChartSeriesController({
     formatValue,
     currentValue: representativeValue,
     pulse: dotCfg.pulse,
-    multiSeriesDotRadius: dotCfg.radius,
+    multiSeriesDotRadius: dotOuterRadius,
     multiSeriesValueLabel: dotCfg.valueLabel,
     multiSeriesMaxLabelWidth: maxSeriesLabelWidth,
   });
@@ -296,6 +300,7 @@ function useLiveChartSeriesController({
     effectivePadding,
     scrubEnabled,
     onScrub,
+    scrubCfg?.panGestureDelay ?? 0,
   );
 
   // `projected` is used internally by the hit-test gesture; the overlay
@@ -331,6 +336,7 @@ function useLiveChartSeriesController({
     scrubCfg,
     gridStyleCfg,
     dotCfg,
+    dotOuterRadius,
     legendCfg,
     degenCfg,
     allRefLines,
@@ -462,28 +468,25 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         />
       )}
 
-      <Group opacity={reveal.dotOpacity}>
-        <MultiSeriesDots
-          engine={engine}
-          padding={effectivePadding}
-          colors={lineColors}
-          radius={dotCfg.radius}
-          pulse={dotCfg.pulse}
-        />
-      </Group>
-
-      {dotCfg.valueLabel && (
+      {dotCfg.show && (
         <Group opacity={reveal.dotOpacity}>
-          <MultiSeriesValueLabels
+          <MultiSeriesDots
             engine={engine}
             padding={effectivePadding}
             colors={lineColors}
-            font={skiaFont}
-            dotRadius={dotCfg.radius}
+            radius={dotCfg.radius}
+            ring={dotCfg.ring}
+            ringColor={palette.badgeOuterBg}
+            color={dotCfg.color}
+            pulse={dotCfg.pulse}
           />
         </Group>
       )}
 
+      {/* Value labels are drawn later (after the crosshair layer) so the scrub
+          dim — which now covers the dots + pulse rings — never clips them.
+          They track each series' live value, not the scrub point. */}
+
       {degenCfg && (
         <Group opacity={reveal.dotOpacity}>
           <DegenParticlesOverlay
@@ -528,6 +531,36 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
   );
 }
 
+/** Per-series live-value labels, drawn above the scrub dim so the dim (which
+ *  covers the dots + pulse rings) never clips them. Keeps the degen shake
+ *  transform so they track the shaken stack. */
+function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
+  const {
+    dotCfg,
+    dotOuterRadius,
+    engine,
+    effectivePadding,
+    lineColors,
+    skiaFont,
+    reveal,
+    degenShakeTransform,
+  } = model;
+  if (!dotCfg.valueLabel) return null;
+  return (
+    <Group transform={degenShakeTransform}>
+      <Group opacity={reveal.dotOpacity}>
+        <MultiSeriesValueLabels
+          engine={engine}
+          padding={effectivePadding}
+          colors={lineColors}
+          font={skiaFont}
+          dotRadius={dotOuterRadius}
+        />
+      </Group>
+    </Group>
+  );
+}
+
 export function LiveChartSeries(props: LiveChartSeriesProps) {
   const model = useLiveChartSeriesController(props);
   const {
@@ -547,8 +580,20 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     scrubCfg,
     crosshair,
     palette,
+    dotCfg,
+    dotOuterRadius,
   } = model;
 
+  // Extend the scrub dim past the plot's right edge to fully cover the series
+  // dots (with their halo) and pulse rings, all centered on that edge. The
+  // gutter reserves room beyond this for the value/Y-axis labels, drawn on top.
+  const liveDotExtent = Math.max(
+    dotOuterRadius,
+    dotCfg.pulse
+      ? pulseRadialOutset(dotCfg.pulse.maxRadius, dotCfg.pulse.strokeWidth)
+      : 0,
+  );
+
   const legend =
     legendCfg.position === "top" || legendCfg.position === "bottom" ? (
       <SeriesToggleChips
@@ -594,10 +639,15 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 padding={effectivePadding}
                 palette={palette}
                 dimOpacity={scrubCfg.dimOpacity}
+                liveDotExtent={liveDotExtent}
                 crosshairLineColor={scrubCfg.crosshairLineColor}
                 crosshairDimColor={scrubCfg.crosshairDimColor}
               />
             )}
+
+            {/* Per-series value labels on top of the scrub dim so the dim never
+                clips them (they track each series' live value, not the scrub). */}
+            <SeriesValueLabelLayer model={model} />
           </Canvas>
         </View>
       </GestureDetector>

package/src/components/MultiSeriesDots.tsx

@@ -3,7 +3,10 @@ import { Circle, Group } from "@shopify/react-native-skia";
 import { useDerivedValue } from "react-native-reanimated";
 import { MAX_MULTI_SERIES } from "../constants";
 import type { ChartPadding } from "../draw/line";
-import type { ResolvedPulseConfig } from "../core/resolveConfig";
+import type {
+  ResolvedDotRingConfig,
+  ResolvedPulseConfig,
+} from "../core/resolveConfig";
 import type { MultiEngineState } from "../core/useLiveChartEngine";
 
 const MIN_PULSE_RADIUS = 6;
@@ -15,6 +18,8 @@ function SeriesDotAtIndex({
   padding,
   color,
   radius,
+  ring,
+  ringColor,
   pulse,
 }: {
   index: number;
@@ -22,6 +27,10 @@ function SeriesDotAtIndex({
   padding: ChartPadding;
   color: string;
   radius: number;
+  /** Outer halo ring, or `null` for a flat circle. */
+  ring: ResolvedDotRingConfig | null;
+  /** Fallback ring color when `ring.color` is unset (theme `badgeOuterBg`). */
+  ringColor: string;
   pulse: ResolvedPulseConfig | null;
 }) {
   const dotX = useDerivedValue(() => {
@@ -81,6 +90,14 @@ function SeriesDotAtIndex({
           opacity={pulseOpacity}
         />
       )}
+      {ring && (
+        <Circle
+          cx={dotX}
+          cy={dotY}
+          r={radius + ring.width}
+          color={ring.color ?? ringColor}
+        />
+      )}
       <Circle cx={dotX} cy={dotY} r={radius} color={color} />
     </Group>
   );
@@ -91,12 +108,21 @@ export function MultiSeriesDots({
   padding,
   colors,
   radius,
+  ring,
+  ringColor,
+  color,
   pulse,
 }: {
   engine: MultiEngineState;
   padding: ChartPadding;
   colors: string[];
   radius: number;
+  /** Outer halo ring, or `null` for flat circles. */
+  ring: ResolvedDotRingConfig | null;
+  /** Fallback ring color when `ring.color` is unset (theme `badgeOuterBg`). */
+  ringColor: string;
+  /** Fill color override; falls back to each series' line color. */
+  color: string | undefined;
   pulse: ResolvedPulseConfig | null;
 }) {
   return (
@@ -107,8 +133,10 @@ export function MultiSeriesDots({
           index={i}
           engine={engine}
           padding={padding}
-          color={colors[i] ?? "#ffffff"}
+          color={color ?? colors[i] ?? "#ffffff"}
           radius={radius}
+          ring={ring}
+          ringColor={ringColor}
           pulse={pulse}
         />
       ))}

package/src/core/resolveConfig.ts

@@ -9,6 +9,8 @@ import type {
   LeftEdgeFadeConfig,
   LegendConfig,
   LegendStyle,
+  DotConfig,
+  DotRingConfig,
   MultiSeriesDotConfig,
   PulseConfig,
   ReferenceLine,
@@ -60,6 +62,8 @@ export interface ResolvedScrubConfig {
   tooltipColor: string | undefined;
   /** undefined → palette.tooltipBorder */
   tooltipBorderColor: string | undefined;
+  /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
+  panGestureDelay: number;
 }
 
 export interface ResolvedGradientConfig {
@@ -212,6 +216,7 @@ const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltipBackground: undefined,
   tooltipColor: undefined,
   tooltipBorderColor: undefined,
+  panGestureDelay: 0,
 };
 
 /**
@@ -477,31 +482,69 @@ export function resolveTradeStream(
   };
 }
 
-// ─── Multi-series dot ─────────────────────────────────────────────────────────
+// ─── Dot (shared) ─────────────────────────────────────────────────────────────
+
+/** Resolved halo ring. `color: undefined` means "use the theme `badgeOuterBg`". */
+export interface ResolvedDotRingConfig {
+  color: string | undefined;
+  width: number;
+}
+
+const RING_DEFAULTS: ResolvedDotRingConfig = {
+  color: undefined,
+  width: 2.5,
+};
+
+/** `undefined`/`true` → haloed defaults; `false` → null (flat circle). */
+export function resolveDotRing(
+  prop: boolean | DotRingConfig | undefined,
+): ResolvedDotRingConfig | null {
+  if (prop === false) return null;
+  if (prop === undefined || prop === true) return RING_DEFAULTS;
+  return { ...RING_DEFAULTS, ...prop };
+}
 
-export interface ResolvedMultiSeriesDotConfig {
+/** Shared, fully-resolved dot styling (single- and multi-series). */
+export interface ResolvedDotConfig {
   radius: number;
-  pulse: ResolvedPulseConfig | null;
-  valueLine: ResolvedValueLineConfig | null;
-  valueLabel: boolean;
+  ring: ResolvedDotRingConfig | null;
+  show: boolean;
+  color: string | undefined;
 }
 
-const MULTI_DOT_DEFAULTS: ResolvedMultiSeriesDotConfig = {
+const DOT_DEFAULTS: ResolvedDotConfig = {
   radius: 3.5,
-  pulse: PULSE_DEFAULTS,
-  valueLine: null,
-  valueLabel: true,
+  ring: RING_DEFAULTS,
+  show: true,
+  color: undefined,
 };
 
+export function resolveDot(prop: DotConfig | undefined): ResolvedDotConfig {
+  if (!prop) return DOT_DEFAULTS;
+  return {
+    radius: prop.radius ?? DOT_DEFAULTS.radius,
+    ring: resolveDotRing(prop.ring),
+    show: prop.show ?? DOT_DEFAULTS.show,
+    color: prop.color,
+  };
+}
+
+// ─── Multi-series dot ─────────────────────────────────────────────────────────
+
+export interface ResolvedMultiSeriesDotConfig extends ResolvedDotConfig {
+  pulse: ResolvedPulseConfig | null;
+  valueLine: ResolvedValueLineConfig | null;
+  valueLabel: boolean;
+}
+
 export function resolveMultiSeriesDot(
   prop: MultiSeriesDotConfig | undefined,
 ): ResolvedMultiSeriesDotConfig {
-  if (!prop) return MULTI_DOT_DEFAULTS;
   return {
-    radius: prop.radius ?? MULTI_DOT_DEFAULTS.radius,
-    pulse: resolvePulse(prop.pulse ?? true),
-    valueLine: resolveValueLine(prop.valueLine),
-    valueLabel: prop.valueLabel ?? MULTI_DOT_DEFAULTS.valueLabel,
+    ...resolveDot(prop),
+    pulse: resolvePulse(prop?.pulse ?? true),
+    valueLine: resolveValueLine(prop?.valueLine),
+    valueLabel: prop?.valueLabel ?? true,
   };
 }
 

package/src/hooks/crosshairShared.ts

@@ -109,6 +109,11 @@ export function computeTooltipLayout(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
+  /** Monospace advance width. When > 0, text width is `len * monoCharWidth`
+   *  instead of a per-frame Skia `measureText` — scrubbing re-runs this worklet
+   *  every frame, and `measureText` shapes text each call (a real cost,
+   *  especially in the simulator). Falls back to `measureText` when 0. */
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || scrubValue === null) return HIDDEN_TOOLTIP;
@@ -122,8 +127,14 @@ export function computeTooltipLayout(
   const lineH = -fm.ascent + fm.descent;
   const totalH = TOOLTIP_PAD_Y * 2 + lineH * 2 + TOOLTIP_LINE_GAP;
 
-  const valueW = measureFontTextWidth(font, valueStr);
-  const timeW = measureFontTextWidth(font, timeStr);
+  const valueW =
+    monoCharWidth > 0
+      ? valueStr.length * monoCharWidth
+      : measureFontTextWidth(font, valueStr);
+  const timeW =
+    monoCharWidth > 0
+      ? timeStr.length * monoCharWidth
+      : measureFontTextWidth(font, timeStr);
   const contentW = Math.max(valueW, timeW);
   const pillW = contentW + TOOLTIP_PAD_X * 2;
 
@@ -166,6 +177,9 @@ export function computeTooltipLayoutMulti(
   padding: ChartPadding,
   canvasWidth: number,
   font: SkFont,
+  /** Monospace advance width; when > 0, sizes text by length instead of a
+   *  per-frame Skia `measureText`. See {@link computeTooltipLayout}. */
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || lines.length === 0) return HIDDEN_TOOLTIP;
@@ -179,7 +193,10 @@ export function computeTooltipLayoutMulti(
   let contentW = 0;
   const lineWidths: number[] = [];
   for (let i = 0; i < n; i++) {
-    const w = measureFontTextWidth(font, lines[i].text);
+    const w =
+      monoCharWidth > 0
+        ? lines[i].text.length * monoCharWidth
+        : measureFontTextWidth(font, lines[i].text);
     lineWidths.push(w);
     if (w > contentW) contentW = w;
   }
@@ -237,6 +254,7 @@ export function computeCandleTooltipLayout(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || !candle) return HIDDEN_TOOLTIP;
@@ -254,6 +272,7 @@ export function computeCandleTooltipLayout(
     padding,
     canvasWidth,
     font,
+    monoCharWidth,
   );
 }
 
@@ -279,6 +298,7 @@ export function deriveCrosshairTooltipSingle(
   formatValue: (v: number) => string,
   formatTime: (t: number) => string,
   font: SkFont,
+  monoCharWidth = 0,
 ): TooltipLayout {
   "worklet";
   if (!scrubActive || scrubTime < 0) return HIDDEN_TOOLTIP;
@@ -292,5 +312,6 @@ export function deriveCrosshairTooltipSingle(
     formatValue,
     formatTime,
     font,
+    monoCharWidth,
   );
 }

package/src/hooks/useCrosshair.ts

@@ -55,6 +55,8 @@ export function useCrosshair(
   enabled: boolean,
   onScrub?: (point: ScrubPoint | null) => void,
   candleOpts?: CrosshairCandleOpts,
+  /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
+  panGestureDelay = 0,
 ): CrosshairState {
   const scrubX = useSharedValue(-1);
   const scrubActive = useSharedValue(false);
@@ -110,6 +112,11 @@ export function useCrosshair(
     ),
   );
 
+  // 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.
+  const monoCharWidth = font.measureText("0").width;
+
   const tooltipLayout = useDerivedValue(() => {
     if (isCandleMode) {
       return computeCandleTooltipLayout(
@@ -122,6 +129,7 @@ export function useCrosshair(
         formatValue,
         formatTime,
         font,
+        monoCharWidth,
       );
     }
     return deriveCrosshairTooltipSingle(
@@ -134,6 +142,7 @@ export function useCrosshair(
       formatValue,
       formatTime,
       font,
+      monoCharWidth,
     );
   });
 
@@ -207,10 +216,14 @@ export function useCrosshair(
 
   let gesture = Gesture.Pan()
     .minDistance(Platform.OS === "android" ? 10 : 0)
-    .activateAfterLongPress(0)
+    .activateAfterLongPress(panGestureDelay)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
-    .onBegin(
+    // Start scrubbing on ACTIVE (onStart), not on touch-down (onBegin):
+    // `activateAfterLongPress` only delays activation, so onBegin still fires
+    // immediately — using it would scrub instantly and ignore panGestureDelay,
+    // and leave scrubActive stuck for taps that never reach the long-press.
+    .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
         if (!enabled) return;

package/src/hooks/useCrosshairSeries.ts

@@ -28,6 +28,8 @@ export function useCrosshairSeries(
   padding: ChartPadding,
   enabled: boolean,
   onScrub?: (point: ScrubPointMulti | null) => void,
+  /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
+  panGestureDelay = 0,
 ): CrosshairState {
   const scrubX = useSharedValue(-1);
   const scrubActive = useSharedValue(false);
@@ -121,10 +123,14 @@ export function useCrosshairSeries(
 
   let gesture = Gesture.Pan()
     .minDistance(Platform.OS === "android" ? 10 : 0)
-    .activateAfterLongPress(0)
+    .activateAfterLongPress(panGestureDelay)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
-    .onBegin(
+    // Start scrubbing on ACTIVE (onStart), not on touch-down (onBegin):
+    // `activateAfterLongPress` only delays activation, so onBegin still fires
+    // immediately — using it would scrub instantly and ignore panGestureDelay,
+    // and leave scrubActive stuck for taps that never reach the long-press.
+    .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
         if (!enabled) return;