diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 4e81a26c88..92f3daa0e6 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -27,6 +27,7 @@ // Max Davidson // Lachlan Young // Jason Killian +// Jeroen Vervaeke // 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; + +export interface DrawerItemsProps { + navigation: NavigationScreenProp, + items: Array, + 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, + itemStyle?: StyleProp, + labelStyle?: StyleProp, + activeLabelStyle?: StyleProp, + inactiveLabelStyle?: StyleProp, + iconContainerStyle?: StyleProp, + 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; contentOptions?: any; style?: StyleProp; } diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index 66bcf13c3c..43cadcde76 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/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) => ( + +); + +const DrawerNavigatorWithCustomDrawer = createDrawerNavigator( + routeConfigMap, + { + contentComponent: Drawer, + } +); + function renderBasicDrawerNavigator(): JSX.Element { return (