Add createNavigator and not export Screen directly

example/StackNavigator.tsx

@@ -8,6 +8,7 @@ import {
   CommonAction,
   ParamListBase,
   Router,
+  createNavigator,
 } from '../src/index';
 
 type Props = {
@@ -167,7 +168,6 @@ const StackRouter: Router<CommonAction | Action> = {
             ],
           };
         }
-
         return null;
 
       case 'REPLACE': {
@@ -224,7 +224,7 @@ const StackRouter: Router<CommonAction | Action> = {
   },
 };
 
-export default function StackNavigator(props: Props) {
+export function StackNavigator(props: Props) {
   const { navigation, descriptors } = useNavigationBuilder(StackRouter, props);
 
   return (
@@ -268,3 +268,5 @@ export default function StackNavigator(props: Props) {
     </div>
   );
 }
+
+export default createNavigator(StackNavigator);

example/TabNavigator.tsx

@@ -8,6 +8,7 @@ import {
   CommonAction,
   ParamListBase,
   Router,
+  createNavigator,
 } from '../src/index';
 
 type Props = {
@@ -143,9 +144,8 @@ const TabRouter: Router<Action | CommonAction> = {
   },
 };
 
-export default function TabNavigator(props: Props) {
+export function TabNavigator(props: Props) {
   const { navigation, descriptors } = useNavigationBuilder(TabRouter, props);
-
   return (
     <div style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>
       {navigation.state.routes.map((route, i, self) => (
@@ -164,3 +164,5 @@ export default function TabNavigator(props: Props) {
     </div>
   );
 }
+
+export default createNavigator(TabNavigator);

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,15 +20,9 @@ type TabParamList = {
   fifth: undefined;
 };
 
-const Stack: TypedNavigator<StackParamList, typeof StackNavigator> = {
-  Navigator: StackNavigator,
-  Screen,
-};
+const MyStack = Stack<StackParamList>();
 
-const Tab: TypedNavigator<TabParamList, typeof TabNavigator> = {
-  Navigator: TabNavigator,
-  Screen,
-};
+const MyTab = Tab<TabParamList>();
 
 const First = ({
   navigation,
@@ -150,27 +142,27 @@ function App() {
         localStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
       }
     >
-      <Stack.Navigator>
-        <Stack.Screen
+      <MyStack.Navigator>
+        <MyStack.Screen
           name="first"
           component={First}
           options={{ title: 'Foo' }}
           initialParams={{ author: 'Jane' }}
         />
-        <Stack.Screen
+        <MyStack.Screen
           name="second"
           component={Second}
           options={{ title: 'Bar' }}
         />
-        <Stack.Screen name="third" options={{ title: 'Baz' }}>
+        <MyStack.Screen name="third" options={{ title: 'Baz' }}>
           {() => (
-            <Tab.Navigator initialRouteName="fifth">
-              <Tab.Screen name="fourth" component={Fourth} />
-              <Tab.Screen name="fifth" component={Fifth} />
-            </Tab.Navigator>
+            <MyTab.Navigator initialRouteName="fifth">
+              <MyTab.Screen name="fourth" component={Fourth} />
+              <MyTab.Screen name="fifth" component={Fifth} />
+            </MyTab.Navigator>
           )}
-        </Stack.Screen>
-      </Stack.Navigator>
+        </MyStack.Screen>
+      </MyStack.Navigator>
     </NavigationContainer>
   );
 }

src/createNavigator.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ParamListBase, ScreenProps, TypedNavigator } from './types';
+import Screen from './Screen';
+
+export default function createNavigator<N extends React.ComponentType<any>>(
+  RawNavigator: N
+) {
+  return function Navigator<ParamList extends ParamListBase>(): TypedNavigator<
+    ParamList,
+    typeof RawNavigator
+  > {
+    return {
+      Navigator: RawNavigator,
+      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';