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

[anujraghuvanshi]

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)

[github-actions]

Issue validator

The issue is valid!

[piaskowyk]

Hey @Anuj-Raghuvanshi
I have just checked it and everything works properly for me. I tested for iOS on this example project. Could you check if it works for you too?

[mrousavy]

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

this seems to be a completely other issue - what npm version are you on?

[mm-webx]

Same issue

after usage useSharedValue

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

[mm-webx]

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

[mm-webx]

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

[piaskowyk]

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

[vitalyrotari]

Today I get this error on RN 0.64 and react-native-reanimated 2.0.1, any suggestions?
Btw I have :hermes_enabled => true in my Podfile

[scottmcconnell5]

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.

[16francej]

Any updates on this fix? I haven't been able to resolve on my own. Similar to @scottmcconnell5, I have also tried the steps above with no luck.

Seems like this issue has been persistent for a little while, is there anything I can do to help resolution?

[LuisRego]

I'm also facing the same issue referred by @scottmcconnell5. Everything is working fine with v2.0.0.

Package versions:

• react-native: "0.63.4",
• react-native-reanimated: "2.1.0"
• Xcode: 12.4

[piaskowyk]

I tried to reproduce this issue but It works for me :/ Is it possible to prepare an example repo with this issue so I can easily reproduce it? @16francej or @LuisRego could you help?

[surajj2223]

Same issue with me on

dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.1.0"
  },

Did try resetting yarn cache and removing the modules and reinstalling multiple times, Not working.

[piaskowyk]

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

[fortezhuo]

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

Web

IOS

[surajj2223]

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

[piaskowyk]

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

[scottmcconnell5]

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?

[todorone]

I can't provide a reproduction, but we have a pretty big app which we want to migrate from REA1 to REA2. After following installation steps, all good on Android, but on iOS it throws error as soon as trying to use any of REA2 functionality: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Tried both REA 2.0.1 and 2.1, all type of caches were cleared.😼

[LuisRego]

I can't provide a reproduction, but we have a pretty big app which we want to migrate from REA1 to REA2. After following installation steps, all good on Android, but on iOS it throws error as soon as trying to use any of REA2 functionality: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Tried both REA 2.0.1 and 2.1, all type of caches were cleared.😼

Have you tried 2.0.0? In my case everything works fine with 2.0.0. Actually, I had the same error message with 2.0.0, but I wasn't adding as the last item in the array. I'm just bumping from 2.0.0 to 2.1.0.

[datvp09]

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

[scottmcconnell5]

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

[phungdaihiep79]

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

[olosegres]

I was getting this error after moving the project directory to another location. If, after react-native init, you do not rename the project and do not move it, there is no such error.

[fcandi]

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.

[aanah0]

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!

[bgarcia95]

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 🚀

[thareekanvar]

Solved by adding:

and starting expo with expo start -c

Your an angel 💯

[pke]

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?

[doverlor]

Solved by adding:

and starting expo with expo start -c

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

[ngirimana]

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

Your an angel 100

This works for me

[francoders]

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

[ayanmurad987]

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

[BoukhalHassane]

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/

[sokoya]

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

Yes, this works for me :)

[Fiyaz6772]

Solved it by changing babel.config.js like below:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'], //added this line
}

delete node-modules
yarn install
yarn start --reset-cache

[Kappyh]

expo start -c

This works for me too, thanks.
Also I add the plugin in the babelconfig file.

[mobius1983]

I had the same problem for more but nothing worked for me, so I installed yarn,
yarn install and yarn start --reset-cache

[leoki3331]

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

[jadonhansen]

I had a .babelrc and babel.config.js file in my project root. I combined the two config into one babel.config.js file (because in my case what was in .babelrc is okay to be in babel.config.js too).
End product:

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

Also then ran npm start -- --reset-cache.

This worked for me.

[sgsudip]

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

[BinGong92]

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

I would like to know what your packages look like?

[augusto-booment]

I still got this issue using react-native: "0.65"

[nabtron]

run using this command: npx react-native start --reset-cache

also make sure your code is similar to: files shown here: https://socalledhacker.com/react-native-drawer-navigation-without-any-errors/

[DeVontae316]

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

This worked for me plus running expo start -c with npx expo run:ios

[eternalclash]

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

[muzammil-majeed-viabletree]

@eternalclash Have you found the solution?

[prasanthvenkatachalam]

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

Thanks a lot. It worked for me.

[Adityakhare29]

I also encounter this issue because of version miss match of expo and reanimated modules.

I am able to fix this issue by following command

1. npx expo install --fix
2. npm start -- --reset-cache

[iambonface]

This worked for me

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