> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# React Native Reanimated

Re.Pack provides first-class support for [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) through a dedicated plugin that simplifies integration and in some cases, optimizes your build performance.

:::info This plugin is primarily used to disable console warnings that are not relevant when bundling a React Native app.

:::

## How it Works

The Worklets Babel Plugin transforms your code so that it can run on the Worklet Runtimes. It looks for functions marked with a `'worklet';` directive and converts them into serializable objects.

When using Rspack, the worklets babel plugin is executed via `babel-swc-loader`. The `ReanimatedPlugin` handles configuration and suppresses warnings that would otherwise appear during the build process.

## Installation

If you haven't already, install the `react-native-reanimated` package:


```sh [npm]
npm install react-native-reanimated
```

```sh [yarn]
yarn add react-native-reanimated
```

```sh [pnpm]
pnpm add react-native-reanimated
```

```sh [bun]
bun add react-native-reanimated
```

```sh [deno]
deno add npm:react-native-reanimated
```

To add Reanimated support to your Re.Pack project with Rspack, install the plugin:


```sh [npm]
npm install -D @callstack/repack-plugin-reanimated
```

```sh [yarn]
yarn add -D @callstack/repack-plugin-reanimated
```

```sh [pnpm]
pnpm add -D @callstack/repack-plugin-reanimated
```

```sh [bun]
bun add -D @callstack/repack-plugin-reanimated
```

```sh [deno]
deno add -D npm:@callstack/repack-plugin-reanimated
```

## Usage with Reanimated 4+

For Reanimated 4 and above, the worklet transformation is handled by the `react-native-worklets/plugin` babel plugin.

Install the worklets package:


```sh [npm]
npm install react-native-worklets
```

```sh [yarn]
yarn add react-native-worklets
```

```sh [pnpm]
pnpm add react-native-worklets
```

```sh [bun]
bun add react-native-worklets
```

```sh [deno]
deno add npm:react-native-worklets
```

### Babel Configuration

Add the worklets plugin to your `babel.config.js`:

```js title="babel.config.js"
module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: ["react-native-worklets/plugin"],
};
```

### Rspack Configuration

Add the plugin to your Rspack configuration with the `unstable_disableTransform` option set to `true`.

```js title="rspack.config.cjs"
const Repack = require("@callstack/repack");
const { ReanimatedPlugin } = require("@callstack/repack-plugin-reanimated");

module.exports = {
  plugins: [
    new Repack.RepackPlugin(),
    new ReanimatedPlugin({
      unstable_disableTransform: true,
    }),
  ],
};
```

This will disable adding now redundant `babel-loader` rules, and defer the transformation to Babel through `babel-swc-loader`.

## Usage with Reanimated 3

First add the `react-native-reanimated` babel plugin to your `babel.config.js`:

```js title="babel.config.js"
module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
  ],
};
```

Then apply the `ReanimatedPlugin` with the  unstable\_disableTransform option set to `true`.

```js title="rspack.config.cjs"
const Repack = require("@callstack/repack");
const { ReanimatedPlugin } = require("@callstack/repack-plugin-reanimated");

module.exports = {
  plugins: [
    new Repack.RepackPlugin(),
    new ReanimatedPlugin({
      unstable_disableTransform: true,
    }),
  ],
};
```