diff --git a/packages/drawer/src/types.tsx b/packages/drawer/src/types.tsx index 9213f91a1c..099f91b77f 100644 --- a/packages/drawer/src/types.tsx +++ b/packages/drawer/src/types.tsx @@ -247,7 +247,12 @@ export type DrawerHeaderProps = { navigation: DrawerNavigationProp; }; -export type DrawerNavigationEventMap = {}; +export type DrawerNavigationEventMap = { + /** + * Event which fires on tapping on the item in the drawer menu. + */ + drawerPress: { data: undefined; canPreventDefault: true }; +}; export type DrawerNavigationHelpers = NavigationHelpers< ParamListBase, diff --git a/packages/drawer/src/views/DrawerItemList.tsx b/packages/drawer/src/views/DrawerItemList.tsx index 5811f9a0dd..ee78929d79 100644 --- a/packages/drawer/src/views/DrawerItemList.tsx +++ b/packages/drawer/src/views/DrawerItemList.tsx @@ -39,6 +39,24 @@ export default function DrawerItemList({ return state.routes.map((route, i) => { const focused = i === state.index; + + const onPress = () => { + const event = navigation.emit({ + type: 'drawerPress', + target: route.key, + canPreventDefault: true, + }); + + if (!event.defaultPrevented) { + navigation.dispatch({ + ...(focused + ? DrawerActions.closeDrawer() + : CommonActions.navigate({ name: route.name, merge: true })), + target: state.key, + }); + } + }; + const { title, drawerLabel, @@ -68,14 +86,7 @@ export default function DrawerItemList({ labelStyle={drawerLabelStyle} style={drawerItemStyle} to={buildLink(route.name, route.params)} - onPress={() => { - navigation.dispatch({ - ...(focused - ? DrawerActions.closeDrawer() - : CommonActions.navigate({ name: route.name, merge: true })), - target: state.key, - }); - }} + onPress={onPress} /> ); }) as React.ReactNode as React.ReactElement;