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

Question

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.

Answer 1

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