react-native-livechart 4.9.1 → 4.10.0

package/src/hooks/useCrosshair.ts

@@ -3,7 +3,6 @@ import { Platform } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import {
   useAnimatedReaction,
-  useDerivedValue,
   useSharedValue,
   type SharedValue,
 } from "react-native-reanimated";
@@ -32,10 +31,18 @@ import {
   deriveCrosshairTooltipSingle,
   HIDDEN_ACTION_BADGE,
   HIDDEN_TIME_BADGE,
+  HIDDEN_TOOLTIP,
   pointInRect,
   snapPrice,
   type CrosshairState,
 } from "./crosshairShared";
+import {
+  delayedPanTouchCancelled,
+  delayedPanTouchDown,
+  delayedPanTouchUp,
+  resetDelayedPanGuard,
+  shouldStartDelayedPan,
+} from "./delayedPanGuard";
 
 const ACTION_HIT_SLOP = 6;
 const RETICLE_HIT = 14;
@@ -150,6 +157,10 @@ export function useCrosshair(
   // Tracks whether the active scrub phase actually began, so a tap that never
   // activates doesn't emit a spurious onGestureEnd.
   const gestureStarted = useSharedValue(false);
+  // Guard state for RNGH's delayed-pan post-lift activation on iOS. The shared
+  // lifecycle helpers are also used by LiveChartSeries and unit-tested directly.
+  const fingerDown = useSharedValue(false);
+  const panActivated = useSharedValue(false);
   // Where the crosshair line should start (canvas Y) so it stops at a top-pinned
   // custom tooltip instead of running through it. -1 = no top tooltip → the line
   // starts at padding.top. Written by CustomTooltipOverlay, read by CrosshairOverlay.
@@ -172,203 +183,216 @@ export function useCrosshair(
   const actionShowText = scrubAction?.text ?? true;
   const hasTimeBadge = scrubAction?.timeBadge ?? false;
 
-  const scrubTime = useDerivedValue(() =>
-    computeScrubTime(
-      scrubActive.get(),
-      scrubX.get(),
-      padding,
-      engine.canvasWidth.get(),
-      engine.timestamp.get(),
-      engine.displayWindow.get(),
-    ),
-  );
-
   const isCandleMode = candleOpts?.mode === "candle";
   const candlesSV = candleOpts?.candles;
   const liveCandleSV = candleOpts?.liveCandle;
   const candleWidthSecs = candleOpts?.candleWidthSecs ?? 60;
 
-  /* istanbul ignore next -- worklet */
-  const scrubCandle = useDerivedValue(() => {
-    if (
-      !isCandleMode ||
-      !candlesSV ||
-      !scrubActive.get() ||
-      scrubTime.get() < 0
-    )
-      return null;
-    return pickCandleAtTime(
-      candlesSV.get(),
-      liveCandleSV?.get() ?? null,
-      scrubTime.get(),
-      candleWidthSecs,
-    );
-  });
-
-  /* istanbul ignore next -- worklet */
-  const scrubValue = useDerivedValue(() => {
-    if (!scrubActive.get() || scrubTime.get() < 0) return null;
-    if (isCandleMode) {
-      return scrubCandle.get()?.close ?? null;
-    }
-    return interpolateAtTime(engine.data.get(), scrubTime.get());
-  });
-
-  const crosshairOpacity = useDerivedValue(() =>
-    computeCrosshairOpacity(
-      scrubActive.get(),
-      scrubX.get(),
-      engine.canvasWidth.get(),
-      padding.right,
-    ),
-  );
-
-  // 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.
   const monoCharWidth = font.measureText("0").width;
-
-  const tooltipLayout = useDerivedValue(() => {
-    if (isCandleMode) {
-      return computeCandleTooltipLayout(
-        scrubActive.get(),
-        scrubX.get(),
-        scrubCandle.get(),
-        scrubTime.get(),
+  const scrubTime = useSharedValue(-1);
+  const scrubCandle = useSharedValue<CandlePoint | null>(null);
+  const scrubValue = useSharedValue<number | null>(null);
+  const crosshairOpacity = useSharedValue(0);
+  const scrubDotY = useSharedValue(-1);
+  const tooltipLayout = useSharedValue(HIDDEN_TOOLTIP);
+
+  // These six outputs traverse the same scrub + engine inputs. One reaction
+  // computes and publishes the snapshot atomically instead of compiling six
+  // independent derived-value mappers with chained dependencies.
+  useAnimatedReaction(
+    () => {
+      "worklet";
+      const active = scrubActive.get();
+      const x = scrubX.get();
+      const canvasWidth = engine.canvasWidth.get();
+      const canvasHeight = engine.canvasHeight.get();
+      const time = computeScrubTime(
+        active,
+        x,
         padding,
-        engine.canvasWidth.get(),
-        formatValue,
-        formatTime,
-        font,
-        monoCharWidth,
+        canvasWidth,
+        engine.timestamp.get(),
+        engine.displayWindow.get(),
       );
-    }
-    return deriveCrosshairTooltipSingle(
-      scrubActive.get(),
-      scrubX.get(),
-      scrubTime.get(),
-      scrubValue.get(),
-      padding,
-      engine.canvasWidth.get(),
-      formatValue,
-      formatTime,
-      font,
-      monoCharWidth,
-      tooltipPlacement,
-      tooltipShowValue,
-      tooltipShowTime,
-      engine.canvasHeight.get(),
-      tooltipMargin,
-      scrubDotY.get(),
-    );
-  });
+      const candle =
+        isCandleMode && candlesSV && active && time >= 0
+          ? pickCandleAtTime(
+              candlesSV.get(),
+              liveCandleSV?.get() ?? null,
+              time,
+              candleWidthSecs,
+            )
+          : null;
+      const value =
+        !active || time < 0
+          ? null
+          : isCandleMode
+            ? (candle?.close ?? null)
+            : interpolateAtTime(engine.data.get(), time);
+      const dotY = computeScrubDotY(
+        value,
+        engine.displayMin.get(),
+        engine.displayMax.get(),
+        canvasHeight,
+        padding.top,
+        padding.bottom,
+      );
+      const layout = isCandleMode
+        ? computeCandleTooltipLayout(
+            active,
+            x,
+            candle,
+            time,
+            padding,
+            canvasWidth,
+            formatValue,
+            formatTime,
+            font,
+            monoCharWidth,
+          )
+        : deriveCrosshairTooltipSingle(
+            active,
+            x,
+            time,
+            value,
+            padding,
+            canvasWidth,
+            formatValue,
+            formatTime,
+            font,
+            monoCharWidth,
+            tooltipPlacement,
+            tooltipShowValue,
+            tooltipShowTime,
+            canvasHeight,
+            tooltipMargin,
+            dotY,
+          );
+      return {
+        time,
+        candle,
+        value,
+        opacity: computeCrosshairOpacity(active, x, canvasWidth, padding.right),
+        dotY,
+        layout,
+      };
+    },
+    (snapshot) => {
+      "worklet";
+      scrubTime.set(snapshot.time);
+      scrubCandle.set(snapshot.candle);
+      scrubValue.set(snapshot.value);
+      crosshairOpacity.set(snapshot.opacity);
+      scrubDotY.set(snapshot.dotY);
+      tooltipLayout.set(snapshot.layout);
+    },
+  );
 
   // ── Scrub-action lock derivations ──────────────────────────────────────────
-  // Reported price = the frozen chosen price, optionally snapped. Independent of
-  // the display range (the point of freezing it), so the badge readout and the
-  // onScrubAction payload stay stable while the chart auto-rescales. Null until a
-  // reticle is placed.
-  /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const lockPrice = useDerivedValue(() => {
-    if (!lockActive.get()) return null;
-    const p = lockPriceValue.get();
-    return p === null ? null : snapPrice(p, snapIncrement);
-  });
-
-  // Screen Y of the locked level, DERIVED from the frozen price each frame so the
-  // line + badge track the chosen price as displayMin/Max move (rather than the
-  // price drifting under a pixel-fixed reticle). Pins to the plot edge when the
-  // price scrolls out of the visible range; -1 until placed / laid out.
+  const lockPrice = useSharedValue<number | null>(null);
+  const lockY = useSharedValue(-1);
+  const lockTime = useSharedValue(-1);
+  const lockCandle = useSharedValue<CandlePoint | null>(null);
+  const actionBadge = useSharedValue(HIDDEN_ACTION_BADGE);
+  const timeBadge = useSharedValue(HIDDEN_TIME_BADGE);
+
+  // The lock price, projected coordinates, candle and both badges are one
+  // coherent reticle snapshot. Publishing them from one reaction replaces six
+  // chained derived-value mappers and prevents intermediate mixed-frame state.
   /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const lockY = useDerivedValue(() => {
-    const p = lockPriceValue.get();
-    const ch = engine.canvasHeight.get();
-    if (p === null || ch - padding.top - padding.bottom <= 0) return -1;
-    const y = computeScrubDotY(
-      p,
-      engine.displayMin.get(),
-      engine.displayMax.get(),
-      ch,
-      padding.top,
-      padding.bottom,
-    );
-    return clampPlotY(y, padding.top, ch, padding.bottom);
-  });
-
-  const lockTime = useDerivedValue(() =>
-    computeScrubTime(
-      lockActive.get(),
-      lockX.get(),
-      padding,
-      engine.canvasWidth.get(),
-      engine.timestamp.get(),
-      engine.displayWindow.get(),
-    ),
+  useAnimatedReaction(
+    () => {
+      "worklet";
+      const active = lockActive.get();
+      const x = lockX.get();
+      const rawPrice = lockPriceValue.get();
+      const canvasWidth = engine.canvasWidth.get();
+      const canvasHeight = engine.canvasHeight.get();
+      const price =
+        active && rawPrice !== null
+          ? snapPrice(rawPrice, snapIncrement)
+          : null;
+      let y = -1;
+      if (
+        rawPrice !== null &&
+        canvasHeight - padding.top - padding.bottom > 0
+      ) {
+        y = clampPlotY(
+          computeScrubDotY(
+            rawPrice,
+            engine.displayMin.get(),
+            engine.displayMax.get(),
+            canvasHeight,
+            padding.top,
+            padding.bottom,
+          ),
+          padding.top,
+          canvasHeight,
+          padding.bottom,
+        );
+      }
+      const time = computeScrubTime(
+        active,
+        x,
+        padding,
+        canvasWidth,
+        engine.timestamp.get(),
+        engine.displayWindow.get(),
+      );
+      const candle =
+        isCandleMode && candlesSV && active && time >= 0
+          ? pickCandleAtTime(
+              candlesSV.get(),
+              liveCandleSV?.get() ?? null,
+              time,
+              candleWidthSecs,
+            )
+          : null;
+      const badge =
+        price === null
+          ? HIDDEN_ACTION_BADGE
+          : computeActionBadgeLayout(
+              active,
+              y,
+              actionShowText ? formatValue(price) : "",
+              actionIcon,
+              canvasWidth,
+              canvasWidth - padding.right,
+              font,
+              badgeMetrics.marginEdge,
+              badgeMetrics.padX,
+              badgeMetrics.padY,
+            );
+      const timeLayout =
+        !hasTimeBadge || !active || time < 0
+          ? HIDDEN_TIME_BADGE
+          : computeTimeBadgeLayout(
+              active,
+              x,
+              formatTime(time),
+              canvasWidth,
+              canvasHeight - padding.bottom + X_AXIS_LABEL_OFFSET_Y,
+              font,
+              badgeMetrics.padX,
+              badgeMetrics.padY,
+              badgeMetrics.marginEdge,
+            );
+      return { price, y, time, candle, badge, timeLayout };
+    },
+    (snapshot) => {
+      "worklet";
+      lockPrice.set(snapshot.price);
+      lockY.set(snapshot.y);
+      lockTime.set(snapshot.time);
+      lockCandle.set(snapshot.candle);
+      actionBadge.set(snapshot.badge);
+      timeBadge.set(snapshot.timeLayout);
+    },
   );
 
-  /* istanbul ignore next -- worklet */
-  const lockCandle = useDerivedValue(() => {
-    if (!isCandleMode || !candlesSV || !lockActive.get() || lockTime.get() < 0)
-      return null;
-    return pickCandleAtTime(
-      candlesSV.get(),
-      liveCandleSV?.get() ?? null,
-      lockTime.get(),
-      candleWidthSecs,
-    );
-  });
-
-  // Right-gutter action-badge layout — also the tap hit rect. Hidden when not locked.
-  /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const actionBadge = useDerivedValue(() => {
-    const price = lockPrice.get();
-    if (price === null) return HIDDEN_ACTION_BADGE;
-    return computeActionBadgeLayout(
-      lockActive.get(),
-      lockY.get(),
-      actionShowText ? formatValue(price) : "",
-      actionIcon,
-      engine.canvasWidth.get(),
-      engine.canvasWidth.get() - padding.right,
-      font,
-      badgeMetrics.marginEdge,
-      badgeMetrics.padX,
-      badgeMetrics.padY,
-    );
-  });
-
-  // X-axis time badge at the reticle (opt-in). Hidden unless enabled + locked.
-  /* istanbul ignore next -- worklet (locked branch only runs on the UI thread) */
-  const timeBadge = useDerivedValue(() => {
-    if (!hasTimeBadge || !lockActive.get()) return HIDDEN_TIME_BADGE;
-    const t = lockTime.get();
-    if (t < 0) return HIDDEN_TIME_BADGE;
-    return computeTimeBadgeLayout(
-      lockActive.get(),
-      lockX.get(),
-      formatTime(t),
-      engine.canvasWidth.get(),
-      engine.canvasHeight.get() - padding.bottom + X_AXIS_LABEL_OFFSET_Y,
-      font,
-      badgeMetrics.padX,
-      badgeMetrics.padY,
-      badgeMetrics.marginEdge,
-    );
-  });
-
   /* istanbul ignore next -- invoked only via scheduleOnRN from UI-thread gesture */
   function handleScrubAction(
     price: number,
@@ -485,6 +509,30 @@ export function useCrosshair(
     .activateAfterLongPress(longPressMs)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
+    .onTouchesDown(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchDown(longPressMs, fingerDown);
+      },
+    )
+    .onTouchesUp(
+      /* istanbul ignore next */ (e, manager) => {
+        "worklet";
+        delayedPanTouchUp(
+          longPressMs,
+          e,
+          manager,
+          fingerDown,
+          panActivated,
+        );
+      },
+    )
+    .onTouchesCancelled(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchCancelled(longPressMs, fingerDown);
+      },
+    )
     // 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,
@@ -492,6 +540,7 @@ export function useCrosshair(
     .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
+        if (!shouldStartDelayedPan(longPressMs, fingerDown, panActivated)) return;
         if (!enabled) return;
         // Scrub-action: once a reticle is placed, drag adjusts it (2D — the Y is
         // the price). The ephemeral live-scrub never engages, so scrubActive
@@ -556,6 +605,7 @@ export function useCrosshair(
     .onFinalize(
       /* istanbul ignore next */ () => {
         "worklet";
+        resetDelayedPanGuard(fingerDown, panActivated);
         // A lock-adjust drag leaves the reticle in place (scrubActive was never
         // set); a live-scrub clears its crosshair. Always clear scrubActive so a
         // stray scrub can never linger behind a placed reticle.

package/src/hooks/useCrosshairSeries.ts

@@ -20,6 +20,13 @@ import {
   HIDDEN_TOOLTIP,
   type CrosshairState,
 } from "./crosshairShared";
+import {
+  delayedPanTouchCancelled,
+  delayedPanTouchDown,
+  delayedPanTouchUp,
+  resetDelayedPanGuard,
+  shouldStartDelayedPan,
+} from "./delayedPanGuard";
 
 /**
  * LiveChartSeries crosshair + scrub. No tooltip — data is delivered via
@@ -40,6 +47,10 @@ export function useCrosshairSeries(
   // Tracks whether the active scrub phase actually began, so a tap that never
   // activates doesn't emit a spurious onGestureEnd.
   const gestureStarted = useSharedValue(false);
+  // Mirrors LiveChart's guard against RNGH's delayed-pan timer activating after
+  // the final pointer has already lifted on iOS.
+  const fingerDown = useSharedValue(false);
+  const panActivated = useSharedValue(false);
 
   const scrubTime = useDerivedValue(() =>
     computeScrubTime(
@@ -158,6 +169,30 @@ export function useCrosshairSeries(
     .activateAfterLongPress(panGestureDelay)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
+    .onTouchesDown(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchDown(panGestureDelay, fingerDown);
+      },
+    )
+    .onTouchesUp(
+      /* istanbul ignore next */ (e, manager) => {
+        "worklet";
+        delayedPanTouchUp(
+          panGestureDelay,
+          e,
+          manager,
+          fingerDown,
+          panActivated,
+        );
+      },
+    )
+    .onTouchesCancelled(
+      /* istanbul ignore next */ () => {
+        "worklet";
+        delayedPanTouchCancelled(panGestureDelay, fingerDown);
+      },
+    )
     // 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,
@@ -165,6 +200,8 @@ export function useCrosshairSeries(
     .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
+        if (!shouldStartDelayedPan(panGestureDelay, fingerDown, panActivated))
+          return;
         if (!enabled) return;
         scrubX.set(e.x);
         scrubActive.set(true);
@@ -182,6 +219,7 @@ export function useCrosshairSeries(
     .onFinalize(
       /* istanbul ignore next */ () => {
         "worklet";
+        resetDelayedPanGuard(fingerDown, panActivated);
         scrubActive.set(false);
         if (gestureStarted.get()) {
           gestureStarted.set(false);

package/src/hooks/useXAxis.ts

@@ -129,15 +129,28 @@ export function useXAxis(
       targetKeys.push(Math.round(t * 100));
     }
 
-    const alphas = labelAlphas.get();
+    // SharedValue payloads may be frozen after crossing the JS/UI boundary.
+    // Work on a fresh cache (including fresh entries) so adding/removing keys
+    // and updating alpha never mutates the serialized value returned by get().
+    const previousAlphas = labelAlphas.get();
+    const alphas: Record<number, { alpha: number; text: string }> = {};
+    const previousKeys = Object.keys(previousAlphas);
+    for (let i = 0; i < previousKeys.length; i++) {
+      const key = Number(previousKeys[i]);
+      const previous = previousAlphas[key];
+      alphas[key] = { alpha: previous.alpha, text: previous.text };
+    }
+    let cacheChanged = false;
 
     // Create labels for new keys only. A key encodes its time, so the formatted
-    // text never changes — re-formatting (and re-allocating the entry) every
-    // frame just churns strings/objects for the GC.
+    // text never changes — re-formatting every frame would churn strings for
+    // the GC. The cache itself is copied below to keep SharedValue payloads
+    // immutable after they cross the JS/UI boundary.
     for (let i = 0; i < targetKeys.length; i++) {
       const key = targetKeys[i];
       if (!alphas[key]) {
         alphas[key] = { alpha: 0, text: formatTime(key / 100) };
+        cacheChanged = true;
       }
     }
 
@@ -160,13 +173,16 @@ export function useXAxis(
 
       if (next < 0.01 && target === 0) {
         delete alphas[key];
+        cacheChanged = true;
       } else {
-        // Mutate in place — text is stable, so no need to reallocate the entry.
+        // The entry is already a private copy, so updating alpha cannot mutate
+        // the serialized cache held by the SharedValue.
+        if (label.alpha !== next) cacheChanged = true;
         label.alpha = next;
       }
     }
 
-    labelAlphas.set(alphas);
+    if (cacheChanged) labelAlphas.set(alphas);
 
     // Collect visible labels
     const raw: XAxisEntry[] = [];

package/src/types.ts

@@ -1236,10 +1236,15 @@ export interface MarkerClusterConfig {
  * A dedicated badge drawn for a collapsed marker cluster — your own Skia design,
  * independent of the member markers. Pass it as
  * {@link MarkerClusterConfig.groupBadge}. Glyph precedence mirrors a single marker:
- * `image` → `icon` (`pill`) → a filled dot. Requires `image` or `icon` (otherwise
- * the group falls back to the count badge).
+ * `image` → `icon` (`pill`) → the built-in count badge. An object containing only
+ * {@link letterSpacing} customizes that built-in count badge.
  */
 export interface MarkerGroupBadge {
+  /**
+   * Extra spacing in px between digits in the built-in count badge. Also applies
+   * to the optional corner count on a custom group badge. Default `0`.
+   */
+  letterSpacing?: number;
   /** Custom Skia image for the collapsed group (e.g. from `useImage`). Takes
    *  precedence over {@link icon}. */
   image?: SkImage;