DrawerNavigator: Change Background Color

Question

On react-navigation's DrawerNavigator, is there a way to change the background color?

By default, the color scheme looks like the following:

Which is initialized by the following:

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

Solution 1

React Navigation provides a way for you to override the default configuration by using contentOptions after declaration of screens and screenNames.

Using your above example, changing the background color will go thus:

const Drawer = DrawerNavigator(
  {
    dOne: {screen: Screen1},
    dTwo: {screen: Screen2},
  },
  {
    initialRouteName: 'dOne',
    contentOptions: {
       style: {
        backgroundColor: 'black',
        flex: 1
      }
    },
  }
);

Things to Note:

1) ContentOptions should be declared outside the screen block. Declaring it within will mean that it is a screen (kind of obvious right?!).

2) Drawer itself is a screen and by adding style to contentOptions you can carry out any styling as you would have done in any component.

3) Using backgroundColor without the flex: 1 will just wrap the color around your content but when flex is included, it matches up the entire screen.

Solution 2

it's working , put in 'createDrawerNavigator' like that

const MyDrawerNavigator = createDrawerNavigator({

  Home:  MyHomeScreen,    
Notifications: MyNotificationsScreen,

},{
drawerOpenRoute : "DrawerOpen",

drawerCloseRoute: "DrawerClose",

drawerToggleRoute: "DrawerToggle",

drawerBackgroundColor: "#f4511e"
}); 

Solution 3

<Drawer.Navigator
      screenOptions={{
        drawerStyle: {
          backgroundColor: '#c6cbef',
          width: 240,
        },
      }}
    >
      {/* screens */}
    </Drawer.Navigator>

You can check https://reactnavigation.org/docs/screen-options/

Solution 4

It can be done by using the drawerStyle prop of the navigator.

Like so -

const Drawer = createDrawerNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="dOne"
        drawerStyle={{
          backgroundColor: '#111',
        }}
        drawerContentOptions={{
          activeTintColor: '#fff', /* font color for active screen label */
          activeBackgroundColor: '#68f', /* bg color for active screen */
          inactiveTintColor: 'grey', /* Font color for inactive screens' labels */
        }}
      >
        <Drawer.Screen name="dOne" component={dOneScreen} />
        <Drawer.Screen name="dTwo" component={dTwoScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

Solution 5

The only solution I see is to custom you drawer. You have the contentComponent option that let you custom it. For example :

const DrawerOptions = {
  contentComponent: CustomDrawerContentComponent,  
  drawerWidth: 300,
}; 

const CustomDrawerContentComponent = (props) => (
  <View style={styles.container}>
    <View style={styles.DrawerHeader}>
      <Text>Coucou</Text>
    </View>
    <View style={styles.DrawerItems}>
    <DrawerItems {...props} />
    </View>
  </View>
);

You can then add the style you wish as your custom background color. Hoping it will help you !

View more solutions

Comments

[Pratik Singhal]

What if we want to use custom icons for each route ?

[roshnet]

You can add the drawerIcon prop in <Drawer.Screen>, and pass a (say) Ionicons element as value.

[Mohammad Fahad Rao]

not working i am using import { createDrawerNavigator } from '@react-navigation/drawer';