react-native-livechart 4.22.2 → 4.23.0

package/src/hooks/useReferenceLine.ts

@@ -1,4 +1,5 @@
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
+import { useRef } from "react";
 
 import type { SkFont } from "@shopify/react-native-skia";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
@@ -7,7 +8,10 @@ import {
   type YAxisEntry,
 } from "../draw/grid";
 import type { ChartPadding } from "../draw/line";
-import { measureFontTextWidth } from "../lib/measureFontTextWidth";
+import {
+  measureFontTextWidth,
+  type TextWidthCache,
+} from "../lib/measureFontTextWidth";
 import {
   classifyReferenceEdge,
   referenceLineForm,
@@ -120,6 +124,7 @@ function badgeGeometry(
   x1: number,
   x2: number,
   font: SkFont,
+  textWidthCache?: TextWidthCache,
 ): BadgeGeometry {
   "worklet";
   // Measure the icon's visual bounds (not just width): `SkiaText` draws from the
@@ -129,7 +134,9 @@ function badgeGeometry(
   // price-pill centering in computeActionBadgeLayout.
   const iconBounds = icon ? font.measureText(icon) : null;
   const iconW = iconBounds ? iconBounds.width : 0;
-  const textW = text ? measureFontTextWidth(font, text) : 0;
+  const textW = text
+    ? measureFontTextWidth(font, text, textWidthCache)
+    : 0;
 
   let contentW = 0;
   let count = 0;
@@ -310,6 +317,7 @@ export function useReferenceLine(
   const form = line ? referenceLineForm(line) : "none";
   // Badge presentation depends only on the (stable) line props — resolve once.
   const badge = line ? resolveReferenceBadge(line) : null;
+  const textWidthCacheRef = useRef<TextWidthCache>({});
 
   return useDerivedValue<ReferenceLineLayout>(() => {
     if (!line || form === "none") return INVISIBLE;
@@ -447,7 +455,16 @@ export function useReferenceLine(
         ? chartTop + OFF_AXIS_EDGE_INSET
         : chartBottom - OFF_AXIS_EDGE_INSET;
       const text = referenceBadgeText(line, badge, v, formatValue, true);
-      const g = badgeGeometry(badge.position, badge.icon, text, true, x1, x2, font);
+      const g = badgeGeometry(
+        badge.position,
+        badge.icon,
+        text,
+        true,
+        x1,
+        x2,
+        font,
+        textWidthCacheRef.current,
+      );
       return {
         ...INVISIBLE,
         visible: true,
@@ -476,7 +493,16 @@ export function useReferenceLine(
     // In-range pill badge (the `badge` config, not the legacy off-axis-only flag).
     if (badge && badge.inRange) {
       const text = referenceBadgeText(line, badge, v, formatValue, false);
-      const g = badgeGeometry(badge.position, badge.icon, text, false, x1, x2, font);
+      const g = badgeGeometry(
+        badge.position,
+        badge.icon,
+        text,
+        false,
+        x1,
+        x2,
+        font,
+        textWidthCacheRef.current,
+      );
       return {
         ...INVISIBLE,
         visible: true,

package/src/hooks/useTradeStream.ts

@@ -28,6 +28,8 @@ export function useTradeStream(
   active: boolean,
   /** Static charts run no loops: register without starting. Default `true`. */
   autostart = true,
+  /** Runtime gate shared with the chart engine. */
+  isFrameLoopActive?: SharedValue<boolean>,
 ): SharedValue<TradeMarker[]> {
   const markers = useSharedValue<TradeMarker[]>([]);
   const state = useSharedValue<TradeStreamState>(createTradeStreamState());
@@ -37,6 +39,7 @@ export function useTradeStream(
       frameInfo,
     ) => {
       "worklet";
+      if (isFrameLoopActive?.get() === false) return;
       if (!active) {
         if (markers.get().length > 0) markers.set([]);
         return;

package/src/index.ts

@@ -75,6 +75,7 @@ export type {
   LegendStyle,
   LineConfig,
   LiveChartCoreProps,
+  LiveChartFrameStats,
   LiveChartHandle,
   LiveChartMetrics,
   LiveChartMetricsOverride,

package/src/lib/measureFontTextWidth.ts

@@ -1,10 +1,34 @@
 import type { SkFont } from "@shopify/react-native-skia";
 
+/** Caller-owned last-value cache for repeated UI-thread text measurement. */
+export interface TextWidthCache {
+  /** Font used for the cached measurement. */
+  font?: SkFont;
+  /** Text used for the cached measurement. */
+  text?: string;
+  /** Cached width. */
+  width?: number;
+}
+
 /**
  * Horizontal layout width for `text` via Skia `measureText` (replaces deprecated `getTextWidth`).
  * Marked worklet for use inside Reanimated `useDerivedValue`.
  */
-export function measureFontTextWidth(font: SkFont, text: string): number {
+export function measureFontTextWidth(
+  font: SkFont,
+  text: string,
+  cache?: TextWidthCache,
+): number {
   "worklet";
-  return font.measureText(text).width;
+  if (cache?.font === font && cache.text === text && cache.width !== undefined) {
+    return cache.width;
+  }
+
+  const width = font.measureText(text).width;
+  if (cache) {
+    cache.font = font;
+    cache.text = text;
+    cache.width = width;
+  }
+  return width;
 }

package/src/math/referenceDrag.ts

@@ -43,6 +43,25 @@ export function nearestDraggableIndex(
   return best;
 }
 
+/**
+ * Whether the reference-drag gesture owns the current touch — the answer the
+ * scrub's activation guard needs. A **grabbed** line (`dragIndex >= 0`, pressed
+ * or already dragging) owns the touch outright, wherever the asking gesture says
+ * the finger is: the scrub pan can activate mid-drag and asks with its
+ * touch-DOWN point, which a longer drag has carried the line away from. With no
+ * line grabbed, it is the geometric reach test around the handles.
+ */
+export function referenceDragOwnsTouch(
+  dragIndex: number,
+  handleYs: number[],
+  y: number,
+  slop: number,
+): boolean {
+  "worklet";
+  if (dragIndex >= 0) return true;
+  return nearestDraggableIndex(handleYs, y, slop) >= 0;
+}
+
 /**
  * Resolve a grabbed line's drag intent from the touch travel (px) since the grab.
  * Once a line is grabbed it **owns** the touch: any drag past `threshold` px in

package/src/types.ts

@@ -16,6 +16,16 @@ export interface LiveChartPoint {
   value: number;
 }
 
+/** Development counters for continuous engine-frame state updates. */
+export interface LiveChartFrameStats {
+  /** Frame callbacks that ran while the chart was live. */
+  frames: number;
+  /** Frames that changed at least one tracked engine value. */
+  published: number;
+  /** Frames whose tracked engine values were unchanged. */
+  skipped: number;
+}
+
 /** Direction of recent price movement, used for dot/badge coloring and degen effects. */
 export type Momentum = "up" | "down" | "flat";
 
@@ -707,6 +717,9 @@ export interface VolumeConfig {
 
 /** Y-axis grid configuration. */
 export interface YAxisConfig {
+  /** Price-label side. For left placement, reserve the label gutter with insets.left.
+   * Right-side float/labelRightMargin options do not affect left labels. Default "right". */
+  side?: "left" | "right";
   /** Minimum pixel gap between grid lines. Default `36`. */
   minGap?: number;
   /**
@@ -2664,6 +2677,23 @@ export interface LiveChartProps extends LiveChartCoreProps {
    *  switching back to live restarts the suspended loops and catches up. Frame the data
    *  with `timeWindow` + `nowOverride` (see the historical-data-fill pattern). */
   static?: boolean;
+  /**
+   * Runtime gate for continuous frame work. Set this SharedValue to `false`
+   * while a parent scroll gesture needs the UI thread; data keeps updating and
+   * the chart catches up when it becomes `true`. Unlike {@link static}, this
+   * keeps pan, zoom, scrub, and draggable reference-line gestures mounted.
+   *
+   * @experimental
+   */
+  isFrameLoopActive?: SharedValue<boolean>;
+  /**
+   * Optional development counter for engine frames that did or did not change
+   * tracked engine values. It is not a count of Skia redraws. Supplying it adds
+   * one SharedValue write per active engine frame.
+   *
+   * @experimental
+   */
+  debugFrameStats?: SharedValue<LiveChartFrameStats>;
   /**
    * Render a custom overlay floated over the chart canvas, handed a price↔pixel /
    * time↔pixel {@link ChartOverlayContext} so it can track the auto-rescaling axis