react-native-vroom-chart 0.16.0 → 0.18.0

package/cpp/_core_src/viewport.h

@@ -92,6 +92,30 @@ struct CandleSnapshot {
     float x;
     float open, high, low, close;
     bool  bull;  // close >= open; selects the fill / wick / border color
+    // Set when the capture came from the loading skeleton. Such a slot starts
+    // out grey and semi-transparent rather than in its own bull/bear color, so
+    // the draw path has to blend from `skeleton_alpha`-scaled grey instead —
+    // that color blend is what makes the hand-off read as the placeholder
+    // *becoming* the data (see candles::draw).
+    bool  skeleton = false;
+    // The wave's alpha for this bar at capture time. Carried so the morph's
+    // first frame matches the skeleton frame it replaced; without it every bar
+    // would jump to full opacity the instant data landed.
+    float skeleton_alpha = 1.f;
+};
+
+// One vertex of the loading line's morph, holding both ends of the animation
+// so a frame is a plain lerp between them.
+//
+// The two y's are in different spaces on purpose. The sine knows nothing about
+// prices, so it's a fraction of the pane; the candle centre is a fraction of
+// the price band, the same space CandleSnapshot uses — which is what keeps the
+// line sitting exactly where the bars emerge from, since both resolve through
+// y_at_fraction.
+struct LinePoint {
+    float x;       // fraction of the candle-area width
+    float from_y;  // fraction of the pane height — the sine, frozen at capture
+    float to_y;    // fraction of the price band — the candle's vertical centre
 };
 
 // How many captured slots still contribute to a frame — 0 once the morph is
@@ -140,6 +164,15 @@ inline void blend_candle_snapshots(CandleSnapshot* dst, std::size_t dst_n,
         // `bull` stays the fresh one: the draw path colors a paired slot from
         // the live candle and only reads the capture's flag for a slot the next
         // update drops, where the newer direction is the better answer.
+        //
+        // The skeleton state, by contrast, carries over from the interrupted
+        // capture: a tick landing mid-hand-off must not abandon the grey blend
+        // partway, or the bar would snap to full color while its geometry is
+        // still moving. Its alpha follows the same lerp as the geometry.
+        if (from.skeleton) {
+            to.skeleton = true;
+            to.skeleton_alpha = mix(from.skeleton_alpha, 1.f);
+        }
     }
 }
 

package/ios/README.md

@@ -1,7 +1,19 @@
-# iOS shim (placeholder)
+# iOS bridge
 
-When native is wired up, this directory will hold the Objective-C++ view
-and module that host the chart and forward gestures into the C++ core.
+A single TurboModule, [`VroomChartModule`](VroomChartModule.mm), conforming to
+`RCTTurboModuleWithJSIBindings`. `RCTTurboModuleManager` calls
+`-installJSIBindingsWithRuntime:callInvoker:` as soon as it instantiates the
+module — before the module object reaches JS — and that installs
+`global.VroomChartJSI` via the platform-agnostic
+[`../cpp/VroomJsiInstaller.cpp`](../cpp/VroomJsiInstaller.cpp) Android also
+uses. There is no native view: the chart renders into an `SkPicture` that
+`<Canvas>` from `@shopify/react-native-skia` paints.
 
-The accompanying `react-native-vroom-chart.podspec` at the package root will
-build `cpp/` + `ios/` + the linked `@vroomchart/core` static library.
+This replaced a `[RCTBridge currentBridge]` → `RCTCxxBridge.runtime` lookup,
+which stopped working in React Native 0.85. That release enables
+`RCT_REMOVE_LEGACY_ARCH` by default, under which `RCTBridge` compiles down to
+a stub whose `+currentBridge` returns `nil`.
+
+[`../react-native-vroom-chart.podspec`](../react-native-vroom-chart.podspec)
+builds `cpp/` + `ios/` plus the core sources mirrored in from
+`packages/core/`.

package/ios/VroomChartModule.h

@@ -1,11 +1,8 @@
 #import <Foundation/Foundation.h>
 #import <React/RCTBridgeModule.h>
-
-#ifdef RCT_NEW_ARCH_ENABLED
+#import <ReactCommon/RCTTurboModuleWithJSIBindings.h>
 #import <VroomChartSpec/VroomChartSpec.h>
