Grepedia
RE

react-native-livechart

A high-performance charting library for React Native, built on Skia and Reanimated, designed to render real-time line and candlestick charts with native frame rates.

Score0
Comments0
About

react-native-livechart is a high-performance library for rendering live line and candlestick charts directly on the UI thread in React Native applications. Built on top of @shopify/react-native-skia, react-native-reanimated, and react-native-gesture-handler, it ensures that data flows through shared values without the overhead of per-frame JavaScript bridge traffic, resulting in native-level animation frame rates. The library is designed for financial interfaces, providing specialized features like OHLC mode, multi-series support, and high-frequency trading markers.

Some of the key features are:

  • Native Performance: Leverages Skia and Reanimated to keep chart updates on the UI thread for smooth animations.
  • Flexible Chart Modes: Supports both standard line/area charts and OHLC candlestick rendering with seamless morphing.
  • Multi-Series Support: Capable of rendering several concurrent data series with legend toggling and shared crosshairs.
  • Interactive Scrubbing: Includes a crosshair cross-section tool for inspecting historical data points, with optional order-ticket integration.
  • Momentum & Degen Mode: Provides momentum-based coloring for indicators, along with particle bursts and screen shake effects triggered by volatility.
  • Customizable Appearance: Extensive theming support including light/dark modes, custom gradients, value badges, and pulse animations for live data points.
  • Advanced Annotations: Includes support for reference lines, trade markers, and labeled time-range segments.
  • Sparkline Mode: Optimized for high-density rendering environments where performance and low memory footprint are critical.

Operation is driven by Reanimated SharedValues, which act as the source of truth for both historical data arrays and live price updates. Developers append points or update live values using worklet-compatible methods that modify data in place on the UI thread. This reactive architecture ensures that even complex, multi-series charts remain performant regardless of update frequency. The component automatically calculates bounds, handles axis labeling, and manages transitions between data updates.

Some common use cases include:

  • Crypto Exchange UIs: Real-time visualization of asset prices with live candlestick buckets and order-fill markers.
  • Trading Platforms: Implementing interactive limit-order placement using crosshair-based price selection.
  • Financial Dashboards: Building responsive, theme-aware portfolio performance monitors with multi-asset comparisons.
  • High-Frequency Monitoring: Displaying live sensor or network latency data with high-performance sparkline components.

Comments

0
0/5000

Markdown is supported.