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

DrawerNavigator

Used to easily set up a screen with a drawer navigation.

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

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

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.tabIcon, {tintColor: 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

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
• 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 DrawerView.Items. For more information, see below.
• contentOptions - Configure the drawer content, see below.

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

You can easily override the default component used by react-navigation:

const CustomDrawerContentComponent = (props) => (
  <View style={style.container}>
    <DrawerView.Items {...props} />
  </View>
);

const styles = StyleSheet.create({
  container : {
    flex : 1,
  },
});

contentOptions for DrawerView.Items

• 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
• style - style object for the content section

Example:

contentOptions: {
  activeTintColor: '#e91e63',
  style: {
    marginVertical: 0,
  }
}

Screen Navigation Options

Usually you define static navigationOptions on your screen component. For example:

class ProfileScreen extends React.Component {

  static navigationOptions = {

    title: ({ state }) => `${state.params.name}'s Profile!`,

    drawer: {
      icon: (
        <Image src={require('./my-icon.png')} />
      ),
    },
  };
  ...

All navigationOptions for the DrawerNavigator:

• title - a title (string) of the scene
• drawer - a config object for the drawer:
  • label - String, React Element or a function that given { focused: boolean, tintColor: string } returns a React.Element, to display in drawer sidebar. When undefined, scene title is used
  • icon - React Element or a function, that given { focused: boolean, tintColor: string } returns a React.Element, to display in drawer sidebar

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 as this.props.screenProps */}
/>