react-native-reanimated: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

I just accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

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

then restart the bundler using npm start -- --reset-cache

@Anuj-Raghuvanshi for now yarn start --reset-cache helps me.

@surajj2223 Could you show me your babel.config.js file also?

I could solve this by correctly putting in the react-native-reanimated/plugin in the babel.config.js

const path = require('path');
const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        alias: {
          [pak.name]: path.join(__dirname, '..', pak.source),
        },
      },
    ],
    'react-native-reanimated/plugin'
  ]
};

I was putting the reanimated plugin on top of plugins array, putting it at the last as mentioned in the docs resolved the issue for me.

Also, after correctly configuring the babel.config.js I had to do a yarn start --rest-cache which I assume is required as how would a running packager know about a new babel plugin on the fly. So yeah, folks please start your packager once you change the config, I do it generally whenever I have any file/folder changes too.

Issue validator

The issue is valid!

I put the reanimated plugin on bottom of my plugins array and ran yarn start --reset-cache but still am hitting Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Solved by adding:

and starting expo with expo start -c

If my example doesn’t work for you, most probably this is a cache issue. Try something like this:

rm -rf ./node_modules
yarn
cd ios
pod deintegrate
pod install
yarn start --reset-cache

I’m clean cache by

yarn cache clean

after run

expo r -c

it’s work for me

I just accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

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

then restart the bundler using npm start -- --reset-cache

I’m not believing that I so stupid 😄

Thanks!

@AnatuGreen try this way:

1. Install the last react-native-reanimated version.

yarn add react-native-reanimated@next

1. Add the reanimated plugin to babel.config.js

