CODEWITHSUNDEEP
react-nativenavigation-drawerreact-native-navigationreact-navigation-drawer
Giorgi Digmelashvili
Giorgi Digmelashvili

Reputation: 363

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

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.

Upvotes: 7

Views: 12971

Answers (5)

Serhii Harbovskyi
Serhii Harbovskyi

Reputation: 318

For those who want to use default icon and button try this component . Here is the example:

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

  <Drawer.Navigator>
    <Drawer.Screen
      options={({navigation, route}) => ({
        headerLeft: () => {
          if (currentRoute === 'Home') {
            return <DrawerToggleButton />;
          } else {
            return ( <YourCustomComponent /> );
          }
        },
      })}
    />
  </Drawer.Navigator>

Upvotes: 0

Ladimidi
Ladimidi

Reputation: 151

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>

Upvotes: 15

Adel Benyahia
Adel Benyahia

Reputation: 431

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>

Upvotes: 2

vijay kumar
vijay kumar

Reputation: 88

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.

Upvotes: 5

Xhirazi
Xhirazi

Reputation: 857

use headerRight property in header options

helping material

Upvotes: 1

Related Questions