How To Add Logout Button in React native Drawer.Navigator? - react-native

Question

I am creating Drawer in react native using Drawer.Navigator. But the issue is that how to move to Login screen if click on Logout button?
Any suggestion? my code is below. All remaining code is working fine. I only want to navigate the login screen by clicking on logout button.
import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import {
createDrawerNavigator, DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import Resources from '../DrawerScreens/Resources';
import Themes from '../DrawerScreens/Themes';
import AboutUs from '../DrawerScreens/AboutUs';
import CustomSidebarMenu from './CustomSidebarMenu';
import Login from '../Validation/Login';
const Drawer = createDrawerNavigator();
export default function DrawerSetting({ navigation }) {
return (
<NavigationContainer independent={true} >
<Drawer.Navigator initialRouteName="Resources" drawerContent={(props) => <CustomSidebarMenu {...props} />}
>
<Drawer.Screen name="Resources" component={Resources}
options={{ drawerLabelStyle: { fontSize: 16, color: 'black', } }}
/>
<Drawer.Screen name="Themes" component={Themes}
options={{ drawerLabelStyle: { fontSize: 16, color: 'black', } }}
/>
<Drawer.Screen name="About Us" component={AboutUs}
options={{ drawerLabelStyle: { fontSize: 16, color: 'black', } }}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
I used to create Another component for creating the logout button,
import React from 'react';
import {
SafeAreaView,
View,
StyleSheet,
Image,
Text,
Linking,
TouchableOpacity,
BackHandler
} from 'react-native';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem, Drawer,
} from '#react-navigation/drawer';
const CustomSidebarMenu = (props) => {
const BASE_PATH = '';
function logout(){
alert("Hello");
// props.navigation.navigate("Login");
// BackHandler.exitApp();
}
return (
<SafeAreaView style={{ flex: 1 }}>
{/*Top Large Image */}
<Image
source={require("../../assets/images/g_logo_blue.png")}
style={styles.sideMenuProfileIcon}
/>
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
{/* { <DrawerItem
label="Visit Us"
onPress={() => {props.navigation.navigate('Login')}}
/> } */}
{/* <View style={styles.customItem}>
<Text
onPress={() => {
Linking.openURL('https://aboutreact.com/');
}}>
Rate Us
</Text>
<Image
source={{ uri: BASE_PATH + 'star_filled.png' }}
style={styles.iconStyle}
/>
</View> */}
<TouchableOpacity onPress={logout}>
<Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: 'blue', marginLeft: 20, }}>
Logout
</Text>
</TouchableOpacity>
</DrawerContentScrollView>
<Text style={{ fontSize: 16, textAlign: 'center', color: 'blue' }}>
https://www.glocoach.com/
</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sideMenuProfileIcon: {
// resizeMode: 'cover',
width: "70%",
height: 70,
marginTop: 20,
marginBottom: -40,
marginLeft: -50,
// borderRadius: 100 / 2,
alignSelf: 'center',
},
iconStyle: {
width: 15,
height: 15,
marginHorizontal: 5,
},
customItem: {
padding: 16,
flexDirection: 'row',
alignItems: 'center',
},
});
export default CustomSidebarMenu;

Answer 1

Normally what I would do in this situation is have two navigators. One for the logged-out screens and one for the logged-in screens. Then I would bind this to a check-in JSX like:
<NavigationContainer>
{!isLoggedIn ? (<LoggedOutNavigator />) : (<LoggedInNavigator />)}
</NavigationContainer>
After that, all you have to do when the button is pressed is to change the isLoggedIn value. you can save isloggedIn in redux and then just dispatch an action to handle the change.
if you only have one navigator and really don't want to change it, then you can add a useEffect hook to navigate to the log in screen once isLoggedIn is set to false.