module.exports = function (api) {
  api.cache(true);

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

1. Clean cache!

yarn cache clean

1. Start

yarn start

Thank you.

I am using NPM, so I did this and it worked:

First I installed Re-animated 2:

expo install react-native-reanimated Then, I opened my babel.config.js and edited it so and saved:

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

Then I restarted my server and cleared cache: expo start --clear

I am also facing Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? after using yarn to attempt to recreate this example. I also followed these installation steps: https://docs.swmansion.com/react-native-reanimated/docs/installation/

I tried all the suggested steps above (using ios, haven’t tried other platforms)

Package versions: react-native: “0.63.2”, react-native-reanimated: “^2.0.0”, Xcode: 12.4

I see this issue posted on various forums over the past month. I’ve tried all of the promising fixes, but no dice.

Fixed this by downgrading react-native-reanimated

npm i react-native-reanimated@2.2.0

Same issue

after usage useSharedValue

  Extrapolate,
  interpolateColors,
  interpolateNode,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';```

@piaskowyk I have found the issue and create monorepo for this : https://github.com/fortezhuo/reanimated

Web

IOS

Hi, based on comments from this issue it seems like there are multiple solutions for it. You can try the following:

1. Make sure you have added Reanimated’s Babel plugin to babel.config.js:

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

Note that it must be the last on the list.

1. Reset cache: (yarn start --reset-cache or expo r -c if you’re using expo)
2. Check if you have more than one babel configuration file (babel.config.js, .babelrc)

I tried all the above options, but to work I had to add some @babel liberies to devDependencies:

"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
"@babel/plugin-proposal-optional-chaining": "^7.16.5",
"@babel/plugin-transform-arrow-functions": "^7.16.5",
"@babel/plugin-transform-shorthand-properties": "^7.16.5",
"@babel/plugin-transform-template-literals": "^7.16.5",
"@babel/preset-typescript": "^7.16.5", 

I was accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

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

then restart the bundler using npm start -- --reset-cache

you save my time bro huhuhuhu

when I leave only these imports: import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

Here is what worked for me in an expo project.

This is my 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 run stop the expo-server and run the following command:

expo r -c

It’s all done!! Good luck.

Not Working "react-native": "0.66.1", "react-native-reanimated": "2.2.3",

Working Fine "react-native": "0.67.3", "react-native-reanimated": "2.2.4",

For pure react-native run Ios Those steps you can try

1. yarn add react-native-reanimated@next （add @next to get the newest）

2. npx react-native start --reset-cache

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

In your root level babel.config.js, Add Reanimated Plugin just like Below;

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

then use below command

npx react-native start --reset-cache

I had this is before and what worked for me was to run the start command using npx like so: ❗ npx react-native start --reset-cache

Previously I have tried with yarn and npm and it didn’t work. Hope this helps.

WORKING SOLUTION With RN 0.67.

I installed version 2.4.1 with npm i react-native-reanimated@2.4.1 --force Deleted node_modules and re installed.

📌 My Other dependencies having below version

"react": "17.0.2",
"react-native": "0.67.3",
"react-navigation": "^4.4.3",
"react-navigation-drawer": "^2.5.0",
"react-navigation-stack": "^2.10.4",
"@react-navigation/drawer": "^5.9.0",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"@react-native-community/cli-platform-android": "^7.0.1",
"react-native-reanimated": "^2.4.1",
"react-native-gesture-handler": "^1.9.0",
"react-native-screens": "3.7.2",
"react-native-safe-area-context": "^3.4.1",
"@react-native-community/masked-view": "^0.1.11",

📌 Gradle used

distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-bin.zip

📌 Under android > build.gradle

classpath("com.android.tools.build:gradle:7.0.4")

📌 Under android > app > build.gradle

Must set enableHermes to true and Must clean & rebuild from Andtroid Studio project.ext.react = [ enableHermes: true, // clean and rebuild if changing ]

📌 Your babel.config.js should look like this

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

📌 Under MainApplication.java

1. below import statements

import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;

1. add below method under new ReactNativeHost(this) just below getJSMainModuleName() function

        @Override
        protected JSIModulePackage getJSIModulePackage() { 
          return new ReanimatedJSIModulePackage(); 
        }

📌 Done all above ? Then…

1. hit .\gradlew clean under Project > android folder
2. hit npx react-native start --reset-cache in terminal
3. hit npx react-native run-android in another terminal

Wohhaaaa 😎 ! You did it. 🚀🚀🚀🚀

I was having the same issue while using expo, so i did yarn cache clean first of all, and then expo r -c

and it works.

Unusable for me as well, get the same error both on 2.0.0 and 2.2.0. Tried all solutions mentioned above without success

Facing the same issue - Have followed the install step from the docs. No debugger, have reset all caches, added the plugin as the final item in the babel config plugins array. This is becoming a bit of a dealbreaker. Are people still facing this as well? I’ve tried different reanimated versions but none are working.

react-native: 0.66.0
react-native-reanimated: 2.3.0-beta.3 

Solved by adding:

and starting expo with expo start -c

Your an angel 💯

Fixed this by downgrading react-native-reanimated

npm i react-native-reanimated@2.2.0

This worked for me also, except needed react-native-reanimated@2.2.4 to get the RN 0.66 / 0.67 support

Hey Folks, we had a similar problem here at our company, it only happened in production. We found out that we had two babel config files in our projects(.babelrc and babel.config.js) and they had different contents. We deleted one of them and it fixed our problem, so please pay attention at this.

so I’ve tried all the suggestions from here and nothing has worked. this combination has worked for me:

const pak = require('./package.json');

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

and then

expo start -c

Solved by adding:

and starting expo with expo start -c

It helped me with my problem, thank you so much!

Is there any update about the problems with the lastest version ? i’m running RN: 0.67.3 with Reanimated 2.7.1 and i still get that same error.

This error goes away when I close the remote debugger. Debugging can be enabled in the app in iOS without a debugger connected and the error no longer occurs.

@fortezhuo Thanks a lot, I’ll check it as soon as possible.

If “expo start --reset-cache” does not work, use “expo start -c”.

Hi, based on comments from this issue it seems like there are multiple solutions for it. You can try the following:

1. Make sure you have added Reanimated’s Babel plugin to babel.config.js:

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

Note that it must be the last on the list.

1. Reset cache: (yarn start --reset-cache or expo r -c if you’re using expo)
2. Check if you have more than one babel configuration file (babel.config.js, .babelrc)

This worked for me. Thanks!!!

@AnatuGreen try this way:

1. Install the last react-native-reanimated version.

yarn add react-native-reanimated@next

1. Add the reanimated plugin to babel.config.js

module.exports = function (api) {
  api.cache(true);

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

1. Clean cache!

yarn cache clean

1. Start

yarn start

Thank you.

I am using NPM, so I did this and it worked:

First I installed Re-animated 2:

expo install react-native-reanimated Then, I opened my babel.config.js and edited it so and saved:

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

Then I restarted my server and cleared cache: expo start --clear

Solved the issue!!

For expo: https://docs.expo.dev/versions/latest/sdk/reanimated/

For those of you using expo, run expo start --clear whenever you change any config files (in this case, adding the plugin to babel) and if your application is already running, when the server starts up, force a refresh with r in the terminal. This fixed it for me 😃

Anyone knows if Reanimated 2 will ever work in debug mode?

This worked for me: https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba

I am on npm so i did npx react-native start --reset-cache which opens the terminal window, that i killed. went back and simply did npm run android then using local/tunnel connection to my Android device expo go. worked well for me.

The error occurs because when activating remote debug the useOnlyV1 flag becomes true (https://github.com/software-mansion/react-native-reanimated/blob/5d2cf0f7b6053a1b94b1d27570dee649f7d022a8/src/reanimated2/NativeReanimated.native.ts#L9)

I just confirmed that you can replicate it on the playground example:

• clone / react-native run-ios https://github.com/software-mansion-labs/reanimated-2-playground
• open dev menu and enable “debug”
• open dev menu and “reload”
• error appears.

This error goes away when I close the remote debugger. Debugging can be enabled in the app in iOS without a debugger connected and the error no longer occurs.

Same here. The only way I can get rid of it. I need the debugger though 😞

Solved by adding: and starting expo with expo start -c

Your an angel 100

This works for me

hello i had this problem too using ios i could resolve this doing this changes

somthing very important that i had to do is use this command :

npm start -- --reset-cache or the build do not works well

Is there any update about the problems with the lastest version ? i’m running RN: 0.67.3 with Reanimated 2.7.1 and i still get that same error.

Ok so for those who have this problem, it might look stupid but i found my problem and it was in my babel.config.js

for those who will be using alias in RN the return of the babel.config (before adding reanimated) will look like this

return { presets: [‘module:metro-react-native-babel-preset’], plugins: [ [ ‘module-resolver’, { extensions: [ ‘.js’, ‘.jsx’, ‘.ts’, ‘.tsx’, ‘.android.js’, ‘.android.tsx’, ‘.ios.js’, ‘.ios.tsx’, ], root: [‘./src’], alias: { ‘@components’: ‘./src/components’, ‘@api’: [‘./src/apis’], ‘@constants’: [‘./src/constants’], ‘@assets’: [‘./src/assets’], ‘@navigations’: [‘./src/navigations’], ‘@utils’: [‘./src/utils’], ‘@interfaces’: [‘./src/interfaces’], }, }, ], ], };

My problem was the fact that i added the ‘react-native-reanimated/plugin’ inside of the Array of “module-resolver” =>

return { presets: [‘module:metro-react-native-babel-preset’], plugins: [ [ ‘module-resolver’, { extensions: [ ‘.js’, ‘.jsx’, ‘.ts’, ‘.tsx’, ‘.android.js’, ‘.android.tsx’, ‘.ios.js’, ‘.ios.tsx’, ], root: [‘./src’], alias: { ‘@components’: ‘./src/components’, ‘@api’: [‘./src/apis’], ‘@constants’: [‘./src/constants’], ‘@assets’: [‘./src/assets’], ‘@navigations’: [‘./src/navigations’], ‘@utils’: [‘./src/utils’], ‘@interfaces’: [‘./src/interfaces’], }, }, ‘react-native-reanimated/plugin’, <------ my mistakes ], ], };

this line should be going there

return { presets: [‘module:metro-react-native-babel-preset’], plugins: [ [ ‘module-resolver’, { extensions: [ ‘.js’, ‘.jsx’, ‘.ts’, ‘.tsx’, ‘.android.js’, ‘.android.tsx’, ‘.ios.js’, ‘.ios.tsx’, ], root: [‘./src’], alias: { ‘@components’: ‘./src/components’, ‘@api’: [‘./src/apis’], ‘@constants’: [‘./src/constants’], ‘@assets’: [‘./src/assets’], ‘@navigations’: [‘./src/navigations’], ‘@utils’: [‘./src/utils’], ‘@interfaces’: [‘./src/interfaces’], }, }, ], ‘react-native-reanimated/plugin’, <---- it go there, before the end of the square bracket of ‘plugins’ ], };

Fixed this by downgrading react-native-reanimated npm i react-native-reanimated@2.2.0

This won’t work for react-native versions >0.64.*

Correct - see my reply above https://github.com/software-mansion/react-native-reanimated/issues/1875#issuecomment-1036034773

Fixed this by downgrading react-native-reanimated

npm i react-native-reanimated@2.2.0

Using expo, this worked for me. Perhaps something broke in 2.3?

In my case, i solved the issue by adding import 'react-native-gesture-handler' to the index.js and replacing the contents of the babel.config.js with module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ "react-native-reanimated/plugin", ], };

What worked for me was adding ’ react-native-reanimated/plugin ’ in the babel.config.js and running expo r -c

npm run start --reset-cache or npx react-native start --reset-cache don’t work for me.

Also I’m not debugging, I’m just running the app locally without any debuggers attached…

Still I get that error.

same problem on 2.2.0 if i disable remote debugger it works fine.

I get this if I have the remote debugger open, which reanimated is not compatible with.

can anyone tell why exactly placing “react-native-reanimated/plugin” at the end works? what exactly is this error about?

Description

Getting Issue in build compilation- Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? when "react-native-reanimated": "^2.0.1" is installed.

Expected behavior

It should keep the build running as it do for previous versions

Actual behavior & steps to reproduce

• I’ve Installed the latest version of plugin & and working in project created with latest React Native and getting issue.

Snack or minimal code example

package installation is throwing issue so,not any example code here.

Package versions

React Native - react-native-reanimated -

• React Native: 0.64.0
• React Native Reanimated: 2.0.1
• NodeJS: 14.16.0
• Xcode: 12.4

Affected platforms

• Android (Not checked)
• iOS (Checked on it)
• Web (Not checked)

Solution😉: https://www.lahoregraphix.com/drawer-navigation-errors-in-react-navigation/

I’m on React Native 0.67.3 and the only way I could solve this was to downgrade to npm install react-native-reanimated@2.2.4. Failing that, I would probably try v1.

Does anyone know if v1 requires Hermes? I’ve run into issues with debugging - Hermes crashes the app on Android, so I’ve disabled Hermes on iOS (since the reanimated docs doesn’t mention it as an iOS requirement). At least this way I can run react-navigation on both (Drawer navigation requires Reanimated lib), but now I can only debug through iOS. Not exactly ideal 😕

clearing expo cache worked for me yarn start -c. you might need to

rm -rf ./node_modules
yarn

cd android 
./gradlew clean

cd ios
pod deintegrate
pod install

yarn start -c
yarn android
yarn ios

Fixed this by downgrading react-native-reanimated

npm i react-native-reanimated@2.2.0

This won’t work for react-native versions >0.64.*

yarn start --reset-cache helped me.

@AnatuGreen try this way:

1. Install the last react-native-reanimated version.

yarn add react-native-reanimated@next

1. Add the reanimated plugin to babel.config.js

module.exports = function (api) {
  api.cache(true);

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

1. Clean cache!

yarn cache clean

1. Start

yarn start

Hit this upgrading to SDK 44. Only thing that worked for me is downgrading to reanimated 2.2.0. Now I get the following but the app actually works.

Some dependencies are incompatible with the installed expo package version:
 - react-native-reanimated - expected version: ~2.3.1 - actual version installed: 2.2.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]

Could solve my problem with deleting node_modules folder -> delete package-lock.json -> delete react-native-reanimated from package.json -> npm i -> npm i react-native-reanimated -> npx react-native start --reset-cache -> npx react-native run-android

I did everything here but it still doesn’t work. I have restarted my emulator and clear cache multiple times as well 😦 I wonder why

  ...
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ]
then enable Hermes in android/app/build.gradle

  project.ext.react = [
    enableHermes: true
  ]
Finally

 npm start --reset-cache

I’m using the bare Expo workflow and just did this in order to work:

Place ‘react-native-reanimated/plugin’ at the end of plugins in babel.config.js

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

then enable Hermes in android/app/build.gradle

  project.ext.react = [
    enableHermes: true
  ]

Finally

 yarn start --reset-cache

For me the solution it was that I had “show perf monitor” turned on. When I disabled it and restarted the application with “–reset-cache” I stopped getting this error

I have the same problem after upgrading to v2 (both 2. and 2.0.1). I will just continue to use v1 until things are sorted out. I am using NPM and was following the instructions mentioned on the website and in this thread exactly.

@piaskowyk any updates on a fix for this issue? I’d be happy to help in any way possible

This worked for me

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

Hi, i just take the issue after i made babel.config.js to module.exports = { presets: [‘module:metro-react-native-babel-preset’], plugins: [‘react-native-reanimated/plugin’] }; and i did yarn add react-native-reanimated { “name”: “keyLog”, “version”: “0.0.1”, “private”: true, “scripts”: { “android”: “react-native run-android”, “ios”: “react-native run-ios”, “start”: “react-native start”, “test”: “jest” }, “dependencies”: { “@react-native-async-storage/async-storage”: “^1.19.1”, “@react-native-community/datetimepicker”: “^7.4.1”, “@react-native-picker/picker”: “^2.4.10”, “@react-navigation/native”: “^6.1.7”, “@react-navigation/native-stack”: “^6.9.13”, “@shanshang/react-native-pattern-lock”: “^1.0.1-rc.1”, “accordion-collapse-react-native”: “^1.1.1”, “axios”: “^1.4.0”, “date-fns”: “^2.30.0”, “lodash”: “^4.17.21”, “react”: “18.2.0”, “react-native”: “0.72.3”, “react-native-debounce-input”: “^1.0.5”, “react-native-device-info”: “^10.8.0”, “react-native-geolocation-service”: “^5.3.1”, “react-native-gesture-handler”: “^2.12.1”, “react-native-gesture-password”: “^0.4.0”, “react-native-google-places-autocomplete”: “^2.5.1”, “react-native-keyboard-aware-scroll-view”: “^0.9.5”, “react-native-maps”: “^1.7.1”, “react-native-modal”: “^13.0.1”, “react-native-modal-datetime-picker”: “^17.0.0”, “react-native-permissions”: “^3.8.4”, “react-native-pin-view”: “^3.0.3”, “react-native-reanimated”: “^3.4.2”, “react-native-responsive-dimensions”: “^3.1.1”, “react-native-responsive-screen”: “^1.4.2”, “react-native-restart”: “^0.0.27”, “react-native-safe-area-context”: “^4.7.1”, “react-native-screens”: “^3.22.1”, “react-native-svg”: “^13.12.0”, “react-native-svg-transformer”: “^1.1.0”, “react-native-swiper”: “^1.6.0”, “react-native-vector-icons”: “^10.0.0”, “react-native-viewport-units”: “^0.0.5”, “react-query”: “^3.39.3”, “recoil”: “^0.7.7”, “styled-components”: “^6.0.5” }, “devDependencies”: { “@babel/core”: “^7.20.0”, “@babel/preset-env”: “^7.20.0”, “@babel/runtime”: “^7.20.0”, “@react-native/metro-config”: “^0.72.9”, “@tsconfig/react-native”: “^3.0.0”, “@types/react”: “^18.0.24”, “@types/react-test-renderer”: “^18.0.0”, “babel-jest”: “^29.2.1”, “jest”: “^29.2.1”, “metro-react-native-babel-preset”: “0.76.7”, “react-test-renderer”: “18.2.0”, “typescript”: “4.8.4” }, “engines”: { “node”: “>=16” } } This is my package.json Then , i did yarn cache clean, also did yarn android then ./gradlew clean then i turned on app but i got a problem i have a error message Error: Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin., js engine: hermes can you resolve it? help me plz

re-animated is the only native lib that requires all those complicated steps to get it to work between minor version increases/decrease. Can anyone explain why that is? A simple re-install should invalidate the former pod and compiled binary code, shouldn’t it?

If my example doesn’t work for you, most probably this is a cache issue. Try something like this:

rm -rf ./node_modules
yarn
cd ios
pod deintegrate
pod install
yarn start --reset-cache

This helped me, working fine now 🚀

Heyo everyone! Adding the plugin on babel.config.js and running expo start --clear worked for me! I’m using react-native-reanimated at version 2.3.1 (ps: project with expo)

I tried all the above options, but to work I had to add some @babel liberies to devDependencies:

"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
"@babel/plugin-proposal-optional-chaining": "^7.16.5",
"@babel/plugin-transform-arrow-functions": "^7.16.5",
"@babel/plugin-transform-shorthand-properties": "^7.16.5",
"@babel/plugin-transform-template-literals": "^7.16.5",
"@babel/preset-typescript": "^7.16.5", 

@filipebarbosa This solution works for me. Thanks a lot.

ah yes this now works for me also with react-native-reanimated@2.4.1 + RN 0.66.2, think I hadn’t cleared the cache properly before, thanks @filipebarbosa!

Still present with version 2.4.1 on android Setting the plugin doesn’t help.

Fixed this by downgrading react-native-reanimated

npm i react-native-reanimated@2.2.0

This worked for me…Thanks a Lot

Based on : https://github.com/software-mansion/react-native-reanimated/issues/1875#issuecomment-996187289

If you don’t want to add all these @babel libs, you can add @babel/preset-env and @babel/preset-typescript with yarn add -D @babel/preset-env and yarn add -D @babel/preset-typescript

Here a solution from me

const presets = ['module:metro-react-native-babel-preset']
const plugins = []

plugins.push([
  'module-resolver',
  {
    root: ['./src'],
    extensions: ['.js', '.json'],
    alias: {
      '@': './src',
    },
  },
])

plugins.push('react-native-reanimated/plugin')

module.exports = {
  presets,
  plugins,
}

Fixed this by downgrading react-native-reanimated

npm i react-native-reanimated@2.2.0

This is the only solution that worked for me. But the issue with this is that this version is no longer actively maintained according to the react-native-reanimated official website. How do we solve this issue?

I copied from a text the following versions and it works “react-native-reanimated”: “~1.2.0”, “react-navigation-drawer”: “^2.2.2”,

then, babel.config.js looks like this: module.exports = function (api) { api.cache(true); return { presets: [“babel-preset-expo”], }; }; Finally, use expo r -c (as I used expo). Hope this helps.

npm start – --reset-cache

But my babel.config.js is just this:

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

No solution working for me.

i tried all the above solutions with different versions but no success.

For pure react-native run Ios Those steps you can try

1. yarn add react-native-reanimated@next （add @next to get the newest）
2. npx react-native start --reset-cache
3. 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'],
};

