Reanimated4

babel.config.js

@@ -1,4 +1,12 @@
-module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-reanimated/plugin']
+module.exports = function (api) {
+  const isAndroid = api.caller(c => c.platform === 'android')
+
+  return {
+    presets: ['module:@react-native/babel-preset'],
+    plugins: [
+      isAndroid
+        ? './node_modules/r3-hack/node_modules/react-native-reanimated/plugin'
+        : 'react-native-worklets/plugin'
+    ]
+  }
 }

ios/Podfile

@@ -50,7 +50,7 @@ target 'edge' do
     :path => config[:reactNativePath],
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/..",
-    :fabric_enabled => false,
+    :fabric_enabled => true,
     :hermes_enabled => true
   )
 

ios/Podfile.lock

@@ -2320,7 +2320,7 @@ PODS:
     - ZXingObjC
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
-  - RNReanimated (3.19.0):
+  - RNReanimated (4.0.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2343,10 +2343,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.19.0)
-    - RNReanimated/worklets (= 3.19.0)
+    - RNReanimated/reanimated (= 4.0.2)
+    - RNWorklets
     - Yoga
-  - RNReanimated/reanimated (3.19.0):
+  - RNReanimated/reanimated (4.0.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2369,9 +2369,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.19.0)
+    - RNReanimated/reanimated/apple (= 4.0.2)
+    - RNWorklets
     - Yoga
