Package Exports

react-native-stock-graphs

Readme

react-native-stock-graphs

A high-performance, feature-rich stock chart library for React Native applications. Perfect for trading apps, fintech applications, and portfolio trackers.

✨ Features

📊 Chart Types

Line Chart - Simple price movements
Area Chart - Filled area under the line
Candlestick Chart - OHLC data with traditional candlesticks
OHLC Chart - Open-High-Low-Close bar charts

📈 Technical Indicators

Simple Moving Average (SMA)
Exponential Moving Average (EMA)
Bollinger Bands
Volume Bars
RSI, MACD, VWAP, ATR (via utility functions)

🎯 Interactive Features

Pinch-to-zoom - Smooth zooming with gesture support
Horizontal panning - Navigate through time periods
Double-tap reset - Quick return to default view
Crosshair - Shows precise price/time at touch point
Tooltip - Displays OHLCV data for hovered candle/point

⚡ Real-time & Streaming

Incremental data updates - Append/update data efficiently
WebSocket support - Connect to live data streams
Server-Sent Events (SSE) - Alternative streaming method
Smooth animations - Animated transitions for new data

🚀 Performance

Dual rendering backends - SVG and Skia (high-performance)
Data virtualization - Handle large datasets efficiently
Gesture throttling - Smooth interactions
Tree-shaking friendly - Minimal bundle impact

🎨 Theming & Styling

Customizable colors - Full theme control
Dark/Light themes - Built-in theme presets
Grid customization - Configurable grid lines and labels
Font customization - Custom fonts and sizes

♿ Accessibility

Screen reader support - Accessible labels and descriptions
Keyboard navigation - Where applicable

📦 Installation

npm install react-native-stock-graphs
# or
yarn add react-native-stock-graphs

Peer Dependencies

# Required
npm install react react-native react-native-svg

# Optional (for Skia backend)
npm install @shopify/react-native-skia

Platform Setup

iOS

No additional setup required for SVG backend.

For Skia backend, follow @shopify/react-native-skia installation guide.

Android

No additional setup required for SVG backend.

For Skia backend, follow @shopify/react-native-skia installation guide.

🚀 Quick Start

import React from 'react';
import { View } from 'react-native';
import StockGraph from 'react-native-stock-graphs';

const data = [
  { time: 1640995200000, open: 100, high: 105, low: 95, close: 102, volume: 1000 },
  { time: 1641081600000, open: 102, high: 108, low: 100, close: 106, volume: 1200 },
  // ... more data
];

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <StockGraph
        type="candlestick"
        data={data}
        style={{ height: 320 }}
      />
    </View>
  );
};

export default App;

📖 API Reference

StockGraph Props

Prop	Type	Default	Description
`type`	`'line' \| 'area' \| 'candlestick' \| 'ohlc'`	`'line'`	Chart type to render
`data`	`CandleData[] \| LineData[]`	`[]`	Chart data array
`indicators`	`IndicatorConfig[]`	`[]`	Technical indicators to display
`renderBackend`	`'svg' \| 'skia'`	`'svg'`	Rendering backend
`theme`	`ChartTheme`	`DEFAULT_THEME`	Color theme
`realtime`	`RealtimeConfig`	`undefined`	Real-time data configuration
`initialRange`	`DateRange`	`undefined`	Initial time range to display
`onPressCandle`	`(candle, index) => void`	`undefined`	Callback for candle press
`style`	`ViewStyle`	`{}`	Container style

Data Types

interface CandleData {
  time: number;        // Unix timestamp in milliseconds
  open: number;        // Opening price
  high: number;        // Highest price
  low: number;         // Lowest price
  close: number;       // Closing price
  volume?: number;     // Trading volume (optional)
}

interface LineData {
  time: number;        // Unix timestamp in milliseconds
  value: number;       // Price/value
}

Indicator Configuration

interface IndicatorConfig {
  type: 'sma' | 'ema' | 'bollinger' | 'volume';
  period?: number;     // Period for calculation (default: 20)
  color?: string;      // Custom color
  visible?: boolean;   // Show/hide indicator (default: true)
}

🎯 Examples

Line Chart

const lineData = [
  { time: 1640995200000, value: 102 },
  { time: 1641081600000, value: 106 },
  { time: 1641168000000, value: 108 },
];

<StockGraph
  type="line"
  data={lineData}
  theme={{
    lineColor: '#2196f3',
    background: '#ffffff'
  }}
  style={{ height: 300 }}
