CODEWITHSUNDEEP
androidiosreact-nativereact-native-reanimated-v2
Ajay Pandey
Ajay Pandey

Reputation: 1008

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

How can I solve this error?

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

enter image description here

This is my babel.config.js file :

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

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

Upvotes: 84

Views: 182993

Answers (30)

wait_walker
wait_walker

Reputation: 21

For the latest version this should work

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
    [
        "@babel/plugin-transform-private-methods", 
        { loose: true }
    ],
    [
        'react-native-reanimated/plugin', 
    ]
]

};

Upvotes: 0

Devendra Singh
Devendra Singh

Reputation: 43

Here is my package version

"dependencies": {
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.10.1",
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-gesture-handler": "^2.19.0",
    "react-native-permissions": "^4.1.5",
    "react-native-reanimated": "^3.14.0",
    "react-native-safe-area-context": "^4.10.8",
    "react-native-screens": "^3.32.0",
    "react-native-vector-icons": "^10.1.0"
  }

This is my babel.config.js

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

I added

const config = {
    resetCache: true
};

in metro.config.js and 'react-native-reanimated/plugin' in babel.config.js and then running npm start -- --reset-cache solved the issue in my case.

Upvotes: 0

Muhammad Hassaan Bin Tanveer
Muhammad Hassaan Bin Tanveer

Reputation: 21

Sharing because this happened to me My Config was

{
    presets: ["babel-preset-expo"],
    env: {
      production: {
        plugins: ["react-native-paper/babel", "react-native-reanimated/plugin"],
      },
    },
  };
};

The config that worked for me (I was building for dev, but my config was set for production)

{
    presets: ["babel-preset-expo"],
    plugins: ["react-native-paper/babel", "react-native-reanimated/plugin"],
 
};

Upvotes: 0

Kazi Mahbubur Rahman
Kazi Mahbubur Rahman

Reputation: 153

I was facing the same issue

running npx expo start -c in my terminal solved this issue

Upvotes: 0

Joss
Joss

Reputation: 67

I recently encountered the same issue with my newly created Expo app and attempted the solutions discussed here without success. However, I managed to solve the problem with the following steps:

Initially, my babel.config.js looked like this:

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

I modified it to:

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

Subsequently, I cleared the cache and restarted the app using the following command:

npx expo start -c

A piece of advice for users of '@react-navigation/native': avoid adding the 'NavigationContainer' to your 'AppEntry' file.

This is how I successfully resolved my issue.

Upvotes: 4

Shivam Shukla
Shivam Shukla

Reputation: 121

I can help you to solve this error

Make sure Your have installed Reanimated

To install :

npm install react-native-reanimated

If you done it already that’s good

  • Now add this plugins in your babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'], --> // This one
};

Sometimes you have done all setups properly but still getting errors then just type:

npx react-native start --reset-cache

If still getting Errors: Close your terminal and simulator/Emulator and just type

\\ For Android 
 
npx react-native run-android

\\ For IOS

npx react-native run-ios

Hope This will Work !

Upvotes: 5

Tugay Tuna
Tugay Tuna

Reputation: 11

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

  1. Close Metro
  2. gradlew clean //if need
  3. Close emulator
  4. delete app //if need
  5. npx react-native start --reset-cache

its works for me.

Upvotes: 0

Salman
Salman

Reputation: 669

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

Upvotes: 0

Muhammad Faraz Ali
Muhammad Faraz Ali

Reputation: 970

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

react-native-reanimated

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

   

Upvotes: 0

Ian
Ian

Reputation: 2610

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.

Upvotes: 0

user18745546
user18745546

Reputation: 29

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.

Upvotes: 2

crispengari
crispengari

Reputation: 9321

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.

Upvotes: 114

Vipin Chauhan
Vipin Chauhan

Reputation: 112

  1. install expo
    expo install react-native-reanimated

  2. add babel.config.js
    plugins: ['react-native-reanimated/plugin']

  3. start server
    expo start --clear

Upvotes: 0

Emad Baqeri
Emad Baqeri

Reputation: 2692

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:

  1. Run yarn add react-native-reanimated@next react-native-gesture-handler
  2. I have added import 'react-native-gesture-handler' to App.tsx file at the top of the file before importing any packages
  3. 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",
  ],
};
  1. The last thing you should do is run your project by removing the cache yarn start --reset-cache

Upvotes: 166

Abhishek Singh
Abhishek Singh

Reputation: 103

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

Upvotes: 3

Jun De Leon
Jun De Leon

Reputation: 361

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.

Upvotes: 6

Nick Arnie
Nick Arnie

Reputation: 378

If you are using expo, what worked for me is

expo doctor --fix-dependencies

Upvotes: 0

Thiago Freitas
Thiago Freitas

Reputation: 23

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

Upvotes: 0

Isaya Exavery
Isaya Exavery

Reputation: 33

follow these steps

  1. expo install react-native-reanimated
  2. 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'],
  };
};
  1. expo start --clear

Upvotes: 2

Raskul
Raskul

Reputation: 2199

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

Upvotes: 4

raarts
raarts

Reputation: 2961

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.

Upvotes: 1

Aastha Sharma
Aastha Sharma

Reputation: 161

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

npm install react-native-reanimated@~2.2.0

Upvotes: 16

Karthikeyan Ganesan
Karthikeyan Ganesan

Reputation: 2035

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

Upvotes: 2

Hussain Pettiwala
Hussain Pettiwala

Reputation: 1674

Clearing the cache worked for me, run:

npx react-native start --reset-cache

Upvotes: 67

GeorgeWashingMachine
GeorgeWashingMachine

Reputation: 261

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

Upvotes: 25

vinhtranchau
vinhtranchau

Reputation: 595

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

Upvotes: 1

Tommy
Tommy

Reputation: 57

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 :

  1. Delete the node_modules folder and run this just to be sure.
npx react-native start --reset-cache
  1. Run
npm install
  1. 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
      ],
  };
  1. 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

Upvotes: 4

Zeeshan Ashraf
Zeeshan Ashraf

Reputation: 33

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.

Upvotes: 1

Harvinder Singh
Harvinder Singh

Reputation: 2069

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

Upvotes: 24

B.Shankar
B.Shankar

Reputation: 1

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

  1. 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.
  2. 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

Upvotes: 0

Related Questions