-@interface VroomChartModule : NSObject <NativeVroomChartSpec>
-#else
-@interface VroomChartModule : NSObject <RCTBridgeModule>
-#endif
+
+@interface VroomChartModule : NSObject <NativeVroomChartSpec, RCTTurboModuleWithJSIBindings>
 
 @end

package/ios/VroomChartModule.mm

@@ -1,6 +1,5 @@
 #import "VroomChartModule.h"
 
-#import <React/RCTBridge+Private.h>
 #import <ReactCommon/CallInvoker.h>
 #import <jsi/jsi.h>
 
@@ -8,37 +7,32 @@
 
 using namespace facebook;
 
-@implementation VroomChartModule
+@implementation VroomChartModule {
+  BOOL _didInstall;
+}
 
 RCT_EXPORT_MODULE(VroomChartModule)
 
-// Called from JS via NativeVroomChart.install(). Grabs the JSI runtime from the
-// bridge and asks the C++ installer to expose global.VroomChartJSI.
+// RCTTurboModuleManager calls this as soon as it instantiates the module —
+// before the module object reaches JS — so global.VroomChartJSI always exists
+// by the time anything imports NativeVroomChart.
 //
-// The TurboModule version (new arch) and the legacy version both end up here.
+// callInvoker is unused: every chart call is synchronous on the JS thread.
+- (void)installJSIBindingsWithRuntime:(jsi::Runtime &)runtime
+                          callInvoker:(const std::shared_ptr<react::CallInvoker> &)callInvoker
+{
+  vroom::installJsi(runtime);
+  _didInstall = YES;
+}
+
 - (NSNumber *)install
 {
-  RCTBridge *bridge = [RCTBridge currentBridge];
-  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
-  if (cxxBridge == nil) {
-    return @NO;
-  }
-
-  jsi::Runtime *runtime = (jsi::Runtime *)cxxBridge.runtime;
-  if (runtime == nullptr) {
-    return @NO;
-  }
-
-  vroom::installJsi(*runtime);
-  return @YES;
+  return @(_didInstall);
 }
 
-#ifdef RCT_NEW_ARCH_ENABLED
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
+- (std::shared_ptr<react::TurboModule>)getTurboModule:(const react::ObjCTurboModule::InitParams &)params
 {
-  return std::make_shared<facebook::react::NativeVroomChartSpecJSI>(params);
+  return std::make_shared<react::NativeVroomChartSpecJSI>(params);
 }
-#endif
 
 @end

package/lib/index.d.mts

