fix: properly infer route type in screen elements

packages/core/src/createNavigator.tsx

@@ -1,28 +1,26 @@
 import * as React from 'react';
 import Screen from './Screen';
-import { ParamListBase, RouteConfig, TypedNavigator } from './types';
+import { ParamListBase, TypedNavigator } from './types';
 
 /**
  * Higher order component to create a `Navigator` and `Screen` pair.
  * Custom navigators should wrap the navigator component in `createNavigator` before exporting.
  *
- * @param NavigatorComponent The navigtor component to wrap.
+ * @param Navigator The navigtor component to wrap.
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
 export default function createNavigator<
   ScreenOptions extends object,
-  N extends React.ComponentType<any>
->(NavigatorComponent: N) {
+  NavigatorComponent extends React.ComponentType<any>
+>(Navigator: NavigatorComponent) {
   return <ParamList extends ParamListBase>(): TypedNavigator<
     ParamList,
     ScreenOptions,
-    typeof NavigatorComponent
+    typeof Navigator
   > => {
     return {
-      Navigator: NavigatorComponent,
-      Screen: Screen as React.ComponentType<
-        RouteConfig<ParamList, keyof ParamList, ScreenOptions>
-      >,
+      Navigator,
+      Screen,
     };
   };
 }

packages/core/src/types.tsx

@@ -436,7 +436,7 @@ export type TypedNavigator<
       initialRouteName?: keyof ParamList;
     }
   >;
-  Screen: React.ComponentType<
-    RouteConfig<ParamList, keyof ParamList, ScreenOptions>
-  >;
+  Screen: <RouteName extends keyof ParamList>(
+    _: RouteConfig<ParamList, RouteName, ScreenOptions>
+  ) => null;
 };