How to add Logout Functionality in React Native DrawerNavigation

Question

I have Created a Drawer on my Profile page ( its one of the three in bottom TabNavigator of my App). I am trying to add a logout item in the Drawer. I am able to add an item (maybe wrong way) but unable to achieve functionality of Logout on click of it.

Here is my code

    ...imports
    const Drawer = createDrawerNavigator();
    export default function DrawerGroup() {
      const nav = useNavigation();
      return (
        <Drawer.Navigator
          screenOptions={{
            drawerPosition: "right",
            headerTitleAlign: "center",
            headerTitleStyle: { color: "black", fontSize: 24, fontWeight: "600" },
            headerStyle: {
              backgroundColor: "transparent",
              borderWidth: 0,
            },
            headerRight: () => (
              <Entypo
                name="menu"
                color="#000"
                size={30}
                style={{ ...styles.icon, paddingRight: 15 }}
                onPress={() => nav.dispatch(DrawerActions.toggleDrawer())}
              />
            ),
            headerLeft: () => (
              <FontAwesome5
                name="chevron-left"
                color="#000"
                size={24}
                style={{ ...styles.icon, paddingLeft: 15 }}
                onPress={() => nav.goBack()}
              />
            ),
          }}
        >
          <Drawer.Screen
            name="Profile"
            component={Profile}
            options={{
              //change the configuration of our screen
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons name="account" size={24} color="black" />
                );
              },
            }}
          />
          <Drawer.Screen
            name="Manage Address"
            component={ManageAddress}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return <MaterialIcons name="my-location" size={24} color="black" />;
              },
            }}
          />
          <Drawer.Screen
            name="Refer a Friend"
            component={RefferalScreen}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons name="gift" size={24} color="black" />
                );
              },
            }}
          />
          <Drawer.Screen
            name="About"
            component={AboutScreen}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons
                    name="information"
                    size={24}
                    color="black"
                  />
                );
              },
            }}
          />
          <Drawer.Screen
            name="Logout"
            component={HomePage}
            listeners={({ navigation }) => ({
              tabPress: (event) => {
                event.preventDefault();
                navigation.navigate("Home");
              },
            })}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons name="logout" size={24} color="black" />
                );
              },
            }}
          />
        </Drawer.Navigator>
      );
    }

The listener/onClick does not work on it, I tried adding listener like this as well:

    listeners={({ navigation }) => ({
        state: (e) => {
          if (e.data.state.index === 3) {
            // 3 is index of logout item in drawer
            // add logout code here
    
            // Close the drawer
            navigation.dispatch(DrawerActions.closeDrawer());
    
            // Navigate to "Home" and reset the navigation state
            navigation.dispatch(
              CommonActions.reset({
                index: 0,
                routes: [{ name: 'Home' }],
              })
            );
          }
        },

I have also tried using a button, but that did not work for some reason. I do not have the code for that anymore.
Currently its just loading the Homepage Component inside, and I am able to open drawer/See Header.

My Navigation is nested, with TabNavigation at the current bottom most, then a stack for each element in TabNavigation, and for profile I have a StackNavigation that has DrawerNavigation inside it. Ideal logout case I want to jump up all the way to TabNavigation (HomeScreen)

How do I approach this?

Answer 1

Use custom drawerContent to add the logout item.

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Logout" onPress={() => { /* TODO */ }} />
    </DrawerContentScrollView>
  );
}

...
<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />} >
...
</Drawer.Navigator>