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.
1
- 1Could you provide any code?Chris Wong– Chris Wong2021-08-22 02:50:49 +00:00Commented Aug 22, 2021 at 2:50
Add a comment |
5 Answers
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>
1 Comment
Ritik Jangir
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?
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.
Comments
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> 
Comments
use headerRight property in header options
1 Comment
Giorgi Digmelashvili
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
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> 