diff --git a/packages/react-navigation/docs/api/navigators/DrawerNavigator.md b/packages/react-navigation/docs/api/navigators/DrawerNavigator.md index d25c7867..67bf38f5 100644 --- a/packages/react-navigation/docs/api/navigators/DrawerNavigator.md +++ b/packages/react-navigation/docs/api/navigators/DrawerNavigator.md @@ -130,10 +130,13 @@ const styles = StyleSheet.create({ ### `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 - `style` - style object for the content section - `labelStyle` - style object to overwrite `Text` style inside content section, when your label is a string diff --git a/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js b/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js index 23dce322..ad6348e8 100644 --- a/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js +++ b/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js @@ -9,18 +9,22 @@ import type { NavigationScreenProp, NavigationState, NavigationAction, + NavigationRoute, Style, } from '../../TypeDefinition'; -import type { DrawerScene } from './DrawerView.js'; +import type { DrawerScene, DrawerItem } from './DrawerView.js'; type Props = { navigation: NavigationScreenProp, + items: Array, + activeItemKey?: string, activeTintColor?: string, activeBackgroundColor?: string, inactiveTintColor?: string, inactiveBackgroundColor?: string, getLabel: (scene: DrawerScene) => ?(React.Element<*> | string), renderIcon: (scene: DrawerScene) => ?React.Element<*>, + onItemPress: (info: DrawerItem) => void, style?: Style, labelStyle?: Style, }; @@ -29,19 +33,22 @@ type Props = { * Component that renders the navigation list in the drawer. */ const DrawerNavigatorItems = ({ - navigation, + navigation: { state, navigate }, + items, + activeItemKey, activeTintColor, activeBackgroundColor, inactiveTintColor, inactiveBackgroundColor, getLabel, renderIcon, + onItemPress, style, labelStyle, }: Props) => ( - {navigation.state.routes.map((route: *, index: number) => { - const focused = navigation.state.index === index; + {items.map((route: NavigationRoute, index: number) => { + const focused = activeItemKey === route.key; const color = focused ? activeTintColor : inactiveTintColor; const backgroundColor = focused ? activeBackgroundColor @@ -53,8 +60,7 @@ const DrawerNavigatorItems = ({ { - navigation.navigate('DrawerClose'); - navigation.navigate(route.routeName); + onItemPress({ route, focused }); }} delayPressIn={0} > diff --git a/packages/react-navigation/src/views/Drawer/DrawerSidebar.js b/packages/react-navigation/src/views/Drawer/DrawerSidebar.js index 085ef9ba..e926f71c 100644 --- a/packages/react-navigation/src/views/Drawer/DrawerSidebar.js +++ b/packages/react-navigation/src/views/Drawer/DrawerSidebar.js @@ -12,12 +12,13 @@ import type { NavigationRouter, NavigationDrawerScreenOptions, NavigationState, + NavigationStateRoute, Style, } from '../../TypeDefinition'; -import type { DrawerScene } from './DrawerView'; +import type { DrawerScene, DrawerItem } from './DrawerView'; -type Navigation = NavigationScreenProp; +type Navigation = NavigationScreenProp; type Props = { router: NavigationRouter< @@ -74,15 +75,27 @@ class DrawerSidebar extends PureComponent { return null; }; + _onItemPress = ({ route }: DrawerItem) => { + this.props.navigation.navigate('DrawerClose'); + this.props.navigation.navigate(route.routeName); + }; + render() { const ContentComponent = this.props.contentComponent; + const { state } = this.props.navigation; return ( diff --git a/packages/react-navigation/src/views/Drawer/DrawerView.js b/packages/react-navigation/src/views/Drawer/DrawerView.js index d56caba0..09e80fd2 100644 --- a/packages/react-navigation/src/views/Drawer/DrawerView.js +++ b/packages/react-navigation/src/views/Drawer/DrawerView.js @@ -23,6 +23,11 @@ export type DrawerScene = { tintColor?: string, }; +export type DrawerItem = { + route: NavigationRoute, + focused: boolean, +}; + export type DrawerViewConfig = { drawerWidth: number, drawerPosition: 'left' | 'right',