react-native-livechart 4.9.2 → 4.11.0

package/src/components/DegenParticlesOverlay.tsx

@@ -5,6 +5,7 @@ import {
   type SkRSXform,
   type SkRect,
 } from "@shopify/react-native-skia";
+import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
 import {
   buildParticleInstances,
@@ -63,14 +64,46 @@ export function DegenParticlesOverlay({
   // memoizes this on `colorList`.
   const colorRgb = colorList.map((c) => parseColorRgb(c));
 
+  const poolRef = useRef<{
+    a: { transforms: SkRSXform[]; sprites: SkRect[]; colors: SkColor[] };
+    b: { transforms: SkRSXform[]; sprites: SkRect[]; colors: SkColor[] };
+    tick: boolean;
+    instances: ReturnType<typeof buildParticleInstances>;
+    instancePool: ReturnType<typeof buildParticleInstances>;
+    spriteRect: SkRect;
+  } | null>(null);
+  if (poolRef.current === null) {
+    const instancePool = Array.from({ length: particleSlotCount }, () => ({
+      x: 0,
+      y: 0,
+      scale: 0,
+      alpha: 0,
+      colorIndex: 0,
+    }));
+    poolRef.current = {
+      a: { transforms: [], sprites: [], colors: [] },
+      b: { transforms: [], sprites: [], colors: [] },
+      tick: false,
+      instances: [],
+      instancePool,
+      spriteRect: Skia.XYWHRect(0, 0, sprite.size, sprite.size),
+    };
+  }
+
   // Single per-frame worklet. Reads `packRevision` so it re-runs each frame
   // while a burst is alive (the pack buffer is mutated in place, so its
   // reference is stable and wouldn't otherwise re-notify).
   const atlasData = useDerivedValue(() => {
     const rev = packRevision.get();
-    const transforms: SkRSXform[] = [];
-    const sprites: SkRect[] = [];
-    const colorsOut: SkColor[] = [];
+    const pool = poolRef.current!;
+    pool.tick = !pool.tick;
+    const frame = pool.tick ? pool.a : pool.b;
+    const transforms = frame.transforms;
+    const sprites = frame.sprites;
+    const colorsOut = frame.colors;
+    transforms.length = 0;
+    sprites.length = 0;
+    colorsOut.length = 0;
     if (rev >= 0) {
       const instances = buildParticleInstances(
         pack.get(),
@@ -79,6 +112,8 @@ export function DegenParticlesOverlay({
         particleBurstDurationSec,
         particleOpacity,
         sprite.radius,
+        pool.instances,
+        pool.instancePool,
       );
       const half = sprite.size / 2;
       for (let i = 0; i < instances.length; i++) {
@@ -92,12 +127,12 @@ export function DegenParticlesOverlay({
             inst.y - inst.scale * half,
           ),
         );
-        sprites.push(Skia.XYWHRect(0, 0, sprite.size, sprite.size));
+        sprites.push(pool.spriteRect);
         const [r, g, b] = colorRgb[inst.colorIndex % colorRgb.length];
         colorsOut.push(Skia.Color(`rgba(${r}, ${g}, ${b}, ${inst.alpha})`));
       }
     }
-    return { transforms, sprites, colors: colorsOut };
+    return frame;
   }, [
     pack,
     packRevision,

package/src/components/LeftEdgeFade.tsx

@@ -2,6 +2,7 @@ import { Group, LinearGradient, Rect, vec } from "@shopify/react-native-skia";
 
 import { useDerivedValue } from "react-native-reanimated";
 import type { ChartEngineLayout } from "../core/useLiveChartEngine";
+import { parseColorRgba } from "../theme";
 
 export function LeftEdgeFade({
   paddingLeft,
@@ -9,27 +10,32 @@ export function LeftEdgeFade({
   startColor,
   endColor,
   engine,
+  opaqueBackgroundRgb,
 }: {
   paddingLeft: number;
   fadeWidth: number;
   startColor: string;
   endColor: string;
   engine: ChartEngineLayout;
+  /** When set, paint the owned background instead of erasing destination alpha. */
+  opaqueBackgroundRgb?: [number, number, number];
 }) {
   const rectWidth = paddingLeft + fadeWidth;
   const height = useDerivedValue(() => engine.canvasHeight.value);
 
   const gStart = vec(paddingLeft, 0);
   const gEnd = vec(paddingLeft + fadeWidth, 0);
+  const colors = opaqueBackgroundRgb
+    ? [
+        `rgba(${opaqueBackgroundRgb[0]},${opaqueBackgroundRgb[1]},${opaqueBackgroundRgb[2]},${parseColorRgba(startColor)[3]})`,
+        `rgba(${opaqueBackgroundRgb[0]},${opaqueBackgroundRgb[1]},${opaqueBackgroundRgb[2]},${parseColorRgba(endColor)[3]})`,
+      ]
+    : [startColor, endColor];
 
   return (
-    <Group blendMode="dstOut">
+    <Group blendMode={opaqueBackgroundRgb ? undefined : "dstOut"}>
       <Rect x={0} y={0} width={rectWidth} height={height}>
-        <LinearGradient
-          start={gStart}
-          end={gEnd}
-          colors={[startColor, endColor]}
-        />
+        <LinearGradient start={gStart} end={gEnd} colors={colors} />
       </Rect>
     </Group>
   );

package/src/components/LiveChart.tsx

@@ -1,10 +1,4 @@
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -27,6 +21,7 @@ import {
   Group,
   LinearGradient,
   Path,
+  Rect,
   vec,
 } from "@shopify/react-native-skia";
 
@@ -253,6 +248,7 @@ function useLiveChartController({
   font: fontProp,
   insets,
   style,
+  canvasMode = "transparent",
 
   // ── Candlestick ─────────────────────────────────────────────────────────
   mode = "line",
@@ -1204,6 +1200,7 @@ function useLiveChartController({
   return {
     // passthrough props the render needs
     style,
+    canvasMode,
     accessibilityLabel,
     accessibilityRole,
     emptyText,
@@ -1362,9 +1359,7 @@ function ChartWithDegen({
     onDegenShake,
     isStatic,
   );
-  return (
-    <ChartView model={model} yAxisEntries={yAxisEntries} degen={state} />
-  );
+  return <ChartView model={model} yAxisEntries={yAxisEntries} degen={state} />;
 }
 
 /**
@@ -1412,8 +1407,10 @@ function ChartYAxisLayer({
     effectivePadding,
     palette,
     skiaFont,
+    dotY,
     badgeUsesRightGutter,
     badgeCfg,
+    badgeFont,
     metricsCfg,
     gridStyleCfg,
     yAxisFloat,
@@ -1431,6 +1428,9 @@ function ChartYAxisLayer({
         badge={badgeUsesRightGutter}
         badgeTail={badgeCfg?.tail ?? true}
         badgeMetrics={metricsCfg.badge}
+        badgeCenterY={badgeUsesRightGutter ? dotY : undefined}
+        badgeFontSize={badgeUsesRightGutter ? badgeFont.getSize() : undefined}
+        badgeOffsetY={badgeCfg?.offsetY ?? 0}
         gridStyle={gridStyleCfg}
       />
     </Group>
@@ -1716,6 +1716,7 @@ function ChartStack({
     loadingStrokeWidth,
     loadingAmplitude,
     loadingSpeed,
+    canvasMode,
   } = model;
   return (
     <Group transform={degen?.shakeTransform}>
@@ -1934,6 +1935,7 @@ function ChartStack({
         lineStrokeWidth={loadingStrokeWidth}
         waveAmplitude={loadingAmplitude}
         waveSpeed={loadingSpeed}
+        opaqueCanvas={canvasMode === "opaque"}
       />
     </Group>
   );
@@ -1998,6 +2000,7 @@ function ChartScrubLayer({
     selectionDot,
     selectionColor,
     renderTooltip,
+    canvasMode,
   } = model;
   // A custom tooltip is an RN overlay (sibling of <Canvas>), so the built-in
   // Skia tooltip is suppressed here while it's active — the line pill in line
@@ -2042,6 +2045,7 @@ function ChartScrubLayer({
           tooltipBorderRadius={scrubCfg.tooltipBorderRadius}
           tooltipShowValue={scrubCfg.tooltipShowValue}
           tooltipShowTime={scrubCfg.tooltipShowTime}
+          opaqueCanvas={canvasMode === "opaque"}
         >
           {/* Candle charts render a multi-line OHLC tooltip; the line
               chart falls back to CrosshairOverlay's default value/time
@@ -2359,6 +2363,7 @@ function ChartView({
     extremaTimeOffset,
     topConnector,
     bottomConnector,
+    canvasMode,
   } = model;
 
   return (
@@ -2370,7 +2375,21 @@ function ChartView({
         accessibilityLabel={accessibilityLabel}
         accessibilityRole={accessibilityRole}
       >
-        <Canvas style={{ flex: 1 }}>
+        {/* Skia chooses TextureView vs SurfaceView when the native Canvas mounts. */}
+        <Canvas
+          key={canvasMode}
+          style={{ flex: 1 }}
+          opaque={canvasMode === "opaque"}
+        >
+          {canvasMode === "opaque" && (
+            <Rect
+              x={0}
+              y={0}
+              width={engine.canvasWidth}
+              height={engine.canvasHeight}
+              color={backgroundColor}
+            />
+          )}
           {/* Background fills first, then the left-edge fade (a canvas-space sibling
               so dstOut blends correctly), then the line stack on top — so the fade
               softens only the fills and the line stays crisp at the left edge. */}
@@ -2387,15 +2406,14 @@ function ChartView({
               startColor={leftEdgeFadeCfg.startColor}
               endColor={leftEdgeFadeCfg.endColor}
               engine={engine}
+              opaqueBackgroundRgb={
+                canvasMode === "opaque" ? palette.bgRgb : undefined
+              }
             />
           )}
 
           {/* Line stack above the fade so the line stays crisp at the left edge. */}
-          <ChartStack
-            model={model}
-            yAxisEntries={yAxisEntries}
-            degen={degen}
-          />
+          <ChartStack model={model} yAxisEntries={yAxisEntries} degen={degen} />
 
           {/* "extrema-edge" connector lines (dot → edge readout), above the chart
               content so the dashed guide reads over the line / candles. */}

package/src/components/LiveChartSeries.tsx

@@ -4,7 +4,7 @@
  *
  * @see https://github.com/benjitaylor/liveline
  */
-import { Canvas, Group } from "@shopify/react-native-skia";
+import { Canvas, Group, Rect } from "@shopify/react-native-skia";
 import { useLayoutEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
@@ -83,6 +83,10 @@ import {
   labelConnector,
 } from "./ExtremaConnectorOverlay";
 import { CustomMarkerOverlay } from "./CustomMarkerOverlay";
+import {
+  CustomReferenceLineOverlay,
+  customReferenceLineFlags,
+} from "./CustomReferenceLineOverlay";
 import { CrosshairLine } from "./CrosshairLine";
 import { DegenParticlesOverlay } from "./DegenParticlesOverlay";
 import { LeftEdgeFade } from "./LeftEdgeFade";
@@ -128,6 +132,7 @@ function useLiveChartSeriesController({
   font: fontProp,
   insets,
   style,
+  canvasMode = "transparent",
   timeWindow = 30,
   paused = false,
   loading = false,
@@ -172,6 +177,7 @@ function useLiveChartSeriesController({
   markerHitRadius = 16,
   markerCluster,
   renderMarker,
+  renderReferenceLine,
   leftEdgeFade = true,
 }: LiveChartSeriesProps) {
   const emptyMarkers = useSharedValue<Marker[]>([]);
@@ -224,6 +230,13 @@ function useLiveChartSeriesController({
 
   const allRefLines = referenceLines ?? [];
   const refValues = collectReferenceValues(allRefLines);
+  // Form-A lines a custom renderer owns keep their line stroke but suppress the
+  // built-in Skia tag. The callback is probed per line on the JS thread, matching
+  // LiveChart and CustomMarkerOverlay's per-item fallback model.
+  const refLineCustom = customReferenceLineFlags(
+    allRefLines,
+    renderReferenceLine,
+  );
 
   const palette = applyPaletteOverride(
     resolveTheme(accentColor, theme),
@@ -256,6 +269,11 @@ function useLiveChartSeriesController({
     setSeriesSnapshot(series.get().slice());
   }, [series]);
 
+  // Mount per-series drawing worklets only for real series. The previous fixed
+  // 12-slot render kept 144 derived-value mappers alive for the default stroke,
+  // dot, and value-label layers even when a chart contained only one line.
+  const activeSeriesCount = Math.min(seriesSnapshot.length, MAX_MULTI_SERIES);
+
   const maxSeriesLabelWidth = dotCfg.valueLabel
     ? Math.max(
         0,
@@ -336,7 +354,11 @@ function useLiveChartSeriesController({
     nowOverride,
   });
   const { layoutHeight, onLayout } = useCanvasLayout(engine);
-  const linePaths = useMultiSeriesLinePaths(engine, effectivePadding);
+  const linePaths = useMultiSeriesLinePaths(
+    engine,
+    effectivePadding,
+    activeSeriesCount,
+  );
 
   // Per-series colors and stroke styles, derived from the off-render snapshot
   // (React state — so no Reanimated read-during-render). The reaction below
@@ -503,6 +525,7 @@ function useLiveChartSeriesController({
     // passthrough props the render needs
     series,
     style,
+    canvasMode,
     accessibilityLabel,
     accessibilityRole,
     emptyText,
@@ -519,6 +542,7 @@ function useLiveChartSeriesController({
     degenCfg,
     metricsCfg,
     allRefLines,
+    refLineCustom,
     leftEdgeFadeCfg,
     // theme / layout / fonts
     palette,
@@ -540,6 +564,7 @@ function useLiveChartSeriesController({
     layoutHeight,
     onLayout,
     linePaths,
+    activeSeriesCount,
     lineColors,
     lineStyles,
     degenPack,
@@ -555,6 +580,7 @@ function useLiveChartSeriesController({
     markerGroupOpacity,
     overlayScrubFade,
     renderMarker,
+    renderReferenceLine,
     // selection dot: resolved config + fallback color (the leading series' color)
     selectionDot: selectionDotCfg,
     selectionColor: lineColors[0],
@@ -610,6 +636,8 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     loadingStrokeWidth,
     loadingAmplitude,
     loadingSpeed,
+    canvasMode,
+    activeSeriesCount,
   } = model;
 
   return (
@@ -629,12 +657,13 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         </Group>
       )}
 
-      {/* Index keys: reference lines are a positional array and two may share
-          value + label (e.g. duplicate working orders at the same price), which a
-          content-derived key would collapse to one. Fade group lets
-          `scrub.hideOverlaysOnScrub` ease the lines out while scrubbing. */}
+      {/* Reference lines are index-addressed throughout the drag/press API, and
+          duplicate working orders may share all visible content. Positional keys
+          keep both orders mounted without collapsing them to one React child.
+          Fade group lets `scrub.hideOverlaysOnScrub` ease the lines out. */}
       <Group opacity={overlayScrubFade}>
         {allRefLines.map((rl, i) => (
+          /* react-doctor-disable-next-line react-doctor/no-array-index-as-key */
           <ReferenceLineOverlay
             key={i}
             engine={engine}
@@ -654,12 +683,13 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             padding={effectivePadding}
             colors={lineColors}
             config={dotCfg.valueLine}
+            seriesCount={activeSeriesCount}
           />
         </Group>
       )}
 
       <Group opacity={reveal.lineOpacity}>
-        {Array.from({ length: MAX_MULTI_SERIES }, (_, i) => (
+        {Array.from({ length: activeSeriesCount }, (_, i) => (
           <MultiSeriesStroke
             key={i}
             index={i}
@@ -694,6 +724,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
             color={dotCfg.color}
             pulse={dotCfg.pulse}
             viewEnd={engine.viewEnd}
+            seriesCount={activeSeriesCount}
           />
         </Group>
       )}
@@ -749,6 +780,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         lineStrokeWidth={loadingStrokeWidth}
         waveAmplitude={loadingAmplitude}
         waveSpeed={loadingSpeed}
+        opaqueCanvas={canvasMode === "opaque"}
       />
     </Group>
   );
@@ -767,6 +799,7 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
     skiaFont,
     reveal,
     degenShakeTransform,
+    activeSeriesCount,
   } = model;
   if (!dotCfg.valueLabel) return null;
   return (
@@ -778,6 +811,7 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
           colors={lineColors}
           font={skiaFont}
           dotRadius={dotOuterRadius}
+          seriesCount={activeSeriesCount}
         />
       </Group>
     </Group>
@@ -789,6 +823,7 @@ function SeriesValueLabelLayer({ model }: { model: LiveChartSeriesModel }) {
 function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
   const {
     allRefLines,
+    refLineCustom,
     engine,
     effectivePadding,
     palette,
@@ -796,11 +831,13 @@ function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
     skiaFont,
     degenShakeTransform,
     overlayScrubFade,
+    canvasMode,
   } = model;
   if (allRefLines.length === 0) return null;
   return (
     <Group transform={degenShakeTransform} opacity={overlayScrubFade}>
       {allRefLines.map((rl, i) => (
+        /* react-doctor-disable-next-line react-doctor/no-array-index-as-key */
         <ReferenceLineOverlay
           key={i}
           engine={engine}
@@ -810,6 +847,7 @@ function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
           formatValue={formatValue}
           font={skiaFont}
           badgeLayer
+          suppressTag={refLineCustom[i]}
         />
       ))}
     </Group>
@@ -848,7 +886,11 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     markersSV,
     markerClusterCfg,
     renderMarker,
+    renderReferenceLine,
+    allRefLines,
+    refLineCustom,
     overlayScrubFade,
+    canvasMode,
   } = model;
 
   // Mirror the Skia overlay fade onto the RN custom-marker sibling so
@@ -891,7 +933,21 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
           else points map into a taller area and the x-axis draws past the edge. */}
       <GestureDetector gesture={rootGesture}>
         <View style={{ flex: 1 }} onLayout={onLayout}>
-          <Canvas style={{ flex: 1, minHeight: layoutHeight || 1 }}>
+          {/* Skia chooses TextureView vs SurfaceView when the native Canvas mounts. */}
+          <Canvas
+            key={canvasMode}
+            style={{ flex: 1, minHeight: layoutHeight || 1 }}
+            opaque={canvasMode === "opaque"}
+          >
+            {canvasMode === "opaque" && (
+              <Rect
+                x={0}
+                y={0}
+                width={engine.canvasWidth}
+                height={engine.canvasHeight}
+                color={backgroundColor}
+              />
+            )}
             <SeriesChartStack model={model} />
 
             {/* "extrema-edge" connector lines (dot → edge readout). Outside the
@@ -910,6 +966,9 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 startColor={leftEdgeFadeCfg.startColor}
                 endColor={leftEdgeFadeCfg.endColor}
                 engine={engine}
+                opaqueBackgroundRgb={
+                  canvasMode === "opaque" ? palette.bgRgb : undefined
+                }
               />
             )}
 
@@ -932,6 +991,7 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
                 crosshairLineColor={scrubCfg.crosshairLineColor}
                 crosshairDash={scrubCfg.crosshairDash}
                 crosshairDimColor={scrubCfg.crosshairDimColor}
+                opaqueCanvas={canvasMode === "opaque"}
               />
             )}
 
@@ -952,23 +1012,36 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
             padding={effectivePadding}
           />
 
-          {/* Custom-rendered markers — RN views floated over the canvas
-              (non-Skia), pinned to each marker's live position. Box-none fade
-              wrapper so `scrub.hideOverlaysOnScrub` hides them with the Skia
-              markers (full-bleed; children keep their own absolute positions). */}
-          {markersActive && renderMarker && (
+          {/* Custom annotations — RN views floated over the canvas (non-Skia),
+              pinned to their live positions. As a post-Canvas sibling they render
+              above the left-edge fade and scrub overlay. The box-none fade wrapper
+              keeps `scrub.hideOverlaysOnScrub` behavior aligned with Skia. */}
+          {((markersActive && renderMarker) ||
+            (renderReferenceLine && allRefLines.length > 0)) && (
             <Animated.View
               pointerEvents="box-none"
               style={[StyleSheet.absoluteFill, overlayFadeStyle]}
             >
-              <CustomMarkerOverlay
-                markers={markersSV}
-                renderMarker={renderMarker}
-                engine={engine}
-                padding={effectivePadding}
-                series={series}
-                cluster={markerClusterCfg}
-              />
+              {markersActive && renderMarker && (
+                <CustomMarkerOverlay
+                  markers={markersSV}
+                  renderMarker={renderMarker}
+                  engine={engine}
+                  padding={effectivePadding}
+                  series={series}
+                  cluster={markerClusterCfg}
+                />
+              )}
+              {renderReferenceLine && allRefLines.length > 0 && (
+                <CustomReferenceLineOverlay
+                  lines={allRefLines}
+                  renderReferenceLine={renderReferenceLine}
+                  custom={refLineCustom}
+                  engine={engine}
+                  padding={effectivePadding}
+                  formatValue={formatValue}
+                />
+              )}
             </Animated.View>
           )}
         </View>