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

I am trying to use createDrawerNavigator from import { createDrawerNavigator } from '@react-navigation/drawer'; in react native. However, I am getting the error below, which I don't know how to solve.

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?

In babel.config.js I tried to add the below code but not working as well

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

Below is my component

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function MyDrawer() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}


Solution 1:[1]

Please complete the setup for react-native-reanimated. You have to add 'react-native-reanimated/plugin', in the babel.config.js file so the final code in babel.config.js will look like

module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

As state in the setup docs for react-native-reanimatedHere

Also you need to complete setup for android as well (if not done yet) as stated Here

If you are using expo then follow these steps

Finally, run expo r -c to clear the cache.

Solution 2:[2]

If you are using expo. Set this in babel.config.js:

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

Note: If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array

After you add the Babel plugin, restart your development server and clear the bundler cache: expo start --clear.

Solution 3:[3]

You must install according to these instructions:

[https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/][1]

Also, make no mistake Be careful where you write the following code

@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();  }

Solution 4:[4]

Make sure react-native-reanimated is up to date and the other packages are the same then try running npx react-native link react-native-reanimated.

If that didn't work you need to set up react-native-reanimated properly. Check out the documentation on how to set it up.

Solution 5:[5]

[Solution][1]

  yarn add react-native-reanimated
  cd ios
  pod install

And Import on either Index or App .js file import Animated from 'react-native-reanimated'; [1]: https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 lewis machilika
Solution 2 olawalejuwonm
Solution 3 mehran minaei
Solution 4 Pirogrammer
Solution 5 Sumanstm21