How to set up main parent width of react-native-navigation drawer

user_9444068 0
Viewed 6156

How to setup width of react-native navigation drawer, I can change drawer content width, But i can't change the width of main parent, I always seems white background.

{
initialRouteName: 'Home',
drawerPosition: 'left',
contentComponent: withUserContext(CustomDrawerContentComponent),
drawerOpenRoute: 'DrawerOpen',
drawerToggleRoute: 'DrawerToggle',
drawerCloseRoute: 'DrawerClose',
style:{
  drawer: {width:200, shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
    main: {paddingLeft: 3}
},
contentOptions: {
  activeTintColor: "white",
  activeBackgroundColor: 'transparent',
  inactiveTintColor: '#c5e6fc',
  inactiveBackgroundColor: 'transparent',
  labelStyle: {
    fontSize: 15,
    marginLeft: 10,
    },
  },
}

Any help would be greatly appreciated.

Thanks in advance.

drawer react-navigation react-native
2 Answers

Rather than giving it a width of 200 just 

import {Dimensions} from 'react-native';

And then get width of device by

const width = Dimensions.get("screen").width;

and then, width: width - width/4

user_93631900

Add one line of code and you can change width of your Drawer

drawerWidth: Dimensions.get('window').width,

Don't forget to import Dimensions like this

import {Dimensions} from 'react-native';

In your code add this line as follows

{
initialRouteName: 'Home',
drawerPosition: 'left',
contentComponent: withUserContext(CustomDrawerContentComponent),
drawerOpenRoute: 'DrawerOpen',
drawerToggleRoute: 'DrawerToggle',
drawerCloseRoute: 'DrawerClose',
drawerWidth: Dimensions.get('window').width,
style:{
  drawer: {width:200, shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
    main: {paddingLeft: 3}
},

You can change width accordingly like this

drawerWidth: Dimensions.get('window').width/2,

or in any way.

user_93434250
Related