Quickstart

import { useEffect } from "react";
import { View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import { LiveChart, type LiveChartPoint } from "react-native-livechart";

export function LivePrice() {
  const data = useSharedValue<LiveChartPoint[]>([]);
  const value = useSharedValue(100);

  useEffect(() => {
    const id = setInterval(() => {
      const time = Date.now() / 1000; // unix seconds
      const next = value.get() + (Math.random() - 0.5) * 2;

      // Append the new point in place on the UI thread — the full (growing)
      // array is never re-cloned across the JS/UI boundary.
      data.modify((arr) => {
        "worklet";
        arr.push({ time, value: next });
        if (arr.length > 600) arr.shift();
        return arr;
      });
      value.set(next);
    }, 100);
    return () => clearInterval(id);
  }, [data, value]);

  return (
    <View style={{ height: 240 }}>
      <LiveChart data={data} value={value} accentColor="#3323E6" />
    </View>
  );
}