chore: Bump reanimated to latest versions (#432)

## Description

This PR bumps reanimated in example apps to latest versions (`4.0.0` in
the `fabric` example and `3.19.0` in remaining ones).

## TODO

- [x] Fix runtime error thrown immediately after starting the app

<img width="1035" height="466" alt="image"
src="https://github.com/user-attachments/assets/eaa20e3b-dea3-4209-b472-efc81d2606f8"
/>

- [ ] Fix expo example `Runtime not ready` error

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: MatiPl01

.yarn/patches/react-native-reanimated-npm-3.18.0-3e0f9f00d6.patch renamed to .yarn/patches/react-native-reanimated-npm-4.0.1-40ff4579cd.patch

@@ -1,8 +1,8 @@
 diff --git a/lib/module/layoutReanimation/web/componentUtils.js b/lib/module/layoutReanimation/web/componentUtils.js
-index c3623f90862b4413ce6d77bb04496ad2fecb3125..1ebfd2a5579b6bbfd19b343e0484a6ca935652d5 100644
+index 558d20f1721d3ee84e61ea6abb98b611bbce1520..8f8d9fd7461a35bc9f543b997cf7b33113a44171 100644
 --- a/lib/module/layoutReanimation/web/componentUtils.js
 +++ b/lib/module/layoutReanimation/web/componentUtils.js
-@@ -109,6 +109,7 @@ export function setElementAnimation(element, animationConfig, shouldSavePosition
+@@ -110,6 +110,7 @@ export function setElementAnimation(element, animationConfig, shouldSavePosition
      element.style.animationDuration = `${duration}s`;
      element.style.animationDelay = `${delay}s`;
      element.style.animationTimingFunction = easing;
@@ -11,7 +11,7 @@ index c3623f90862b4413ce6d77bb04496ad2fecb3125..1ebfd2a5579b6bbfd19b343e0484a6ca
    if (animationConfig.animationType === LayoutAnimationType.ENTERING) {
      // On chrome sometimes entering animations flicker. This is most likely caused by animation being interrupted
 diff --git a/src/layoutReanimation/web/componentUtils.ts b/src/layoutReanimation/web/componentUtils.ts
-index 53bfae44e3dfee63f2fbc86566f99d1f586396d1..99ebb1b9bdad6299cc75a848fb2e1f525213dee9 100644
+index 7118949bc0f3ae223d7890cb860e688e75ad8f0d..aec1349be3798e9d1fde4fca08639c5ba97a9ebc 100644
 --- a/src/layoutReanimation/web/componentUtils.ts
 +++ b/src/layoutReanimation/web/componentUtils.ts
 @@ -163,6 +163,7 @@ export function setElementAnimation(

babel.config.cjs

@@ -1,6 +1,9 @@
 import rootConfig from '../../eslint.config.mjs';
 
 export default [
+  {
+    ignores: ['scripts']
+  },
   ...rootConfig,
   {
     languageOptions: {

example/app/eslint.config.mjs

@@ -13,11 +13,12 @@
     "react-native": "0.80.0",
     "react-native-gesture-handler": "2.26.0",
     "react-native-haptic-feedback": "2.3.3",
-    "react-native-reanimated": "patch:react-native-reanimated@npm%3A3.18.0#~/.yarn/patches/react-native-reanimated-npm-3.18.0-3e0f9f00d6.patch",
+    "react-native-reanimated": "patch:react-native-reanimated@npm%3A4.0.1#~/.yarn/patches/react-native-reanimated-npm-4.0.1-40ff4579cd.patch",
     "react-native-safe-area-context": "5.3.0",
     "react-native-screens": "4.11.1",
     "react-native-sortables": "workspace:*",
-    "react-native-svg": "15.12.0"
+    "react-native-svg": "15.12.0",
+    "react-native-worklets": "0.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

example/app/package.json

@@ -0,0 +1,46 @@
+const path = require('path');
+
+function getDependencies(currentAppDir = '.', excludeCommon = []) {
+  const commonAppDir = path.resolve(__dirname, '..');
+  const commonAppPkg = require(path.resolve(commonAppDir, 'package.json'));
+  const currentAppPkg = require(path.resolve(currentAppDir, 'package.json'));
+
+  const excludedCommonDeps = new Set(excludeCommon);
+
+  const allDeps = new Set([
+    ...[
+      ...Object.keys(commonAppPkg.dependencies ?? {}),
+      ...Object.keys(commonAppPkg.devDependencies ?? {})
+    ].filter(dep => !excludedCommonDeps.has(dep)),
+    ...Object.keys(currentAppPkg.dependencies ?? {}),
+    ...Object.keys(currentAppPkg.devDependencies ?? {})
+  ]);
+
+  const result = {};
+
+  for (const dep of allDeps) {
+    // Find versions in both package.json files
+    const commonVersion =
+      commonAppPkg.dependencies?.[dep] ?? commonAppPkg.devDependencies?.[dep];
+    const currentVersion =
+      currentAppPkg.dependencies?.[dep] ?? currentAppPkg.devDependencies?.[dep];
+
+    if (!commonVersion || !currentVersion || commonVersion === currentVersion) {
+      result[dep] = {
+        root: path.resolve(currentAppDir, `../../node_modules/${dep}`)
+      };
+    } else {
+      // Include from the local node_modules only if the dependency is present
+      // in the current app and versions are different
+      result[dep] = {
+        root: path.resolve(currentAppDir, `node_modules/${dep}`)
+      };
+    }
+  }
+
+  return result;
+}
+
+module.exports = {
+  getDependencies
+};

example/app/scripts/dependencies.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const escape = require('escape-string-regexp');
+const {
+  wrapWithReanimatedMetroConfig
+} = require('react-native-reanimated/metro-config');
+
+function createMetroConfig(defaultConfig, currentAppDir, options = {}) {
+  const { excludeFromRoot = [] } = options;
+
+  const monorepoRoot = path.resolve(currentAppDir, '../..');
+
+  const config = { ...defaultConfig };
+  config.resolver ??= {};
+
+  config.watchFolders = [currentAppDir, monorepoRoot];
+  config.resolver.nodeModulesPaths = [
+    path.resolve(currentAppDir, 'node_modules'),
+    path.resolve(currentAppDir, '../app/node_modules'),
+    path.resolve(monorepoRoot, 'node_modules')
+  ];
+  config.resolver.disableHierarchicalLookup = true;
+
+  if (excludeFromRoot.length > 0) {
+    config.resolver.blockList = excludeFromRoot.map(
+      m =>
+        new RegExp(
+          `^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$`
+        )
+    );
+  }
+
+  return wrapWithReanimatedMetroConfig(config);
+}
+
+module.exports = {
+  createMetroConfig
+};

example/app/scripts/metro.js

@@ -1,16 +1,6 @@
-const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
+const { createMetroConfig } = require('../app/scripts/metro');
 
-const monorepoRoot = path.resolve(__dirname, '../..');
+const defaultConfig = getDefaultConfig(__dirname);
 
-const config = getDefaultConfig(__dirname);
-
-config.watchFolders = [__dirname, monorepoRoot];
-config.resolver.nodeModulesPaths = [
-  path.resolve(__dirname, 'node_modules'),
-  path.resolve(__dirname, '../app/node_modules'),
-  path.resolve(monorepoRoot, 'node_modules')
-];
-config.resolver.disableHierarchicalLookup = true;
-
-module.exports = config;
+module.exports = createMetroConfig(defaultConfig, __dirname);

example/expo/metro.config.js

@@ -2,10 +2,10 @@
   "name": "example-expo",
   "version": "1.0.0",
   "dependencies": {
-    "expo": "53.0.11",
+    "expo": "53.0.20",
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",
-    "react-native": "0.79.3",
+    "react-native": "0.79.5",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.4"
   },

example/expo/package.json

@@ -4,15 +4,14 @@
  */
 const path = require('path');
 
-const rootDir = path.resolve(__dirname, '../..');
 const appDir = path.resolve(__dirname, '../app');
 
 module.exports = function (api) {
   api.cache(true);
   return {
-    extends: path.join(rootDir, 'babel.config.cjs'),
     presets: ['module:@react-native/babel-preset'],
     plugins: [
+      '@babel/plugin-transform-export-namespace-from',
       [
         'module-resolver',
         {
@@ -23,7 +22,8 @@ module.exports = function (api) {
             '@': path.join(appDir, 'src')
           }
         }
-      ]
+      ],
+      'react-native-worklets/plugin'
     ]
   };
 };