DrawerNavigator reference
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig);
RouteConfigs
The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see example from StackNavigator
.
DrawerNavigatorConfig
drawerWidth
- Width of the drawer or a function returning it.drawerPosition
- Options areleft
orright
. Default isleft
position.contentComponent
- Component used to render the content of the drawer, for example, navigation items. Receives thenavigation
prop for the drawer. Defaults toDrawerItems
. For more information, see below.contentOptions
- Configure the drawer content, see below.useNativeAnimations
- Enable native animations. Default istrue
.drawerBackgroundColor
- Use the Drawer background for some color. The Default iswhite
.
Several options get passed to the underlying router to modify navigation logic:
initialRouteName
- The routeName for the initial route.order
- Array of routeNames which defines the order of the drawer items.paths
- Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.backBehavior
- Should the back button cause switch to the initial route? If yes, set toinitialRoute
, otherwisenone
. Defaults toinitialRoute
behavior.
Providing a custom contentComponent
The default component for the drawer is scrollable and only contains links for the routes in the RouteConfig. You can easily override the default component to add a header, footer, or other content to the drawer. By default the drawer is scrollable and supports iPhone X safe area. If you customize the content, be sure to wrap the content in a SafeAreaView:
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerContentComponent = (props) => (
<ScrollView>
<SafeAreaView
style={styles.container}
forceInset={{ top: 'always', horizontal: 'never' }}
>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
contentOptions
for DrawerItems
items
- the array of routes, can be modified or overriddenactiveItemKey
- key identifying the active routeactiveTintColor
- label and icon color of the active labelactiveBackgroundColor
- background color of the active labelinactiveTintColor
- label and icon color of the inactive labelinactiveBackgroundColor
- background color of the inactive labelonItemPress(route)
- function to be invoked when an item is presseditemsContainerStyle
- style object for the content sectionitemStyle
- style object for the single item, which can contain an Icon and/or a LabellabelStyle
- style object to overwriteText
style inside content section, when your label is a stringiconContainerStyle
- style object to overwriteView
icon container styles.
Example
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
Screen Navigation Options
title
Generic title that can be used as a fallback for headerTitle
and drawerLabel
drawerLabel
String, React Element or a function that given { focused: boolean, tintColor: string }
returns a React.Node, to display in drawer sidebar. When undefined, scene title
is used
drawerIcon
React Element or a function, that given { focused: boolean, tintColor: string }
returns a React.Node, to display in drawer sidebar
drawerLockMode
Specifies the lock mode of the drawer. This can also update dynamically by using screenProps.drawerLockMode on your top level router.
Navigator Props
The navigator component created by DrawerNavigator(...)
takes the following props:
screenProps
- Pass down extra options to child screens, for example:
const DrawerNav = DrawerNavigator({
// config
});
<DrawerNav
screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
/>
Nesting DrawerNavigation
Please bear in mind that if you nest the DrawerNavigation, the drawer will show below the parent navigation.