Hooks & utilities

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>;

string

required

Key of the active child to show. Must match a child’s key.

ReactNode

required

Chart elements, each with a unique key.

number

default:"300"

Cross-fade duration in ms.

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.

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

(v: number) => string

Adaptive value formatter with compact K / M suffixes.

(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.

Components

Hooks, utilities & types

LiveChartTransition

Formatters

MONO_FONT_FAMILY

Advanced hooks

​LiveChartTransition

​Formatters

​MONO_FONT_FAMILY

​Advanced hooks

LiveChartTransition

Formatters

MONO_FONT_FAMILY

Advanced hooks