📈 rn-binance-candles

High‑fidelity Binance‑style candlestick charting library for React Native.

rn-binance-candles gives you a production‑grade, mobile‑first trading chart that closely matches Binance/TradingView behavior, with GPU‑accelerated rendering and gesture handling tuned for 60 FPS on thousands of candles.

✨ Features

• Binance‑style visuals: Dark theme, grid, candle colors, latest price line, and MA overlays that mirror Binance mobile.
• GPU‑accelerated rendering: Built on @shopify/react-native-skia for smooth performance on large OHLCV datasets.
• Reanimated v3 gestures:
  • inertial pan with clamping at chart edges
  • pinch‑zoom around the focal point
  • long‑press crosshair with snapping to nearest candle
• Indicators & volume:
  • Main indicators: MA, EMA, BOLL, SAR, AVL (volume MA), SUPER
  • Sub indicators: MACD, RSI, KDJ, OBV, WR, StochRSI
  • Volume pane is always visible when showVolume is enabled
• Drawing tools (lightweight):
  • trend, rays, fib tools, channels, measure and more rendered in Skia
  • sidebar UI modeled after Binance’s drawing toolbar
• Clean API + TS types:
  • strongly typed Candle and theming types
  • debug overlays and dev warnings for bad data

🛠️ Installation

npm install rn-binance-candles

Peer Dependencies

Install the following in your React Native app:

npm install \
  react \
  react-native \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-svg \
  @shopify/react-native-skia@^1.12.4

Then install pods in your app:

cd ios
pod install
cd ..

Make sure Reanimated is enabled in your app’s babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

🚀 Quick Start

import React from 'react';
import { SafeAreaView } from 'react-native';
import { CandlestickChart, type Candle } from 'rn-binance-candles';

const candles: Candle[] = [
  // { t, o, h, l, c, v } objects
];

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#0B0F14' }}>
      <CandlestickChart
        candles={candles}
        symbol="BTCUSDT"
        themeMode="dark"
        height={450}
        interval="1m"
        onTimeframeChange={(tf) => {
          // fetch new data for timeframe tf
        }}
      />
    </SafeAreaView>
  );
}

BinanceChart (streamlined API)

If you prefer a simpler prop surface, use BinanceChart:

import React from 'react';
import { SafeAreaView } from 'react-native';
import { BinanceChart, type RawCandle } from 'rn-binance-candles';

const data: RawCandle[] = [];

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#0B0F14' }}>
      <BinanceChart
        data={data}
        indicators={['EMA']}
        theme="dark"
        height={450}
        interval="1m"
        onCrosshairMove={(candle) => {
          // candle is the currently selected candle
        }}
      />
    </SafeAreaView>
  );
}

Candle shape:

type Candle = {
  t: number; // timestamp in ms
  o: number; // open
  h: number; // high
  l: number; // low
  c: number; // close
  v: number; // volume
};

📊 API Overview

CandlestickChart

Main trading chart component.

• candles: Candle[] – OHLCV data, oldest → newest.
• height?: number – chart height (default 400).
• width?: number – chart width (default full width).
• symbol?: string – symbol label (e.g. "BTCUSDT").
• interval?: string – active timeframe label (e.g. "1m", "1H").
• onTimeframeChange?(tf: string) – called when user selects a new timeframe.
• themeMode?: 'dark' | 'light' – selects theme from Themes.
• onToggleTheme?() – called from header theme icon.
• contentInset? – { top?, bottom?, left?, right? } padding applied to the chart shell. Use with safe-area on notched phones, e.g. pass useSafeAreaInsets() from react-native-safe-area-context in your app (optional peer; not bundled here).
• indicatorTrigger?: number – increment this value to programmatically open the indicator bottom sheet.

Safe area (notched devices)

The library does not require react-native-safe-area-context. For full-screen charts, either wrap the chart in React Native’s SafeAreaView or pass contentInset from useSafeAreaInsets() so the header is not clipped under the status bar or Dynamic Island.

BinanceChart

Streamlined API wrapper around the same chart engine.

• data: RawCandle[] – OHLCV data in { t,o,h,l,c,v } format.
• indicators?: Array<'EMA' | 'SMA' | 'RSI'> – indicator selection (MA/EMA/Volume currently; RSI rendering is pending).
• theme?: 'dark' | 'light' – theme selection.
• height?: number – chart height (default 400).
• interval?: string – active timeframe label.
• onTimeframeChange?(tf: string) – called when user selects a new timeframe.
• onCrosshairMove?(candle: Candle | null) – called when user moves the crosshair.

DepthChart

High‑density order book visualization.

• data – { asks: [price, amount][], bids: [price, amount][] }
• height – chart height.

🧱 Architecture

For an in‑depth look at how the library is organized (components, Skia core, gestures, indicators, theming), see ARCHITECTURE.md.

At a high level:

• components/ – public React components and Binance‑style UI shell.
• chart/ – Skia renderer and viewport/gesture logic.
• theme/ – Binance‑inspired dark/light themes.

👥 Authors

Created and maintained with ❤️ by Salil Samdarshy & Shubham Narula.

📄 License

MIT © Salil Samdarshy & Shubham Narula