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?

Description

I am trying to use createDrawerNavigator from import { createDrawerNavigator } from ‘@react-navigation/drawer’; in react native. However, I am getting the error above

Expected behavior

The expected behavior is to work as described in the documentation however on the ground it is different.

Actual behavior & steps to reproduce

Add import ‘react-native-gesture-handler’; at the top of my App.js In babel.config.js add reanimated/plugin as below

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

Snack or minimal code example

Below is my Drawer.js file

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>
  );
}

Package versions

• React Native:
• React Native Reanimated:

Affected platforms

• Android
• iOS
• Web

[lewisMachilika]

Run expo r -c After adding below code to babel.config.js

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

[patrickdunagan]

I had the same issue. Found this on Expo.

https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

add the plugins line to your babel.config.js

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