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

Question

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?

score 139 · Answer 1 · edited Apr 07 '22 at 10:05

139

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

edited Apr 07 '22 at 10:05

user1

4,031
8
37
66

answered Sep 24 '21 at 15:20

Emad Baqeri

2,333
2
14
29

41

For my folks using expo, on the last step, step 4, use expo r -c instead – Proff Mushiana Mulweli Dec 07 '21 at 10:53
7

Feb 2022: cache cleaner is a killer thing that made everything works for me, thanks. Besides, everything works fine even without step 2, though it is recommended in docs during installation – pch Feb 02 '22 at 18:52
1

Just this comment solved the issue. expo r -c – M.Kalidass Apr 12 '22 at 10:53
1

For others still having issues, don't foget about `.babelrc` I had both `babel.config` and `.babelrc` and wasn't adding it to `.babelrc` – codewizard May 02 '22 at 16:36
1

My config was already ok. Reset cache did the job. I guess configuring it is pretty easy and straight forward following the installation guide. That's why cache was the problem for most of us. – KeitelDOG May 15 '22 at 00:54
I should mention that by running `yarn add react-native-reanimated@next` you are going to have `reanimated@3^` installed in your project – Emad Baqeri Jun 18 '22 at 14:48
1

Step 4 is the key. – Soul Clinic Jun 23 '22 at 08:04
1

After doing the above mentioned change, running the command `expo r -c` worked for me. – Sadhvik Chirunomula Jun 30 '22 at 11:58
1

I only use `expo r -c` and it works. – Nam Lee Aug 13 '22 at 16:00

crispengari · Answer 2 · 2022-04-12T17:12:25.983

100

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.

edited Apr 12 '22 at 17:12

answered Aug 07 '21 at 17:26

crispengari

7,901
7
45
53

2

I was updating my expo project......you may have just prevented me from having a stroke.... – Jo Momma Dec 29 '21 at 19:23
2

Logged in just to upvote this. Thanks! – tenshi Apr 09 '22 at 00:43
1

This works in for my expo project. THANKS – oluwashola 1100 Jun 24 '22 at 01:57
This worked for me today on expo 44 version. – Faisal Shahzad Sep 05 '22 at 06:18
just excellent. thanks dear – Sajib saha Apr 04 '23 at 05:23
That work, It works, the documentation makes it very easy for us to misunderstand: module.exports = { presets: [ ... ], plugins: [ ... 'react-native-reanimated/plugin', ], }; – Viết Kenji Gi Jul 13 '23 at 02:07

score 50 · Answer 3 · edited Jan 19 '22 at 19:27

50

Clearing the cache worked for me, run:

npx react-native start --reset-cache

edited Jan 19 '22 at 19:27

Rafael Tavares

5,678
4
32
48

answered Jun 13 '21 at 16:17

Hussain Pettiwala

1,406
8
16

1

In my case, It also required me to install react-native-gesture-handler – Haris Apr 27 '22 at 21:42

score 24 · Answer 4 · edited Jan 19 '22 at 19:26

24

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

edited Jan 19 '22 at 19:26

Rafael Tavares

5,678
4
32
48

answered May 30 '21 at 11:10

GeorgeWashingMachine

251
1
5

score 22 · Answer 5 · answered Nov 11 '21 at 08:20

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

score 15 · Answer 6 · edited Jan 19 '22 at 19:33

15

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

npm install react-native-reanimated@~2.2.0

edited Jan 19 '22 at 19:33

Rafael Tavares

5,678
4
32
48

answered Jan 07 '22 at 09:26

Aastha Sharma

151
1
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 07 '22 at 11:02
2

i was stuck for 5 hour then i found this and solved my problem thank you – Saurabh Chavan Feb 01 '22 at 11:25
worked for me from 2.3 to 2.2 – Mathias Bradiceanu Mar 12 '23 at 09:57

Jun De Leon · Answer 7 · 2022-03-21T14:54:54.050

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.

Since last few days I was facing an issue and was not able to fix this. However your steps helps me and now I fixed this. You saved me. Thansk a million. Keep up th good work — Sachin Shah, Apr 21 '23 at 16:49
From your react-native directory, you can also use `npx react-native clean` to more quickly clean your project instead of typing all those commands — Angus Ryer, May 26 '23 at 18:19

