React navigation 5 - Move drawer item icon from left to right

Question

I want to show label on left and drawerIcon on right but unable figure out how. Here is code

<Drawer.Navigator
      drawerContentOptions={{
        contentContainerStyle: {
          backgroundColor: Colors.primary,
          height: "100%"
        },
        labelStyle: { color: "white" }
      }}
    >
      <Drawer.Screen
        name="HomeScreen"
        component={Home}
        options={{ drawerLabel: "Home" }}
      />
      <Drawer.Screen
        name="Channels"
        component={Channels}
        options={{
          drawerIcon: () => (
            <AntDesign
              name="pluscircle"
              size={20}
              color="white"
            />
          )
        }}
      />
    </Drawer.Navigator>

I would like to show "Channels" on left side and plus icon on right side

score 4 · Answer 1 · answered Feb 11 '21 at 15:46

on your icon, style it with

style={{
  alignSelf: "center",
  position: "absolute",
  right: 5,
}}

so your AntDesign will be like this

<AntDesign
  style={{
    alignSelf: "center",
    position: "absolute",
    right: 5,
  }}
  name="pluscircle"
  size={20}
  color="white"
/>

score 1 · Answer 2 · answered Mar 21 '20 at 23:06

1

try with headerLeft and headerRight

 headerLeft: () => (
      <Icon
        style={{padding: 10}}
        onPress={() => {
            consol.log("on press}}
        color={'white'}
        name="menu"
        size={30}
      />

answered Mar 21 '20 at 23:06

Yoel

7,555
6
27
59

In V4x we use `static` in any component to do any option like `headerShown:false` Now in V5 How can i use it? – Oliver D Mar 21 '20 at 23:10
1

@yoel headerLeft? I guess this is only stack navigator's property – Farhan Farooq Mar 22 '20 at 17:17
@OliverD within component receive props and then use props.navigation.setOptions({ headerShown: false }) – Farhan Farooq Mar 22 '20 at 17:19

score 0 · Answer 3 · answered Jun 25 '20 at 05:27

  <Drawer.Navigator
  drawerPosition="right"
  drawerType="slide"
  initialRouteName="Home"
  drawerContent={() => <SideBar />}>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="NewIndex" component={NewIndex} />
</Drawer.Navigator>

React navigation 5 - Move drawer item icon from left to right

3 Answers3