I am trying to use createDrawerNavigator via
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 the code below, but it's not working :
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
'react-native-reanimated/plugin',
]
};
};
Here 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>
);
}
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-reanimated
Here
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.