chore: release 4.0.5

example/.babelrc

@@ -1,3 +1,12 @@
 {
-  "presets": ["expo"]
+  "presets": [
+    "expo"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "react-navigation": "../src/react-navigation"
+      }
+    }]
+  ]
 }

example/app.json

@@ -5,10 +5,6 @@
     "slug": "react-navigation-stack-demo",
     "sdkVersion": "33.0.0",
     "version": "1.0.0",
-    "primaryColor": "#2196f3",
+    "primaryColor": "#2196f3"
-    "packagerOpts": {
-      "config": "./metro.config.js",
-      "projectRoots": ""
-    }
   }
 }

example/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
     "@react-native-community/masked-view": "^0.1.1",
-    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/core": "^3.5.1",
     "@react-navigation/native": "^3.6.2",
     "expo": "^33.0.7",
     "expo-asset": "^5.0.1",
@@ -24,7 +24,7 @@
     "react-native-paper": "^2.15.2",
     "react-navigation-drawer": "^2.0.1",
     "react-navigation-header-buttons": "^3.0.2",
-    "react-navigation-stack": "^1.5.1",
+    "react-navigation-stack": "^1.7.2",
     "react-navigation-tabs": "^1.2.0"
   },
   "devDependencies": {

example/src/Drawer.tsx

@@ -7,7 +7,10 @@ import {
   NavigationScreenProp,
   NavigationState,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
@@ -42,17 +45,13 @@ InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
 
-const EmailScreen = ({
+const EmailScreen = ({ navigation }: NavigationStackScreenProps) => (
-  navigation,
+  <MyNavScreen banner="Email Screen" navigation={navigation} />
-}: {
+);
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
 
-const DraftsScreen = ({
+const DraftsScreen = ({ navigation }: NavigationStackScreenProps) => (
-  navigation,
+  <MyNavScreen banner="Drafts Screen" navigation={navigation} />
-}: {
+);
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
 DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };

example/src/ModalStack.tsx

@@ -6,7 +6,10 @@ import {
   SafeAreaView,
   NavigationState,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -95,16 +98,13 @@ const ProfileNavigator = createStackNavigator(
   }
 );
 
-const MyHeaderTestScreen = ({
+const MyHeaderTestScreen = ({ navigation }: NavigationStackScreenProps) => (
-  navigation,
+  <MyNavScreen banner="Full screen view" navigation={navigation} />
-}: {
+);
-  navigation: NavigationScreenProp<NavigationState>;
+
-}) => <MyNavScreen banner="Full screen view" navigation={navigation} />;
 MyHeaderTestScreen.navigationOptions = ({
   navigation,
-}: {
+}: NavigationStackScreenProps) => {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => {
   const headerVisible =
     navigation.state.params && navigation.state.params.headerVisible;
   return {

example/src/SimpleStack.tsx

@@ -5,15 +5,16 @@ import {
   NavigationActions,
   NavigationEventPayload,
   NavigationEventSubscription,
-  NavigationScreenProp,
-  NavigationState,
-  NavigationStateRoute,
   SafeAreaView,
   StackActions,
   Themed,
   withNavigation,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackProp,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -21,12 +22,12 @@ import SampleText from './SampleText';
 const DEBUG = false;
 
 interface MyNavScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   banner: React.ReactNode;
 }
 
 interface BackButtonProps {
-  navigation: NavigationScreenProp<NavigationStateRoute<any>>;
+  navigation: NavigationStackProp;
 }
 
 class MyBackButton extends React.Component<BackButtonProps, any> {
@@ -99,11 +100,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
   }
 }
 
-interface MyHomeScreenProps {
+class MyHomeScreen extends React.Component<NavigationStackScreenProps> {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-
-class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -143,10 +140,7 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-interface MyPhotosScreenProps {
+class MyPhotosScreen extends React.Component<NavigationStackScreenProps> {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
     headerLeft: () => <MyBackButtonWithNavigation />,
     title: 'Photos',
@@ -195,7 +189,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 const MyProfileScreen = ({
   navigation,
 }: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }) => (
   <MyNavScreen
     banner={`${
@@ -205,7 +199,7 @@ const MyProfileScreen = ({
   />
 );
 
-MyProfileScreen.navigationOptions = (props: MyHomeScreenProps) => {
+MyProfileScreen.navigationOptions = (props: NavigationStackScreenProps) => {
   const { navigation } = props;
   const { state, setParams } = navigation;
   const { params } = state;

example/src/StackWithCustomHeaderBackImage.tsx

@@ -3,11 +3,13 @@ import { Button, Image, StyleSheet } from 'react-native';
 import {
   NavigationScreenProp,
   NavigationState,
-  NavigationScreenConfigProps,
   Themed,
   SafeAreaView,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import SampleText from './SampleText';
 
 interface MyNavScreenProps {
@@ -124,8 +126,8 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
+    defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
-      headerBackImage: (
+      headerBackImage: () => (
         <MyCustomHeaderBackImage
           style={[
             styles.myCustomHeaderBackImageAlt,

example/src/StackWithHeaderPreset.tsx

@@ -1,19 +1,13 @@
 import * as React from 'react';
+import { SafeAreaView, Themed } from 'react-navigation';
 import {
-  NavigationScreenProp,
+  createStackNavigator,
-  NavigationState,
+  NavigationStackScreenProps,
-  SafeAreaView,
+} from 'react-navigation-stack';
-  Themed,
-} from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 
-interface NavScreenProps {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-
-class HomeScreen extends React.Component<NavScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -36,7 +30,7 @@ class HomeScreen extends React.Component<NavScreenProps> {
   }
 }
 
-class OtherScreen extends React.Component<NavScreenProps> {
+class OtherScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Your title here',
   };
@@ -63,7 +57,7 @@ class OtherScreen extends React.Component<NavScreenProps> {
   }
 }
 
-class ScreenWithLongTitle extends React.Component<NavScreenProps> {
+class ScreenWithLongTitle extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: "Another title that's kind of long",
   };
@@ -82,7 +76,7 @@ class ScreenWithLongTitle extends React.Component<NavScreenProps> {
   }
 }
 
-class ScreenWithNoHeader extends React.Component<NavScreenProps> {
+class ScreenWithNoHeader extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     header: null,
     title: 'No Header',

example/src/StackWithTranslucentHeader.tsx

@@ -5,8 +5,6 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
 import {
   NavigationEventPayload,
   NavigationEventSubscription,
-  NavigationScreenProp,
-  NavigationState,
   Themed,
   SupportedThemes,
 } from 'react-navigation';
@@ -14,13 +12,15 @@ import {
   createStackNavigator,
   Header,
   HeaderStyleInterpolator,
+  NavigationStackScreenProps,
+  NavigationStackProp,
 } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
 
 interface MyNavScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   banner: React.ReactNode;
 }
 
@@ -81,7 +81,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
 }
 
 interface MyHomeScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
@@ -125,7 +125,7 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
 }
 
 interface MyPhotosScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
@@ -175,7 +175,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 const MyProfileScreen = ({
   navigation,
 }: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }) => (
   <MyNavScreen
     banner={`${navigation.state.params!.mode === 'edit' ? 'Now Editing ' : ''}${
@@ -186,7 +186,7 @@ const MyProfileScreen = ({
 );
 
 MyProfileScreen.navigationOptions = (props: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   theme: SupportedThemes;
 }) => {
   const { navigation, theme } = props;
@@ -226,7 +226,7 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: ({ theme }) => ({
+    defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
       headerBackground:
         Platform.OS === 'ios' ? (
           <BlurView

example/src/StacksAndKeys.tsx

@@ -1,18 +1,13 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import { Themed } from 'react-navigation';
 import {
-  NavigationScreenProp,
+  createStackNavigator,
-  NavigationState,
+  NavigationStackScreenProps,
-  Themed,
+} from 'react-navigation-stack';
-} from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-interface Props {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
-  navigation: NavigationScreenProp<NavigationState & any>;
-}
-
-class HomeScreen extends React.Component<Props, any> {
   render() {
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -37,9 +32,12 @@ class HomeScreen extends React.Component<Props, any> {
   }
 }
 
-class ProfileScreen extends React.Component<any, any> {
+class ProfileScreen extends React.Component<
+  NavigationStackScreenProps<{ homeKey: string }>
+> {
   render() {
-    const { homeKey } = this.props.navigation.state.params;
+    const homeKey = this.props.navigation.getParam('homeKey');
+
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Profile</Text>
@@ -64,7 +62,7 @@ class ProfileScreen extends React.Component<any, any> {
   }
 }
 
-class SettingsScreen extends React.Component<Props, any> {
+class SettingsScreen extends React.Component<NavigationStackScreenProps> {
   render() {
     const { homeKey } = this.props.navigation.state.params!;
 

example/src/StacksInTabs.tsx

@@ -7,7 +7,11 @@ import {
   SafeAreaView,
   ScrollView,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+  NavigationStackProp,
+} from 'react-navigation-stack';
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Ionicons } from '@expo/vector-icons';
 import { Button } from './commonComponents/ButtonWithMargin';
@@ -19,7 +23,7 @@ Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam eg
 Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
 
 interface Props {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   banner: string;
 }
 
@@ -59,11 +63,7 @@ class MyNavScreen extends React.Component<Props> {
   }
 }
 
-const MyProfileScreen = ({
+const MyProfileScreen = ({ navigation }: NavigationStackScreenProps) => (
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
   <MyNavScreen
     banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}

example/src/StacksOverTabs.tsx

@@ -7,7 +7,10 @@ import {
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
@@ -59,9 +62,9 @@ const MyProfileScreen = ({
 
 const MyNotificationsSettingsScreen = ({
   navigation,
-}: {
+}: NavigationStackScreenProps) => (
-  navigation: NavigationScreenProp<NavigationState>;
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
-}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
+);
 
 const MySettingsScreen = ({
   navigation,
@@ -141,11 +144,7 @@ const StacksOverTabs = createStackNavigator({
     screen: MyNotificationsSettingsScreen,
   },
   Profile: {
-    navigationOptions: ({
+    navigationOptions: ({ navigation }: NavigationStackScreenProps) => ({
-      navigation,
-    }: {
-      navigation: NavigationScreenProp<NavigationState>;
-    }) => ({
       title: `${navigation.state.params!.name}'s Profile!`,
     }),
     path: '/people/:name',

example/src/StacksOverTopTabs.tsx

@@ -11,7 +11,10 @@ import {
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import {
   createMaterialTopTabNavigator,
   MaterialTopTabBar,
@@ -64,11 +67,7 @@ const MyHomeScreen = ({
   />
 );
 
-const MyProfileScreen = ({
+const MyProfileScreen = ({ navigation }: NavigationStackScreenProps) => (
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
   <MyNavScreen
     banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}
@@ -77,9 +76,9 @@ const MyProfileScreen = ({
 
 const MyNotificationsSettingsScreen = ({
   navigation,
-}: {
+}: NavigationStackScreenProps) => (
-  navigation: NavigationScreenProp<NavigationState>;
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
-}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
+);
 
 const MySettingsScreen = ({
   navigation,
@@ -159,11 +158,7 @@ const StackNavigator = createStackNavigator(
     },
     Profile: {
       screen: MyProfileScreen,
-      navigationOptions: ({
+      navigationOptions: ({ navigation }: NavigationStackScreenProps) => ({
-        navigation,
-      }: {
-        navigation: NavigationScreenProp<NavigationState>;
-      }) => ({
         title: `${navigation.state.params!.name}'s Profile!`,
       }),
     },

example/src/SwitchWithStacks.tsx

@@ -7,10 +7,13 @@ import {
   Platform,
 } from 'react-native';
 import { Themed, createSwitchNavigator } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-class SignInScreen extends React.Component<any, any> {
+class SignInScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Please sign in',
   };
@@ -34,7 +37,7 @@ class SignInScreen extends React.Component<any, any> {
   };
 }
 
-class HomeScreen extends React.Component<any, any> {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome to the app!',
   };
@@ -64,7 +67,7 @@ class HomeScreen extends React.Component<any, any> {
   };
 }
 
-class OtherScreen extends React.Component<any, any> {
+class OtherScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Lots of features here',
   };

example/yarn.lock

@@ -918,10 +918,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-2.0.10.tgz#d28a446352e75754b78509557988359133cdbcca"
   integrity sha512-NrIzyLe0eSbhgMnHl2QdSEhaA7yXh6p9jzMomfUa//hoTXE+xbObGDdiWWSQm2bnXnZJg8XCU3AB9qzvqcuLnA==
 
-"@react-navigation/core@^3.5.0":
+"@react-navigation/core@^3.5.1":
-  version "3.5.0"
+  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.0.tgz#73d1a12448e2bd71855e0080b95a7f51ede0cd9e"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.1.tgz#7a2339fca3496979305fb3a8ab88c2ca8d8c214d"
-  integrity sha512-NLm24lA51R8o8c+iFnwtN9elqRzm4OJ8f1qPBCUNIYW1sb8M5yCD53vRP0fRcPFpr/6Xzs2TJMsWnnebwFp0Rw==
+  integrity sha512-q7NyhWVYOhVIWqL2GZKa6G78YarXaVTTtOlSDkvy4ZIggo40wZzamlnrJRvsaQX46gsgw45FAWb5SriHh8o7eA==
   dependencies:
     hoist-non-react-statics "^3.3.0"
     path-to-regexp "^1.7.0"
@@ -4798,10 +4798,10 @@ react-navigation-header-buttons@^3.0.2:
   dependencies:
     react-native-platform-touchable "^1.1.1"
 
-react-navigation-stack@^1.5.1:
+react-navigation-stack@^1.7.2:
-  version "1.5.1"
+  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.5.1.tgz#8a8c0cd0b8498225f4e8e564f06043849961bede"
+  resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-1.7.2.tgz#d7cf7a7dc76c2390024be6358fc65461c848a034"
-  integrity sha512-VEMSsKvicaLlFu6+U4u5YkwFe4hnMTLu83bR15GumuqrpCVPPgl7Qt4fSZCRG/YtC5ZcUiy5EgCRu9MVIINV5w==
+  integrity sha512-72oL9rVXUFvFayoA7k+OgXcwP/6e5BAtCSpUXfKX+lZYrJe3BvuhZz2KDhEjdfbuP/sNok55ZRzc3/X1kh5mxQ==
   dependencies:
     prop-types "^15.7.2"
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "4.0.1",
+  "version": "4.0.5",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -31,7 +31,7 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/core": "^3.5.1",
     "@react-navigation/native": "^3.6.2"
   },
   "devDependencies": {

typescript/react-navigation.d.ts

@@ -81,7 +81,7 @@ declare module 'react-navigation' {
     routes: NavigationRoute[];
     isTransitioning: boolean;
     key: string;
-    params: NavigationParams | undefined;
+    params?: NavigationParams | undefined;
   }
 
   export interface DrawerNavigationState extends NavigationState {
@@ -164,9 +164,9 @@ declare module 'react-navigation' {
       params?: NavigationParams;
     };
 
-    getComponentForRouteName: (routeName: string) => NavigationComponent;
+    getComponentForRouteName: (routeName: string) => NavigationComponent<{}, NavigationScreenProp<NavigationRoute>>;
 
-    getComponentForState: (state: State) => NavigationComponent;
+    getComponentForState: (state: State) => NavigationComponent<{}, NavigationScreenProp<NavigationRoute>>;
 
     getActionCreators: (
       route: NavigationRoute,
@@ -186,50 +186,31 @@ declare module 'react-navigation' {
     getScreenOptions: NavigationScreenOptionsGetter<Options>;
   }
 
-  export type NavigationScreenOption<T> =
+  export type NavigationScreenComponent<Options, NavigationScreenPropType> = React.ComponentType<any> & {
-    | T
+    navigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
-    | ((navigation: NavigationScreenProp<NavigationRoute>, config: T) => T);
+  };
 
-  export interface NavigationScreenDetails<T> {
+  export interface NavigationScreenConfigProps<NavigationScreenPropType> {
-    options: T;
+    navigation: NavigationScreenPropType;
-    state: NavigationRoute;
-    navigation: NavigationScreenProp<NavigationRoute>;
-  }
-
-  export interface NavigationScreenConfigProps {
-    navigation: NavigationScreenProp<NavigationRoute>;
     screenProps: unknown;
     theme: SupportedThemes;
   }
 
-  export type NavigationScreenConfig<Options> =
+  export type NavigationScreenConfig<Options, NavigationScreenPropType> =
     | Options
     | ((
-        navigationOptionsContainer: NavigationScreenConfigProps & {
+        navigationOptionsContainer: NavigationScreenConfigProps<NavigationScreenPropType> & {
-          navigationOptions: NavigationScreenConfig<Options>;
+          navigationOptions: Options;
         }
       ) => Options);
 
-  export type NavigationComponent =
+  export type NavigationComponent<Options, NavigationPropType> =
-    | NavigationScreenComponent<NavigationParams, any, any>
+    | NavigationScreenComponent<Options, NavigationPropType>
-    | NavigationNavigator<any, any, any>
+    | NavigationNavigator<Options, NavigationPropType>;
-    | any;
 
-  export type NavigationScreenComponent<
+  export type NavigationNavigator<Options, NavigationPropType> = React.ComponentType<NavigationNavigatorProps<Options>> & {
-    Params = NavigationParams,
+    router: NavigationRouter<Options>;
-    Options = {},
+    navigationOptions?: NavigationScreenConfig<Options, NavigationPropType>;
-    Props = {}
-  > = React.ComponentType<Navigationunknown<Params, Options> & Props> & {
-    navigationOptions?: NavigationScreenConfig<Options>;
-  };
-
-  export type NavigationNavigator<
-    State = NavigationState,
-    Options = {},
-    Props = {}
-  > = React.ComponentType<NavigationNavigatorProps<Options, State> & Props> & {
-    router: NavigationRouter<State, Options>;
-    navigationOptions?: NavigationScreenConfig<Options>;
   };
 
   export interface NavigationParams {
@@ -414,7 +395,7 @@ declare module 'react-navigation' {
   }
 
   export function SwitchRouter(
-    routeConfigs: NavigationRouteConfigMap,
+    routeConfigs: NavigationRouteConfigMap<any, any>,
     config?: NavigationSwitchRouterConfig
   ): NavigationRouter<any, any>;
 
@@ -452,20 +433,14 @@ declare module 'react-navigation' {
     | NavigationSwitchAction
     | { type: 'CHILD_ACTION'; key?: string };
 
-  export type NavigationRouteConfig =
+  export type NavigationRouteConfig<Options, NavigationScreenPropType> =
-    | NavigationComponent
+    | NavigationComponent<Options, NavigationScreenPropType>
-    | ({
+    | (
-        navigationOptions?: NavigationScreenConfig<any>;
+        | { screen: NavigationComponent<Options, NavigationScreenPropType> }
+        | { getScreen(): NavigationScreenComponent<Options, NavigationScreenPropType> }) & {
+        navigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
+        params?: { [key: string]: any }
         path?: string;
-      } & NavigationScreenRouteConfig);
-
-  export type NavigationScreenRouteConfig =
-    | NavigationComponent
-    | {
-        screen: NavigationComponent;
-      }
-    | {
-        getScreen: () => NavigationComponent;
       };
 
   export interface NavigationPathsConfig {
@@ -473,7 +448,7 @@ declare module 'react-navigation' {
   }
 
   // tslint:disable-next-line:strict-export-declare-modifiers
-  interface NavigationTabRouterConfig {
+  export interface NavigationTabRouterConfig {
     initialRouteName?: string;
     initialRouteParams?: NavigationParams;
     paths?: NavigationPathsConfig;
@@ -482,8 +457,8 @@ declare module 'react-navigation' {
     resetOnBlur?: boolean;
   }
 
-  export interface NavigationRouteConfigMap {
+  export interface NavigationRouteConfigMap<Options, NavigationScreenPropType> {
-    [routeName: string]: NavigationRouteConfig;
+    [routeName: string]: NavigationRouteConfig<Options, NavigationScreenPropType>;
   }
 
   export type NavigationDispatch = (action: NavigationAction) => boolean;
@@ -516,7 +491,6 @@ declare module 'react-navigation' {
   }
 
   export interface NavigationEventsProps extends ViewProps {
-    navigation?: NavigationNavigator;
     onWillFocus?: NavigationEventCallback;
     onDidFocus?: NavigationEventCallback;
     onWillBlur?: NavigationEventCallback;
@@ -557,23 +531,11 @@ declare module 'react-navigation' {
     ): NonNullable<P[T]>;
     getParam<T extends keyof P>(param: T): P[T];
     setParams: (newParams: Partial<P>) => boolean;
+    emit: (eventName: 'refocus') => void;
     addListener: (
-      eventName: 'willBlur' | 'willFocus' | 'didFocus' | 'didBlur',
+      eventName: string,
       callback: NavigationEventCallback
     ) => NavigationEventSubscription;
-    push: (
-      routeName: string,
-      params?: NavigationParams,
-      action?: NavigationNavigateAction
-    ) => boolean;
-    replace: (
-      routeName: string,
-      params?: NavigationParams,
-      action?: NavigationNavigateAction
-    ) => boolean;
-    reset: (actions: NavigationAction[], index: number) => boolean;
-    pop: (n?: number, params?: { immediate?: boolean }) => boolean;
-    popToTop: (params?: { immediate?: boolean }) => boolean;
     isFocused: () => boolean;
     isFirstRouteInParent: () => boolean;
     router?: NavigationRouter;
@@ -655,7 +617,7 @@ declare module 'react-navigation' {
   export type _SwitchNavigatorConfig = NavigationSwitchRouterConfig;
 
   export function createSwitchNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
+    routeConfigMap: NavigationRouteConfigMap<SwitchNavigatorConfig, NavigationScreenProp<NavigationRoute>>,
     switchConfig?: SwitchNavigatorConfig
   ): NavigationContainer;
 
@@ -738,7 +700,7 @@ declare module 'react-navigation' {
    * @desc from react-navigation/src/routers/TabRouter.js
    */
   export function TabRouter(
-    routeConfigs: NavigationRouteConfigMap,
+    routeConfigs: NavigationRouteConfigMap<any, any>,
     config: NavigationTabRouterConfig
   ): NavigationRouter<any, any>;
 
@@ -748,7 +710,7 @@ declare module 'react-navigation' {
    * @desc from react-navigation/src/routers/StackRouter.js
    */
   export function StackRouter(
-    routeConfigs: NavigationRouteConfigMap,
+    routeConfigs: NavigationRouteConfigMap<any, any>,
     config?: NavigationTabRouterConfig
   ): NavigationRouter<any, any>;
 
@@ -766,11 +728,12 @@ declare module 'react-navigation' {
    */
   export interface NavigationDescriptor<
     Params = NavigationParams,
-    Options = {}
+    Options = {},
+    NavigationScreenPropType = NavigationScreenProp<NavigationRoute>
   > {
     key: string;
     state: NavigationLeafRoute<Params> | NavigationStateRoute<Params>;
-    navigation: NavigationScreenProp<any>;
+    navigation: NavigationScreenPropType;
     options: Options;
     getComponent: () => React.ComponentType;
   }
@@ -783,6 +746,11 @@ declare module 'react-navigation' {
     } & NavigationInjectedProps
   >;
 
+  export type CreateNavigatorConfig<NavigatorConfig, RouterConfig, Options, NavigationScreenPropType> = NavigatorConfig & RouterConfig & {
+    defaultNavigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
+    navigationOptions?: NavigationScreenConfig<{ [key: string]: any }, NavigationScreenProp<NavigationRoute>>;
+  }
+
   export function createNavigator<S, Options>(
     view: NavigationView<Options, S>,
     router: NavigationRouter<S, Options>,
@@ -798,8 +766,8 @@ declare module 'react-navigation' {
    *
    * @see https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js
    */
-  export function createNavigationContainer(
+  export function createNavigationContainer<Options, NavigationPropType>(
-    Component: NavigationNavigator<any, any, any>
+    Component: NavigationNavigator<Options, NavigationPropType>
   ): NavigationContainer;
 
   /**
@@ -807,8 +775,8 @@ declare module 'react-navigation' {
    *
    * @see https://github.com/react-navigation/react-navigation-native/blob/098e2e52b349d37357109d5aee545fa74699d3d4/src/createAppContainer.js#L64
    */
-  export function createAppContainer(
+  export function createAppContainer<Options, NavigationPropType>(
-    Component: NavigationNavigator<any, any, any>
+    Component: NavigationNavigator<Options, NavigationPropType>
   ): NavigationContainer;
 
   /**
@@ -819,13 +787,14 @@ declare module 'react-navigation' {
    * BEGIN CUSTOM CONVENIENCE INTERFACES
    */
 
-  export interface Navigationunknown<
+  export interface NavigationScreenProps<
     Params = NavigationParams,
-    Options = any
+    Options = {},
+    NavigationScreenPropType = NavigationScreenProp<NavigationRoute>
   > {
     navigation: NavigationScreenProp<NavigationRoute<Params>, Params>;
     screenProps?: unknown;
-    navigationOptions?: NavigationScreenConfig<Options>;
+    navigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
   }
 
   /**

yarn.lock

@@ -1076,10 +1076,10 @@
     xcode "^2.0.0"
     xmldoc "^0.4.0"
 
-"@react-navigation/core@^3.5.0":
+"@react-navigation/core@^3.5.1":
-  version "3.5.0"
+  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.0.tgz#73d1a12448e2bd71855e0080b95a7f51ede0cd9e"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.5.1.tgz#7a2339fca3496979305fb3a8ab88c2ca8d8c214d"
-  integrity sha512-NLm24lA51R8o8c+iFnwtN9elqRzm4OJ8f1qPBCUNIYW1sb8M5yCD53vRP0fRcPFpr/6Xzs2TJMsWnnebwFp0Rw==
+  integrity sha512-q7NyhWVYOhVIWqL2GZKa6G78YarXaVTTtOlSDkvy4ZIggo40wZzamlnrJRvsaQX46gsgw45FAWb5SriHh8o7eA==
   dependencies:
     hoist-non-react-statics "^3.3.0"
     path-to-regexp "^1.7.0"