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

Issue

I am new to React Native and this error isn't giving me much to go off of. I was wondering how to solve this. There seem to be a lot of unawnsered similar questions on here so I was wondering if this is new or a common issue.

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

I can't really provide enough of a code sample but I just started a feature with react-native-draggable-flatlist when I got this error.

---- UPDATE ----- I dove into what worklets were and started to learn about the React Natvie Reanimate library where I found that I needed to include the following in my babel.config.js

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

This led me to a new error where I got:

Error: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.5.1 vs 3.3.0).
See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated` for more details., js engine: hermes

I followed the steps provided and tehre was only one implementation of the package:

└─┬ [email protected]
  └── [email protected]

Then I set the override in package.json but I am still getting the same issue with the mixmatch. I even started expo with the -c flag to reset the cache.

Solution

So I found this solution following this:

Solution: Check if you have rebuilt your app after upgrading react-native-reanimated. If you use Expo Go, you must use the exact version which is bundled into Expo SDK.

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

If you followed me then remove the override before starting this process or you will have some issues.

Answered By - Josh Bowden