How do I add a log out button to my Drawer using React Navigation V5

Question

How do I add a custom logout button to my drawer? I have tried a few things and I can not seem to find a solution. This is where I am stuck.

import React from 'react';
import {TouchableOpacity, Image, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

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

// Screens
import HomeScreen from '../containers/HomeContainer';

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="My Thoughts"
        component={HomeScreen}

      />
    </HomeStack.Navigator>
  );
};

function DrawerNavigation() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackSceen} />
      <TouchableOpacity>
       <Text>Logout</Text>
      </TouchableOpacity>
    </Drawer.Navigator>
  );
}

export const AppNavigation = () => {
  return (
    <NavigationContainer>
      <DrawerNavigation/>
    </NavigationContainer>
  );
};

I am getting an error that states only screens can be added, referring to TouchableOpacity

Please write your full error and stacktrace – VolkanSahin45 Apr 20 '20 at 20:54 — VolkanSahin45, Apr 20 '20 at 20:54

score 10 · Answer 1 · answered Apr 20 '20 at 22:21

10

You can use this for custom content https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';


function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

answered Apr 20 '20 at 22:21

Kubilay Şimşek

136
2

I tried this before posting a question. This was the error message I received. `Need supporting for Safe area zones` It was something like this. – Darron Apr 20 '20 at 23:02
I don't know if this is the solution of the error you got, but there is a link like this for this problem. [HERE](https://reactnavigation.org/docs/handling-safe-area/) if you tried,others will solve the problem – Kubilay Şimşek Apr 20 '20 at 23:48
How to navigate to a logout screen? I tried to add logout as another drawer.screen then use props.navigation.navigate('logout') in the custom drawer but it says `The action 'NAVIGATE' with payload {"name":"logout"} was not handled by any navigator.` – Omer Jun 04 '23 at 13:59

How do I add a log out button to my Drawer using React Navigation V5

1 Answers1