Quick Start

import { KlineChart } from 'react-native-kline-chart';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import type { Candle } from 'react-native-kline-chart';

const data: Candle[] = [
  { time: 1700000000000, open: 100, high: 105, low: 98, close: 103 },
  { time: 1700000060000, open: 103, high: 107, low: 101, close: 99 },
  // ...more candles
];

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <KlineChart data={data} width={400} height={600} />
    </GestureHandlerRootView>
  );
}

import React, { useState, useCallback, useMemo } from 'react';
import { View, Text, useWindowDimensions } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { KlineChart } from 'react-native-kline-chart';
import type { Candle } from 'react-native-kline-chart';

export default function App() {
  const { width } = useWindowDimensions();
  const [activeCandle, setActiveCandle] = useState<Candle | null>(null);

  const handleCrosshairChange = useCallback((candle: Candle | null) => {
    setActiveCandle(candle);
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {activeCandle && (
        <View style={{ padding: 16 }}>
          <Text>O: {activeCandle.open}  H: {activeCandle.high}</Text>
          <Text>L: {activeCandle.low}   C: {activeCandle.close}</Text>
        </View>
      )}
      <KlineChart
        data={data}
        width={width}
        height={450}
        showMA
        maPeriods={[5, 10, 20]}
        maColors={['#F7931A', '#5B8DEF', '#C084FC']}
        showCrosshair
        onCrosshairChange={handleCrosshairChange}
        bullishColor="#2DC08E"
        bearishColor="#F6465D"
        backgroundColor="#0B0E11"
      />
    </GestureHandlerRootView>
  );
}