Above reply works for me. Also I had to update the pattern I was following to do animation. Use all new apis provided to do any sort of custom animation.

If you add Flipper you won’t need the debugger.

Thanks for the hint. I will try it out. react-native-debugger seemed to not working properly anymore anyways.

Hi,
If you keep getting this error, check if remote debug is activated. Reanimated 2 with expo is not possible to use, so just disable it , here is a link: https://stackoverflow.com/questions/45615032/disable-debugging-in-expo-for-react-native-app this was the only way to solve my problem

First you must understand that the warning that appears is due to the fact that Reanimated 2 is in alpha phase, so there may be problems with the RN 0.65 version (current) and the Reanimated version (^ 2.) When installing it from React Navigation or with the command => $ yarn add react-native reanimated.

To fix that warning:

1. They should install the latest version of Reanimated with the command => $ yarn add react-native-reanimated@2.3.0-alpha.3 and add the following plugin integration in the babel.config.js of their projects.

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

2.- You must activate Hermes (Javascript engine to optimize load time and memory consumption in our applications) in android / app / build.gradle:

project.ext.react = [
enableHermes: true, // clean and rebuild if changing
]

3.- Inject Reanimated in the MainApplication.java and create an override for the new JSIModulePackage.

import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add

After the getJSMainModuleName () method …

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

