fix: improve type annotation for screens

react-navigation · Oct 24, 2019 · 8f16085 · 8f16085
1 parent 58fbfdf
commit 8f16085
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/packages/core/src/SceneView.tsx b/packages/core/src/SceneView.tsx
@@ -90,8 +90,10 @@ export default function SceneView<
               route={route}
             >
               {'component' in screen && screen.component !== undefined ? (
+                // @ts-ignore
                 <screen.component navigation={navigation} route={route} />
               ) : 'children' in screen && screen.children !== undefined ? (
+                // @ts-ignore
                 screen.children({ navigation, route })
               ) : null}
             </StaticContainer>

diff --git a/packages/core/src/types.tsx b/packages/core/src/types.tsx
@@ -521,13 +521,19 @@ export type RouteConfig<
       /**
        * React component to render for this screen.
        */
-      component: React.ComponentType<any>;
+      component: React.ComponentType<{
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }>;
     }
   | {
       /**
        * Render callback to render content of this screen.
        */
-      children: (props: any) => React.ReactNode;
+      children: (props: {
+        route: RouteProp<ParamList, RouteName>;
+        navigation: any;
+      }) => React.ReactNode;
     });
 
 export type NavigationContainerRef =

diff --git a/packages/example/src/Screens/BottomTabs.tsx b/packages/example/src/Screens/BottomTabs.tsx
@@ -41,9 +41,7 @@ export default function BottomTabsScreen() {
           tabBarButtonComponent: TouchableBounce,
         }}
       >
-        {props => (
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
       </BottomTabs.Screen>
       <BottomTabs.Screen
         name="chat"

diff --git a/packages/example/src/Screens/MaterialBottomTabs.tsx b/packages/example/src/Screens/MaterialBottomTabs.tsx
@@ -28,9 +28,7 @@ export default function MaterialBottomTabsScreen() {
           tabBarColor: '#C9E7F8',
         }}
       >
-        {props => (
-          <SimpleStackScreen {...props} options={{ headerMode: 'none' }} />
-        )}
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
       </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
         name="chat"

diff --git a/packages/example/src/Screens/SimpleStack.tsx b/packages/example/src/Screens/SimpleStack.tsx
@@ -5,7 +5,6 @@ import { RouteProp, ParamListBase } from '@react-navigation/core';
 import {
   createStackNavigator,
   StackNavigationProp,
-  StackNavigationOptions,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -77,18 +76,17 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = {
-  options?: StackNavigationOptions;
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
   navigation: StackNavigationProp<ParamListBase>;
 };
 
-export default function SimpleStackScreen({ navigation, options }: Props) {
+export default function SimpleStackScreen({ navigation, ...rest }: Props) {
   navigation.setOptions({
     headerShown: false,
   });
 
   return (
-    <SimpleStack.Navigator {...options}>
+    <SimpleStack.Navigator {...rest}>
       <SimpleStack.Screen
         name="article"
         component={ArticleScreen}