Add createNavigator and not export Screen directly

example/StackNavigator.tsx

@@ -7,7 +7,7 @@ import {
   NavigationProp,
   CommonAction,
   ParamListBase,
-  Router,
+  Router, createNavigator,
 } from '../src/index';
 
 type Props = {
@@ -224,7 +224,7 @@ const StackRouter: Router<CommonAction | Action> = {
   },
 };
 
-export default function StackNavigator(props: Props) {
+export default createNavigator((props: Props) => {
   const { navigation, descriptors } = useNavigationBuilder(StackRouter, props);
 
   return (
@@ -267,4 +267,4 @@ export default function StackNavigator(props: Props) {
       </div>
     </div>
   );
-}
+})

example/TabNavigator.tsx

@@ -8,6 +8,7 @@ import {
   CommonAction,
   ParamListBase,
   Router,
+  createNavigator
 } from '../src/index';
 
 type Props = {
@@ -143,7 +144,7 @@ const TabRouter: Router<Action | CommonAction> = {
   },
 };
 
-export default function TabNavigator(props: Props) {
+export default createNavigator((props: Props) => {
   const { navigation, descriptors } = useNavigationBuilder(TabRouter, props);
 
   return (
@@ -163,4 +164,4 @@ export default function TabNavigator(props: Props) {
       ))}
     </div>
   );
-}
+})

example/index.tsx

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { render } from 'react-dom';
 import {
   NavigationContainer,
-  Screen,
   CompositeNavigationProp,
-  TypedNavigator,
   NavigationHelpers,
   PartialState,
 } from '../src';
-import StackNavigator, { StackNavigationProp } from './StackNavigator';
-import TabNavigator, { TabNavigationProp } from './TabNavigator';
+import Stack, { StackNavigationProp } from './StackNavigator';
+import Tab, { TabNavigationProp } from './TabNavigator';
 
 type StackParamList = {
   first: { author: string };
@@ -22,16 +20,6 @@ type TabParamList = {
   fifth: undefined;
 };
 
-const Stack: TypedNavigator<StackParamList, typeof StackNavigator> = {
-  Navigator: StackNavigator,
-  Screen,
-};
-
-const Tab: TypedNavigator<TabParamList, typeof TabNavigator> = {
-  Navigator: TabNavigator,
-  Screen,
-};
-
 const First = ({
   navigation,
 }: {

src/createNavigator.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ParamListBase, ScreenProps, TypedNavigator } from './types';
+import Screen from './Screen';
+
+export default function createNavigator<ParamList extends ParamListBase>(
+  Navigator: React.ComponentType<any>
+): TypedNavigator<ParamList, typeof Navigator> {
+  return {
+    Navigator,
+    Screen: Screen as React.ComponentType<
+      ScreenProps<ParamList, keyof ParamList>
+    >,
+  };
+}

src/index.tsx

@@ -1,5 +1,5 @@
 export { default as NavigationContainer } from './NavigationContainer';
-export { default as Screen } from './Screen';
+export { default as createNavigator } from './createNavigator';
 
 export { default as useNavigationBuilder } from './useNavigationBuilder';