score 4 · Answer 8 · answered Dec 28 '21 at 12:00

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

Run

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

score 4 · Answer 9 · answered Mar 11 '22 at 13:43

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

score 3 · Answer 10 · answered Apr 02 '22 at 04:22

3

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

answered Apr 02 '22 at 04:22

Abhishek Singh

93
1
11

just copy of babel.confi.js my code and paste it to yours – Abhishek Singh Apr 02 '22 at 04:35
expo r -c is for clearing cache of your project – Abhishek Singh Apr 16 '22 at 00:44
1

Can you [edit] your answer to include your comments, and then delete your comments? Comments are useful for the community to ask for clarification, but as the author of the answer, it's better to just update your answer to be fully self-contained, without relying on the comments for further clarification. – Jeremy Caney Apr 25 '22 at 21:37
But here are i nothing comments are added – Abhishek Singh May 03 '22 at 04:23

score 2 · Answer 11 · answered Apr 22 '21 at 08:50

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

score 2 · Answer 12 · edited Jan 19 '22 at 19:32

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

score 2 · Answer 13 · answered Mar 16 '22 at 07:53

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

score 1 · Answer 14 · answered Dec 05 '21 at 05:56

1

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.

answered Dec 05 '21 at 05:56

Zeeshan Ashraf

33
4

score 1 · Answer 15 · answered Jan 26 '22 at 21:51

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.

score 1 · Answer 16 · edited Apr 17 '22 at 02:29

1

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.

edited Apr 17 '22 at 02:29

benson23

16,369
9
19
38

answered Apr 08 '22 at 10:02

user18745546

19
1

score 0 · Answer 17 · answered Sep 13 '21 at 02:57

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

score 0 · Answer 18 · answered Jan 07 '22 at 10:09

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'],
};

score 0 · Answer 19 · answered Mar 16 '22 at 20:41

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

score 0 · Answer 20 · answered Mar 18 '22 at 09:52

0

If you are using expo, what worked for me is

expo doctor --fix-dependencies

answered Mar 18 '22 at 09:52

Nick Arnie

160
1
3
10

score 0 · Answer 21 · edited Apr 10 '22 at 01:34

0

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

edited Apr 10 '22 at 01:34

Jozzeh

841
10
28

answered Apr 06 '22 at 10:40

Vipin Chauhan

94
1
2

score 0 · Answer 22 · answered Jul 14 '22 at 21:59

I had to upgrade from 2.8.0 to 2.9.1 (the latest stable version). Also 3.0.0-rc worked too.

You can see the latest versions on the Versions tab here.

Change it in your package.json file:

"react-native-reanimated": "2.9.1",

And run yarn again to download the package.

We had a .babelrc and babel.config.json and only the config had our reanimated plugin so I consolidated them but that didn't fix the issue.

score 0 · Answer 23 · answered Dec 29 '22 at 07:44

For "react-native-reanimated": "~2.12.0"

Step 1:

Add import 'react-native-gesture-handler' to App.ts file at the top of the file before importing any packages

Step 2:

Go to the babel.config.js and add plugins array:-

module.exports = function (api) {   

api.cache(true);  

 return {     '

        presets: ["babel-preset-expo"],     
        plugins: ["react-native-reanimated/plugin"//must be in the end of plugins array],
  };

 };

Step 3:

Run npx expo -c

Resources:

*1.*https://reactnavigation.org/docs/drawer-navigator

2-https://www.reanimated2.com/docs/fundamentals/installation

3-https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba/68694681#68694681

score 0 · Answer 24 · answered Mar 06 '23 at 08:29

0

set you babel.config.js in the main directory like as below

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

answered Mar 06 '23 at 08:29

Salman

191
9

score 0 · Answer 25 · answered Mar 12 '23 at 13:02

0

I got this error when after add React-Navigation to my React-Native project.

Close Metro
gradlew clean //if need
Close emulator
delete app //if need
npx react-native start --reset-cache

its works for me.

answered Mar 12 '23 at 13:02

Tugay Tuna

11
3

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

25 Answers25

Linked