Drawer Error: Cannot read property 'isConfigured' of undefined

[Hwang-YoonJi]

Description

I'm trying to use drawer navigation, but I get an error.

ERROR 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 RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (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 Navigation)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Navigation)
in Navigation (created by App)
in RCTView (created by View)
in View (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 safety_guide_new(RootComponent), js engine: hermes

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from '../screens/home';
import Settings from '../screens/settings';
import Header from '../components/Header';

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

const HomeStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{
header: () =>

,
}}
/>
</Stack.Navigator>
);
};

const SettingsStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Settings"
component={Settings}
options={{
header: () =>

,
}}
/>
</Stack.Navigator>
);
};

const Navigation: React.FC = () => {
return (

<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="Settings" component={SettingsStack} />
</Drawer.Navigator>

);
};

export default Navigation;

<package.json>
"@react-navigation/drawer": "^6.6.15",
"@react-navigation/native": "^6.1.17",
"@react-navigation/stack": "^6.3.29",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "^2.16.0",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^3.8.1",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.30.1",

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

Steps to reproduce

npm run android

Snack or a link to a repository

https://stackoverflow.com/questions/77879924/react-native-drawer-cannot-read-property-isconfigured-of-undefined-reanim

Reanimated version

3.8.1

React Native version

0.73.6

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

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?

[szydlovsky]

Hey @Hwang-YoonJi 👋 I tried reproducing the issue and it seems to not occur for me. Did you try rebuilding all the dependencies? (deleting the node_modules and installing dependencies again, you might even try git clean -xdf as it cleans all untracked/ignored files in the project and might take care of some troublesome caches).

[vishalsohani27]

hey, @Hwang-YoonJi
i am getting same error.
'Failed to create worklet' and 'can not read property isconfigured'
while implementing Drawer.
i have been added plugin details to babel.config.js also, please let me know, if you found any solution.

[ShahidJanAmin]

Hey, @Hwang-YoonJi
I am getting the same error. 'Cannot read property 'isConfigured' of undefined' or 'Failed to create a worklet.'
I rebuild and also cleared the cache still I face problem. If you found any solution Please shear with us.

[Dilawar4Ali]

Description

I'm trying to use drawer navigation, but I get an error.

ERROR 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 RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (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 Navigation) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by Navigation) in Navigation (created by App) in RCTView (created by View) in View (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 safety_guide_new(RootComponent), js engine: hermes

import React from 'react'; import {createDrawerNavigator} from '@react-navigation/drawer'; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; import Home from '../screens/home'; import Settings from '../screens/settings'; import Header from '../components/Header';

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

const HomeStack = () => { return ( <Stack.Navigator> <Stack.Screen name="Home" component={Home} options={{ header: () =>

,
}}
/>
</Stack.Navigator>
);
};
const SettingsStack = () => { return ( <Stack.Navigator> <Stack.Screen name="Settings" component={Settings} options={{ header: () =>

,
}}
/>
</Stack.Navigator>
);
};
const Navigation: React.FC = () => { return ( <Drawer.Navigator> <Drawer.Screen name="Home" component={HomeStack} /> <Drawer.Screen name="Settings" component={SettingsStack} /> </Drawer.Navigator> ); };

export default Navigation;

<package.json> "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "react": "18.2.0", "react-native": "0.73.6", "react-native-gesture-handler": "^2.16.0", "react-native-push-notification": "^8.1.1", "react-native-reanimated": "^3.8.1", "react-native-safe-area-context": "^4.9.0", "react-native-screens": "^3.30.1",

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

Steps to reproduce

npm run android

Snack or a link to a repository

https://stackoverflow.com/questions/77879924/react-native-drawer-cannot-read-property-isconfigured-of-undefined-reanim

Reanimated version

3.8.1

React Native version

0.73.6

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

Noneg

Device model

No response

Acknowledgements

Yes

Hi i am also having the same issue. Installed the latest packages "@react-navigation/drawer": "^6.6.15", and "react-native-reanimated": "^3.8.1",
I did add the plugins: ["react-native-reanimated/plugin", ], in babel.config.js and also ran npm start -- --reset-cache but still there is error. Screenshot of error are attached. If @Hwang-YoonJi you found the solution please share.

[ejmdenham]

Worked for me.

1. Delete node_modules
2. rerun "npm install"
3. Add >> plugins: [ "react-native-reanimated/plugin", ], to your babel.config.js (in the backets)
4. npm start -- --reset-cache

[CarlosAlbertoTI]

Worked for me.

1. Delete node_modules
2. rerun "npm install"
3. Add >> plugins: [ "react-native-reanimated/plugin", ], to your babel.config.js (in the backets)
4. npm start -- --reset-cache

This solution didn't work for me

[TSD404]

Worked for me.

1. Delete node_modules
2. rerun "npm install"
3. Add >> plugins: [ "react-native-reanimated/plugin", ], to your babel.config.js (in the backets)
4. npm start -- --reset-cache

this solution didn't work