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,
}
}
);
it's working , put in 'createDrawerNavigator' like that
const MyDrawerNavigator = createDrawerNavigator({
Home: MyHomeScreen,
Notifications: MyNotificationsScreen,
},{
drawerOpenRoute : "DrawerOpen",
drawerCloseRoute: "DrawerClose",
drawerToggleRoute: "DrawerToggle",
drawerBackgroundColor: "#f4511e"
});
<Drawer.Navigator
screenOptions={{
drawerStyle: {
backgroundColor: '#c6cbef',
width: 240,
},
}}
>
{/* screens */}
</Drawer.Navigator>
You can check https://reactnavigation.org/docs/screen-options/
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>
)
}