Installation

Install

npm install react-native-livechart

Peer dependencies

Install the library’s peer dependencies in your app. Versions should match your React Native / Expo SDK.

Peer	Role
`react`	UI
`react-native`	Host
`@shopify/react-native-skia`	Canvas rendering
`react-native-reanimated`	Shared values, animations, worklets
`react-native-worklets`	Required by Reanimated 4+
`react-native-gesture-handler`	Pan / scrub gestures

Follow the install docs for Skia, Reanimated, and Gesture Handler for your toolchain.

Babel

The package ships TypeScript source, so your app’s bundler compiles it with the same stack as a typical Expo / Reanimated 4 project. You need:

babel-preset-expo (or an equivalent preset that includes Reanimated’s Babel plugin), and
react-native-worklets/plugin as the last entry in your plugins array.

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // ...your other plugins
      "react-native-worklets/plugin", // must be last
    ],
  };
};

If you omit the Worklets plugin or it isn’t last, worklets in the chart can fail at build or runtime.

Metro / package exports

From Expo SDK 53+, Metro resolves import using package.json exports, including the react-native condition. This library’s runtime entry is src/index.ts under that condition — your Metro + Babel pipeline compiles it. If you disabled package exports (unstable_enablePackageExports: false), re-enable them or align your resolver so resolution matches the published map.

Optional: Worklets Bundle Mode

LiveChart does not need a separate prop or runtime API for Bundle Mode. The package ships source, so enabling Bundle Mode in your app’s Babel and Metro configuration also compiles LiveChart’s worklets in Bundle Mode. The setup below was verified with react-native-worklets 0.10.0, Expo 57, and React Native 0.86. Bundle Mode configuration is app-wide and must be enabled in both Babel and Metro. Check the Worklets compatibility and setup docs before applying it to a different toolchain version.

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // ...your other plugins
      [
        "react-native-worklets/plugin",
        { bundleMode: true, strictGlobal: true },
      ], // must be last
    ],
  };
};

For an Expo app, wrap your existing Metro configuration:

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const {
  getBundleModeMetroConfig,
} = require("react-native-worklets/bundleMode");

const config = getDefaultConfig(__dirname);

module.exports = getBundleModeMetroConfig(config);

For a bare React Native app, use the React Native Community variant from the official Bundle Mode setup.

Worklets 0.10 recommends version-matched patches for metro and metro-runtime. The Metro patch indexes generated worklet modules synchronously; the metro-runtime patch enables Fast Refresh on Worklet Runtimes. Apply the official patches in your app—the LiveChart package cannot safely patch a consumer’s toolchain transitively.

After changing Babel, Metro, or the patches, clear Metro’s cache and rebuild the native app:

npx expo start --clear
# React Native Community CLI:
npm start -- --reset-cache

Legacy Eval Mode remains supported. Remove the Bundle Mode options and wrapper to return to your normal Worklets configuration.

Gesture handler root

Scrubbing uses Gesture Handler, so wrap your app (or the screen hosting the chart) in a GestureHandlerRootView:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* ...your app */}
    </GestureHandlerRootView>
  );
}

Supported platforms

react-native-livechart targets iOS and Android via React Native (bare workflow or Expo). React Native Web is not supported. The chart relies on @shopify/react-native-skia and Reanimated worklets running on the native UI thread; the same code path doesn’t run under react-native-web. If you ship to web, render a different chart (or a static fallback) when Platform.OS === "web".

Supported chart types

The library renders line / area charts and candlestick (OHLC) charts in a single component, with a smooth morph between the two modes. Bar charts, pie charts, and other chart types are not included. See the Line & area and Candlestick guides for what each mode supports. Next: render your first chart in the Quickstart.

Getting started

Chart types

Interaction

Annotations & overlays

Dynamic styling & effects

Styling & theming

Live data & engine

Install

Peer dependencies

Babel

Metro / package exports

Optional: Worklets Bundle Mode

Gesture handler root

Supported platforms

Supported chart types

​Install

​Peer dependencies

​Babel

​Metro / package exports

​Optional: Worklets Bundle Mode

​Gesture handler root

​Supported platforms

​Supported chart types

Install

Peer dependencies

Babel

Metro / package exports

Optional: Worklets Bundle Mode

Gesture handler root

Supported platforms

Supported chart types