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

This is my babel file

My code:

import React, { useRef, useState } from 'react'
import { View, useWindowDimensions, Button } from 'react-native'
import Animated, { runOnUI } from 'react-native-reanimated';

export default function Login() {
    const { width, height } = useWindowDimensions();
    // const value = useSharedValue(0);
    function someWorklet(greeting: any) {
        'worklet';
        console.log("Hey I'm running on the UI thread");
    }

    return (
        <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
            <Button title="click me" onPress={() => runOnUI(someWorklet)('Howdy')} />
        </View>
    );
}

The package I installed is "react-native-reanimated": "^2.1.0"

I followed their installation process: React Native Reanimated instalation guide.

The error is:

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

react-native react-native-reanimated-v2

Solution 1:^[1]

I have found this issue on this link. These are the steps that I have followed for having my project up and running without any errors:

Run yarn add react-native-reanimated@next react-native-gesture-handler
I have added import 'react-native-gesture-handler' to App.tsx file at the top of the file before importing any packages
You should update the babel.config.js file and add react-native-reanimated/plugin to plugins

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
  ],
};

The last thing you should do is run your project by removing the cache yarn start --reset-cache

Solution 2:^[2]

Here is what worked for me in an Expo project.

This is my babel.config.js.

Note that react-native-reanimated/plugin must be at the last plugin in the plugins array of the babel.config.js.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

Make sure you add react-native-reanimated/plugin as the last element of the plugins

Then stop the expo-server and run the following command:

expo r -c

It's all done.

Solution 3:^[3]

Clearing the cache worked for me, run:

npx react-native start --reset-cache

Solution 4:^[4]

If you are using Expo try to start your app with expo r -c in order to clear caches associated with your project.

Solution 5:^[5]

Just add the below code in babel.config.js

 module.exports = {
      presets: ['module:metro-react-native-babel-preset'],

      // add the below line 
      plugins: ['react-native-reanimated/plugin'], 
     // this should be always last line
    };

then if you need to clear the package manager cache and start it clean if you are using

yarn

yarn start --reset-cache

npx

npx react-native start --reset-cache

and it worked for me

Solution 6:^[6]

I faced the same issue. The following command solved the issue:

npm install react-native-reanimated@~2.2.0

Solution 7:^[7]

I also came around this problem while implementing the reanimated 2 package. For me it seems a half configured installation issue. I am using React Native CLI and Windows Machine. This is what worked for me :

Delete the node_modules folder and run this just to be sure.

npx react-native start --reset-cache

npm install

In babel.cofig.js add these lines. the Reanimated plugin has to be the last item in the plugins array.

//babel.config.js
module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin', // << add
      ],
  };

Turn on Hermes engine by editing android/app/build.gradle

project.ext.react = [
  enableHermes: true  
]

5.Plug Reanimated in MainApplication.java. This file is present in android/app/src/main/java/com/appname folder.

import com.facebook.react.bridge.JSIModulePackage; // << add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // << add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      **@Override //<<add this function
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); 
      }**
    };

This is actually availaible in there installation docs. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

Solution 8:^[8]

I just add react-native-reanimated/plugin to babel.config.json in plugins array

module.exports = {
  presets: [some thing],
  plugins: [
    "react-native-reanimated/plugin",
  ],
};

and after that expo start -c

and error solved no need do extra steps

Solution 9:^[9]

Just adding "plugins: ['react-native-reanimated/plugin']", in my babel.config did the trick for me.

My babel.config.js file look like this now.

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

then I fully cleaned my RN project by running these:

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock 
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache

You should run one by one or one line command.

watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && npm install && cd ios && pod update && cd ..

Hope this help to someone.

Solution 10:^[10]

Delete node_modules and reinstall, and make sure to delete all caches and all previous settings -- RN caches, packager caches, simulator caches and settings, etc. It might even help to go to a previous version of your app when you hadn't tried to install version 2 at all.

I am using expo and following all these steps was helpful :- https://forums.expo.io/t/how-to-clear-the-expo-and-react-native-packager-caches-metro-watchman-haste/1352

Solution 11:^[11]

Add this code in babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
         
      ],
    },
  },
  plugins: [ 
    [ 
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'], 
      },
    ],
    'react-native-reanimated/plugin'
  ]
};

and then rebuild your application or run yarn start --reset-cache

Solution 12:^[12]

In my condition i will change my babel.config.js to different this


module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

Don't Forget to type this command on your project directory


expo r -c

Solution 13:^[13]

Sometimes you have done all setups but you are getting errors then just type this cmd:

npx react-native start --reset-cache

It will be helpful.

Solution 14:^[14]

I had the same issue yesterday and when I did a Google search I landed here. After some digging here is what I understood:

Reanimated v2's latest version does not run in Expo when in debug mode. So I tried to open the developer options to turn off debugging by shaking the device but I was not able to.
Then I found that you can toggle to production mode once the Metro Bundler server connection is established. Once you toggle to production mode in Expo, the app works. Enabling Production mode in Expo

Solution 15:^[15]

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

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

Solution 16:^[16]

You can try

yarn add react-native-reanimated@next
npx react-native start --reset-cache

Add Reanimated's babel plugin to your babel.config.js.

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-typescript'
  ],
  plugins: ['react-native-reanimated/plugin'],
};

Solution 17:^[17]

I tried this on a freshly created expo project (tabs template). It generated the following default babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo']
  };
};

I added just one line, like this:

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

and cleared the rebuild cache (yarn start -c).

This worked for me.

Solution 18:^[18]

follow these steps

expo install react-native-reanimated
After the installation completed, add the Babel plugin to babel.config.js:

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

expo start --clear

Solution 19:^[19]

It's worked for me. My babel.config was:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
        'react-native-paper/babel',
        'react-native-reanimated/plugin',
      ],      
    },
  },
};

I changed to this:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
        'react-native-paper/babel',
        'react-native-reanimated/plugin',
      ]      
   
};

And did all the instructions at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

Solution 20:^[20]

If you are using expo, what worked for me is

expo doctor --fix-dependencies

Solution 21:^[21]

install expo
expo install react-native-reanimated
add babel.config.js
plugins: ['react-native-reanimated/plugin']
start server
expo start --clear

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	user1
Solution 2
Solution 3	Rafael Tavares
Solution 4	Rafael Tavares
Solution 5	Harvinder Singh
Solution 6	Rafael Tavares
Solution 7	Tommy
Solution 8	Raskul
Solution 9
Solution 10	Kat
Solution 11	Rafael Tavares
Solution 12	Abhishek Singh
Solution 13	benson23
Solution 14	B.Shankar
Solution 15	Zeeshan Ashraf
Solution 16	KitKat0225
Solution 17	raarts
Solution 18	Isaya Exavery
Solution 19	Thiago Freitas
Solution 20	Nick Arnie
Solution 21	Jozzeh

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]