@@ -106,6 +106,19 @@ type VroomTheme = {
     crosshairTarget?: VroomColor;
     /** Line-chart-mode close polyline color. Defaults to violet, matching the RSI line. */
     lineColor?: VroomColor;
+    /**
+     * The line drawn across the plot while loading (see the `loading` prop).
+     * Defaults to inheriting `grid`: the gridlines are already the chart's tone
+     * for structure rather than data, which is what the line is, so matching
+     * them keeps it from being read as a series.
+     *
+     * The line breathes between roughly 60% and 100% of whatever color it ends
+     * up with — a pulse, not a dimmer, so a recessive color stays legible. Any
+     * alpha given here multiplies into that, so an opaque color is the usual
+     * choice. Pass `lineColor` to make the line read as the chart's own series
+     * warming up instead.
+     */
+    skeleton?: VroomColor;
     /** Line-chart-mode polyline stroke width in px. Defaults to 1.5. */
     lineWidth?: number;
     /**
@@ -1059,6 +1072,23 @@ type ATRConfig = {
 type VroomChartCoreProps = {
     /** OHLCV bars to render. The only required prop. */
     candles: Candle[];
+    /**
+     * Whether the series is still being fetched. While this is true *and*
+     * `candles` is empty, the chart draws a single grey line across the plot,
+     * drifting in a slow sine wave, in place of the scene. Gestures, the
+     * crosshair, the price badge, the axis labels and any indicator panes are all
+     * suppressed for the duration.
+     *
+     * When the data arrives the line doesn't cut away — it becomes the chart, in
+     * two steps that split `transitionMs`: it reshapes to pass through the
+     * vertical centre of every candle about to be drawn, then fades out while
+     * those candles grow outward from it and their color fades up.
+     *
+     * Passing `candles` alongside `loading` leaves the real chart up, so a
+     * background refresh of an already-loaded series won't blank out. Default
+     * false.
+     */
+    loading?: boolean;
     /**
      * Identity of the data series (e.g. "BTC-USD"). When it changes between
      * renders the chart resets to the default view (most recent candles + price

package/lib/index.d.ts

@@ -106,6 +106,19 @@ type VroomTheme = {
     crosshairTarget?: VroomColor;
     /** Line-chart-mode close polyline color. Defaults to violet, matching the RSI line. */
     lineColor?: VroomColor;
+    /**
+     * The line drawn across the plot while loading (see the `loading` prop).
+     * Defaults to inheriting `grid`: the gridlines are already the chart's tone
+     * for structure rather than data, which is what the line is, so matching
+     * them keeps it from being read as a series.
+     *
+     * The line breathes between roughly 60% and 100% of whatever color it ends
+     * up with — a pulse, not a dimmer, so a recessive color stays legible. Any
+     * alpha given here multiplies into that, so an opaque color is the usual
+     * choice. Pass `lineColor` to make the line read as the chart's own series
+     * warming up instead.
+     */
+    skeleton?: VroomColor;
     /** Line-chart-mode polyline stroke width in px. Defaults to 1.5. */
     lineWidth?: number;
     /**
@@ -1059,6 +1072,23 @@ type ATRConfig = {
 type VroomChartCoreProps = {
     /** OHLCV bars to render. The only required prop. */
     candles: Candle[];
+    /**
+     * Whether the series is still being fetched. While this is true *and*
+     * `candles` is empty, the chart draws a single grey line across the plot,
+     * drifting in a slow sine wave, in place of the scene. Gestures, the
+     * crosshair, the price badge, the axis labels and any indicator panes are all
+     * suppressed for the duration.
+     *
+     * When the data arrives the line doesn't cut away — it becomes the chart, in
+     * two steps that split `transitionMs`: it reshapes to pass through the
+     * vertical centre of every candle about to be drawn, then fades out while
+     * those candles grow outward from it and their color fades up.
+     *
+     * Passing `candles` alongside `loading` leaves the real chart up, so a
+     * background refresh of an already-loaded series won't blank out. Default
+     * false.
+     */
+    loading?: boolean;
     /**
      * Identity of the data series (e.g. "BTC-USD"). When it changes between
      * renders the chart resets to the default view (most recent candles + price

package/lib/index.js

@@ -186,8 +186,10 @@ var COLOR_KEYS = {
   // VROOM_COLOR_ACCENT_BULL
   accentBear: 15,
   // VROOM_COLOR_ACCENT_BEAR
-  lineColor: 16
+  lineColor: 16,
   // VROOM_COLOR_LINE
+  skeleton: 17
+  // VROOM_COLOR_SKELETON
 };
 var FLOAT_KEYS = {
   wickWidth: 1,
@@ -480,14 +482,15 @@ var EMPTY_FOOTPRINTS = footprintsToSpec({ prints: [] });
 var installed = false;
 function ensureInstalled() {
   if (installed) return;
-  const ok = NativeVroomChart_default.install();
-  if (!ok) throw new Error("VroomChartModule.install() returned false");
+  NativeVroomChart_default.install();
   if (typeof globalThis.VroomChartJSI === "undefined") {
-    throw new Error("global.VroomChartJSI undefined after install()");
+    throw new Error(
+      "global.VroomChartJSI is undefined \u2014 VroomChartModule did not install its JSI bindings. This requires react-native >= 0.78 with the New Architecture enabled."
+    );
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, atr, movingAverages, vwap, bollingerBands, ichimoku, fairValueGaps, volume, priceLines, footprints, transition) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, atr, movingAverages, vwap, bollingerBands, ichimoku, fairValueGaps, volume, priceLines, footprints, transition, loading) {
   const handleRef = (0, import_react.useRef)(null);
   const defaultWidthAppliedRef = (0, import_react.useRef)(false);
   const volumeCollapseRef = (0, import_react.useRef)(null);
@@ -522,18 +525,26 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const onFrameRef = (0, import_react.useRef)(transition?.onFrame);
   onFrameRef.current = transition?.onFrame;
   const seriesKey = transition?.seriesKey;
+  const loadingHandoffRef = (0, import_react.useRef)(false);
   const endIntervalMorph = (0, import_react.useCallback)(() => {
     if (intervalMorphRaf.current != null) {
       cancelAnimationFrame(intervalMorphRaf.current);
       intervalMorphRaf.current = null;
     }
-    handleRef.current?.setIntervalMorph(1);
+    const h = handleRef.current;
+    if (loadingHandoffRef.current) {
+      loadingHandoffRef.current = false;
+      h?.setLoadingMorph(1);
+      h?.beginLoadingReveal();
+    }
+    h?.setIntervalMorph(1);
   }, []);
-  const startIntervalMorph = (0, import_react.useCallback)((h) => {
+  const startIntervalMorph = (0, import_react.useCallback)((h, durationMs) => {
     const { ms, easing } = animRef.current;
+    const dur = durationMs ?? ms;
     const start = performance.now();
     const step = (now) => {
-      const p = Math.min(1, (now - start) / ms);
+      const p = Math.min(1, (now - start) / dur);
       h.setIntervalMorph(p < 1 ? ease(easing, p) : 1);
       const pic = h.render();
       if (pic) onFrameRef.current?.(pic);
@@ -541,6 +552,31 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     };
     intervalMorphRaf.current = requestAnimationFrame(step);
   }, []);
+  const startLoadingHandoff = (0, import_react.useCallback)(
+    (h) => {
+      const { ms, easing } = animRef.current;
+      const half = ms / 2;
+      loadingHandoffRef.current = true;
+      h.beginLoadingMorph();
+      const start = performance.now();
+      const step = (now) => {
+        const p = Math.min(1, (now - start) / half);
+        h.setLoadingMorph(p < 1 ? ease(easing, p) : 1);
+        const pic = h.render();
+        if (pic) onFrameRef.current?.(pic);
+        if (p < 1) {
+          intervalMorphRaf.current = requestAnimationFrame(step);
+          return;
+        }
+        intervalMorphRaf.current = null;
+        loadingHandoffRef.current = false;
+        h.beginLoadingReveal();
+        startIntervalMorph(h, half);
+      };
+      intervalMorphRaf.current = requestAnimationFrame(step);
+    },
+    [startIntervalMorph]
+  );
   const settleStream = (0, import_react.useCallback)((keepMorph = false) => {
     if (streamRaf.current != null) {
       cancelAnimationFrame(streamRaf.current);
@@ -610,6 +646,8 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const explicit = visibleRange != null;
   const startMs = visibleRange?.startMs ?? 0;
   const endMs = visibleRange?.endMs ?? 0;
+  const showLoadingLine = loading === true && candles.length === 0;
+  const lineUpRef = (0, import_react.useRef)(false);
   const themeKey = theme ? JSON.stringify(theme) : "";
   const rsiKey = rsi ? JSON.stringify(rsi) : "";
   const macdKey = macd ? JSON.stringify(macd) : "";
@@ -632,6 +670,19 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       defaultWidthAppliedRef.current = true;
     }
     let morphing = false;
+    if (showLoadingLine) {
+      if (!lineUpRef.current) {
+        endIntervalMorph();
+        settleStream();
+        h.setCandles(packCandles([]));
+        prevDataRef.current = null;
+      }
+      h.setLoading(true, !animRef.current.reduceMotion);
+      lineUpRef.current = true;
+    } else if (lineUpRef.current && candles.length === 0) {
+      h.setLoading(false, true);
+      lineUpRef.current = false;
+    }
     if (candles.length > 0) {
       const prev = prevDataRef.current;
       const freshHandle = prev == null || prev.handle !== h;
@@ -639,6 +690,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         const transitionKind = freshHandle ? "initial" : explicit ? "stream" : classifyTransition(prev.candles, candles, seriesKey !== prev.seriesKey);
         let tfArgs = null;
         let prevEnvelope = null;
+        let handOff = false;
         let stream = null;
         if (transitionKind === "stream" && prev != null && !explicit) {
           const { stream: mode, streamMs, reduceMotion } = animRef.current;
@@ -688,6 +740,11 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         } else if (transitionKind === "initial" || transitionKind === "reset") {
           endIntervalMorph();
         }
+        if (lineUpRef.current) {
+          lineUpRef.current = false;
+          handOff = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
+          if (!handOff) h.setLoading(false, true);
+        }
         h.setCandles(packCandles(candles));
         if (transitionKind === "timeframe") {
           const newStepMs = inferStepMs(candles);
@@ -709,6 +766,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         } else if (transitionKind === "reset") {
           h.resetView();
         }
+        if (handOff) startLoadingHandoff(h);
         prevDataRef.current = { handle: h, candles, seriesKey };
       }
     }
@@ -738,7 +796,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       footprints?.prints.length ? footprintsToSpec(footprints) : EMPTY_FOOTPRINTS
     );
     if (!morphing) setPicture(h.render());
-  }, [candles, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, atrKey, maKey, vwapKey, bollingerKey, ichimokuKey, fvgKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, endIntervalMorph, startStreamAnim, settleStream]);
+  }, [candles, showLoadingLine, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, atrKey, maKey, vwapKey, bollingerKey, ichimokuKey, fvgKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, startLoadingHandoff, endIntervalMorph, startStreamAnim, settleStream]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
@@ -750,6 +808,7 @@ function isSkImage(frame) {
 function VroomChart(props) {
   const {
     candles,
+    loading,
     seriesKey,
     width: widthProp,
     height: heightProp,
@@ -867,8 +926,10 @@ function VroomChart(props) {
       streamTransitionMs,
       reduceMotion,
       onFrame
-    }
+    },
+    loading
   );
+  const showLoadingLine = loading === true && candles.length === 0;
   const crosshairActive = (0, import_react2.useRef)(false);
   const footprintActive = (0, import_react2.useRef)(false);
   const lastCrosshairTime = (0, import_react2.useRef)(null);
@@ -1148,7 +1209,7 @@ function VroomChart(props) {
       pane: null
     });
   };
-  const pan = import_react_native_gesture_handler.Gesture.Pan().runOnJS(true).maxPointers(1).onStart((e) => {
+  const pan = import_react_native_gesture_handler.Gesture.Pan().enabled(!showLoadingLine).runOnJS(true).maxPointers(1).onStart((e) => {
     cancelDecay();
     panMode.current = hitAxis(e.x, e.y);
     priceDrag.current = null;
@@ -1243,7 +1304,7 @@ function VroomChart(props) {
     enableX: false,
     enableY: false
   });
-  const pinch = import_react_native_gesture_handler.Gesture.Pinch().runOnJS(true).onTouchesDown((e) => {
+  const pinch = import_react_native_gesture_handler.Gesture.Pinch().enabled(!showLoadingLine).runOnJS(true).onTouchesDown((e) => {
     if (e.numberOfTouches < 2) return;
     dismissFootprint();
     const [a, b] = e.allTouches;
@@ -1281,7 +1342,7 @@ function VroomChart(props) {
     if (next) applyFrame(next);
     maybeStartAnim();
   });
-  const longPress = import_react_native_gesture_handler.Gesture.LongPress().runOnJS(true).onStart((e) => {
+  const longPress = import_react_native_gesture_handler.Gesture.LongPress().enabled(!showLoadingLine).runOnJS(true).onStart((e) => {
     if (!handle) return;
     if (hitAxis(e.x, e.y) !== "chart") return;
     if (hitPriceLine(e.x, e.y)) return;
@@ -1301,7 +1362,7 @@ function VroomChart(props) {
       reason: "show"
     });
   });
-  const tap = import_react_native_gesture_handler.Gesture.Tap().runOnJS(true).onStart((e) => {
+  const tap = import_react_native_gesture_handler.Gesture.Tap().enabled(!showLoadingLine).runOnJS(true).onStart((e) => {
     if (!handle) return;
     const prints = footprints ?? [];
     const fp = prints.length ? handle.hitTestFootprint(e.x, e.y) : null;