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

Question

This is my babel file

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"

I followed their installation process: React Native Reanimated instalation guide.

The error is:

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

Answer 1

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

4. The last thing you should do is run your project by removing the cache yarn start --reset-cache