Error: [Reanimated] `valueUnpacker` is not a worklet, js engine: hermes

[stefanofgithub]

Description

When the application is opened it returns the error in question.

package:

 "@react-native-firebase/app": "^18.5.0",
 "@react-native-firebase/messaging": "^18.5.0",
 "@react-navigation/bottom-tabs": "^6.5.9",
 "@react-navigation/drawer": "^6.6.4",
 "@react-navigation/native": "^6.1.8",
 "@react-navigation/native-stack": "^6.9.14",
 "react": "18.2.0",
 "react-native": "0.72.5",
 "react-native-gesture-handler": "^2.13.1",
 "react-native-reanimated": "^3.5.4",
 "react-native-safe-area-context": "^4.7.2",
 "react-native-screens": "^3.25.0",

Steps to reproduce

yarn && cd ios && pod install && cd .. && yarn ios cache clean

Snack or a link to a repository

.

Reanimated version

3.5.4

React Native version

0.72.5

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

None

Build type

Debug mode

Device

iOS simulator

Device model

Any

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[stefanofgithub]

my babel.config.js

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

[stefanofgithub]

Apparently solved only by installing "react-native-reanimated": "^3.6.0-nightly-20231009-59ef55fcb", but other problems follow

[Latropos]

@tomekzaw It seems related to newly introduced API for integrating with worklers:

• Documantation
• Introduced in https://github.com/software-mansion/react-native-reanimated/pull/4944

[Latropos]

@stefanofgithub Do you use createWorkletRuntime in your code? Was the app working before?

[tomekzaw]

@stefanofgithub Not sure if yarn ios cache clean is a correct command here.

Can you please try yarn start --reset-cache in order to reset Metro bundler cache?

[dianatalpos]

Having the same issue here. I am using npx expo run:ios to start the app and I tried also with npx expo run:ios --no-build-cache. No result.

I also tried installing different versions of reanimated, couldn't find one to work on my env. I ended by giving up, but if you have other solutions to try I would be very grateful.

Packages: "react-native": "0.70.8", "react-native-reanimated": "^3.5.4", (and many more)

[tomekzaw]

@dianatalpos Can you please share a repro with us so we can take a look at it?

Also, --no-build-cache seems to be a Gradle flag (see here) and not related to this issue. Could you please try running npx expo start -c in order to reset Metro bundler cache?

[dianatalpos]

@tomekzaw I cannot share the original repo, but I will create a new app with the same dependencies and share it with you as soon as possible. As I ran the expo prebuild, the app cannot be run using the start command, I have to start it on specific platform.

[hitendramalviya]

I'm encountering a similar problem and receiving the exact same error.

I'm going to attempt downgrading the version once more, even though it failed before. I will also try creating a project from scratch and then share my findings with you.

[tomekzaw]

Hey @hitendramalviya, thanks for your comment. Can you please let us know if yarn start --reset-cache works for you? Do you have plugins: ['react-native-reanimated/plugin'] in your babel.config.js?

[dsf3449]

I just ran into this issue while updating to 0.72.5 and adding the babel plugin fixed it. Thanks :)

[stefanofgithub]

@stefanofgithub Not sure if yarn ios cache clean is a correct command here.

Can you please try yarn start --reset-cache in order to reset Metro bundler cache?

Hi, thanks for your support. The command "yarn start --reset-cache" don't work but before opening this issue I tried to:

• on simulator "erase all content and settings"
• from xCode Product -> clean build folder

in my case, after many attempts, the only command that did not give an error for resetting the cache was:

• yarn ios cache clean

At the moment I solved it (unfortunately) by removing the navigation drawer and putting the menu button in the bottom tab navigator. This is a temporary solution. In the meantime, I await developments from this report. Thank you all

[stefanofgithub]

createWorkletRuntime

@Latropos hi, no I don't use createWorkletRuntime

[dianatalpos]

@tomekzaw, I tried with a separate project. It all worked as expected :), tried in my project and was not working. The next day I tried again, it worked. Honestly, I don't know how this happened.

[tomekzaw]

@dianatalpos Thanks for letting us know! In this ecosystem, sometimes even a reboot is the solution 😉

[sean-fletching]

I'm also getting this same error; however, so far as I've tested on Android, it doesn't occur when I build a preview release... it's only occurring when I'm running locally on an expo-dev-client instance in Android.

