react-native-livechart 4.10.0 → 4.11.0

package/src/hooks/crosshairShared.ts

@@ -14,6 +14,11 @@ const TOOLTIP_EDGE_GAP = 4;
 const TOOLTIP_TOP_MARGIN = 8;
 const FADE_ZONE = 4;
 
+/** Horizontal travel required before a plain scrub claims the touch. */
+export const SCRUB_ACTIVATE_X_PX = 20;
+/** Vertical travel that fails a plain scrub so a parent scroll gesture can win. */
+export const SCRUB_FAIL_Y_PX = 10;
+
 /** Measure rendered text so the pill and its content share the same centre. */
 function measureTooltipTextWidth(
   font: SkFont,

package/src/hooks/useChartPaths.ts

@@ -55,6 +55,10 @@ export function useChartPaths(
     ptsA: number[];
     ptsB: number[];
     ptsTick: boolean;
+    squigglePts: number[];
+    morphA: number[];
+    morphB: number[];
+    morphTick: boolean;
     scratch: ReturnType<typeof makeSplineScratch>;
   } | null>(null);
   if (cacheRef.current === null) {
@@ -63,6 +67,10 @@ export function useChartPaths(
       ptsA: [] as number[],
       ptsB: [] as number[],
       ptsTick: false,
+      squigglePts: [] as number[],
+      morphA: [] as number[],
+      morphB: [] as number[],
+      morphTick: false,
       scratch: makeSplineScratch(),
     };
   }
@@ -102,15 +110,18 @@ export function useChartPaths(
       centerY,
       squiggleAmplitude,
       squiggleSpeed,
+      cache.squigglePts,
     );
 
     // Blend center-out: centre of chart reveals first, edges last
+    cache.morphTick = !cache.morphTick;
     return blendPtsY(
       squigglyPts,
       realPts,
       t,
       padding,
       engine.canvasWidth.get(),
+      cache.morphTick ? cache.morphA : cache.morphB,
     );
   });
 

package/src/hooks/useCrosshair.ts

@@ -1,5 +1,4 @@
 import { type SkFont } from "@shopify/react-native-skia";
