Version: v5

    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.

    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:

    npm
    yarn
    pnpm
    bun
    deno

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

    npm
    yarn
    pnpm
    bun
    deno

    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
    yarn
    pnpm
    bun
    deno

    Babel Configuration

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

    Rspack Configuration

    Add the plugin to your Rspack configuration with the unstable_disableTransform option set to 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:

    Then apply the ReanimatedPlugin with the unstable_disableTransform option set to true.

    Need React or React Native expertise you can count on?

    Let's talk