@callstack/repack-plugin-reanimated is a plugin for @callstack/repack that integrates react-native-reanimated into your React Native projects.

About

This plugin exists in order to simplify the setup required to get react-native-reanimated working with Re.Pack and to minimize the impact on build performance. It looks for relevant keywords like worklet inside the source before transforming the file with babel.

Installation

npm install -D @callstack/repack-plugin-reanimated

Usage

Plugin

To add the plugin to your Re.Pack configuration, update your rspack.config.js or webpack.config.js as follows:

import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';

export default (env) => {
  // ...
  return {
    // ...
    plugins: [
      // ...
      new ReanimatedPlugin(),
    ],
  };
};

Loader

The plugin also comes with it's own loader, which you can use on it's own inside rspack.config.js or webpack.config.js like this:

export default (env) => {
  // ...
  return {
    // ...
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: {
            loader: '@callstack/repack-plugin-reanimated/loader',
            options: {
              babelPlugins: [
                [
                  '@babel/plugin-syntax-typescript',
                  { isTSX: false, allowNamespaces: true },
                ],
              ],
            },
          },
        },
      ],
    },
  };
};

Check out our website at https://re-pack.dev for more info and documentation or our GitHub: https://github.com/callstack/repack.

Made with ❤️ at Callstack

@callstack/repack is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