Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js"

Question

I am making an app in react native expo. It runs on web browser but fails to run on android simulator or expo go app on my phone. i get 2 errors :-

Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

any help would be appreciated

my expo sdk : 44,

my package.json

    {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/masked-view": "^0.1.10",
    "axios": "^0.24.0",
    "expo": "^44.0.0",
    "expo-status-bar": "~1.2.0",
    "ngrok": "^4.2.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.0",
    "react-native-maps": "0.29.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

my babel.config

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

Answer 1

As mentioned in the reanimated doc,

• Install yarn add react-native-reanimated@next
• Edit babel plugin config

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

• Clear Metro Bundler cache & start expo expo start --clear

That should solve the issue!