4.- Finally:

 $ cd yourApp / android /

 $ ./gradlew clean

 $ npx react-native run-android 

Ok for me what fixed it was moving my babel declaration outside of package.json and into babel.config.js

I’ve a react native bare app, after installing the drawer and follow the steps: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation for android and ios get errors: 1 of 3 tasks Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated’s babel plugin?

I solve it clean cache:

npm run start --reset-cache

Reanimated 2 doesn’t work in Debug mode. Stop your debugging mode and it should work.

upgrade your npm to latest version delete node-modules folder do npm install do npx react-native run-android

This fixed the issue for me

I didn’t enable debug mode,but i had the same problem, when I use this way to load RCTBridge

// didFinishLaunchingWithOptions
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:[Method returnBundle]
                                                        moduleName:@"your moduleName"
                                                 initialProperties:nil
                                                     launchOptions:launchOptions];

I just change the RCTBridge loading mode to this

// didFinishLaunchingWithOptions
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:'your moduleName'
                                              initialProperties:nil];

// delegate method
+ (NSURL*)jsCodeLocation {
    NSURL *jsCodeLocation;
#ifdef DEBUG
      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
      jsCodeLocation = [CodePush bundleURL];
#endif
    return jsCodeLocation;
}

it works for me

@dawidchyrzynski seemed like a temporary notification due to alpha V2 things. So it that a permanent decision, I’m trying to understand.

