> ## Documentation Index
> Fetch the complete documentation index at: https://react-native-livechart.brandtnewlabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install react-native-livechart and configure its peer dependencies, Babel, and Metro.

## Install

```bash theme={null}
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](https://shopify.github.io/react-native-skia/docs/getting-started/installation),
[Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started),
and [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)
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.

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

<Warning>
  If you omit the Worklets plugin or it isn't last, worklets in the chart can fail at build or
  runtime.
</Warning>

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

```js babel.config.js theme={null}
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:

```js metro.config.js theme={null}
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](https://docs.swmansion.com/react-native-worklets/docs/bundleMode/setup/).

<Warning>
  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.
</Warning>

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

```bash theme={null}
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`:

```tsx theme={null}
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](/guides/line-and-area) and
[Candlestick](/guides/candlestick) guides for what each mode supports.

Next: render your first chart in the [Quickstart](/quickstart).