When I built a fresh app using the expo templates, it worked fine. In my own app it's borked, but there's a lot of differences between the two so I'm not that surprised.

The deets:

• new unreleased app in development
• followed all the installation directions as far as I understood them incl. the babel piece
• just added reanimated 3.5.4
• expo 49 app with react-navigation
• managed workflow
• expo-dev-client
• I'm on a chromebook and I don't build anything native
• node 18.16.1

I'll report back if I find anything else peculiar.

[tomekzaw]

@sean-fletching Did you remember to reset Metro cache?

[sean-fletching]

@sean-fletching Did you remember to reset Metro cache?

Yes sir. In fact I just followed this clear cache procedure and it too has resulted in no difference.

Here's my (slightly different) error FWIW:

[sean-fletching]

@tomekzaw I'm currently pairing down my app to see if I can draw out the issue - if I'm unsuccessful, then I'll have a minimal repro example to share 🥂

Update 💯 resolved!

I failed to notice the structure of my babel.config.js had my plugins array nested under env.production hence it did not work in development but did in production.

[Kamaldixit]

installing all packages(except expo react & react-native) with npx expo install worked for me

[JessyAngel07]

Hey @hitendramalviya, thanks for your comment. Can you please let us know if yarn start --reset-cache works for you? Do you have plugins: ['react-native-reanimated/plugin'] in your babel.config.js?

i have same issue even if i add this in babel

[tomekzaw]

@JessyAngel07 do you run yarn start --reset-cache?

[JessyAngel07]

@JessyAngel07 do you run yarn start --reset-cache?

yes i did...still i got the issuee

[JessyAngel07]

@JessyAngel07 do you run yarn start --reset-cache?

@tomekzaw what shall i do??

[D-Cabs]

@JessyAngel07 Please try to delete pod.lock file

remove from package.json reanimated and gesture then run -> npm install react-native-reanimated react-native-gesture-handler -> pod install

-> npx react-native start --reset-cache

Should be good?

[JessyAngel07]

@JessyAngel07 Please try to delete pod.lock file

remove from package.json reanimated and gesture then run -> npm install react-native-reanimated react-native-gesture-handler -> pod install

-> npx react-native start --reset-cache

Should be good?

@D-Cabs i'm using android

[D-Cabs]

delete your node_modules and install node_modules again with npm install. In Android studio press file in top bar and select invalidate caches. Hope you can get it sorted. @JessyAngel07

[Craigujeez]

@JessyAngel07 this link solved my issue for me . https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin

basically you would need to add the "react-native-reanimated/plugin" plugin to your babel.config.js file and rebuild your app so it can fix the error

[oualidor]

Unlike what we used to do in V1 of renimated, your need to DONT use import 'react-native-reanimated'; in yout index and App files. I am resuming that you followed the installation guide constructions, I mean you did add plugins to your babel.config.js.

[mikepro4]

i Also had this issue and all it did for me was yarn start --reset-cache. All good.

[hitendramalviya]

Hey @hitendramalviya, thanks for your comment. Can you please let us know if yarn start --reset-cache works for you? Do you have plugins: ['react-native-reanimated/plugin'] in your babel.config.js?

Thank you, @tomekzaw. I forgot to share the updates and solutions that worked for me, which might be beneficial for others. Here are the steps I took:

• I configured plugins in the Babel config file.
• I executed npx pod-install.
• I ran npm start -- --reset-cache.
• Finally, I initiated the iOS build using npm run ios.

[WellingtonDefassio]

Hey @hitendramalviya, thanks for your comment. Can you please let us know if yarn start --reset-cache works for you? Do you have plugins: ['react-native-reanimated/plugin'] in your babel.config.js?

this work for me.

• "react-native": "0.72.7",
• "react-native-reanimated": "^3.5.4",

[trucuit]

same issue:

"react-native-reanimated": "^3.5.4",
"react-native": "0.72.6",

[iamjiko]

Mine got fixed by adding react-native-reanimated/plugin last. in the babel.config.js -> plugins array.

[tomekzaw]

Solution

Read the docs. Installation

Step 1: Install the package

yarn add react-native-reanimated
npm install react-native-reanimated
npx expo install react-native-reanimated

⚠️ Step 2: Add Reanimated's babel plugin

babel.config.js

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

⚠️ Step 3: Clear Metro bundler cache

yarn start --reset-cache
npm start -- --reset-cache
npx expo start -c