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: () => <Header />, }} /> </Stack.Navigator> ); };

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

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

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[bot]]

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

[vkarkhanis]

In my case the problem was I was using yarn and I was using yarn start -- --reset-cache instead of yarn start --reset-cache Using the right command to reset cache worked for me

https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#mismatch-between-javascript-code-version-and-reanimated-babel-plugin-version

Also I had to change babel.config.js and it looks as below:

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

[szydlovsky]

@TSD404 @CarlosAlbertoTI @Dilawar4Ali hey guys could you try this fix using yarn?

[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

I just created a new project and now its working fine. Not sure what was wrong in the previous project

[ark-fabtechsol]

Anyone encountering this issue , This issue is related to package compatibility with drawer package. So what you need to do is to downgrade the version of reanimated, delete node modules and yarn lock , reinstall them, reinstall pods after cleaning them and then rebuild the application. This will be ressolved .

[ganpatigarv]

My issue has resolved.

1. yarn start --reset-cache.
2. Update babel.config.js

module.exports = { presets: [ '@babel/preset-typescript', 'module:metro-react-native-babel-preset', ], plugins: [ ['react-native-reanimated/plugin'], ['@babel/plugin-transform-flow-strip-types', { loose: true }], ['@babel/plugin-proposal-class-properties', { loose: true }], ['@babel/plugin-proposal-private-methods', { loose: true }], ], };

[fahadahmad-fabtechsol]

@ark-fabtechsol this was the most authentic solution i have found.

[Cigal]

this the solution that worked for me ..

i changed babel.config.js from module.exports = { presets: ['module:@react-native/babel-preset'], ]

to

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

installed yarn ..

1. npm install --global yarn
2. yarn start --reset-cache.

this worked for me

[AkhaniDarshan179]

4. npm start -- --reset-cache

Thanks bro

[muralivegesna1381]

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

works for me follow exactly what he said. 3rd step need to be add after step1 and step2.

[Zara3574]

3. plugins: [ "react-native-reanimated/plugin", ],

Work for me

[zeeshan9]

I am getting into same issues can someone. please share the compatible version of react-native-reanimated & react-native-gesture-handler or drawer I triend the above solution but didn't work for me. so i think i need to get correct version if anyone share the latest compatible version that works for them.

Error is: cannot read property 'isConfigured' of undefined

navigation packages version "react-native-reanimated": "^3.15.1", "react-native-gesture-handler": "^2.18.1",

"@react-navigation/drawer": "^6.4.1",
"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^6.11.0",
"react-native-screens": "^3.33.0",

[zeeshan9]

I found the compatible packages: "react-native-gesture-handler": "^2.17.1", "react-native-reanimated": "^3.10.1",

[rushibhumkar11]

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

worked for me