/>

Candlestick with Indicators

<StockGraph
  type="candlestick"
  data={candleData}
  indicators={[
    { type: 'sma', period: 20, color: '#ff9800' },
    { type: 'ema', period: 50, color: '#9c27b0' },
    { type: 'volume', color: '#607d8b' }
  ]}
  onPressCandle={(candle, index) => {
    console.log('Pressed candle:', candle);
  }}
  style={{ height: 400 }}
/>

Real-time Updates

import { useRealtimeFeed } from 'react-native-stock-graphs';

const RealtimeChart = () => {
  const { data, updateData } = useRealtimeFeed({
    initialData: candleData,
    bufferSize: 1000
  });

  // Connect to WebSocket or other data source
  useEffect(() => {
    const ws = new WebSocket('wss://api.example.com/stream');
    ws.onmessage = (event) => {
      const newCandle = JSON.parse(event.data);
      updateData(newCandle);
    };
    return () => ws.close();
  }, []);

  return (
    <StockGraph
      type="candlestick"
      data={data}
      realtime={{ enabled: true, bufferSize: 1000 }}
      style={{ height: 320 }}
    />
  );
};

High-Performance Skia Backend

<StockGraph
  type="candlestick"
  data={largeDataset} // 10k+ points
  renderBackend="skia"
  performance={{
    enableVirtualization: true,
    maxVisiblePoints: 1000,
    throttleMs: 16
  }}
  style={{ height: 320 }}
/>

🎨 Theming

Built-in Themes

import { DEFAULT_THEME, DEFAULT_DARK_THEME } from 'react-native-stock-graphs';

// Light theme
<StockGraph theme={DEFAULT_THEME} />

// Dark theme
<StockGraph theme={DEFAULT_DARK_THEME} />

Custom Theme

const customTheme = {
  background: '#1a1a1a',
  gridColor: '#333333',
  textColor: '#ffffff',
  candleUp: '#00ff88',
  candleDown: '#ff4444',
  lineColor: '#00aaff',
  crosshairColor: '#888888',
  tooltipBackground: '#333333',
  tooltipText: '#ffffff'
};

<StockGraph theme={customTheme} />

🔧 Utility Functions

Technical Indicators

import {
  calculateSMA,
  calculateEMA,
  calculateBollingerBands,
  calculateRSI
} from 'react-native-stock-graphs';

const prices = data.map(d => d.close);
const sma20 = calculateSMA(prices, 20);
const ema50 = calculateEMA(prices, 50);
const bollinger = calculateBollingerBands(prices, 20, 2);
const rsi = calculateRSI(prices, 14);

Chart Utilities

import {
  formatPrice,
  formatTime,
  getTimeRange,
  getPriceRange
} from 'react-native-stock-graphs';

const timeRange = getTimeRange(data);
const priceRange = getPriceRange(data);
const formattedPrice = formatPrice(123.456); // "123.46"
const formattedTime = formatTime(1640995200000); // "Jan 01"

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

🏗️ Development

# Clone the repository
git clone https://github.com/yourusername/react-native-stock-graphs.git
cd react-native-stock-graphs

# Install dependencies
npm install

# Run the example app
cd example
npm install
npm start

Building

# Build the library
npm run build

# Build and watch for changes
npm run build:watch

# Type check
npm run type-check

# Lint
npm run lint

# Format code
npm run format

📱 Example App

The example app demonstrates all features:

Different chart types
Technical indicators
Real-time updates
Theme switching
Performance testing

cd example
npm install
npm start

🚀 Publishing

# Publish canary version
npm run publish:canary

# Publish production version
npm run publish:prod

📊 Performance

Benchmarks

Dataset Size	SVG Backend	Skia Backend	Memory Usage
1,000 points	60 FPS	60 FPS	~50MB
5,000 points	45 FPS	60 FPS	~80MB
10,000 points	25 FPS	60 FPS	~120MB
50,000 points	10 FPS	55 FPS	~300MB

Performance Tips

Use Skia backend for large datasets (>5k points)
Enable virtualization for very large datasets
Throttle gesture updates for smoother interactions
Use data decimation when zoomed out
Limit indicator calculations to visible range

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Fork the repository
Create a feature branch
Make your changes
Add tests
Run the test suite
Submit a pull request

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

react-native-svg for SVG rendering
@shopify/react-native-skia for high-performance rendering
TradingView for chart inspiration

📞 Support

Made with ❤️ for the React Native community