react-native-livechart 4.13.0 → 4.13.1

package/dist/components/LiveChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveChart.d.ts","sourceRoot":"","sources":["../../src/components/LiveChart.tsx"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,UAAU,CAAC;AAq9ElB,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAS9C"}
+{"version":3,"file":"LiveChart.d.ts","sourceRoot":"","sources":["../../src/components/LiveChart.tsx"],"names":[],"mappings":"AA2HA,OAAO,KAAK,EAGV,cAAc,EAEf,MAAM,UAAU,CAAC;AA08ElB,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAS9C"}

package/dist/components/SegmentLineGradient.d.ts

@@ -0,0 +1,23 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { ResolvedSegment } from "../core/resolveSegment";
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+interface SegmentLineGradientProps {
+    engine: ChartEngineLayout;
+    segments: ResolvedSegment[];
+    padding: ChartPadding;
+    baseColor: string;
+    scrubX: SharedValue<number>;
+    scrubActive: SharedValue<boolean>;
+}
+/**
+ * Keeps the two SharedValues passed to Skia on one stop-count lifecycle.
+ *
+ * Scrubbing can change which stops are visible without changing `stopCount`, so
+ * padding keeps those mapper updates safe. When the segment props themselves
+ * change the count, the keyed child remounts both SharedValues together instead
+ * of letting one retain the previous length for a frame.
+ */
+export declare function SegmentLineGradient(props: SegmentLineGradientProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SegmentLineGradient.d.ts.map

package/dist/components/SegmentLineGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentLineGradient.d.ts","sourceRoot":"","sources":["../../src/components/SegmentLineGradient.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,UAAU,wBAAwB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BAGlE"}

package/dist/hooks/useSegmentLineGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSegmentLineGradient.d.ts","sourceRoot":"","sources":["../../src/hooks/useSegmentLineGradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAKjD;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,QAAQ,EAAE,eAAe,EAAE,EAC3B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAC3B,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;;;;EA8BlC"}
+{"version":3,"file":"useSegmentLineGradient.d.ts","sourceRoot":"","sources":["../../src/hooks/useSegmentLineGradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AASjD;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,iBAAiB,EACzB,QAAQ,EAAE,eAAe,EAAE,EAC3B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAC3B,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;;;;EAkClC"}

package/dist/math/segments.d.ts

@@ -43,4 +43,8 @@ export interface SegmentGradient {
  * The caller then strokes the line with its plain solid color.
  */
 export declare function segmentLineGradient(segments: ResolvedSegment[], winStart: number, win: number, canvasWidth: number, plotLeft: number, plotRight: number, baseColor: string, scrubActive: boolean, scrubX: number): SegmentGradient | null;
+/** Stops {@link segmentLineGradient} can emit for `segments` — no per-frame state. */
+export declare function segmentGradientStopCount(segments: ResolvedSegment[]): number;
+/** Resize `stops` to `count` by repeating its last entry. */
+export declare function padGradientStops<T>(stops: T[], count: number): T[];
 //# sourceMappingURL=segments.d.ts.map

package/dist/math/segments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../src/math/segments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,sEAAsE;AACtE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,GAAG,EAAE,MAAM,CAAC;CACb;AAID;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,YAAY,CAkBd;AAED,kEAAkE;AAClE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,eAAe,EAAE,EAC3B,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,MAAM,GACb,eAAe,GAAG,IAAI,CAuFxB"}
+{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../src/math/segments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,sEAAsE;AACtE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,GAAG,EAAE,MAAM,CAAC;CACb;AAID;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,YAAY,CAkBd;AAED,kEAAkE;AAClE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,eAAe,EAAE,EAC3B,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,MAAM,GACb,eAAe,GAAG,IAAI,CAuFxB;AAED,sFAAsF;AACtF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,eAAe,EAAE,GAAG,MAAM,CAa5E;AAED,6DAA6D;AAC7D,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,CAOlE"}

package/package.json

@@ -67,5 +67,5 @@
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "4.13.0"
+  "version": "4.13.1"
 }

package/src/components/LiveChart.tsx

@@ -89,7 +89,6 @@ import {
 import { AXIS_GRAB_MIN_PX, usePanScroll } from "../hooks/usePanScroll";
 import { usePinchZoom } from "../hooks/usePinchZoom";
 import { useVisibleRange } from "../hooks/useVisibleRange";
-import { useSegmentLineGradient } from "../hooks/useSegmentLineGradient";
 import { useSingleChartReverseMorphInputs } from "../hooks/useReverseMorphEngineInputs";
 import {
   useThreshold,
@@ -162,6 +161,7 @@ import { ReferenceLineGroupOverlay } from "./ReferenceLineGroupOverlay";
 import { ReferenceLineOverlay } from "./ReferenceLineOverlay";
 import { ScrubActionOverlay } from "./ScrubActionOverlay";
 import { SegmentDividerOverlay } from "./SegmentDividerOverlay";
+import { SegmentLineGradient } from "./SegmentLineGradient";
 import { TradeStreamOverlay } from "./TradeStreamOverlay";
 import { ValueLineOverlay } from "./ValueLineOverlay";
 import { XAxisOverlay } from "./XAxisOverlay";
@@ -1200,19 +1200,6 @@ function useLiveChartController({
     effectivePadding,
   );
 
-  // Scrub-focus gradient painted onto the line stroke: uniform at rest, and while
-  // scrubbing (or with an `active` segment) the focused segment stays full while
-  // the others are de-emphasized. Declared after `crosshair` so it can read the
-  // live scrub state.
-  const segmentGradient = useSegmentLineGradient(
-    engine,
-    resolvedSegments,
-    effectivePadding,
-    lineProp?.color ?? palette.line,
-    crosshair.scrubX,
-    crosshair.scrubActive,
-  );
-
   // Hide the live dot while scrubbing when a selection dot is marking the scrub
   // point instead — otherwise both dots show at once. Applies on static charts
   // too, now that they're scrubbable.
@@ -1326,7 +1313,6 @@ function useLiveChartController({
     refGroupFormat,
     resolvedSegments,
     hasRecolorSegments,
-    segmentGradient,
     thresholdCfg,
     thresholdGeom,
     thresholdStrokeColors: thresholdStopColors?.stroke ?? null,
@@ -1764,7 +1750,7 @@ function ChartStack({
     dragValues,
     resolvedSegments,
     hasRecolorSegments,
-    segmentGradient,
+    crosshair,
     thresholdCfg,
     thresholdGeom,
     thresholdStrokeColors,
@@ -1905,11 +1891,13 @@ function ChartStack({
               positions={thresholdGeom.splitPositions}
             />
           ) : hasRecolorSegments ? (
-            <LinearGradient
-              start={vec(0, 0)}
-              end={segmentGradient.gradientEnd}
-              colors={segmentGradient.colors}
-              positions={segmentGradient.positions}
+            <SegmentLineGradient
+              engine={engine}
+              segments={resolvedSegments}
+              padding={effectivePadding}
+              baseColor={lineProp?.color ?? palette.line}
+              scrubX={crosshair.scrubX}
+              scrubActive={crosshair.scrubActive}
             />
           ) : lineProp?.colors?.length ? (
             <LinearGradient

package/src/components/SegmentLineGradient.tsx

@@ -0,0 +1,57 @@
+import { LinearGradient, vec } from "@shopify/react-native-skia";
+import type { SharedValue } from "react-native-reanimated";
+
+import type { ResolvedSegment } from "../core/resolveSegment";
+import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import type { ChartPadding } from "../draw/line";
+import { useSegmentLineGradient } from "../hooks/useSegmentLineGradient";
+import { segmentGradientStopCount } from "../math/segments";
+
+interface SegmentLineGradientProps {
+  engine: ChartEngineLayout;
+  segments: ResolvedSegment[];
+  padding: ChartPadding;
+  baseColor: string;
+  scrubX: SharedValue<number>;
+  scrubActive: SharedValue<boolean>;
+}
+
+/**
+ * Keeps the two SharedValues passed to Skia on one stop-count lifecycle.
+ *
+ * Scrubbing can change which stops are visible without changing `stopCount`, so
+ * padding keeps those mapper updates safe. When the segment props themselves
+ * change the count, the keyed child remounts both SharedValues together instead
+ * of letting one retain the previous length for a frame.
+ */
+export function SegmentLineGradient(props: SegmentLineGradientProps) {
+  const stopCount = segmentGradientStopCount(props.segments);
+  return <SegmentLineGradientPaint key={stopCount} {...props} />;
+}
+
+function SegmentLineGradientPaint({
+  engine,
+  segments,
+  padding,
+  baseColor,
+  scrubX,
+  scrubActive,
+}: SegmentLineGradientProps) {
+  const gradient = useSegmentLineGradient(
+    engine,
+    segments,
+    padding,
+    baseColor,
+    scrubX,
+    scrubActive,
+  );
+
+  return (
+    <LinearGradient
+      start={vec(0, 0)}
+      end={gradient.gradientEnd}
+      colors={gradient.colors}
+      positions={gradient.positions}
+    />
+  );
+}

package/src/hooks/useSegmentLineGradient.ts

@@ -4,7 +4,11 @@ import { vec } from "@shopify/react-native-skia";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
 import type { ResolvedSegment } from "../core/resolveSegment";
 import type { ChartPadding } from "../draw/line";
-import { segmentLineGradient } from "../math/segments";
+import {
+  padGradientStops,
+  segmentGradientStopCount,
+  segmentLineGradient,
+} from "../math/segments";
 
 const FALLBACK_POSITIONS = [0, 1];
 
@@ -43,11 +47,15 @@ export function useSegmentLineGradient(
     );
   });
 
-  const colors = useDerivedValue(
-    () => data.value?.colors ?? [baseColor, baseColor],
+  // Fixed stop count: `colors`/`positions` tear independently and Skia treats a
+  // length mismatch as a fatal UI-thread throw.
+  const stopCount = segmentGradientStopCount(segments);
+
+  const colors = useDerivedValue(() =>
+    padGradientStops(data.value?.colors ?? [baseColor, baseColor], stopCount),
   );
-  const positions = useDerivedValue(
-    () => data.value?.positions ?? FALLBACK_POSITIONS,
+  const positions = useDerivedValue(() =>
+    padGradientStops(data.value?.positions ?? FALLBACK_POSITIONS, stopCount),
   );
   const gradientEnd = useDerivedValue(() =>
     vec(Math.max(1, engine.canvasWidth.value), 0),

package/src/math/segments.ts

@@ -171,3 +171,29 @@ export function segmentLineGradient(
 
   return { colors, positions };
 }
+
+/** Stops {@link segmentLineGradient} can emit for `segments` — no per-frame state. */
+export function segmentGradientStopCount(segments: ResolvedSegment[]): number {
+  "worklet";
+  let n = 2;
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    if (!seg.recolorLine) continue;
+    const cols =
+      seg.mutedColors && seg.mutedColors.length >= 2
+        ? seg.mutedColors.length
+        : 2;
+    n += cols + 2;
+  }
+  return n;
+}
+
+/** Resize `stops` to `count` by repeating its last entry. */
+export function padGradientStops<T>(stops: T[], count: number): T[] {
+  "worklet";
+  if (stops.length === count || stops.length === 0) return stops;
+  const out = stops.slice(0, count);
+  const last = stops[stops.length - 1];
+  while (out.length < count) out.push(last);
+  return out;
+}