How to set react-native drawer header icon ('Hamburger') to the right side?

Question

I set the drawer right-side, but the hamburger icon, in the screen header, stays default left side, Is there any property to pass through to change position to the right? I know it should be done with configuring a custom header, but I don't want to overengineer my small project.

Could you provide any code? – Chris Wong Aug 22 '21 at 02:50 — Chris Wong, Aug 22 '21 at 02:50

score 9 · Answer 1 · answered Aug 10 '22 at 21:53

9

with react-navigation v6, add DrawerToggleButton like :

import { createDrawerNavigator, DrawerToggleButton } from '@react-navigation/drawer';

...

<Drawer.Navigator
    screenOptions={{
        drawerPosition: 'right',
        headerLeft: false,
        headerRight: () => <DrawerToggleButton />,
    }}> 
    //or in the options Drawer.Screen for just one screen
    <Drawer.Screen name="Home" component={Home}/>
    ...
</Drawer.Navigator>

answered Aug 10 '22 at 21:53

Ladimidi

91
1
2

1

It works. I wonder why this information is not available in the docs. Also, what is the suggested way to add a drawer navigator on each screen of a tab navigator? – Ritik Jangir Mar 29 '23 at 11:25

score 3 · Accepted Answer · edited Oct 18 '21 at 20:03

import {DrawerActions} from '@react-navigation/native';

<Drawer.Navigator
      screenOptions={{
        drawerPosition: 'right',
      }}>
      <Drawer.Screen
        name="Home"
        component={Home}
        options={{
          headerStyle: {
            backgroundColor: 'orange',
          },
          headerTintColor: 'black',
          headerLeft:false,
          headerRight: () => (
            <TouchableOpacity  onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
              <Icon name="menu" size={30} color="black" />
            </TouchableOpacity>
          ),
        }}
      />
      <Drawer.Screen name="Standings" component={Standings} />
    </Drawer.Navigator>

It worked for me.

score 2 · Answer 3 · answered Apr 26 '22 at 17:04

that worked for me (react navigation v6)

1.

npm i @expo/vector-icons

import Ionicons from "@expo/vector-icons/Ionicons";
import { createDrawerNavigator } from "@react-navigation/drawer";
import HomeScreen from "../screens/HomeScreen";
import AboutScreen from "../screens/AboutScreen";

const Drawer = createDrawerNavigator();
const defaultOpyions =({})=>({
//Show sandwith-menu icon at the right
headerRight: () => {
      return (
        <>
          <Pressable onPress={() => navigation.openDrawer()}>
            <Ionicons
              name={Platform.OS === "android" ? "md-menu" : "ios-menu"}
              size={32}
              color={"#000"}
              style={{ marginRight: 10 }}
            />
          </Pressable>
          <Text style={styles.headerRightTiteStyle}>{route.params.title}</Text>
        </>
      );
    },
 //Hide the left icon menu
 headerLeftContainerStyle: { display: "none" },
    headerRightContainerStyle: {
      display: "flex",
      justifyContent: "flex-start",
      flexDirection: "row-reverse",
      alignItems: "center",
      marginRight: 10,
    },
    //Hide the left menu Title
    headerTitleStyle: {
      display: "none",
    },
    drawerPosition: "right",
})
 <Drawer.Navigator screenOptions={defaultOptions}>
      <Drawer.Screen
        name="Home"
        options={{
          title: "Home",
          drawerIcon: ({ color, size, focuced }) => (
            <Ionicons
              name={focuced ? "home-outline" : "home"}
              size={size}
              color={color}
            />
          ),
        }}
        component={HomeScreen}
       
      />
      <Drawer.Screen
        name="About"
        options={{
          title: "About",
          drawerIcon: ({ color, size, focused }) => (
            <Ionicons
              name={
                focused ? "information-circle-outline" : "information-circle"
              }
              size={size}
              color={color}
            />
          ),
        }}
        component={AboutScreen}
       
      />
    </Drawer.Navigator>

score 1 · Answer 4 · answered Aug 22 '21 at 03:00

1

use headerRight property in header options

helping material

answered Aug 22 '21 at 03:00

Xhirazi

735
4
15

1

Thanks but that's for a custom button and Icon, but I want to use the default icon and button which drawer already has on the left side, just need to change the position – Giorgi Digmelashvili Aug 22 '21 at 03:58

How to set react-native drawer header icon ('Hamburger') to the right side?

4 Answers4