-import { Platform } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import {
   useAnimatedReaction,
@@ -33,6 +32,8 @@ import {
   HIDDEN_TIME_BADGE,
   HIDDEN_TOOLTIP,
   pointInRect,
+  SCRUB_ACTIVATE_X_PX,
+  SCRUB_FAIL_Y_PX,
   snapPrice,
   type CrosshairState,
 } from "./crosshairShared";
@@ -501,12 +502,6 @@ export function useCrosshair(
       : panGestureDelay;
 
   let gesture = Gesture.Pan()
-    // Scrub-action: minDistance 0 — the press-hold above is the sole activator
-    // (movement during the hold fails the pan), so the crosshair never appears
-    // from a tap's travel. The Tap (maxDistance SCRUB_ACTION_TAP_SLOP) owns quick
-    // gestures; only a held press becomes a scrub/adjust drag.
-    .minDistance(!hasScrubAction && Platform.OS === "android" ? 10 : 0)
-    .activateAfterLongPress(longPressMs)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
     .onTouchesDown(
@@ -620,11 +615,22 @@ export function useCrosshair(
       },
     );
 
-  /* istanbul ignore next -- Android-only gesture axis config */
-  if (Platform.OS === "android" && !hasScrubAction) {
+  // Passing zero-valued activation modifiers lets RNGH's iOS pan recognizer
+  // activate before the axis constraints classify the drag. Only configure a
+  // hold when one is requested, and reserve minDistance(0) for scrub-action's
+  // deliberate press-hold interaction.
+  if (longPressMs > 0) {
+    gesture = gesture.activateAfterLongPress(longPressMs);
+  }
+
+  if (hasScrubAction) {
+    gesture = gesture.minDistance(0);
+  } else {
     // Lock mode needs free vertical drag (Y = price), so the failOffsetY clamp —
     // which would kill a vertical adjust — is applied only outside scrub-action.
-    gesture = gesture.activeOffsetX([-25, 25]).failOffsetY([-25, 25]);
+    gesture = gesture
+      .activeOffsetX([-SCRUB_ACTIVATE_X_PX, SCRUB_ACTIVATE_X_PX])
+      .failOffsetY([-SCRUB_FAIL_Y_PX, SCRUB_FAIL_Y_PX]);
   }
 
   // Axis-drag time-scroll: carve the bottom "time ruler" band out of the scrub's

package/src/hooks/useCrosshairSeries.ts

@@ -1,4 +1,3 @@
-import { Platform } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import {
   useAnimatedReaction,
@@ -18,6 +17,8 @@ import {
   computeScrubDotY,
   computeScrubTime,
   HIDDEN_TOOLTIP,
+  SCRUB_ACTIVATE_X_PX,
+  SCRUB_FAIL_Y_PX,
   type CrosshairState,
 } from "./crosshairShared";
 import {
@@ -165,8 +166,6 @@ export function useCrosshairSeries(
   );
 
   let gesture = Gesture.Pan()
-    .minDistance(Platform.OS === "android" ? 10 : 0)
-    .activateAfterLongPress(panGestureDelay)
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
     .onTouchesDown(
@@ -228,11 +227,17 @@ export function useCrosshairSeries(
       },
     );
 
-  /* istanbul ignore next */
-  if (Platform.OS === "android") {
-    gesture = gesture.activeOffsetX([-25, 25]).failOffsetY([-25, 25]);
+  // Omit zero-valued activation modifiers so RNGH can classify direction before
+  // the pan activates on iOS. A vertical drag then remains available to a parent
+  // ScrollView/list, while a clear horizontal drag starts scrubbing.
+  if (panGestureDelay > 0) {
+    gesture = gesture.activateAfterLongPress(panGestureDelay);
   }
 
+  gesture = gesture
+    .activeOffsetX([-SCRUB_ACTIVATE_X_PX, SCRUB_ACTIVATE_X_PX])
+    .failOffsetY([-SCRUB_FAIL_Y_PX, SCRUB_FAIL_Y_PX]);
+
   return {
     scrubX,
     scrubActive,

package/src/hooks/useMultiSeriesLinePaths.ts

@@ -8,30 +8,37 @@ import { drawSpline, makeSplineScratch } from "../math/spline";
 import { usePathBuilders } from "./usePathBuilder";
 
 /**
- * One derived shared value holding up to `MAX_MULTI_SERIES` Skia paths (unused
- * slots reuse one cached empty path).
+ * One derived shared value holding only the active series' Skia paths, capped at
+ * `MAX_MULTI_SERIES`.
  *
  * Each visible series' path is built into a per-slot `Skia.PathBuilder` (reused
  * across frames via a SharedValue) and finalized with `detach()` — a fresh
  * immutable `SkPath` per frame, so `MultiSeriesStroke`'s per-slot
  * `useDerivedValue(() => paths.value[index])` repaints without the two-SkPath
- * ping-pong. Only visible series allocate a path.
+ * ping-pong. Only active series allocate and publish a path.
  */
 export function useMultiSeriesLinePaths(
   engine: MultiEngineState,
   padding: ChartPadding,
+  activeSeriesCount = MAX_MULTI_SERIES,
 ): SharedValue<SkPath[]> {
   const builders = usePathBuilders(MAX_MULTI_SERIES);
 
   const poolRef = useRef<{
     empty: SkPath;
     ptsBuf: number[];
+    pathsA: SkPath[];
+    pathsB: SkPath[];
+    pathsTick: boolean;
     scratch: ReturnType<typeof makeSplineScratch>;
   } | null>(null);
   if (poolRef.current === null) {
     poolRef.current = {
       empty: Skia.Path.Make(),
       ptsBuf: [] as number[],
+      pathsA: [] as SkPath[],
+      pathsB: [] as SkPath[],
+      pathsTick: false,
       scratch: makeSplineScratch(),
     };
   }
@@ -41,12 +48,11 @@ export function useMultiSeriesLinePaths(
     const slots = builders.value;
     const s = engine.series.get();
     const displays = engine.displaySeriesValues.get();
-    const out: SkPath[] = [];
-    for (let i = 0; i < MAX_MULTI_SERIES; i++) {
-      if (i >= s.length) {
-        out.push(pool.empty);
-        continue;
-      }
+    pool.pathsTick = !pool.pathsTick;
+    const out = pool.pathsTick ? pool.pathsA : pool.pathsB;
+    out.length = 0;
+    const count = Math.min(activeSeriesCount, s.length, MAX_MULTI_SERIES);
+    for (let i = 0; i < count; i++) {
       const pts = buildLinePoints(
         s[i].data,
         displays[i] ?? s[i].value,

package/src/index.ts

@@ -40,6 +40,7 @@ export type {
   BadgeVariant,
   CandleMetrics,
   CandlePoint,
+  CanvasMode,
   ChartInsets,
   ChartOverlayContext,
   ChartPlotRect,

package/src/math/squiggly.ts

@@ -31,6 +31,7 @@ export function squigglyYAt(
  * Build a flat [x0,y0,x1,y1,...] point array for a standalone squiggly line
  * spanning the full chart area (used in loading / empty state).
  * Points are spaced ~4px apart for smooth curves.
+ * Pass `out` to reuse a caller-owned frame scratch.
  */
 export function buildSquigglyPts(
   canvasWidth: number,
@@ -39,17 +40,22 @@ export function buildSquigglyPts(
   t: number,
   base = 14,
   speed = 1,
+  out?: number[],
 ): number[] {
   "worklet";
+  const pts = out ?? [];
   const leftEdge = padding.left;
   const rightEdge = canvasWidth - padding.right;
   const chartW = rightEdge - leftEdge;
-  if (chartW <= 0 || canvasHeight <= 0) return [];
+  if (chartW <= 0 || canvasHeight <= 0) {
+    pts.length = 0;
+    return pts;
+  }
 
   const centerY = (canvasHeight - padding.bottom + padding.top) / 2;
   const step = 4;
   const count = Math.ceil(chartW / step) + 1;
-  const pts: number[] = new Array(count * 2);
+  pts.length = count * 2;
   for (let i = 0; i < count; i++) {
     const x = leftEdge + Math.min(i * step, chartW);
     pts[i * 2] = x;
@@ -61,6 +67,7 @@ export function buildSquigglyPts(
 /**
  * Given a real flat-pts array (from buildLinePoints), replace each Y with the
  * squiggly Y at the same X. Used during the morph reveal.
+ * Pass `out` to reuse a caller-owned frame scratch.
  */
 export function squigglifyPts(
   flatPts: number[],
@@ -68,15 +75,17 @@ export function squigglifyPts(
   centerY: number,
   base = 14,
   speed = 1,
+  out?: number[],
 ): number[] {
   "worklet";
   const n = flatPts.length;
-  const out: number[] = new Array(n);
+  const target = out ?? [];
+  target.length = n;
   for (let i = 0; i < n; i += 2) {
-    out[i] = flatPts[i];
-    out[i + 1] = squigglyYAt(flatPts[i], centerY, t, base, speed);
+    target[i] = flatPts[i];
+    target[i + 1] = squigglyYAt(flatPts[i], centerY, t, base, speed);
   }
-  return out;
+  return target;
 }
 
 /**
@@ -97,6 +106,7 @@ export function smoothstep(t: number): number {
  *   distFromCentre = |x - chartCentreX| / (chartW / 2)   // 0=centre, 1=edge
  *   weight = smoothstep((morphT - distFromCentre * 0.5) / 0.5)
  *   blendedY = fromY + (toY - fromY) * weight
+ * Pass `out` to reuse a caller-owned frame scratch.
  */
 export function blendPtsY(
   from: number[],
@@ -104,19 +114,26 @@ export function blendPtsY(
   morphT: number,
   padding: ChartPadding,
   canvasWidth: number,
+  out?: number[],
 ): number[] {
   "worklet";
   const n = from.length;
-  if (n === 0) return to;
+  if (n === 0 && !out) return to;
   const chartCentreX = (padding.left + canvasWidth - padding.right) / 2;
   const halfChartW = (canvasWidth - padding.left - padding.right) / 2;
-  const out: number[] = new Array(n);
+  const target = out ?? [];
+  const outputLength = n === 0 ? to.length : n;
+  target.length = outputLength;
+  if (n === 0) {
+    for (let i = 0; i < to.length; i++) target[i] = to[i];
+    return target;
+  }
   for (let i = 0; i < n; i += 2) {
-    out[i] = to[i]; // X always from real pts
+    target[i] = to[i]; // X always from real pts
     const distFromCentre =
       halfChartW > 0 ? Math.abs(from[i] - chartCentreX) / halfChartW : 0;
     const weight = smoothstep((morphT - distFromCentre * 0.5) / 0.5);
-    out[i + 1] = from[i + 1] + (to[i + 1] - from[i + 1]) * weight;
+    target[i + 1] = from[i + 1] + (to[i + 1] - from[i + 1]) * weight;
   }
-  return out;
+  return target;
 }

package/src/math/threshold.ts

@@ -12,8 +12,8 @@ import type { LiveChartPoint } from "../types";
  * projected to this many evenly-spaced pixel-Y values across the plot, which the
  * shader linearly interpolates between. ~one sample per 6px on a phone plot —
  * fine enough that the line's crossing point is coloured accurately. The shader
- * walks these in an unrolled loop (`THRESHOLD_SAMPLE_COUNT - 1` iterations), so
- * keep it modest to stay within SkSL's unroll limits.
+ * selects between them through a balanced constant-index branch tree, so 64
+ * samples require at most six comparisons per covered fragment.
  */
 export const THRESHOLD_SAMPLE_COUNT = 64;
 

package/src/types.ts

@@ -44,6 +44,10 @@ export type FontWeight =
 /** Color scheme for the chart background, grid, and derived palette colors. */
 export type ThemeMode = "light" | "dark";
 
+/** Skia canvas composition mode. Android uses TextureView for `"transparent"`
+ * and an opaque SurfaceView for `"opaque"`. */
+export type CanvasMode = "transparent" | "opaque";
+
 /**
  * Badge pill style.
  * - `"default"` — accent-colored background with white text.
@@ -249,8 +253,9 @@ export interface ReferenceLineBadgeConfig extends BadgeStyleConfig {
 }
 
 /**
- * Context passed to a custom {@link LiveChartProps.renderReferenceLine}. The chart
- * floats the element you return over the canvas and pins it to the line's value on
+ * Context passed to a custom {@link LiveChartProps.renderReferenceLine} or
+ * {@link LiveChartSeriesProps.renderReferenceLine}. The chart floats the element
+ * you return over the canvas and pins it to the line's value on
  * the UI thread (vertically centered on the line, horizontally at the badge /
  * label position) — so it tracks the rescaling axis and any drag smoothly without
  * JS re-renders, just like {@link TooltipRenderProps}. Replaces the built-in pill
@@ -1122,7 +1127,8 @@ export interface TradeEvent {
 }
 
 /** Built-in marker glyph kinds drawn into the chart canvas. */
-export type MarkerKind = "trade" | "boost" | "graduation" | "winner" | "clawback";
+export type MarkerKind =
+  "trade" | "boost" | "graduation" | "winner" | "clawback";
 
 /**
  * A marker rendered into the chart at `(time, y)`. Exactly one of `seriesId`
@@ -1748,6 +1754,18 @@ export interface LiveChartCoreProps {
   insets?: ChartInsets;
   /** Container View style. */
   style?: ViewStyle;
+  /**
+   * Canvas composition mode. `"transparent"` keeps Skia's default compositing
+   * path (TextureView on Android) and can reveal content behind the chart.
+   * `"opaque"` makes the canvas own and paint its palette background; on Android
+   * this selects SurfaceView and may reduce RenderThread work, but it cannot be
+   * used when the chart must reveal content behind it. Default `"transparent"`.
+   *
+   * @experimental Profile on representative physical Android hardware before
+   * enabling broadly; SurfaceView ordering, clipping, transforms, screenshots,
+   * and parent scrolling should be validated in the consuming layout.
+   */
+  canvasMode?: CanvasMode;
   /** Visible time window in seconds. Default `30`. */
   timeWindow?: number;
   /** Freeze chart scrolling. Resume catches up to real time. Default `false`. */
@@ -2177,6 +2195,18 @@ export interface LiveChartProps extends LiveChartCoreProps {
 export interface LiveChartSeriesProps extends LiveChartCoreProps {
   /** Array of series definitions. Must be a SharedValue for UI-thread reads. */
   series: SharedValue<SeriesConfig[]>;
+  /**
+   * Render a Form-A reference line's tag as a custom **React Native** element
+   * instead of the built-in Skia pill / gutter label. The chart pins the returned
+   * element to the line's live Y position on the UI thread (see
+   * {@link ReferenceLineRenderProps}), including off-axis edge pinning. Return
+   * `null`/`undefined` to keep that line's built-in tag. The line stroke always
+   * remains visible, and `badge.position` / `labelPosition` controls the custom
+   * tag's left, center, or right anchor.
+   */
+  renderReferenceLine?: (
+    ctx: ReferenceLineRenderProps,
+  ) => ReactElement | null | undefined;
   /** Called when a series toggle chip is tapped. */
   onSeriesToggle?: (id: string, visible: boolean) => void;
   /**