feat: support Reanimated 4 (#1226)

jbroma · web-flow · commit 396593afc992 · 2025-07-25T12:29:48.000+02:00
diff --git a/.changeset/blue-ears-leave.md b/.changeset/blue-ears-leave.md
@@ -0,0 +1,6 @@
+---
+"@callstack/repack-plugin-reanimated": minor
+"@callstack/repack": minor
+---
+
+Reanimated Plugin: Add support for Reanimated 4
diff --git a/apps/tester-app/babel.config.js b/apps/tester-app/babel.config.js
@@ -9,5 +9,6 @@ module.exports = {
         importSource: 'nativewind',
       },
     ],
+    'react-native-worklets/plugin',
   ],
 };
diff --git a/apps/tester-app/ios/Podfile.lock b/apps/tester-app/ios/Podfile.lock
@@ -2308,7 +2308,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNReanimated (3.18.0):
+  - RNReanimated (4.0.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2335,11 +2335,11 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.18.0)
-    - RNReanimated/worklets (= 3.18.0)
+    - RNReanimated/reanimated (= 4.0.0)
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/reanimated (3.18.0):
+  - RNReanimated/reanimated (4.0.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2366,10 +2366,12 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.18.0)
+    - RNReanimated/reanimated/apple (= 4.0.0)
+    - RNReanimated/reanimated/view (= 4.0.0)
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/reanimated/apple (3.18.0):
+  - RNReanimated/reanimated/apple (4.0.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2396,9 +2398,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/worklets (3.18.0):
+  - RNReanimated/reanimated/view (4.0.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2425,10 +2428,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/worklets/apple (= 3.18.0)
+    - RNWorklets
     - SocketRocket
     - Yoga
-  - RNReanimated/worklets/apple (3.18.0):
+  - RNSVG (15.12.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2455,9 +2458,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNSVG/common (= 15.12.0)
     - SocketRocket
     - Yoga
-  - RNSVG (15.12.0):
+  - RNSVG/common (15.12.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2484,10 +2488,69 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.12.0)
     - SocketRocket
     - Yoga
-  - RNSVG/common (15.12.0):
+  - RNWorklets (0.4.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets (= 0.4.0)
+    - SocketRocket
+    - Yoga
+  - RNWorklets/worklets (0.4.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets/apple (= 0.4.0)
+    - SocketRocket
+    - Yoga
+  - RNWorklets/worklets/apple (0.4.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2597,12 +2660,13 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - "ReactNativeHost (from `../../../node_modules/.pnpm/react-native-test-app@4.4.4_react-native@0.80.0_@babel+core@7.25.2_@react-native-community+cl_2c2ikb6jukpexpxx5nck4v64iq/node_modules/@rnx-kit/react-native-host`)"
+  - "ReactNativeHost (from `../../../node_modules/.pnpm/react-native-test-app@4.4.4_patch_hash=wsdoulokkdggtxg73oqeyh4rwm_react-native@0.80.0_@babel+_swgpimjjfa6bbuovbhzmrpqrqu/node_modules/@rnx-kit/react-native-host`)"
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSVG (from `../node_modules/react-native-svg`)
+  - RNWorklets (from `../node_modules/react-native-worklets`)
   - SocketRocket (~> 0.7.1)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -2761,7 +2825,7 @@ EXTERNAL SOURCES:
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
   ReactNativeHost:
-    :path: "../../../node_modules/.pnpm/react-native-test-app@4.4.4_react-native@0.80.0_@babel+core@7.25.2_@react-native-community+cl_2c2ikb6jukpexpxx5nck4v64iq/node_modules/@rnx-kit/react-native-host"
+    :path: "../../../node_modules/.pnpm/react-native-test-app@4.4.4_patch_hash=wsdoulokkdggtxg73oqeyh4rwm_react-native@0.80.0_@babel+_swgpimjjfa6bbuovbhzmrpqrqu/node_modules/@rnx-kit/react-native-host"
   ReactTestApp-DevSupport:
     :path: "../node_modules/react-native-test-app"
   ReactTestApp-Resources:
@@ -2772,6 +2836,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNSVG:
     :path: "../node_modules/react-native-svg"
+  RNWorklets:
+    :path: "../node_modules/react-native-worklets"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -2854,8 +2920,9 @@ SPEC CHECKSUMS:
   ReactTestApp-DevSupport: bc5bc7f645b7bc18d2c9b6d4203e78d8ab634250
   ReactTestApp-Resources: 8d72c3deef156833760694a288ff334af4d427d7
   RNCAsyncStorage: 767abb068db6ad28b5f59a129fbc9fab18b377e2
-  RNReanimated: 7e0ba8b6914407ca44bb187dbafa7a90c9f0fa52
+  RNReanimated: a21eac73d0e9c3d50821ec49d7c6a409706f78b4
   RNSVG: c73af7848d94ca3e8136a5191d055e3c1d6fedab
+  RNWorklets: 5e10b99988778b7a08a8aaeba9ad7f3e56787bf4
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
   Yoga: 395b5d614cd7cbbfd76b05d01bd67230a6ad004e
diff --git a/apps/tester-app/package.json b/apps/tester-app/package.json
@@ -26,9 +26,10 @@
     "react": "catalog:",
     "react-native": "catalog:",
     "react-native-css-interop": "0.1.22",
-    "react-native-reanimated": "3.18.0",
+    "react-native-reanimated": "4.0.0",
     "react-native-safe-area-context": "5.5.0",
     "react-native-svg": "15.12.0",
+    "react-native-worklets": "0.4.0",
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
diff --git a/packages/plugin-reanimated/package.json b/packages/plugin-reanimated/package.json
@@ -36,7 +36,9 @@
   "engines": {
     "node": ">=18"
   },
-  "dependencies": {},
+  "dependencies": {
+    "semver": "^7.7.2"
+  },
   "peerDependencies": {
     "@babel/core": "^7.20",
     "@callstack/repack": "workspace:*"
@@ -46,6 +48,7 @@
     "@rspack/core": "catalog:",
     "@types/babel__core": "7.20.5",
     "@types/node": "catalog:",
+    "@types/semver": "^7.7.0",
     "webpack": "catalog:"
   },
   "scripts": {
diff --git a/packages/plugin-reanimated/src/index.ts b/packages/plugin-reanimated/src/index.ts
@@ -1,2 +1,6 @@
 export { ReanimatedPlugin } from './plugin.js';
-export { reanimatedModuleRules } from './rules.js';
+export {
+  reanimated3ModuleRules,
+  reanimated4ModuleRules,
+  reanimatedModuleRules,
+} from './rules.js';
diff --git a/packages/plugin-reanimated/src/loader.ts b/packages/plugin-reanimated/src/loader.ts
@@ -54,7 +54,7 @@ export default function reanimatedLoader(
       configFile: false,
       compact: false,
       comments: true,
-      plugins: [...babelPlugins, 'react-native-reanimated/plugin'],
+      plugins: babelPlugins,
     },
     (err, result) => {
       if (err) {
diff --git a/packages/plugin-reanimated/src/plugin.ts b/packages/plugin-reanimated/src/plugin.ts
@@ -1,6 +1,8 @@
+import path from 'node:path';
 import type { Compiler as RspackCompiler } from '@rspack/core';
+import semver, { type SemVer } from 'semver';
 import type { Compiler as WebpackCompiler } from 'webpack';
-import { reanimatedModuleRules } from './rules.js';
+import { reanimated3ModuleRules, reanimated4ModuleRules } from './rules.js';
 
 export class ReanimatedPlugin {
   apply(compiler: RspackCompiler): void;
@@ -9,8 +11,19 @@ export class ReanimatedPlugin {
   apply(__compiler: unknown) {
     const compiler = __compiler as RspackCompiler;
 
+    const reanimatedPath = this.ensureDependencyInstalled(
+      compiler.context,
+      'react-native-reanimated'
+    );
+
+    const reanimatedVersion = this.getReanimatedVersion(reanimatedPath);
+
     // add rules for transpiling wih reanimated loader
-    compiler.options.module.rules.push(reanimatedModuleRules);
+    compiler.options.module.rules.push(
+      reanimatedVersion.major < 4
+        ? reanimated3ModuleRules
+        : reanimated4ModuleRules
+    );
 
     // ignore the 'setUpTests' warning from reanimated which is not relevant
     compiler.options.ignoreWarnings = compiler.options.ignoreWarnings ?? [];
@@ -20,4 +33,38 @@ export class ReanimatedPlugin {
       )
     );
   }
+
+  private ensureDependencyInstalled(context: string, dependency: string) {
+    try {
+      // resolve the path to the dependency package.json
+      // since its always in the root dir of the dependency
+      const dependencyPackageJsonPath = path.join(dependency, 'package.json');
+      const dependencyPath = require.resolve(dependencyPackageJsonPath, {
+        paths: [context],
+      });
+      return path.dirname(dependencyPath);
+    } catch {
+      const error = new Error(
+        `[RepackReanimatedPlugin] Dependency named '${dependency}' is required but not found in your project. ` +
+          'Did you forget to install it?'
+      );
+      // remove the stack trace to make the error more readable
+      error.stack = undefined;
+      throw error;
+    }
+  }
+
+  private getReanimatedVersion(reanimatedPath: string): SemVer {
+    const reanimatedPackageJsonPath = path.join(reanimatedPath, 'package.json');
+    const reanimatedPackageJson = require(reanimatedPackageJsonPath);
+    const version = semver.parse(reanimatedPackageJson.version);
+
+    if (!version) {
+      throw new Error(
+        `[RepackReanimatedPlugin] Unable to parse version for react-native-reanimated: ${reanimatedPackageJson.version}`
+      );
+    }
+
+    return version;
+  }
 }
diff --git a/packages/plugin-reanimated/src/rules.ts b/packages/plugin-reanimated/src/rules.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
