From 83242a7bef77862fa56533517d156678cb14e8db Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 1 May 2021 21:30:57 +0200
Subject: [PATCH] refactor: tweak the types

---
 .gitignore                                  |  2 ++
 example/src/index.tsx                       |  8 ++++++--
 packages/bottom-tabs/src/types.tsx          |  8 ++++----
 packages/core/src/NavigationContext.tsx     |  2 +-
 packages/core/src/types.tsx                 | 18 ++++++++++--------
 packages/core/src/useCurrentRender.tsx      |  6 +-----
 packages/core/src/useDescriptors.tsx        |  6 +++---
 packages/core/src/useOptionsGetters.tsx     |  4 ++--
 packages/core/src/useRoute.tsx              |  4 +---
 packages/core/src/useRouteCache.tsx         |  2 +-
 packages/drawer/src/types.tsx               |  8 ++++----
 packages/elements/src/Screen.tsx            |  2 +-
 packages/material-bottom-tabs/src/types.tsx |  6 +++---
 packages/material-top-tabs/src/types.tsx    |  6 +++---
 packages/stack/src/types.tsx                |  6 +++---
 15 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5e70f7e9..1014abc5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,5 @@ npm-debug.*
 *.key
 *.mobileprovision
 *.orig.*
+
+*.iml
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 5f9009dc..42a30276 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -33,8 +33,8 @@ import {
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStackNavigator,
-  StackScreenProps,
   HeaderStyleInterpolators,
+  StackNavigationProp,
 } from '@react-navigation/stack';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
 
@@ -304,7 +304,11 @@ export default function App() {
                     ),
                   }}
                 >