-  - RNReanimated/reanimated/apple (3.19.0):
+  - RNReanimated/reanimated/apple (4.0.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2394,8 +2395,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNWorklets
     - Yoga
-  - RNReanimated/worklets (3.19.0):
+  - RNScreens (4.11.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2412,15 +2414,16 @@ PODS:
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFabric
+    - React-RCTImage
     - React-renderercss
     - React-rendererdebug
     - React-utils
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/worklets/apple (= 3.19.0)
+    - RNScreens/common (= 4.11.1)
     - Yoga
-  - RNReanimated/worklets/apple (3.19.0):
+  - RNScreens/common (4.11.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2437,14 +2440,17 @@ PODS:
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFabric
+    - React-RCTImage
     - React-renderercss
     - React-rendererdebug
     - React-utils
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (4.11.1):
+  - RNSecureRandom (1.0.1):
+    - React
+  - RNSentry (6.14.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2461,16 +2467,15 @@ PODS:
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFabric
-    - React-RCTImage
     - React-renderercss
     - React-rendererdebug
     - React-utils
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.11.1)
+    - Sentry/HybridSDK (= 8.50.2)
     - Yoga
-  - RNScreens/common (4.11.1):
+  - RNShare (12.0.11):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2487,17 +2492,19 @@ PODS:
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFabric
-    - React-RCTImage
     - React-renderercss
     - React-rendererdebug
     - React-utils
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSecureRandom (1.0.1):
+  - RNSound (0.11.0):
     - React
-  - RNSentry (6.14.0):
+    - RNSound/Core (= 0.11.0)
+  - RNSound/Core (0.11.0):
+    - React
+  - RNStoreReview (0.4.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2520,9 +2527,8 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - Sentry/HybridSDK (= 8.50.2)
     - Yoga
-  - RNShare (12.0.11):
+  - RNSVG (15.12.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2545,13 +2551,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNSVG/common (= 15.12.0)
     - Yoga
-  - RNSound (0.11.0):
-    - React
-    - RNSound/Core (= 0.11.0)
-  - RNSound/Core (0.11.0):
-    - React
-  - RNStoreReview (0.4.3):
+  - RNSVG/common (15.12.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2575,7 +2577,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSVG (15.12.0):
+  - RNVectorIcons (10.1.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2598,9 +2600,8 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.12.0)
     - Yoga
-  - RNSVG/common (15.12.0):
+  - RNWorklets (0.4.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2623,8 +2624,34 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNWorklets/worklets (= 0.4.1)
     - Yoga
-  - RNVectorIcons (10.1.0):
+  - RNWorklets/worklets (0.4.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - 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.1)
+    - Yoga
+  - RNWorklets/worklets/apple (0.4.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2934,6 +2961,7 @@ DEPENDENCIES:
   - RNStoreReview (from `../node_modules/react-native-store-review`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
+  - RNWorklets (from `../node_modules/react-native-worklets`)
   - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -3243,6 +3271,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
+  RNWorklets:
+    :path: "../node_modules/react-native-worklets"
   VisionCamera:
     :path: "../node_modules/react-native-vision-camera"
   Yoga:
@@ -3392,7 +3422,7 @@ SPEC CHECKSUMS:
   RNPermissions: 60b23d827dc7a4b2e347356fc20206184676637c
   RNQrGenerator: 95feb09b4b2ed65f3a4afe795a20beed4b134ab5
   RNReactNativeHapticFeedback: 8364333ca888b1b7ec9d2daf04b010ee5436366e
-  RNReanimated: 35a5a59798fe9a9a61259146be9fe8b0b602ab39
+  RNReanimated: 24b8a5b54c499ac783c2c299aad4712002c03bb1
   RNScreens: 90b905d545a5ebbe976985702b8a39e3475727b2
   RNSecureRandom: b64d263529492a6897e236a22a2c4249aa1b53dc
   RNSentry: 33bc24cea8f87ab26521a9330549a82c703b5db4
@@ -3401,6 +3431,7 @@ SPEC CHECKSUMS:
   RNStoreReview: 8b47d208282c23296d2466a488a8d9ca1979d79b
   RNSVG: 45e3c3210465e75ab6374c9f746179e75d76ce48
   RNVectorIcons: f1bc9e04b6f67ec09ea54e6f092e75a9e205c1d7
+  RNWorklets: 32e63979c33291a69d4d8541d4425ab91763320e
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   Sentry: d95f5f3b32d01324b3e27d3c52747005302cc026
@@ -3426,6 +3457,6 @@ SPEC CHECKSUMS:
   ZIPFoundation: b1f0de4eed33e74a676f76e12559ab6b75990197
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
-PODFILE CHECKSUM: 2ab3d4f06447f2252ef672833166c9c33f3e8475
+PODFILE CHECKSUM: 8c119d1d2fda8d2ceda1c186a5415d0c7473469a
 
 COCOAPODS: 1.16.2

metro.config.js

@@ -2,6 +2,7 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
 const {
   wrapWithReanimatedMetroConfig
 } = require('react-native-reanimated/metro-config')
+const r3Paths = require('r3-hack')
 
 const defaultConfig = getDefaultConfig(__dirname)
 const { assetExts, sourceExts } = defaultConfig.resolver
@@ -19,6 +20,31 @@ const config = {
     )
   },
   resolver: {
+    resolveRequest(context, moduleName, platform) {
+      if (platform === 'android') {
+        // Use Reanimated 3 on Android:
+        const filePath = r3Paths[moduleName]
+        if (filePath != null) {
+          return { type: 'sourceFile', filePath }
+        }
+
+        // Ensure we aren't missing any reanimated 3 -> 4 mappings:
+        if (
+          moduleName.startsWith('react-native-reanimated') ||
+          moduleName.startsWith('react-native-worklets')
+        ) {
+          console.log(
+            `Could not find "${moduleName}". Please update r3-hack to include it.`
+          )
+          return { type: 'empty' }
+        }
+      }
+
+      // Otherwise use the normal Metro resolution:
+      return context.resolveRequest(context, moduleName, platform)
+    },
+
+    // From react-native-svg-transformer:
     assetExts: assetExts.filter(ext => ext !== 'svg'),
     sourceExts: [...sourceExts, 'svg']
   }

package.json

@@ -77,7 +77,7 @@
     "@react-native-firebase/messaging": "^20.5.0",
     "@react-native-picker/picker": "^2.4.0",
     "@react-navigation/bottom-tabs": "^6.5.4",
-    "@react-navigation/drawer": "^6.5.8",
+    "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/elements": "^1.3.14",
     "@react-navigation/native": "^6.1.3",
     "@react-navigation/stack": "^6.3.12",
@@ -118,6 +118,7 @@
     "posthog-react-native": "^2.8.1",
     "prompts": "^2.4.2",
     "qrcode-generator": "^1.4.4",
+    "r3-hack": "./scripts/r3-hack",
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-native-airship": "^0.2.12",
@@ -150,7 +151,7 @@
     "react-native-performance": "^5.1.4",
     "react-native-permissions": "^4.1.5",
     "react-native-piratechain": "^0.5.12",
-    "react-native-reanimated": "^3.18.0",
+    "react-native-reanimated": "^4.0.2",
     "react-native-reorderable-list": "^0.5.0",
     "react-native-safari-view": "^2.1.0",
     "react-native-safe-area-context": "^5.5.1",
@@ -165,6 +166,7 @@
     "react-native-vision-camera": "^4.7.1",
     "react-native-webview": "^13.15.0",
     "react-native-wheel-picker-android": "^2.0.6",
+    "react-native-worklets": "^0.4.1",
     "react-native-zano": "^0.2.1",
     "react-native-zcash": "^0.9.10",
     "react-redux": "^8.1.1",
@@ -264,5 +266,10 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "reanimated": {
+    "staticFeatureFlags": {
+      "DISABLE_COMMIT_PAUSING_MECHANISM": true
+    }
   }
 }