react-navigation/docs/api/navigators/DrawerNavigator.md

DrawerNavigator

Used to easily set up a screen with a drawer navigation. For a live example please see our expo demo.

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, { tintColor }]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, { tintColor }]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

To open and close drawer, navigate to 'DrawerOpen' and 'DrawerClose' respectively.

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

If you would like to toggle the drawer you can navigate to 'DrawerToggle', and this will choose which navigation is appropriate for you given the drawers current state.

// fires 'DrawerOpen'/'DrawerClose' accordingly
this.props.navigation.navigate('DrawerToggle');

API Definition

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 are left or right. Default is left position.
• contentComponent - Component used to render the content of the drawer, for example, navigation items. Receives the navigation prop for the drawer. Defaults to DrawerItems. For more information, see below.
• contentOptions - Configure the drawer content, see below.
• useNativeAnimations - Enable native animations. Default is true.
• drawerBackgroundColor - Use the Drawer background for some color. The Default is white.

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 to initialRoute, otherwise none. Defaults to initialRoute 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 overridden
• activeItemKey - key identifying the active route
• activeTintColor - label and icon color of the active label
• activeBackgroundColor - background color of the active label
• inactiveTintColor - label and icon color of the inactive label
• inactiveBackgroundColor - background color of the inactive label
• onItemPress(route) - function to be invoked when an item is pressed
• itemsContainerStyle - style object for the content section
• itemStyle - style object for the single item, which can contain an Icon and/or a Label
• labelStyle - style object to overwrite Text style inside content section, when your label is a string
• iconContainerStyle - style object to overwrite View 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.