-                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
+                  {({
+                    navigation,
+                  }: {
+                    navigation: StackNavigationProp<RootStackParamList>;
+                  }) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >
diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
index be7d5cd6..9945528c 100644
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -42,7 +42,7 @@ export type BottomTabNavigationHelpers = NavigationHelpers<
 
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -54,7 +54,7 @@ export type BottomTabNavigationProp<
 
 export type BottomTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: BottomTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -239,7 +239,7 @@ export type BottomTabNavigationOptions = HeaderOptions & {
 export type BottomTabDescriptor = Descriptor<
   BottomTabNavigationOptions,
   BottomTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
@@ -283,7 +283,7 @@ export type BottomTabHeaderProps = {
   /**
    * Route object for the current screen.
    */
-  route: RouteProp<ParamListBase, string>;
+  route: RouteProp<ParamListBase>;
   /**
    * Navigation prop for the header.
    */
diff --git a/packages/core/src/NavigationContext.tsx b/packages/core/src/NavigationContext.tsx
index 1f7a6fd6..6726e59c 100644
--- a/packages/core/src/NavigationContext.tsx
+++ b/packages/core/src/NavigationContext.tsx
@@ -6,7 +6,7 @@ import type { NavigationProp } from './types';
  * Context which holds the navigation prop for a screen.
  */
 const NavigationContext = React.createContext<
-  NavigationProp<ParamListBase, string, any, any> | undefined
+  NavigationProp<ParamListBase> | undefined
 >(undefined);
 
 export default NavigationContext;
diff --git a/packages/core/src/types.tsx b/packages/core/src/types.tsx
index 46d7ee91..8068e2c5 100644
--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -9,10 +9,12 @@ import type {
   ParamListBase,
 } from '@react-navigation/routers';
 
+type Keyof<T extends {}> = Extract<keyof T, string>;
+
 export type DefaultNavigatorOptions<
   ScreenOptions extends {},
   ParamList extends ParamListBase = ParamListBase
-> = DefaultRouterOptions<Extract<keyof ParamList, string>> & {
+> = DefaultRouterOptions<Keyof<ParamList>> & {
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen` components are supported as children.
@@ -24,7 +26,7 @@ export type DefaultNavigatorOptions<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList, keyof ParamList>;
+        route: RouteProp<ParamList>;
         navigation: any;
       }) => ScreenOptions);
   /**
@@ -34,7 +36,7 @@ export type DefaultNavigatorOptions<
   defaultScreenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList, keyof ParamList>;
+        route: RouteProp<ParamList>;
         navigation: any;
         options: ScreenOptions;
       }) => ScreenOptions);
@@ -96,11 +98,11 @@ export type EventConsumer<EventMap extends EventMapBase> = {
    * @param type Type of the event (e.g. `focus`, `blur`)
    * @param callback Callback listener which is executed upon receiving the event.
    */
-  addListener<EventName extends Extract<keyof EventMap, string>>(
+  addListener<EventName extends Keyof<EventMap>>(
     type: EventName,
     callback: EventListenerCallback<EventMap, EventName>
   ): () => void;
-  removeListener<EventName extends Extract<keyof EventMap, string>>(
+  removeListener<EventName extends Keyof<EventMap>>(
     type: EventName,
     callback: EventListenerCallback<EventMap, EventName>
   ): void;
@@ -115,7 +117,7 @@ export type EventEmitter<EventMap extends EventMapBase> = {
    * @param [options.target] Key of the target route which should receive the event.
    * If not specified, all routes receive the event.
    */
-  emit<EventName extends Extract<keyof EventMap, string>>(
+  emit<EventName extends Keyof<EventMap>>(
     options: {
       type: EventName;
       target?: string;
@@ -264,7 +266,7 @@ export type NavigationContainerProps = {
 
 export type NavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string,
+  RouteName extends keyof ParamList = Keyof<ParamList>,
   State extends NavigationState = NavigationState<ParamList>,
   ScreenOptions extends {} = {},
   EventMap extends EventMapBase = {}
@@ -289,7 +291,7 @@ export type NavigationProp<
 
 export type RouteProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList
+  RouteName extends keyof ParamList = Keyof<ParamList>
 > = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
 export type CompositeNavigationProp<
diff --git a/packages/core/src/useCurrentRender.tsx b/packages/core/src/useCurrentRender.tsx
index abeb7fa9..a5bbe00b 100644
--- a/packages/core/src/useCurrentRender.tsx
+++ b/packages/core/src/useCurrentRender.tsx
@@ -13,11 +13,7 @@ type Options = {
   navigation: NavigationHelpers<ParamListBase>;
   descriptors: Record<
     string,
-    Descriptor<
-      object,
-      NavigationProp<ParamListBase>,
-      RouteProp<ParamListBase, string>
-    >
+    Descriptor<object, NavigationProp<ParamListBase>, RouteProp<ParamListBase>>
   >;
 };
 
diff --git a/packages/core/src/useDescriptors.tsx b/packages/core/src/useDescriptors.tsx
index edb4f374..0ff85db6 100644
--- a/packages/core/src/useDescriptors.tsx
+++ b/packages/core/src/useDescriptors.tsx
@@ -38,13 +38,13 @@ type Options<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamListBase, string>;
+        route: RouteProp<ParamListBase>;
         navigation: any;
       }) => ScreenOptions);
   defaultScreenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamListBase, string>;
+        route: RouteProp<ParamListBase>;
         navigation: any;
         options: ScreenOptions;
       }) => ScreenOptions);
@@ -133,7 +133,7 @@ export default function useDescriptors<
         ScreenOptions,
         NavigationProp<ParamListBase, string, State, ScreenOptions, EventMap> &
           ActionHelpers,
-        RouteProp<ParamListBase, string>
+        RouteProp<ParamListBase>
       >
     >
   >((acc, route, i) => {
diff --git a/packages/core/src/useOptionsGetters.tsx b/packages/core/src/useOptionsGetters.tsx
index e6bfc204..848c1329 100644
--- a/packages/core/src/useOptionsGetters.tsx
+++ b/packages/core/src/useOptionsGetters.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import type { ParamListBase, NavigationState } from '@react-navigation/routers';
+import type { ParamListBase } from '@react-navigation/routers';
 import NavigationStateContext from './NavigationStateContext';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import type { NavigationProp } from './types';
 
 type Options = {
   key?: string;
-  navigation?: NavigationProp<ParamListBase, string, NavigationState, object>;
+  navigation?: NavigationProp<ParamListBase>;
   options?: object | undefined;
 };
 
diff --git a/packages/core/src/useRoute.tsx b/packages/core/src/useRoute.tsx
index 720cfba9..6115cd3a 100644
--- a/packages/core/src/useRoute.tsx
+++ b/packages/core/src/useRoute.tsx
@@ -8,9 +8,7 @@ import type { RouteProp } from './types';
  *
  * @returns Route prop of the parent screen.
  */
-export default function useRoute<
-  T extends RouteProp<ParamListBase, string>
->(): T {
+export default function useRoute<T extends RouteProp<ParamListBase>>(): T {
   const route = React.useContext(NavigationRouteContext);
 
   if (route === undefined) {
diff --git a/packages/core/src/useRouteCache.tsx b/packages/core/src/useRouteCache.tsx
index ca53abc1..d71a3fb5 100644
--- a/packages/core/src/useRouteCache.tsx
+++ b/packages/core/src/useRouteCache.tsx
@@ -6,7 +6,7 @@ import type {
 } from '@react-navigation/routers';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<Route<string>, RouteProp<ParamListBase, string>>;
+type RouteCache = Map<Route<string>, RouteProp<ParamListBase>>;
 
 /**
  * Utilites such as `getFocusedRouteNameFromRoute` need to access state.
diff --git a/packages/drawer/src/types.tsx b/packages/drawer/src/types.tsx
index 36249aba..b848f27d 100644
--- a/packages/drawer/src/types.tsx
+++ b/packages/drawer/src/types.tsx
@@ -235,7 +235,7 @@ export type DrawerHeaderProps = {
   /**
    * Route object for the current screen.
    */
-  route: RouteProp<ParamListBase, string>;
+  route: RouteProp<ParamListBase>;
   /**
    * Navigation prop for the header.
    */
@@ -252,7 +252,7 @@ export type DrawerNavigationHelpers = NavigationHelpers<
 
 export type DrawerNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -264,7 +264,7 @@ export type DrawerNavigationProp<
 
 export type DrawerScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: DrawerNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -273,7 +273,7 @@ export type DrawerScreenProps<
 export type DrawerDescriptor = Descriptor<
   DrawerNavigationOptions,
   DrawerNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type DrawerDescriptorMap = Record<string, DrawerDescriptor>;
diff --git a/packages/elements/src/Screen.tsx b/packages/elements/src/Screen.tsx
index 102ae218..2b33f57c 100644
--- a/packages/elements/src/Screen.tsx
+++ b/packages/elements/src/Screen.tsx
@@ -20,7 +20,7 @@ import getDefaultHeaderHeight from './Header/getDefaultHeaderHeight';
 type Props = {
   focused: boolean;
   navigation: NavigationProp<ParamListBase>;
-  route: RouteProp<ParamListBase, string>;
+  route: RouteProp<ParamListBase>;
   header: React.ReactNode;
   headerShown?: boolean;
   headerStatusBarHeight?: number;
diff --git a/packages/material-bottom-tabs/src/types.tsx b/packages/material-bottom-tabs/src/types.tsx
index 75d82942..78a77d5a 100644
--- a/packages/material-bottom-tabs/src/types.tsx
+++ b/packages/material-bottom-tabs/src/types.tsx
@@ -24,7 +24,7 @@ export type MaterialBottomTabNavigationHelpers = NavigationHelpers<
 
 export type MaterialBottomTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -36,7 +36,7 @@ export type MaterialBottomTabNavigationProp<
 
 export type MaterialBottomTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: MaterialBottomTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -85,7 +85,7 @@ export type MaterialBottomTabNavigationOptions = {
 export type MaterialBottomTabDescriptor = Descriptor<
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type MaterialBottomTabDescriptorMap = Record<
diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
index 5f81d9b1..468bddf5 100644
--- a/packages/material-top-tabs/src/types.tsx
+++ b/packages/material-top-tabs/src/types.tsx
@@ -38,7 +38,7 @@ export type MaterialTopTabNavigationHelpers = NavigationHelpers<
 
 export type MaterialTopTabNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -50,7 +50,7 @@ export type MaterialTopTabNavigationProp<
 
 export type MaterialTopTabScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: MaterialTopTabNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -189,7 +189,7 @@ export type MaterialTopTabNavigationOptions = {
 export type MaterialTopTabDescriptor = Descriptor<
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type MaterialTopTabDescriptorMap = Record<
diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
index cdf1f2fe..d49966db 100644
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -46,7 +46,7 @@ export type StackNavigationHelpers = NavigationHelpers<
 
 export type StackNavigationProp<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -58,7 +58,7 @@ export type StackNavigationProp<
 
 export type StackScreenProps<
   ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
+  RouteName extends keyof ParamList = keyof ParamList
 > = {
   navigation: StackNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
@@ -182,7 +182,7 @@ export type StackHeaderProps = {
 export type StackDescriptor = Descriptor<
   StackNavigationOptions,
   StackNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase, string>
+  RouteProp<ParamListBase>
 >;
 
 export type StackDescriptorMap = Record<string, StackDescriptor>;