CODEWITHSUNDEEP
androidiosreact-nativereact-native-reanimated-v2
lewis machilika
lewis machilika

Reputation: 897

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

Upvotes: 27

Views: 66790

Answers (8)

Vahid
Vahid

Reputation: 137

Add this to babel.config.js file:

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

then run this to clear cache and restart development server:

npx expo start --clear

learn more on expo official doc.

Upvotes: 1

Gilad M
Gilad M

Reputation: 1010

I am using react-native 0.69.3 and also had an issue with compiling [email protected]. I updated to @2.11.0 and it fixed my compile error.

Upvotes: 2

STEPS KEITA
STEPS KEITA

Reputation: 51

According to react navigations drawer documentation.

  1. After installing all the packages

  2. To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

    import 'react-native-gesture-handler';

Now this might now work for you. To complete the installation you have to change your babel.config.js file add the following:

plugins: [...,"react-native-reanimated/plugin"]

Note ... just means your other plugins if you have. Remove it if you don't have any.

You are almost there. The final thing you have to know and do is:

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

You can reference the expo reanimated docs for more details

Upvotes: 1

Suman Thapa Magar
Suman Thapa Magar

Reputation: 269

[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/

Upvotes: 2

mehran minaei
mehran minaei

Reputation: 59

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

Upvotes: 2

olawalejuwonm
olawalejuwonm

Reputation: 1527

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.

Upvotes: 25

Waqas Ahmed
Waqas Ahmed

Reputation: 1411

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.

Upvotes: 36

Pirogrammer
Pirogrammer

Reputation: 172

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.

Upvotes: 1

Related Questions