React Native Drawer - Cannot read Property "isConfigured" of undefined & [Reanimated] Failed to create a worklet

Question

My Codes:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React from 'react';
import { createDrawerNavigator} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import StockRoom from './StockRoom';
const Drawer = createDrawerNavigator();

function Refill(navigation: any): React.JSX.Element {
  interface CustomAlertProps {
    show: boolean;
    onClose: () => void;
  }

  return (
    <NavigationContainer independent={true}>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={StockRoom} />
      </Drawer.Navigator>
    </NavigationContainer>
    
  );
}


export default Refill;

First Error:

Second Error:

I need to create a simple drawer but i can't. How can i solve this two problem? I tried npm uninstall and download all packages again but doesn't work.

Answer 1

I had a very similar issue to this using React Navigation Stack Navigator. It went away for me by deleting node_modules, clearing npm and gradle build caches, reinstalling dependencies. Also, I had to add react-native-reanimated to my project dependencies. After doing this, things were working smooth as butter for me.

Hope this helps!

Answer 2

The latest version of reanimated is not working properly with the drawer try to install this version of reaminated npm i [email protected]

Answer 3

Add this inside the your babel.config.js:

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

After reconfiguring babel:

yarn start --reset-cache

Answer 4

Running a version of react-native-reanimated after 3.4.1, should have this issue fixed. Here is the change: https://github.com/software-mansion/react-native-reanimated/pull/4832

I had the same issue with reanimated 3.7.0 and fixed it by installing the necessary dependencies for react-native-reanimated/plugin listed here: https://github.com/software-mansion/react-native-reanimated/blob/main/plugin/README-dev.md

I also had to clean my project, do a brand new installation @react-navigation/drawer (including reanimated and react-native-gesture-handler) and rebuild the project. Hope this helps!