androidiosreact-nativereact-native-reanimated-v2

"Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?"


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

Solution

  • 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.