Use this file to discover all available pages before exploring further.
The chart reads its history and live value from Reanimated SharedValues. You append new points
with data.modify(...) and update the live value with value.set(...); the engine interpolates
and scrolls on the UI thread.
This example feeds the chart a random walk on an interval. In a real app you’d update the shared
values from your websocket / data source instead.
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="#3b82f6" /> </View> );}
Give the chart a sized container (a fixed height or flex: 1). It fills its parent via an
absolute-positioned Skia canvas.
Use data.modify(...) for per-tick appends (it mutates in place on the UI thread) and
value.set(...) / value.get() for the scalar — not data.value = .... The example app’s
useSimulatedChartData
hook drives every demo screen
this way; in production you’d update these shared values from your own websocket / data source.