Как исправить ошибку Error: [Reanimated] Failed to create a worklet.?

Question

[Totobi]

После обновления реакта до 0.76 получаю данную ошибку при старте
Error: [Reanimated] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated... for more details. [Component Stack]
(NOBRIDGE) ERROR Error: [Reanimated] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated... for more details. [Component Stack]
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'isConfigured' of undefined

This error is located at:
in DrawerViewBase (created by DrawerView)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by DrawerView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by DrawerView)
in DrawerView (created by DrawerNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by DrawerNavigator)
in DrawerNavigator (created by MainNavigator)
in MainNavigator
in Unknown (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by AppNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by AppNavigator)
in AppNavigator (created by App)
in Provider (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in $97d95f6660b1bb14$export$9f8ac96af4b1b2ae (created by NativeBaseProvider)
in ToastProvider (created by NativeBaseProvider)
in PortalProvider (created by NativeBaseProvider)
in HybridProvider (created by NativeBaseProvider)
in ResponsiveQueryProvider (created by NativeBaseProvider)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by NativeBaseProvider)
in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in pos(RootComponent)

Проблема связана с данным компонентом

{
  "name": "pos",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@react-navigation/stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.2.7",
    "date-fns": "^3.6.0",
    "lodash": "^4.17.21",
    "native-base": "^3.4.28",
    "react": "18.3.1",
    "react-hook-form": "^7.53.0",
    "react-native": "0.76.1",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-intersection-observer": "^0.2.0",
    "react-native-pager-view": "^6.4.1",
    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.35.0",
    "react-native-svg": "^15.5.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^10.1.0",
    "react-native-web": "^0.19.12",
    "react-redux": "^9.1.2",
    "reselect": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0",
    "@react-native-community/cli-platform-android": "15.0.0",
    "@react-native-community/cli-platform-ios": "15.0.0",
    "@react-native/babel-preset": "0.76.1",
    "@react-native/eslint-config": "0.76.1",
    "@react-native/metro-config": "0.76.1",
    "@react-native/typescript-config": "0.76.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "eslint-plugin-prettier": "^4.2.1",
    "jest": "^29.6.3",
    "prettier": "^3.3.3",
    "react-native-debugger-open": "^0.4.3",
    "react-native-svg-transformer": "^1.5.0",
    "react-test-renderer": "18.2.0",
    "reactotron-react-native": "^5.1.7",
    "reactotron-redux": "^3.1.9"
  },
  "engines": {
    "node": ">=18"
  }
}
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

// MainNavigator.js
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import MainScreen from '../screens/MainScreen';
import DrawerContent from '../components/DrawerContent';
import { Text, Pressable } from 'native-base';

import MenuIcon from './../assets/svg/menu.svg'

const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();



const MainStack = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="MainScreen"
                component={MainScreen}
                options={{
                    headerShown: false,
                }}
            />
        </Stack.Navigator>
    );
};

const MainNavigator = () => {
    return (
        <Drawer.Navigator
            screenOptions={({ navigation }) => ({
                drawerPosition: 'right', 
                drawerStyle:{right:0},
                headerLeft: false,
                headerTitle: null,
               
                headerRight: () => (
                    <Pressable w={10} h={10} justifyContent={`center`} alignItems={`center`} onPress={() => navigation.openDrawer()}>
                        <MenuIcon width={20} height={20} fill="black"/>
                    </Pressable>
                ),
            })}
            drawerContent={(props) => <DrawerContent {...props} />}
        >
            <Drawer.Screen 
                name="MainStack"
                component={MainStack}
                options={{
                    title: null,
                }}
            />
        </Drawer.Navigator>
    );
};

export default MainNavigator;

конкретно с Drawer.
Т.к. у меня мало опыта в данной экосистеме, самостоятельно решить не получается, буду очень признателен если кто-то найдет решение.
Очищал gradlew, пересоздавал проект, использовал -- --reset-cache, удалял npm-cache, удалял папку с модулями, обновлял все зависимости. Ничего из этого не помогло, вся надежда на вас.

Answer 1

[Totobi]

Не знаю пригодится кому-то, но Я решил проблему.

1. cd android && ./gradlew clean
   

2. metro.config.js
        const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
   const { wrapWithReanimatedMetroConfig } = require("react-native-reanimated/metro-config");
   
   const defaultConfig = getDefaultConfig(__dirname);
   const { assetExts, sourceExts } = defaultConfig.resolver;
   
   /**
    * Metro configuration
    * https://reactnative.dev/docs/metro
    *
    * @type {import('metro-config').MetroConfig}
    */
   const config = {
     resetCache: false,
     transformer: {
       babelTransformerPath: require.resolve(
         "react-native-svg-transformer/react-native"
       )
     },
     resolver: {
       assetExts: assetExts.filter((ext) => ext !== "svg"),
       sourceExts: [...sourceExts, "svg"]
     }
   };
   
   module.exports = wrapWithReanimatedMetroConfig(mergeConfig(defaultConfig, config));

   
   

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

   
   
4. npm start -- --reset-cache
   

После успешного старта не забудьте в metro.config.js установить

resetCache: false,

.