CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-drawer
Darron
Darron

Reputation: 343

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

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

Upvotes: 4

Views: 8693

Answers (1)

Kubilay Şimşek
Kubilay Şimşek

Reputation: 156

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>
  );
}

Upvotes: 12

Related Questions