Nested Navigation and Logout function issue #2941
Description
Description
Getting error while i do reset the navigation from the custom sidebar who is in nested navigation and also that navigation has another nested navigations.
Here is my navigation codes.
1 App.tsx
return (
<GestureHandlerRootView>
<PaperProvider>
<RootSiblingParent>
<SafeAreaProvider>
<GlobalProvider>
<NavigationContainer>
<AuthStackNavigation />
</NavigationContainer>
</GlobalProvider>
</SafeAreaProvider>
</RootSiblingParent>
</PaperProvider>
</GestureHandlerRootView>
);
2 AuthStackNavigation.tsx
return (
<>
<StatusBar backgroundColor={Theme.colors.appColor} barStyle={'light-content'} />
<Stack.Navigator
initialRouteName={Constants.SPLASH_SCREEN}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
screenOptions={({navigation, route}) => ({})}>
<Stack.Screen name={Constants.LOGIN_SCREEN} component={LoginScreen} options={{headerShown: false}} />
<Stack.Screen name={Constants.REGISTER_SCREEN} component={RegisterScreen} options={{headerShown: false}} />
<Stack.Screen name={Constants.DRAWER_NAVIGATION} component={DrawerNavigation} options={{headerShown: false}} />
<Stack.Screen name={Constants.SPLASH_SCREEN} component={SplashScreen} options={{headerShown: false}} />
</Stack.Navigator>
</>
);
3 DrawerNavigation.tsx
const doLogout = () => {
navigation.reset({
index: 0,
routes: [{name: Constants.LOGIN_SCREEN}],
});
}
return (
<SafeAreaView style={{height: '100%', width: '100%'}}>
<StatusBar hidden={false} />
<Drawer.Navigator
drawerContent={(props) => <CustomSideBar {...props} currentScreen={currentScreen} onPress={doLogout} />}
screenOptions={{
headerShown: false,
drawerType: 'permanent', // Makes the drawer always visible
drawerStyle: {
width: drawerWidth, // Static width based on dimensions
},
swipeEnabled: false, // Disable swipe gestures to open/close
overlayColor: 'transparent', // Remove overlay
}}
initialRouteName={Constants.HOME_STACK_NAVIGATION}
>
<Drawer.Screen name={Constants.HOME_STACK_NAVIGATION} component={HomeStackNavigation} />
<Drawer.Screen name={Constants.SCHEDULE_STACK_NAVIGATION} component={ScheduleStackNavigation} />
<Drawer.Screen name={Constants.ENQUIRY_STACK_NAVIGATION} component={EnquiryStackNavigation} />
<Drawer.Screen name={Constants.VISIT_STACK_NAVIGATION} component={VisitStackNavigation} />
</Drawer.Navigator>
<Loader isLoading={globalContext.loading} />
</SafeAreaView>
);
Here is my library versions
"@react-navigation/drawer": "^7.3.12",
"@react-navigation/elements": "^2.4.2",
"@react-navigation/native": "^7.1.9",
"@react-navigation/native-stack": "^7.3.13",
"react": "18.3.1",
"react-native": "0.76.9",
"react-native-screens": "^4.10.0",
"react-native-safe-area-context": "^4.14.1",
"react-native-gesture-handler": "^2.25.0",
"react-native-reanimated": "^3.17.5",
"node": "v20.10.0",
"npm": "10.2.3"
Also It is only happening in android IOS works fine
It should clear the navigation and go to login screen without any issue because we are just reseting the navigation.
Steps to reproduce
- Start the project
- Auth stack navigation will be called and shows the splash and then login screen
- Add the credentials and do login (you can modify for now to exclude the api call)
- Login will take user to DrawerNavigation
- user will do press on logout button from sidebar
- Error will be occurred and also only in android not in the iOS.
Snack or a link to a repository
https://github.com/ShRavan-Variya/Proctor.git
Screens version
4.10.0
React Native version
0.76.9
Platforms
Android
JavaScript runtime
None
Workflow
React Native (without Expo)
Architecture
None
Build type
Debug mode
Device
Android emulator
Device model
No response
Acknowledgements
Yes