How can I change drawerActiveBackgroundColor in React Navigation 6?

Question

How can I change drawerActiveBackgroundColor in React Navigation 6 here is my code:

<Drawer.Navigator
      screenOptions={{
        drawerActiveBackgroundColor: "red",
      }}
      drawerContent={props => <DrawerContent {...props} />}>
      <Drawer.Screen
        options={{
          drawerStyle: {
            backgroundColor: '#c6cbef',
            width: 240,
          },
        }}
        name="Login"
        component={Login}
        options={{headerShown: false}}
      />
      <Drawer.Screen
        name="SignUp"
        component={SignUp}
        options={{headerShown: false}}
      />
    </Drawer.Navigator>

score 1 · Answer 1 · answered Oct 27 '21 at 04:03

1

Please use

activeTintColor: Color for the icon and label when the item is active.

inactiveTintColor: Color for the icon and label when the item is inactive.

activeBackgroundColor: Background color for item when it's active.

inactiveBackgroundColor: Background color for item when it's inactive.

answered Oct 27 '21 at 04:03

John Ocean

394
2
14

This doesn't work. Could it be because i'm using a custom drawer? – Youzef May 15 '22 at 07:12

score 0 · Answer 2 · answered Nov 08 '22 at 23:24

You will find those options inside Drawer.Screen > options.. something like this:

<Drawer.Screen
      options={{
        headerShown: false,
        drawerActiveBackgroundColor: 'transparent',
        drawerActiveTintColor: 'white',
        drawerInactiveTintColor: 'white',
      }}
      name="TabNavigator"
      component={TabNavigator}
    />

How can I change drawerActiveBackgroundColor in React Navigation 6?

2 Answers2