CODEWITHSUNDEEP
react-nativereact-navigation
Haris Ahmed
Haris Ahmed

Reputation: 21

How can I change drawerActiveBackgroundColor in React Navigation 6?

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>

Upvotes: 2

Views: 1429

Answers (2)

Jerry Santana
Jerry Santana

Reputation: 31

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}
    />

Upvotes: 1

John Ocean
John Ocean

Reputation: 496

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.

Upvotes: 1

Related Questions