#React Native Reanimated

Re.Pack provides first-class support for React Native Reanimated through a dedicated plugin that simplifies integration and in some cases, optimizes your build performance.

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

npm install react-native-reanimated

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

npm install -D @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:

npm install react-native-worklets

#Babel Configuration

Add the worklets plugin to your 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.

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:

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.

const Repack = require("@callstack/repack");
const { ReanimatedPlugin } = require("@callstack/repack-plugin-reanimated");

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

Need React or React Native expertise you can count on?

Let's talkLet's talk