Improved DrawerItems

types/react-navigation/index.d.ts

@@ -27,6 +27,7 @@
 //                 Max Davidson <https://github.com/maxdavidson>
 //                 Lachlan Young <https://github.com/builtbyproxy>
 //                 Jason Killian <https://github.com/jkillian>
+//                 Jeroen Vervaeke <https://github.com/jeroenvervaeke>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -876,7 +877,38 @@ export function createSwitchNavigator(
 ): NavigationContainer;
 
 // DrawerItems
-export const DrawerItems: React.ReactType;
+export const DrawerItems: React.ComponentType<DrawerItemsProps>;
+
+export interface DrawerItemsProps {
+  navigation: NavigationScreenProp<NavigationState>,
+  items: Array<NavigationRoute>,
+  activeItemKey?: string,
+  activeTintColor?: string,
+  activeBackgroundColor?: string,
+  inactiveTintColor?: string,
+  inactiveBackgroundColor?: string,
+  getLabel: (scene: DrawerScene) => React.ReactNode | string,
+  renderIcon: (scene: DrawerScene) => React.ReactNode,
+  onItemPress: (info: DrawerItem) => void,
+  itemsContainerForceInset?: Object,
+  itemsContainerStyle?: StyleProp<ViewStyle>,
+  itemStyle?: StyleProp<ViewStyle>,
+  labelStyle?: StyleProp<TextStyle>,
+  activeLabelStyle?: StyleProp<TextStyle>,
+  inactiveLabelStyle?: StyleProp<TextStyle>,
+  iconContainerStyle?: StyleProp<ViewStyle>,
+  drawerPosition: 'left' | 'right',
+}
+declare type DrawerScene = {
+  route: NavigationRoute,
+  focused: boolean,
+  index: number,
+  tintColor?: string,
+};
+declare type DrawerItem = {
+  route: NavigationRoute,
+  focused: boolean,
+};
 
 /**
  * Drawer Navigator
@@ -885,7 +917,7 @@ export interface DrawerViewConfig {
   drawerBackgroundColor?: string;
   drawerWidth?: number;
   drawerPosition?: 'left' | 'right';
-  contentComponent?: React.ReactType;
+  contentComponent?: React.ComponentType<DrawerItemsProps>;
   contentOptions?: any;
   style?: StyleProp<ViewStyle>;
 }

types/react-navigation/react-navigation-tests.tsx

@@ -8,6 +8,8 @@ import {
 import {
     createDrawerNavigator,
     createBottomTabNavigator,
+    DrawerItems,
+    DrawerItemsProps,
     DrawerNavigatorConfig,
     NavigationAction,
     NavigationActions,
@@ -331,6 +333,17 @@ const BasicDrawerNavigator = createDrawerNavigator(
     stackNavigatorConfig,
 );
 
+const Drawer = (props: DrawerItemsProps) => (
+    <DrawerItems {...props} />
+);
+  
+const DrawerNavigatorWithCustomDrawer = createDrawerNavigator(
+    routeConfigMap,
+    {   
+        contentComponent: Drawer,
+    }
+);
+
 function renderBasicDrawerNavigator(): JSX.Element {
     return (
         <BasicDrawerNavigator