react-native-livechart 4.21.0 → 4.21.1

package/src/draw/markerAtlas.ts

@@ -17,6 +17,11 @@ import type {
   MarkerKind,
 } from "../types";
 
+export type MarkerAtlasPalette = Pick<
+  LiveChartPalette,
+  "bgRgb" | "line" | "refLine" | "dotUp" | "refLabel"
+>;
+
 /** Default icon box (px) when `marker.size` is unset. */
 export const DEFAULT_ICON_SIZE = 16;
 /** Circular badge padding around the icon glyph + background ring width. */
@@ -78,7 +83,7 @@ export function groupCountTextWidth(
  *  per-frame overlay worklet can resolve a collapsed cluster's badge color. */
 export function defaultMarkerColor(
   kind: MarkerKind,
-  palette: LiveChartPalette,
+  palette: MarkerAtlasPalette,
 ): string {
   "worklet";
   switch (kind) {
@@ -188,7 +193,7 @@ interface CellSpec {
  * Geometry + draw routine for one marker appearance. Mirrors the per-glyph
  * rendering the old `MarkerGlyph` did inline, so the atlas is pixel-equivalent.
  */
-function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec {
+function cellSpec(m: Marker, palette: MarkerAtlasPalette, font: SkFont): CellSpec {
   const color = m.color ?? defaultMarkerColor(m.kind, palette);
   const m2 = CELL_MARGIN * 2;
 
@@ -382,7 +387,7 @@ function groupBgCellSpec(
  */
 export function buildMarkerAtlas(
   markers: Marker[],
-  palette: LiveChartPalette,
+  palette: MarkerAtlasPalette,
   font: SkFont,
   scale = 1,
   /** Also bake count-badge cells (digits + per-color backgrounds) for

package/src/hooks/useChartReveal.ts

@@ -39,7 +39,7 @@ export interface ChartRevealState {
   morphT: SharedValue<number>;
   /** True while loading=true */
   isLoading: SharedValue<boolean>;
-  /** True when not loading and fewer than two samples. */
+  /** True when not loading and no samples are available. */
   isEmpty: SharedValue<boolean>;
   yAxisOpacity: SharedValue<number>;
   fillOpacity: SharedValue<number>;

package/src/hooks/useCrosshair.ts

@@ -114,6 +114,34 @@ export interface CrosshairChartOpts {
   bridgeUnknown?: boolean;
 }
 
+function resolveCrosshairSettings(
+  chartOpts: CrosshairChartOpts | undefined,
+  scrubAction: ResolvedScrubActionConfig | null | undefined,
+  onScrubAction: ((point: ScrubActionPoint) => void) | undefined,
+  clampToPlot: boolean,
+) {
+  const hasScrubAction = scrubAction != null;
+  return {
+    hasScrubAction,
+    clampPlainScrubToPlot: clampToPlot && !hasScrubAction,
+    hasOnScrubAction: onScrubAction != null,
+    dismissOnTapOutside: scrubAction?.dismissOnTapOutside ?? false,
+    dismissOnAction: scrubAction?.dismissOnAction ?? false,
+    snapIncrement: scrubAction?.snap,
+    actionIcon: scrubAction?.icon ?? "+",
+    actionShowText: scrubAction?.text ?? true,
+    hasTimeBadge: scrubAction?.timeBadge ?? false,
+    isCandleMode: chartOpts?.mode === "candle",
+    candlesSV: chartOpts?.candles,
+    liveCandleSV: chartOpts?.liveCandle,
+    candleWidthSecs: chartOpts?.candleWidthSecs ?? 60,
+    chartGaps: chartOpts?.gaps ?? [],
+    bridgeNoTrades: chartOpts?.bridgeNoTrades ?? false,
+    bridgeUnavailable: chartOpts?.bridgeUnavailable ?? false,
+    bridgeUnknown: chartOpts?.bridgeUnknown ?? false,
+  };
+}
+
 /**
  * Single-series crosshair + scrub. Use `useCrosshairSeries` for `LiveChartSeries`.
  */
@@ -211,24 +239,30 @@ export function useCrosshair(
   // screen Y is re-derived from it each frame (see `lockY` below) so the level
   // tracks the price as the axis rescales instead of drifting under a fixed pixel.
   const lockPriceValue = useSharedValue<number | null>(null);
-  const hasScrubAction = scrubAction != null;
-  const clampPlainScrubToPlot = clampToPlot && !hasScrubAction;
-  const hasOnScrubAction = onScrubAction != null;
-  const dismissOnTapOutside = scrubAction?.dismissOnTapOutside ?? false;
-  const dismissOnAction = scrubAction?.dismissOnAction ?? false;
-  const snapIncrement = scrubAction?.snap;
-  const actionIcon = scrubAction?.icon ?? "+";
-  const actionShowText = scrubAction?.text ?? true;
-  const hasTimeBadge = scrubAction?.timeBadge ?? false;
-
-  const isCandleMode = chartOpts?.mode === "candle";
-  const candlesSV = chartOpts?.candles;
-  const liveCandleSV = chartOpts?.liveCandle;
-  const candleWidthSecs = chartOpts?.candleWidthSecs ?? 60;
-  const chartGaps = chartOpts?.gaps ?? [];
-  const bridgeNoTrades = chartOpts?.bridgeNoTrades ?? false;
-  const bridgeUnavailable = chartOpts?.bridgeUnavailable ?? false;
-  const bridgeUnknown = chartOpts?.bridgeUnknown ?? false;
+  const {
+    hasScrubAction,
+    clampPlainScrubToPlot,
+    hasOnScrubAction,
+    dismissOnTapOutside,
+    dismissOnAction,
+    snapIncrement,
+    actionIcon,
+    actionShowText,
+    hasTimeBadge,
+    isCandleMode,
+    candlesSV,
+    liveCandleSV,
+    candleWidthSecs,
+    chartGaps,
+    bridgeNoTrades,
+    bridgeUnavailable,
+    bridgeUnknown,
+  } = resolveCrosshairSettings(
+    chartOpts,
+    scrubAction,
+    onScrubAction,
+    clampToPlot,
+  );
 
   // 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
@@ -407,9 +441,7 @@ export function useCrosshair(
       const canvasWidth = engine.canvasWidth.get();
       const canvasHeight = engine.canvasHeight.get();
       const price =
-        active && rawPrice !== null
-          ? snapPrice(rawPrice, snapIncrement)
-          : null;
+        active && rawPrice !== null ? snapPrice(rawPrice, snapIncrement) : null;
       let y = -1;
       if (
         rawPrice !== null &&
@@ -586,15 +618,7 @@ export function useCrosshair(
         string | null,
         string | null,
       ];
-      scheduleOnRN(
-        handleScrub,
-        row[2],
-        row[3],
-        row[0],
-        row[1],
-        row[4],
-        row[5],
-      );
+      scheduleOnRN(handleScrub, row[2], row[3], row[0], row[1], row[4], row[5]);
     },
   );
 
@@ -667,13 +691,7 @@ export function useCrosshair(
     .onTouchesUp(
       /* istanbul ignore next */ (e, manager) => {
         "worklet";
-        delayedPanTouchUp(
-          longPressMs,
-          e,
-          manager,
-          fingerDown,
-          panActivated,
-        );
+        delayedPanTouchUp(longPressMs, e, manager, fingerDown, panActivated);
       },
     )
     .onTouchesCancelled(
@@ -706,7 +724,12 @@ export function useCrosshair(
         // stays false and the live crosshair hides itself.
         if (hasScrubAction && lockActive.get()) {
           lockX.set(
-            clampPlotX(e.x, padding.left, engine.canvasWidth.get(), padding.right),
+            clampPlotX(
+              e.x,
+              padding.left,
+              engine.canvasWidth.get(),
+              padding.right,
+            ),
           );
           // Freeze the chosen price (value at the pointer Y); the line's Y is
           // re-derived from it so the level stays put in PRICE as the axis rescales.
@@ -747,7 +770,12 @@ export function useCrosshair(
         if (!enabled) return;
         if (hasScrubAction && lockActive.get()) {
           lockX.set(
-            clampPlotX(e.x, padding.left, engine.canvasWidth.get(), padding.right),
+            clampPlotX(
+              e.x,
+              padding.left,
+              engine.canvasWidth.get(),
+              padding.right,
+            ),
           );
           // Freeze the chosen price (value at the pointer Y); the line's Y is
           // re-derived from it so the level stays put in PRICE as the axis rescales.
@@ -895,13 +923,8 @@ export function useCrosshair(
     : undefined;
   // Keep the bottom axis scroll-only. Do not apply horizontal plot bounds here:
   // the action badge is intentionally tappable in the right gutter.
-  const tapHitSlop = resolveScrubHitSlop(
-    padding,
-    false,
-    scrubBottomExclude,
-  );
-  if (tapGesture && tapHitSlop)
-    tapGesture = tapGesture.hitSlop(tapHitSlop);
+  const tapHitSlop = resolveScrubHitSlop(padding, false, scrubBottomExclude);
+  if (tapGesture && tapHitSlop) tapGesture = tapGesture.hitSlop(tapHitSlop);
 
   return {
     scrubX,

package/src/hooks/useDegen.ts

@@ -13,6 +13,32 @@ import type { SingleEngineState } from "../core/useLiveChartEngine";
 import { computeShake, spawnBurst, tickParticles } from "../math/degenTick";
 import type { DegenShakePayload, Momentum } from "../types";
 
+function resolveDegenSettings(
+  config: ResolvedDegenConfig | null,
+  hasShakeListener: boolean,
+) {
+  return {
+    off: config === null,
+    scale: config?.scale ?? 1,
+    down: config?.downMomentum ?? false,
+    shake: config?.shake ?? true,
+    shakeIntensity: config?.shakeIntensity ?? 1,
+    shakeDurationSec: config?.shakeDurationSec ?? 0.45,
+    slotCount: config?.particleSlotCount ?? 60,
+    burstParticleCount: config?.burstParticleCount ?? 20,
+    particleBurstDurationSec: config?.particleBurstDurationSec ?? 1,
+    drag: config?.drag ?? 0.95,
+    sizeMin: config?.particleSizeMin ?? 1,
+    sizeMax: config?.particleSizeMax ?? 2.2,
+    spreadAngle: config?.spreadAngle ?? Math.PI * 1.2,
+    jitterX: config?.positionJitterX ?? 24,
+    jitterY: config?.positionJitterY ?? 8,
+    speedMin: config?.speedMin ?? 60,
+    speedMax: config?.speedMax ?? 160,
+    hasShakeListener,
+  };
+}
+
 export function useDegen(
   engine: SingleEngineState,
   dotX: SharedValue<number>,
@@ -65,23 +91,26 @@ export function useDegen(
     onShakeRef.current?.({ direction });
   };
 
-  const degenOff = cfg === null;
-  const resolvedScale = cfg?.scale ?? 1;
-  const resolvedDown = cfg?.downMomentum ?? false;
-  const resolvedShake = cfg?.shake ?? true;
-  const resolvedShakeIntensity = cfg?.shakeIntensity ?? 1;
-  const resolvedShakeDurationSec = cfg?.shakeDurationSec ?? 0.45;
-  const resolvedSlotCount = cfg?.particleSlotCount ?? 60;
-  const resolvedBurstParticleCount = cfg?.burstParticleCount ?? 20;
-  const resolvedParticleBurstDurationSec = cfg?.particleBurstDurationSec ?? 1.0;
-  const resolvedDrag = cfg?.drag ?? 0.95;
-  const resolvedSizeMin = cfg?.particleSizeMin ?? 1;
-  const resolvedSizeMax = cfg?.particleSizeMax ?? 2.2;
-  const resolvedSpreadAngle = cfg?.spreadAngle ?? Math.PI * 1.2;
-  const resolvedJitterX = cfg?.positionJitterX ?? 24;
-  const resolvedJitterY = cfg?.positionJitterY ?? 8;
-  const resolvedSpeedMin = cfg?.speedMin ?? 60;
-  const resolvedSpeedMax = cfg?.speedMax ?? 160;
+  const {
+    off,
+    scale,
+    down,
+    shake,
+    shakeIntensity,
+    shakeDurationSec,
+    slotCount,
+    burstParticleCount,
+    particleBurstDurationSec,
+    drag,
+    sizeMin,
+    sizeMax,
+    spreadAngle,
+    jitterX,
+    jitterY,
+    speedMin,
+    speedMax,
+    hasShakeListener,
+  } = resolveDegenSettings(cfg, onShake != null);
 
   useEffect(() => {
     // Mirror the resolved config into SharedValues for the UI-thread worklet.
@@ -90,43 +119,43 @@ export function useDegen(
     // is off, enabledSV is 0 and the frame worklet early-returns (zeroing the
     // particle buffer and shake itself), so the remaining values are inert; the
     // resolved* defaults already stand in for the null-config case.
-    enabledSV.set(degenOff ? 0 : 1);
-    shakeEnabledSV.set(!degenOff && resolvedShake ? 1 : 0);
-    hasOnShakeListenerSV.set(!degenOff && onShake != null ? 1 : 0);
-    scaleSV.set(resolvedScale);
-    downSV.set(resolvedDown ? 1 : 0);
-    shakeIntensitySV.set(resolvedShakeIntensity);
-    shakeDurationSecSV.set(resolvedShakeDurationSec);
-    slotCountSV.set(resolvedSlotCount);
-    burstParticleCountSV.set(resolvedBurstParticleCount);
-    particleBurstDurationSecSV.set(resolvedParticleBurstDurationSec);
-    dragSV.set(resolvedDrag);
-    sizeMinSV.set(resolvedSizeMin);
-    sizeMaxSV.set(resolvedSizeMax);
-    spreadAngleSV.set(resolvedSpreadAngle);
-    jitterXSV.set(resolvedJitterX);
-    jitterYSV.set(resolvedJitterY);
-    speedMinSV.set(resolvedSpeedMin);
-    speedMaxSV.set(resolvedSpeedMax);
+    enabledSV.set(off ? 0 : 1);
+    shakeEnabledSV.set(!off && shake ? 1 : 0);
+    hasOnShakeListenerSV.set(!off && hasShakeListener ? 1 : 0);
+    scaleSV.set(scale);
+    downSV.set(down ? 1 : 0);
+    shakeIntensitySV.set(shakeIntensity);
+    shakeDurationSecSV.set(shakeDurationSec);
+    slotCountSV.set(slotCount);
+    burstParticleCountSV.set(burstParticleCount);
+    particleBurstDurationSecSV.set(particleBurstDurationSec);
+    dragSV.set(drag);
+    sizeMinSV.set(sizeMin);
+    sizeMaxSV.set(sizeMax);
+    spreadAngleSV.set(spreadAngle);
+    jitterXSV.set(jitterX);
+    jitterYSV.set(jitterY);
+    speedMinSV.set(speedMin);
+    speedMaxSV.set(speedMax);
   }, [
-    degenOff,
-    onShake,
-    resolvedScale,
-    resolvedDown,
-    resolvedShake,
-    resolvedShakeIntensity,
-    resolvedShakeDurationSec,
-    resolvedSlotCount,
-    resolvedBurstParticleCount,
-    resolvedParticleBurstDurationSec,
-    resolvedDrag,
-    resolvedSizeMin,
-    resolvedSizeMax,
-    resolvedSpreadAngle,
-    resolvedJitterX,
-    resolvedJitterY,
-    resolvedSpeedMin,
-    resolvedSpeedMax,
+    off,
+    scale,
+    down,
+    shake,
+    shakeIntensity,
+    shakeDurationSec,
+    slotCount,
+    burstParticleCount,
+    particleBurstDurationSec,
+    drag,
+    sizeMin,
+    sizeMax,
+    spreadAngle,
+    jitterX,
+    jitterY,
+    speedMin,
+    speedMax,
+    hasShakeListener,
     // SharedValue refs are stable (useSharedValue), so listing them satisfies
     // exhaustive-deps without ever re-running the effect.
     enabledSV,

package/src/hooks/useLiveChartHasData.ts

@@ -1,9 +1,13 @@
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+import {
+  hasCandleChartData,
+  hasLineChartData,
+} from "../core/chartDataPresence";
 import type { CandlePoint, LiveChartPoint } from "../types";
 
 /**
- * Data presence for {@link LiveChart}: line mode needs ≥2 points;
- * candle mode needs ≥2 committed candles (`liveCandle` alone does not count).
+ * Data presence for {@link LiveChart}: line mode needs ≥1 point;
+ * candle mode needs ≥1 committed candle (`liveCandle` alone does not count).
  *
  * {@link useChartReveal} seeds its first-paint state off `hasData` directly (in a
  * layout effect), so no JS-thread snapshot is read during render here.
@@ -22,9 +26,9 @@ export function useLiveChartHasData({
   const hasData = useDerivedValue(() => {
     "worklet";
     if (isCandle) {
-      return (candles?.value.length ?? 0) >= 2;
+      return hasCandleChartData(candles?.value);
     }
-    return data.value.length >= 2;
+    return hasLineChartData(data.value);
   });
 
   return { hasData };

package/src/hooks/useReverseMorphEngineInputs.ts

@@ -3,6 +3,11 @@ import {
   useSharedValue,
   type SharedValue,
 } from "react-native-reanimated";
+import {
+  hasCandleChartData,
+  hasLineChartData,
+  hasMultiSeriesChartData,
+} from "../core/chartDataPresence";
 import type { CandlePoint, LiveChartPoint, SeriesConfig } from "../types";
 
 const STASH_MORPH_EPS = 0.01;
@@ -42,20 +47,19 @@ export function useSingleChartReverseMorphInputs({
       has: hasData.get(),
       m: morphT.get(),
       d: data.get(),
-      cLen: candles?.get().length ?? 0,
       c: candles?.get(),
       lc: liveCandle?.get() ?? null,
     }),
     (curr) => {
       "worklet";
       if (!curr.candle) {
-        if (curr.has && curr.d.length >= 2) {
+        if (curr.has && hasLineChartData(curr.d)) {
           lineStash.set(curr.d.slice());
           lineEngineData.set(curr.d);
         } else if (
           !curr.has &&
           curr.m > STASH_MORPH_EPS &&
-          lineStash.get().length >= 2
+          hasLineChartData(lineStash.get())
         ) {
           lineEngineData.set(lineStash.get());
         } else {
@@ -65,14 +69,14 @@ export function useSingleChartReverseMorphInputs({
       }
 
       const cArr = curr.c;
-      if (curr.has && curr.cLen >= 2 && cArr) {
+      if (curr.has && hasCandleChartData(cArr) && cArr) {
         candleStash.set(cArr.slice());
         candlesEngine.set(cArr);
         liveEngine.set(curr.lc);
       } else if (
         !curr.has &&
         curr.m > STASH_MORPH_EPS &&
-        candleStash.get().length >= 2
+        hasCandleChartData(candleStash.get())
       ) {
         candlesEngine.set(candleStash.get());
         liveEngine.set(null);
@@ -118,27 +122,14 @@ export function useMultiSeriesReverseMorphInputs({
     (curr) => {
       "worklet";
       const live = curr.live;
-
-      let anyReady = false;
-      for (let i = 0; i < live.length; i++) {
-        if (live[i].data.length >= 2) {
-          anyReady = true;
-          break;
-        }
-      }
+      const anyReady = hasMultiSeriesChartData(live);
 
       if (curr.has && anyReady) {
         seriesStash.set(snapshotSeriesWorklet(live));
         effectiveSeries.set(live);
       } else {
-        let stashReady = false;
         const stash = seriesStash.get();
-        for (let i = 0; i < stash.length; i++) {
-          if (stash[i].data.length >= 2) {
-            stashReady = true;
-            break;
-          }
-        }
+        const stashReady = hasMultiSeriesChartData(stash);
 
         if (!curr.has && curr.m > STASH_MORPH_EPS && stashReady) {
           effectiveSeries.set(seriesStash.get());

package/src/types.ts

@@ -2261,7 +2261,7 @@ export interface LiveChartCoreProps {
   transitions?: boolean | TransitionConfig;
   /**
    * Breathing-line loading shell. When this becomes `false`, the chart reveals
-   * only if there is data (≥2 line points or ≥2 committed candles).
+   * only if there is data (≥1 line point or ≥1 committed candle).
    *
    * `true` shows the shell with the defaults; pass a {@link LoadingConfig} to
    * restyle it — `color` / `strokeWidth` for the squiggle + skeleton, `amplitude`
@@ -2330,8 +2330,8 @@ export interface LiveChartCoreProps {
    */
   yRangeScale?: SharedValue<number>;
   /**
-   * Label in the empty state when `loading` is false and there are fewer than
-   * two samples (line points or committed candles). Default `"No data"`.
+   * Label in the empty state when `loading` is false and there are no line
+   * points or committed candles. Default `"No data"`.
    */
   emptyText?: string;
   /** Custom formatter for value labels (axes, badge, tooltips). Default `v => v.toFixed(2)`. */