Flipper debugging works fine! Its only the “Debug with Chrome”

https://github.com/facebook/react/tree/master/packages/react-devtools

React Native Debugger seems to integrate the same way as ‘debug with chrome’

What’s the difference between Flipper and how the official tool does debugging? (I want to understand why Reanimated only supports flipper or how it even matters)

edit 1: I stumbled across this thread: https://github.com/react-native-community/discussions-and-proposals/issues/206

I’m sold, I also want to move towards not remote debugging The yellow warning just doesn’t make sense, especially when upgrading from Reanimated 1 - any kind of debugging being on or off should not cause complete failure of the library.

Thanks for your patience

edit 2 Tried flipper, on Windows 10 it’s fantastic on a MacBook Pro it’s garbage, sends it into complete overdrive like a full Blender Render or Release Bundling does, for the entire time Flipper is open.

Don’t like it.

Make sure you have remote debugging disabled.

Is this a hard line?

1. As in, will this library simply not support ‘remote debugging’?

If it breaks debugging support, it means I will not use it.

1. Is that the only issue with this ‘worklet’ bug?

Make sure you have remote debugging disabled.

I have the same problem after upgrading to v2 (both 2. and 2.0.1).

2.1.0 here on RN 0.64 + React 17 and the issue persists

Weird part, those weird Babel steps + Native Java code changes aren’t needed for:

import Animated, { EasingNode } from 'react-native-reanimated';

but if you:

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming
} from 'react-native-reanimated';

the app hard crashes with ‘Reanimated 2 failed to create a worklet’