Skip to main content

​
LiveChartTransition

Cross-fades between chart instances by key — handy when switching symbols, timeframes, or line/candle layouts. 
import { LiveChartTransition, LiveChart } from "react-native-livechart";

<LiveChartTransition active={symbol} duration={300}>
  <LiveChart key="BTC" data={btc} value={btcValue} />
  <LiveChart key="ETH" data={eth} value={ethValue} />
</LiveChartTransition>;
​
active
string
required
Key of the active child to show. Must match a child’s key.
​
children
ReactNode
required
Chart elements, each with a unique key.
​
duration
number
default:"300"
Cross-fade duration in ms.
​
keepMounted
boolean
default:"false"
Keep every child mounted so switching is a pure cross-fade (no reveal/range re-animation). Costs more — all engines run continuously.
​
style
ViewStyle
Container style.

​
Formatters

Both formatters are worklet-safe, so you can pass them to formatValue / formatTime or call them inside your own worklets. 
import { formatValue, formatTime } from "react-native-livechart";

formatValue(1234.5); // "1.23K"  — adaptive compact suffixes (K / M)
formatValue(2_400_000); // "2.40M"
formatTime(1700000000); // "HH:MM:SS" in local time
​
formatValue
(v: number) => string
Adaptive value formatter with compact K / M suffixes.
​
formatTime
(t: number) => string
HH:MM:SS formatter for a unix-seconds timestamp.

​
MONO_FONT_FAMILY

A platform-appropriate monospace family name ("Menlo" on iOS, "monospace" elsewhere) — useful for matching surrounding RN Text to the chart’s mono look. 
import { MONO_FONT_FAMILY } from "react-native-livechart";

<Text style={{ fontFamily: MONO_FONT_FAMILY }}>$142.50</Text>;

​
Advanced hooks

useDegen and useTradeStream are low-level hooks that operate on the internal chart engine state. For almost all apps, use the degen and tradeStream props on LiveChart instead — they wire these hooks up for you. The hooks are exported only for advanced custom compositions and their signatures depend on internal engine types.