From 8f16085808759f3efccae2095d75ebcc806f146e Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Thu, 24 Oct 2019 18:55:26 +0200
Subject: [PATCH] fix: improve type annotation for screens

---
 packages/core/src/SceneView.tsx                     |  2 ++
 packages/core/src/types.tsx                         | 10 ++++++++--
 packages/example/src/Screens/BottomTabs.tsx         |  4 +---
 packages/example/src/Screens/MaterialBottomTabs.tsx |  4 +---
 packages/example/src/Screens/SimpleStack.tsx        |  8 +++-----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/SceneView.tsx b/packages/core/src/SceneView.tsx
index 59dd4bd1..50801d36 100644
--- 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
index 8084b453..d3ebf464 100644
--- 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
index 97dc8c73..a0950224 100644
--- 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
index 3ea22a55..b1347c68 100644
--- 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
index e2d4b073..a72ed313 100644
--- 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}