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

Viewed 2291

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"],
  };
};
3 Answers

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!

I've had the same error before, and I did 2 things:

  1. Actually installed react-native-reanimated by typing yarn add react-native-reanimated@next in cmd.
  2. Made sure everything in my expo was up to date by typing expo update and pressing y to get every module on the compatible version.
  1. Stop the server
  2. run expo r -c to clear the cache.
Related