chore: release 4.1.0

This change allows for the following to be written:

```tsx
const TreatmentPlanDrawerItem = createStackNavigator(
  {
    Screen: {
      screen: Screen,
     // t is of type i18next.TFunction via the type casting below.
      navigationOptions: ({ screenProps }) => ({
        title: screenProps.t('title'),
      })
    },
  } as NavigationRouteConfigMap<
    NavigationStackOptions,
    NavigationStackProp<NavigationRoute, any>,
    { t: i18next.TFunction }
  >
);
```

.eslintignore

@@ -1,5 +1,4 @@
 coverage/
-flow/
 node_modules/
 lib/
 build/

.github/ISSUE_TEMPLATE.md

@@ -1,39 +0,0 @@
-## The issue tracker is reserved for bug reports only.
-
-If you have a question, feature request, or an idea for improving the library or its related tools, please try one of the following resources:
-
-- [Read the documentation](https://reactnavigation.org/)
-- [Post an issue to the website repository if you'd like to see a documentation change](http://github.com/react-navigation/website)
-- [Post a feature request to Canny](https://react-navigation.canny.io/feature-requests)
-- [Write a RFC if you have ideas for how to implement a feature request](https://github.com/react-navigation/rfcs)
-- [Get help on Discord chat (#react-navigation on Reactiflux)](https://discord.gg/4xEK3nD) or [on StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation)
-- Search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue.
-
-Bugs with react-navigation must be reproducible *without any external libraries that operate on it*. This means that if you are attempting to use Redux or MobX with it and you think you have found a bug, you must be able to reproduce it without Redux or MobX in this report. Redux related issues belong in [react-navigation-redux-helpers](https://github.com/react-navigation/react-navigation-redux-helpers), and we do not have any first-class integration with MobX at the moment.
-
----
-
-### Current Behavior
-
-- What code are you running and what is happening?
-- Include a screenshot if it makes sense.
-
-### Expected Behavior
-
-- What do you expect should be happening?
-- Include a screenshot if it makes sense.
-
-### How to reproduce
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-
-### Your Environment
-
-| software         | version
-| ---------------- | -------
-| react-navigation |
-| react-native     |
-| node             |
-| npm or yarn      |

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Miscellaneous
+about: Report an issue which is regarding the core API of React Navigation.
+title: ''
+labels: bug
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software         | version |
+| ---------------- | ------- |
+| iOS or Android   |
+| react-navigation |
+| react-native     |
+| expo             |
+| node             |
+| npm or yarn      |

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,38 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Stack Navigator
+    url: https://github.com/react-navigation/stack/issues/new
+    about: Submit a bug report for Stack Navigator (react-navigation-stack).
+  - name: Drawer Navigator
+    url: https://github.com/react-navigation/drawer/issues/new
+    about: Submit a bug report for Drawer Navigator (react-navigation-drawer).
+  - name: Tab Navigator
+    url: https://github.com/react-navigation/tabs/issues/new
+    about: Submit a bug report for Bottom Tab Navigator and Material Top Tab Navigator (react-navigation-tabs).
+  - name: Material Bottom Tab Navigator
+    url: https://github.com/react-navigation/material-bottom-tabs/issues/new
+    about: Submit a bug report for Material Bottom Tab Navigator (react-navigation-material-bottom-tabs).
+  - name: Animated Switch Navigator
+    url: https://github.com/react-navigation/animated-switch/issues/new
+    about: Submit a bug report for Animated Switch Navigator (react-navigation-animated-switch).
+  - name: React Navigation 5
+    url: https://github.com/react-navigation/navigation-ex/issues/new/choose
+    about: Submit a bug report for React Navigation 5.
+  - name: Common mistakes
+    url: https://reactnavigation.org/docs/en/common-mistakes.html
+    about: Read about common mistakes and how to fix them.
+  - name: Documentation
+    url: https://reactnavigation.org
+    about: Read the official documentation.
+  - name: Feature requests
+    url: https://react-navigation.canny.io/feature-requests
+    about: Post a feature request on Canny.
+  - name: StackOverflow
+    url: https://stackoverflow.com/questions/tagged/react-navigation
+    about: Ask and answer questions using the react-navigation label.
+  - name: Reactiflux
+    url: https://www.reactiflux.com/
+    about: Chat with other community members in the react-navigation channel.
+  - name: Write an RFC
+    url: https://github.com/react-navigation/rfcs
+    about: Write a RFC if you have ideas for how to implement a feature request.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,10 +1,10 @@
 Please provide enough information so that others can review your pull request:
 
-## Motivation
+**Motivation**
 
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 
-## Test plan
+**Test plan**
 
 Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.
 
@@ -12,6 +12,6 @@ Make sure you test on both platforms if your change affects both platforms.
 
 The code must pass tests.
 
-## Code formatting
+**Code formatting**
 
-Look around. Match the style of the rest of the codebase. Run `yarn format` before committing.
+Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing.

.github/workflows/stale.yml

@@ -0,0 +1,16 @@
+name: "Close stale issues and pull requests"
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/stale@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.'
+        stale-pr-message: 'Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.'
+        exempt-issue-label: 'Keep opened'
+        exempt-pr-label: 'Keep opened'

README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
 
-React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
+React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on JavaScript.
 
 ## Installation
 
@@ -19,7 +19,7 @@ See: https://reactnavigation.org/docs/en/getting-started.html
 
 ## Changelog
 
-The changes for each release are outlined on [the Github releases page](https://github.com/react-navigation/react-navigation/releases).
+The changes for each release are outlined on [the GitHub releases page](https://github.com/react-navigation/react-navigation/releases).
 
 ## Try it out
 

babel.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
 };

commitlint.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
   extends: ['@commitlint/config-conventional'],
 };

example/.babelrc

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

example/README.md

@@ -0,0 +1,12 @@
+# Navigation Playground Example
+
+The NavigationPlayground example app includes a variety of patterns and is used as a simple way for contributors to manually integration test changes.
+
+## Usage
+
+```bash
+yarn bootstrap # in the react-navigation root directory
+yarn example start
+```
+
+You can view this example application directly on Android phones by visiting scanning the QR code on [this site](https://exp.host/@react-navigation/NavigationPlayground) with the [Expo app](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en).

example/app.json

@@ -3,12 +3,12 @@
     "name": "React Navigation Stack Example",
     "description": "Demonstrates the various capabilities of react-navigation-stack",
     "slug": "react-navigation-stack-demo",
-    "sdkVersion": "33.0.0",
+    "sdkVersion": "36.0.0",
     "version": "1.0.0",
     "primaryColor": "#2196f3",
-    "packagerOpts": {
-      "config": "./metro.config.js",
-      "projectRoots": ""
-    }
+    "platforms": [
+      "android",
+      "ios"
+    ]
   }
 }

example/metro.config.js

@@ -1,35 +1,45 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
+/* eslint-disable import/no-extraneous-dependencies */
 
 const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
-const project = require('../package.json');
+const fs = require('fs');
 const escape = require('escape-string-regexp');
+const blacklist = require('metro-config/src/defaults/blacklist');
 
-const projectDependencies = Object.keys({
-  ...project.dependencies,
-  ...project.peerDependencies,
-});
+const root = path.resolve(__dirname, '..');
+const pak = JSON.parse(
+  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+);
+
+const modules = [
+  '@babel/runtime',
+  '@expo/vector-icons',
+  ...Object.keys({
+    ...pak.dependencies,
+    ...pak.peerDependencies,
+  }),
+];
 
 module.exports = {
   projectRoot: __dirname,
-  watchFolders: [path.resolve(__dirname, '..')],
+  watchFolders: [root],
 
   resolver: {
     blacklistRE: blacklist([
-      new RegExp(
-        `^${escape(
-          path.resolve(__dirname, 'node_modules', project.name)
-        )}\\/.*$`
-      ),
-      new RegExp(
-        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
-      ),
+      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
     ]),
 
-    providesModuleNodeModules: [
-      '@expo/vector-icons',
-      '@babel/runtime',
-      ...projectDependencies,
-    ],
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
   },
 };

example/package.json

@@ -9,29 +9,30 @@
     "ios": "expo start --ios"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "^0.1.1",
-    "@react-navigation/core": "^3.5.0",
+    "@expo/vector-icons": "^10.0.6",
+    "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/core": "^3.5.1",
     "@react-navigation/native": "^3.6.2",
-    "expo": "^33.0.7",
-    "expo-asset": "^5.0.1",
-    "expo-blur": "~5.0.1",
-    "expo-constants": "~5.0.1",
-    "hoist-non-react-statics": "^3.3.0",
-    "react": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "expo": "^36.0.0",
+    "expo-asset": "~8.0.0",
+    "expo-blur": "~8.0.0",
+    "expo-constants": "~8.0.0",
+    "hoist-non-react-statics": "^3.3.1",
+    "react": "16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
     "react-native-iphone-x-helper": "^1.2.1",
-    "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-tabs": "^1.2.0"
+    "react-native-paper": "^3.4.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-screens": "2.0.0-alpha.12",
+    "react-navigation-drawer": "^2.3.3",
+    "react-navigation-header-buttons": "^3.0.4",
+    "react-navigation-stack": "^2.0.4",
+    "react-navigation-tabs": "^2.6.2"
   },
   "devDependencies": {
-    "babel-plugin-module-resolver": "^3.2.0"
-  },
-  "resolutions": {
-    "react-native-safe-area-view": "0.14.6",
-    "react-native-screens": "1.0.0-alpha.23"
+    "babel-plugin-module-resolver": "^4.0.0",
+    "expo-cli": "^3.11.3"
   }
 }

example/src/Drawer.tsx

@@ -7,8 +7,14 @@ import {
   NavigationScreenProp,
   NavigationState,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
-import { createDrawerNavigator } from 'react-navigation-drawer';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
+import {
+  createDrawerNavigator,
+  NavigationDrawerScreenProps,
+} from 'react-navigation-drawer';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -22,7 +28,13 @@ const MyNavScreen = ({
   <ScrollView>
     <SafeAreaView forceInset={{ top: 'always' }}>
       <SampleText>{banner}</SampleText>
-      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button
+        onPress={() => {
+          // @ts-ignore
+          navigation.openDrawer();
+        }}
+        title="Open drawer"
+      />
       <Button
         onPress={() => navigation.navigate('Email')}
         title="Open other screen"
@@ -33,26 +45,22 @@ const MyNavScreen = ({
   </ScrollView>
 );
 
-const InboxScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
+const InboxScreen = ({ navigation }: NavigationDrawerScreenProps) => (
+  <MyNavScreen banner="Inbox Screen" navigation={navigation} />
+);
+
 InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
 
-const EmailScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
+const EmailScreen = ({ navigation }: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Email Screen" navigation={navigation} />
+);
+
+const DraftsScreen = ({ navigation }: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Drafts Screen" navigation={navigation} />
+);
 
-const DraftsScreen = ({
-  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';
 
@@ -89,26 +92,24 @@ const ProfileNavigator = createStackNavigator(
   },
   {
     defaultNavigationOptions: {
-      headerLeft: null,
+      headerLeft: () => null,
     },
     mode: 'modal',
   }
 );
 
-const MyHeaderTestScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Full screen view" navigation={navigation} />;
+const MyHeaderTestScreen = ({ navigation }: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Full screen view" navigation={navigation} />
+);
+
 MyHeaderTestScreen.navigationOptions = ({
   navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => {
+}: NavigationStackScreenProps) => {
   const headerVisible =
     navigation.state.params && navigation.state.params.headerVisible;
+
   return {
-    header: headerVisible ? undefined : null,
+    headerShown: headerVisible,
     title: 'Now you see me',
   };
 };
@@ -122,7 +123,7 @@ const ModalStack = createStackNavigator(
   },
   {
     defaultNavigationOptions: {
-      header: null,
+      headerShown: false,
     },
     mode: 'modal',
   }

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 {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-
-class MyHomeScreen extends React.Component<MyHomeScreenProps> {
+class MyHomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -143,10 +140,7 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-interface MyPhotosScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
+class MyPhotosScreen extends React.Component<NavigationStackScreenProps> {
   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;
@@ -213,7 +207,7 @@ MyProfileScreen.navigationOptions = (props: MyHomeScreenProps) => {
     headerBackImage: params!.headerBackImage,
     // Render a button on the right side of the header.
     // When pressed switches the screen to edit mode.
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons>
         <HeaderButtons.Item
           title={params!.mode === 'edit' ? 'Done' : 'Edit'}
@@ -227,23 +221,18 @@ MyProfileScreen.navigationOptions = (props: MyHomeScreenProps) => {
   };
 };
 
-const SimpleStack = createStackNavigator(
-  {
-    Home: {
-      screen: MyHomeScreen,
-    },
-    Photos: {
-      path: 'photos/:name',
-      screen: MyPhotosScreen,
-    },
-    Profile: {
-      path: 'people/:name',
-      screen: MyProfileScreen,
-    },
+const SimpleStack = createStackNavigator({
+  Home: {
+    screen: MyHomeScreen,
   },
-  {
-    // headerLayoutPreset: 'center',
-  }
-);
+  Photos: {
+    path: 'photos/:name',
+    screen: MyPhotosScreen,
+  },
+  Profile: {
+    path: 'people/:name',
+    screen: MyProfileScreen,
+  },
+});
 
 export default SimpleStack;

example/src/SimpleTabs.tsx

@@ -39,6 +39,7 @@ const MyNavScreen = ({
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
       {TEXT.split('\n').map((p, n) => (
         <Themed.Text
+          // eslint-disable-next-line react/no-array-index-key
           key={n}
           style={{ marginVertical: 10, marginHorizontal: 8 }}
         >

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 {
@@ -50,7 +52,7 @@ interface MyHomeScreenProps {
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   static navigationOptions = {
-    headerBackTitle: null,
+    headerBackTitleVisible: false,
     title: 'Welcome',
   };
 
@@ -63,13 +65,14 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
 interface MyPhotosScreenProps {
   navigation: NavigationScreenProp<NavigationState>;
 }
+
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = ({
     navigation,
   }: {
     navigation: NavigationScreenProp<NavigationState>;
   }) => ({
-    headerBackTitle: null,
+    headerBackTitleVisible: false,
     title: `${navigation.state.params!.name}'s photos`,
   });
 
@@ -92,6 +95,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 interface MyProfileScreenProps {
   navigation: NavigationScreenProp<NavigationState>;
 }
+
 class MyProfileScreen extends React.Component<MyProfileScreenProps> {
   static navigationOptions = {
     title: 'Profile',
@@ -124,8 +128,8 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
-      headerBackImage: (
+    defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
+      headerBackImage: () => (
         <MyCustomHeaderBackImage
           style={[
             styles.myCustomHeaderBackImageAlt,

example/src/StackWithHeaderPreset.tsx

@@ -1,19 +1,15 @@
 import * as React from 'react';
+import { SafeAreaView, Themed } from 'react-navigation';
 import {
-  NavigationScreenProp,
-  NavigationState,
-  SafeAreaView,
-  Themed,
-} from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+  createStackNavigator,
+  NavigationStackScreenProps,
+  TransitionPresets,
+  HeaderStyleInterpolators,
+} from 'react-navigation-stack';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 
-interface NavScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-
-class HomeScreen extends React.Component<NavScreenProps> {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -36,7 +32,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 +59,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,9 +78,9 @@ class ScreenWithLongTitle extends React.Component<NavScreenProps> {
   }
 }
 
-class ScreenWithNoHeader extends React.Component<NavScreenProps> {
+class ScreenWithNoHeader extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
-    header: null,
+    headerShown: false,
     title: 'No Header',
   };
 
@@ -111,7 +107,10 @@ const StackWithHeaderPreset = createStackNavigator(
     ScreenWithNoHeader,
   },
   {
-    headerTransitionPreset: 'uikit',
+    defaultNavigationOptions: {
+      ...TransitionPresets.SlideFromRightIOS,
+      headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+    },
   }
 );
 

example/src/StackWithTranslucentHeader.tsx

@@ -1,26 +1,26 @@
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { BlurView } from 'expo-blur';
-import { isIphoneX } from 'react-native-iphone-x-helper';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import {
   NavigationEventPayload,
   NavigationEventSubscription,
-  NavigationScreenProp,
-  NavigationState,
   Themed,
   SupportedThemes,
 } from 'react-navigation';
 import {
   createStackNavigator,
-  Header,
-  HeaderStyleInterpolator,
+  HeaderStyleInterpolators,
+  NavigationStackScreenProps,
+  NavigationStackProp,
+  TransitionPresets,
 } 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;
 }
 
@@ -56,15 +56,8 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
   // at some point.
 
   getHeaderInset(): any {
-    const NOTCH_HEIGHT = isIphoneX() ? 25 : 0;
-
-    // $FlowIgnore: we will remove the HEIGHT static soon enough
-    const BASE_HEADER_HEIGHT = Header.HEIGHT;
-
     const HEADER_HEIGHT =
-      Platform.OS === 'ios'
-        ? BASE_HEADER_HEIGHT + NOTCH_HEIGHT
-        : BASE_HEADER_HEIGHT + 20;
+      getStatusBarHeight() + Platform.select({ ios: 44, default: 56 });
 
     return Platform.select({
       android: {
@@ -81,7 +74,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
 }
 
 interface MyHomeScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
@@ -125,7 +118,7 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
 }
 
 interface MyPhotosScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
@@ -175,7 +168,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,17 +179,19 @@ const MyProfileScreen = ({
 );
 
 MyProfileScreen.navigationOptions = (props: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   theme: SupportedThemes;
 }) => {
   const { navigation, theme } = props;
   const { state, setParams } = navigation;
   const { params } = state;
   return {
-    headerBackImage: params!.headerBackImage,
+    headerBackImage: params!.headerBackImage
+      ? () => params!.headerBackImage
+      : undefined,
     // Render a button on the right side of the header.
     // When pressed switches the screen to edit mode.
-    headerRight: (
+    headerRight: () => (
       <HeaderButtons>
         <HeaderButtons.Item
           color={theme === 'light' ? '#000' : '#fff'}
@@ -226,8 +221,9 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: ({ theme }) => ({
-      headerBackground:
+    defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
+      ...TransitionPresets.SlideFromRightIOS,
+      headerBackground: () =>
         Platform.OS === 'ios' ? (
           <BlurView
             style={{ flex: 1 }}
@@ -241,13 +237,7 @@ const StackWithTranslucentHeader = createStackNavigator(
         borderBottomWidth: StyleSheet.hairlineWidth,
       },
       headerTransparent: true,
-    }),
-    headerTransitionPreset: 'uikit',
-    // You can leave this out if you don't want the card shadow to
-    // be visible through the header
-    transitionConfig: () => ({
-      headerBackgroundInterpolator:
-        HeaderStyleInterpolator.forBackgroundWithTranslation,
+      headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
     }),
   }
 );

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,
-  NavigationState,
-  Themed,
-} from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-interface Props {
-  navigation: NavigationScreenProp<NavigationState & any>;
-}
-
-class HomeScreen extends React.Component<Props, any> {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   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;
 }
 
@@ -47,6 +51,7 @@ class MyNavScreen extends React.Component<Props> {
           <Button onPress={() => navigation.goBack(null)} title="Go back" />
 
           {TEXT.split('\n').map((p, n) => (
+            // eslint-disable-next-line react/no-array-index-key
             <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
               {p}
             </Text>
@@ -59,11 +64,7 @@ class MyNavScreen extends React.Component<Props> {
   }
 }
 
-const MyProfileScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
+const MyProfileScreen = ({ navigation }: NavigationStackScreenProps) => (
   <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,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
+}: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
+);
 
 const MySettingsScreen = ({
   navigation,
@@ -141,11 +144,7 @@ const StacksOverTabs = createStackNavigator({
     screen: MyNotificationsSettingsScreen,
   },
   Profile: {
-    navigationOptions: ({
-      navigation,
-    }: {
-      navigation: NavigationScreenProp<NavigationState>;
-    }) => ({
+    navigationOptions: ({ navigation }: NavigationStackScreenProps) => ({
       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 = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
+const MyProfileScreen = ({ navigation }: NavigationStackScreenProps) => (
   <MyNavScreen
     banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}
@@ -77,9 +76,9 @@ const MyProfileScreen = ({
 
 const MyNotificationsSettingsScreen = ({
   navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
+}: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
+);
 
 const MySettingsScreen = ({
   navigation,
@@ -148,7 +147,7 @@ const StackNavigator = createStackNavigator(
     Root: {
       screen: TabNavigator,
       navigationOptions: {
-        header: null,
+        headerShown: false,
       },
     },
     NotifSettings: {
@@ -159,11 +158,7 @@ const StackNavigator = createStackNavigator(
     },
     Profile: {
       screen: MyProfileScreen,
-      navigationOptions: ({
-        navigation,
-      }: {
-        navigation: NavigationScreenProp<NavigationState>;
-      }) => ({
+      navigationOptions: ({ navigation }: NavigationStackScreenProps) => ({
         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',
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -31,28 +31,28 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "^3.5.0",
-    "@react-navigation/native": "^3.6.2"
+    "@react-navigation/core": "^3.5.2",
+    "@react-navigation/native": "^3.6.3"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^8.0.0",
+    "@commitlint/config-conventional": "^8.3.4",
     "@release-it/conventional-changelog": "^1.1.0",
-    "@types/jest": "^24.0.18",
-    "@types/react": "^16.9.2",
-    "@types/react-native": "^0.60.9",
-    "codecov": "^3.5.0",
-    "commitlint": "^8.0.0",
-    "eslint": "^5.16.0",
-    "eslint-config-satya164": "^2.4.1",
+    "@types/jest": "^24.0.25",
+    "@types/react": "^16.9.17",
+    "@types/react-native": "^0.60.27",
+    "codecov": "^3.6.1",
+    "commitlint": "^8.3.4",
+    "eslint": "^6.8.0",
+    "eslint-config-satya164": "^3.1.5",
     "eslint-plugin-react-native-globals": "^0.1.0",
-    "husky": "^3.0.0",
+    "husky": "^3.1.0",
     "jest": "^24.9.0",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "react": "16.8.3",
     "react-native": "~0.59.8",
     "react-test-renderer": "16.8.3",
-    "release-it": "^12.3.6",
-    "typescript": "^3.6.2"
+    "release-it": "^12.4.3",
+    "typescript": "^3.7.4"
   },
   "jest": {
     "notify": true,

prettier.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-commonjs */
-
 module.exports = {
   trailingComma: 'es5',
   singleQuote: true,

src/deprecations.js

@@ -2,7 +2,7 @@
 
 const throwError = (message, page) => {
   throw new Error(
-    `${message}. See https://reactnavigation.org/docs/4.x/${page}.html for more details.`
+    `${message}. See https://reactnavigation.org/docs/${page}.html for more details.`
   );
 };
 

src/react-navigation.js

@@ -1,4 +1,29 @@
 export * from '@react-navigation/core';
 export * from '@react-navigation/native';
 
-export * from './deprecations';
+// Export each item individually so that they can be evaluated lazily
+// https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#lazy
+export {
+  createNavigationContainer,
+  createStackNavigator,
+  createBottomTabNavigator,
+  createMaterialTopTabNavigator,
+  createDrawerNavigator,
+  StackGestureContext,
+  DrawerGestureContext,
+  DrawerRouter,
+  DrawerActions,
+  Transitioner,
+  StackView,
+  StackViewCard,
+  StackViewTransitionConfigs,
+  Header,
+  HeaderTitle,
+  HeaderBackButton,
+  HeaderStyleInterpolator,
+  DrawerView,
+  DrawerItems,
+  DrawerSidebar,
+  BottomTabBar,
+  MaterialTopTabBar,
+} from './deprecations';

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,13 @@ 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 +190,50 @@ declare module 'react-navigation' {
     getScreenOptions: NavigationScreenOptionsGetter<Options>;
   }
 
-  export type NavigationScreenOption<T> =
-    | T
-    | ((navigation: NavigationScreenProp<NavigationRoute>, config: T) => T);
+  export type NavigationScreenComponent<
+    Options,
+    NavigationScreenPropType
+  > = React.ComponentType<any> & {
+    navigationOptions?: NavigationScreenConfig<
+      Options,
+      NavigationScreenPropType
+    >;
+  };
 
-  export interface NavigationScreenDetails<T> {
-    options: T;
-    state: NavigationRoute;
-    navigation: NavigationScreenProp<NavigationRoute>;
-  }
-
-  export interface NavigationScreenConfigProps {
-    navigation: NavigationScreenProp<NavigationRoute>;
-    screenProps: unknown;
+  export interface NavigationScreenConfigProps<
+    NavigationScreenPropType,
+    ScreenProps = unknown
+  > {
+    navigation: NavigationScreenPropType;
+    screenProps: ScreenProps;
     theme: SupportedThemes;
   }
 
-  export type NavigationScreenConfig<Options> =
+  export type NavigationScreenConfig<
+    Options,
+    NavigationScreenPropType,
+    ScreenProps = unknown
+  > =
     | Options
     | ((
-        navigationOptionsContainer: NavigationScreenConfigProps & {
-          navigationOptions: NavigationScreenConfig<Options>;
+        navigationOptionsContainer: NavigationScreenConfigProps<
+          NavigationScreenPropType,
+          ScreenProps
+        > & {
+          navigationOptions: Options;
         }
       ) => Options);
 
-  export type NavigationComponent =
-    | NavigationScreenComponent<NavigationParams, any, any>
-    | NavigationNavigator<any, any, any>
-    | any;
-
-  export type NavigationScreenComponent<
-    Params = NavigationParams,
-    Options = {},
-    Props = {}
-  > = React.ComponentType<NavigationScreenProps<Params, Options> & Props> & {
-    navigationOptions?: NavigationScreenConfig<Options>;
-  };
+  export type NavigationComponent<Options, NavigationPropType> =
+    | NavigationScreenComponent<Options, NavigationPropType>
+    | NavigationNavigator<Options, NavigationPropType>;
 
   export type NavigationNavigator<
-    State = NavigationState,
-    Options = {},
-    Props = {}
-  > = React.ComponentType<NavigationNavigatorProps<Options, State> & Props> & {
-    router: NavigationRouter<State, Options>;
-    navigationOptions?: NavigationScreenConfig<Options>;
+    Options,
+    NavigationPropType
+  > = React.ComponentType<NavigationNavigatorProps<Options>> & {
+    router: NavigationRouter<Options>;
+    navigationOptions?: NavigationScreenConfig<Options, NavigationPropType>;
   };
 
   export interface NavigationParams {
@@ -265,7 +269,7 @@ declare module 'react-navigation' {
     key: string;
 
     // The new params to merge into the existing route params
-    params?: NavigationParams;
+    params: NavigationParams;
   }
 
   export interface NavigationSetParamsAction
@@ -287,7 +291,7 @@ declare module 'react-navigation' {
     newKey?: string;
     routeName: string;
     params?: NavigationParams;
-    action?: NavigationNavigateAction;
+    action?: NavigationAction;
   }
 
   export interface NavigationReplaceAction {
@@ -295,7 +299,7 @@ declare module 'react-navigation' {
     key: string;
     routeName: string;
     params?: NavigationParams;
-    action?: NavigationNavigateAction;
+    action?: NavigationAction;
   }
 
   export interface NavigationCompleteTransitionActionPayload {
@@ -364,16 +368,15 @@ declare module 'react-navigation' {
 
   export interface NavigationJumpToActionPayload {
     routeName: string;
-    key: string;
-    params?: NavigationParams;
+    key?: string;
+    preserveFocus?: boolean;
   }
 
   export interface NavigationJumpToAction {
     type: 'Navigation/JUMP_TO';
-    preserveFocus: boolean;
     routeName: string;
     key: string;
-    params?: NavigationParams;
+    preserveFocus?: boolean;
   }
 
   export interface NavigationDrawerOpenedAction {
@@ -414,10 +417,37 @@ declare module 'react-navigation' {
   }
 
   export function SwitchRouter(
-    routeConfigs: NavigationRouteConfigMap,
+    routeConfigs: NavigationRouteConfigMap<any, any>,
     config?: NavigationSwitchRouterConfig
   ): NavigationRouter<any, any>;
 
+  export type NavigationSwitchProp<
+    State = NavigationRoute,
+    Params = NavigationParams
+  > = NavigationScreenProp<State, Params> & {
+    jumpTo(routeName: string, key?: string): void;
+  };
+
+  export type NavigationSwitchScreenProps<
+    Params = NavigationParams,
+    ScreenProps = unknown
+  > = {
+    theme: SupportedThemes;
+    navigation: NavigationSwitchProp<NavigationRoute, Params>;
+    screenProps: ScreenProps;
+  };
+
+  export type NavigationSwitchScreenComponent<
+    Params = NavigationParams,
+    ScreenProps = unknown
+  > = React.ComponentType<NavigationSwitchScreenProps<Params, ScreenProps>> & {
+    navigationOptions?: NavigationScreenConfig<
+      {},
+      NavigationSwitchProp<NavigationRoute, Params>,
+      ScreenProps
+    >;
+  };
+
   export type NavigationStackAction =
     | NavigationInitAction
     | NavigationNavigateAction
@@ -452,20 +482,23 @@ declare module 'react-navigation' {
     | NavigationSwitchAction
     | { type: 'CHILD_ACTION'; key?: string };
 
-  export type NavigationRouteConfig =
-    | NavigationComponent
-    | ({
-        navigationOptions?: NavigationScreenConfig<any>;
+  export type NavigationRouteConfig<Options, NavigationScreenPropType, ScreenProps = unknown> =
+    | NavigationComponent<Options, NavigationScreenPropType>
+    | (
+        | { screen: NavigationComponent<Options, NavigationScreenPropType> }
+        | {
+            getScreen(): NavigationScreenComponent<
+              Options,
+              NavigationScreenPropType
+            >;
+          }) & {
+        navigationOptions?: NavigationScreenConfig<
+          Options,
+          NavigationScreenPropType,
+          ScreenProps
+        >;
+        params?: { [key: string]: any };
         path?: string;
-      } & NavigationScreenRouteConfig);
-
-  export type NavigationScreenRouteConfig =
-    | NavigationComponent
-    | {
-        screen: NavigationComponent;
-      }
-    | {
-        getScreen: () => NavigationComponent;
       };
 
   export interface NavigationPathsConfig {
@@ -473,7 +506,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 +515,12 @@ declare module 'react-navigation' {
     resetOnBlur?: boolean;
   }
 
-  export interface NavigationRouteConfigMap {
-    [routeName: string]: NavigationRouteConfig;
+  export interface NavigationRouteConfigMap<Options, NavigationScreenPropType, ScreenProps = unknown> {
+    [routeName: string]: NavigationRouteConfig<
+      Options,
+      NavigationScreenPropType,
+      ScreenProps
+    >;
   }
 
   export type NavigationDispatch = (action: NavigationAction) => boolean;
@@ -516,7 +553,6 @@ declare module 'react-navigation' {
   }
 
   export interface NavigationEventsProps extends ViewProps {
-    navigation?: NavigationNavigator;
     onWillFocus?: NavigationEventCallback;
     onDidFocus?: NavigationEventCallback;
     onWillBlur?: NavigationEventCallback;
@@ -530,62 +566,52 @@ declare module 'react-navigation' {
     dispatch: NavigationDispatch;
     goBack: (routeKey?: string | null) => boolean;
     dismiss: () => boolean;
-    navigate(options: {
+    navigate<T extends NavigationParams>(options: {
       routeName:
         | string
         | {
             routeName: string;
-            params?: NavigationParams;
+            params?: T;
             action?: NavigationNavigateAction;
             key?: string;
           };
-      params?: NavigationParams;
+      params?: T;
       action?: NavigationAction;
       key?: string;
     }): boolean;
-    navigate(
+
+    navigate<T extends NavigationParams>(
       routeNameOrOptions: string,
-      params?: NavigationParams,
+      params?: T,
       action?: NavigationAction
     ): boolean;
-    openDrawer: () => any;
-    closeDrawer: () => any;
-    toggleDrawer: () => any;
     getParam<T extends keyof P>(
       param: T,
       fallback: NonNullable<P[T]>
     ): 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;
     dangerouslyGetParent: () => NavigationScreenProp<S> | undefined;
   }
 
-  export interface NavigationNavigatorProps<O = {}, S = {}> {
+  export interface NavigationNavigatorProps<
+    Options = {},
+    State = {},
+    ScreenProps = unknown
+  > {
     theme?: SupportedThemes | 'no-preference';
     detached?: boolean;
-    navigation?: NavigationProp<S>;
-    screenProps?: unknown;
-    navigationOptions?: O;
+    navigation?: NavigationProp<State>;
+    screenProps?: ScreenProps;
+    navigationOptions?: Options;
   }
 
   export type NavigatorType =
@@ -593,7 +619,11 @@ declare module 'react-navigation' {
     | 'react-navigation/TABS'
     | 'react-navigation/DRAWER';
 
-  export interface NavigationContainerProps<S = {}, O = {}> {
+  export interface NavigationContainerProps<
+    State = {},
+    Options = {},
+    ScreenProps = unknown
+  > {
     uriPrefix?: string | RegExp;
     /**
      * Controls whether the navigation container handles URLs opened via 'Linking'
@@ -606,7 +636,7 @@ declare module 'react-navigation' {
       nextNavigationState: NavigationState,
       action: NavigationAction
     ) => void | null | undefined;
-    navigation?: NavigationScreenProp<S>;
+    navigation?: NavigationScreenProp<State>;
     /*
      * This prop is no longer supported. Use `loadNavigationState` and
      * `persistNavigationState` instead.
@@ -617,8 +647,8 @@ declare module 'react-navigation' {
     persistNavigationState?: (state: NavigationState) => Promise<any>;
 
     renderLoadingExperimental?: React.ComponentType;
-    screenProps?: unknown;
-    navigationOptions?: O;
+    screenProps?: ScreenProps;
+    navigationOptions?: Options;
     style?: StyleProp<ViewStyle>;
   }
 
@@ -644,20 +674,15 @@ declare module 'react-navigation' {
     state: { nav: NavigationState | null };
   }
 
-  export interface SwitchNavigatorConfig {
-    initialRouteName: string;
-    resetOnBlur?: boolean;
-    paths?: NavigationPathsConfig;
-    backBehavior?: 'none' | 'initialRoute';
-  }
-
-  // Return createNavigationContainer
-  export type _SwitchNavigatorConfig = NavigationSwitchRouterConfig;
-
   export function createSwitchNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    switchConfig?: SwitchNavigatorConfig
-  ): NavigationContainer;
+    routeConfigMap: NavigationRouteConfigMap<{}, NavigationSwitchProp>,
+    switchConfig?: CreateNavigatorConfig<
+      {},
+      NavigationSwitchRouterConfig,
+      {},
+      NavigationSwitchProp
+    >
+  ): NavigationNavigator<{}, NavigationProp<NavigationState>>;
 
   /**
    * NavigationActions
@@ -738,7 +763,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 +773,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,29 +791,51 @@ 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;
   }
 
-  export type NavigationView<O, S> = React.ComponentType<
+  export type NavigationView<
+    Options,
+    State,
+    ScreenProps = unknown
+  > = React.ComponentType<
     {
       descriptors: { [key: string]: NavigationDescriptor };
-      navigationConfig: O;
-      screenProps?: unknown;
+      navigationConfig: Options;
+      screenProps?: ScreenProps;
     } & 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>,
-    navigatorConfig?: {} | null,
+    navigatorConfig?: {},
     navigatorType?: NavigatorType
-  ): any;
+  ): NavigationNavigator<Options, NavigationProp<NavigationState>>;
 
   /**
    * Create an HOC that injects the navigation and manages the navigation state
@@ -798,8 +845,8 @@ declare module 'react-navigation' {
    *
    * @see https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js
    */
-  export function createNavigationContainer(
-    Component: NavigationNavigator<any, any, any>
+  export function createNavigationContainer<Options, NavigationPropType>(
+    Component: NavigationNavigator<Options, NavigationPropType>
   ): NavigationContainer;
 
   /**
@@ -807,31 +854,10 @@ declare module 'react-navigation' {
    *
    * @see https://github.com/react-navigation/react-navigation-native/blob/098e2e52b349d37357109d5aee545fa74699d3d4/src/createAppContainer.js#L64
    */
-  export function createAppContainer(
-    Component: NavigationNavigator<any, any, any>
+  export function createAppContainer<Options, NavigationPropType>(
+    Component: NavigationNavigator<Options, NavigationPropType>
   ): NavigationContainer;
 
-  /**
-   * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS
-   */
-
-  /**
-   * BEGIN CUSTOM CONVENIENCE INTERFACES
-   */
-
-  export interface NavigationScreenProps<
-    Params = NavigationParams,
-    Options = any
-  > {
-    navigation: NavigationScreenProp<NavigationRoute<Params>, Params>;
-    screenProps?: unknown;
-    navigationOptions?: NavigationScreenConfig<Options>;
-  }
-
-  /**
-   * END CUSTOM CONVENIENCE INTERFACES
-   */
-
   export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 
   export type InferProps<