chore: release 4.0.2

Now that there is no longer a `CHANGELOG.md` file, this should address concerns of users who come to the Github repository looking for release notes.

.circleci/config.yml

@@ -1,11 +1,65 @@
-version: 3
+version: 2
+
+defaults: &defaults
+  docker:
+    - image: circleci/node:10.9.0
+  working_directory: ~/project
+
 jobs:
-  build:
-    docker:
-      - image: circleci/node:10
-    parallelism: 2
-    working_directory: ~/react-navigation
+  install-dependencies:
+    <<: *defaults
     steps:
       - checkout
-      - run: yarn install --frozen-lockfile
-      - run: ./scripts/test.sh
+      - attach_workspace:
+          at: ~/project
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - restore_cache:
+          keys:
+            - v1-dependencies-example-{{ checksum "example/package.json" }}
+            - v1-dependencies-example-
+      - run: |
+          yarn install --frozen-lockfile
+          yarn install --frozen-lockfile --cwd example
+      - save_cache:
+          key: v1-dependencies-{{ checksum "package.json" }}
+          paths: node_modules
+      - save_cache:
+          key: v1-dependencies-example-{{ checksum "example/package.json" }}
+          paths: example/node_modules
+      - persist_to_workspace:
+          root: .
+          paths: .
+  lint-and-typecheck:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn lint
+            yarn typescript
+  unit-tests:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn test --coverage
+            yarn codecov
+        - store_artifacts:
+            path: coverage
+            destination: coverage
+
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - install-dependencies
+      - lint-and-typecheck:
+          requires:
+            - install-dependencies
+      - unit-tests:
+          requires:
+            - install-dependencies

.eslintignore

@@ -1,8 +1,6 @@
-coverage
-flow
-node_modules
-lib*
-build
-
-## Temporary
-examples
+coverage/
+flow/
+node_modules/
+lib/
+build/
+typescript/

.eslintrc

@@ -1,52 +1,21 @@
 {
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "prettier",
-    "prettier/react"
-  ],
-  "parser": "babel-eslint",
-  "plugins": ["react", "prettier"],
+  "extends": "eslint-config-satya164",
+
+  "plugins": ["react-native-globals"],
+
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+  },
+
   "env": {
-    "jasmine": true
+    "es6": true,
+    "react-native-globals/all": true,
   },
+
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "trailingComma": "es5",
-        "singleQuote": true
-      }
-    ],
-
-    "no-underscore-dangle": "off",
-    "no-use-before-define": "off",
-    "no-unused-expressions": "off",
-    "new-cap": "off",
-    "no-plusplus": "off",
-    "no-class-assign": "off",
-    "no-duplicate-imports": "off",
-    "import/extensions": "off",
-    "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
-
-    "react/jsx-filename-extension": ["off", { "extensions": [".js", ".jsx"] }],
-
-    "react/sort-comp": "off",
-    "react/prefer-stateless-function": "off",
-    "react/no-deprecated": "off",
-
-    "react/forbid-prop-types": "warn",
-    "react/prop-types": "off",
-    "react/require-default-props": "off",
-    "react/no-unused-prop-types": "off"
-  },
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "modules": true
-    }
+    "react/sort-comp": "off"
   }
 }

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,7 +15,3 @@ The code must pass tests.
 ## Code formatting
 
 Look around. Match the style of the rest of the codebase. Run `yarn format` before committing.
-
-## Changelog
-
-Add an entry under the "Unreleased" heading in [CHANGELOG.md](https://github.com/react-navigation/react-navigation/blob/master/CHANGELOG.md#unreleased) which explains your change.

.release-it.json

@@ -1,8 +1,5 @@
 {
-  "increment": "conventional:angular",
-  "changelogCommand": "conventional-changelog -p angular | tail -n +3",
-  "safeBump": false,
-  "src": {
+  "git": {
     "commitMessage": "chore: release %s",
     "tagName": "v%s"
   },
@@ -11,5 +8,10 @@
   },
   "github": {
     "release": true
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular"
+    }
   }
 }

CHANGELOG.md

@@ -1,336 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
-and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
-## Unreleased
-
-- Add missing Flow type exports for `ScrollView` and `NavigationContext`
-
-## [3.11.1]
-
-## Fixes
-
-- Fix `navigationOptions` type from `NavigationScreenProp<NavigationRoute>` to `NavigationScreenConfig<Options>`.
-- Fix missing `isFirstRouteInParent` type in typescript and flow.
-- Add missing `backTitleVisible` for typescript, `disabled` and `backTitleVisible` for flow definitions in type `HeaderBackButtonProps`
-- Add missing `keyboardHidesTabBar` for TypeScript to `TabViewConfig.tabBarOptions`
-- Add missing `unmountInactiveRoutes` for TypeScript to `DrawerNavigatorConfig`
-
-## [3.11.0]
-
-## New Features
-
-- Export `SwitchActions`
-
-## [3.10.2]
-
-## Fixes
-
-- Update Flow types - Add `cardShadowEnabled` and `cardOverlayEnabled` to NavigationStackViewConfig
-- Upgrade react-navigation-tabs [#5914](https://github.com/react-navigation/react-navigation/issues/5914)
-
-## [3.10.0] - [2019-05-16](https://github.com/react-navigation/react-navigation/releases/tag/3.10.0)
-
-## Removed
-
-- `persistenceKey` no longer automatically saves and restores navigation state using AsyncStorage. Typically this would be a breaking change that would require a major version bump, but because this has always been marked as experimental in the documentation and it is unlikely to impact production apps, we are rolling it in a minor release. `persistenceKey` has been replaced with `persistNavigationState` and `loadNavigationState`. See the diff in docs: https://github.com/react-navigation/react-navigation.github.io/pull/425/files?short_path=b668b1a#diff-b668b1a4201e40b1378036dc012100fe
-
-## Changed
-
-- Removed animations from stack on web
-- Ensure that headerMode is float by default on web
-
-## Fixes
-
-- Prevent transitionConfig's useNativeDriver value being overwritten. (https://github.com/react-navigation/stack/commit/8b2af7d94209d4658abd8d799bc78744a1004b4e)
-- Update typescript with headerLeftContainerStyle and headerRightContainerStyle
-- Update typescript - Add `safeAreaInset` to `BottomTabBarProps`
-- Update typescript - `TabBarTop` is now `MaterialTopTabBar`
-- Update typescript - Remove `SwitchNavigator`, `TabNavigator` and `StackNavigator`. Added exports for `SceneView` and `SwitchRouter`
-- Update typescript - `getLabel` is now `getLabelText` in BottomTabProps and TopTabProps
-- Silence deprecated lifecycle warning in Stack Transitioner
-
-## [3.9.0] - [2019-04-23](https://github.com/react-navigation/react-navigation/releases/tag/3.9.0)
-
-## Fixes
-
-- Remove `createTabNavigator` from type definitions
-- Add missing types for `DrawerNavigatorConfig`
-- Use `preserveFocus` action param rather than matching on specific action types to determine if index needs to be updated if child router changes (https://github.com/react-navigation/react-navigation-core/pull/56)
-
-## [3.8.1] - [2019-04-12](https://github.com/react-navigation/react-navigation/releases/tag/3.8.1)
-
-## Changed
-
-- Add missing type for `enableURLHandling` to TypeScript definition (#5803)
-- Update Flow types (#5806)
-
-## [3.8.0] - [2019-04-12](https://github.com/react-navigation/react-navigation/releases/tag/3.8.0)
-
-## Fixes
-
-- `onRefresh` on exported lists `FlatList` and `SectionList` works as expected now (no need to add `refreshControl` prop explicitly)
-- On Android, the exported `ScrollView` is now same as the React Native ScrollView (but with scroll-to-top behavior added), whereas on iOS we still use react-native-gesture-handler ScrollView. We can change Android back to react-native-gesture-handler ScrollView when https://github.com/kmagiera/react-native-gesture-handler/issues/560 is resolved.
-- Look for `scrollResponderScrollTo` function in our ScrollView, in react-native 0.59 the interface appears to have changed for FlatList such that this is needed. (react-navigation-native#20)
-
-## Changed
-
-- Stack header style improvements for web (react-navigation-stack#104)
-
-## [3.7.1] - [2019-04-10](https://github.com/react-navigation/react-navigation/releases/tag/3.7.1)
-
-## Fixes
-
-- Update Flow types (#5800 and #5801)
-- More open `navigationOptions` types for bottom tab navigator config (#5796)
-- Fix hit slop for bottom tab bar (react-navigation-tabs#110)
-
-## Added
-
-- Add accessibility role and state to bottom bar (react-navigation-tabs#90)
-- Hide tab bar when keyboard is shown (react-navigation-tabs#112)
-- Specify default values for getAccessibilityX on tabs (react-navigation-tabs##116)
-- Add a isFirstRouteInParent method to navigation object (react-navigation-core#51)
-
-## [3.6.1] - [2019-04-02](https://github.com/react-navigation/react-navigation/releases/tag/3.6.1)
-
-## Fixed
-
-- Move event subscriptions to constructor in `withNavigationFocus` to ensure initial `didFocus` event is received.
-
-## [3.6.0] - [2019-03-31](https://github.com/react-navigation/react-navigation/releases/tag/3.6.0)
-
-## Added
-
-- Export TabBarIconProps, TabBarLabelProps, DrawerIconProps, DrawerLabelProps, ScreenProps and InitialLayout.
-- Add `disabled` prop to HeaderBackButton
-- Add `StackViewTransitionConfigs.NoAnimation`
-- Add `drawerContainerStyle` to navigator config for drawer navigator
-
-## [3.5.1] - [2019-03-19](https://github.com/react-navigation/react-navigation/releases/tag/3.5.1)
-
-## Added
-
-- Export StackGestureContext and DrawerGestureContext
-- Add missing type for withOrientation
-
-## Fixed
-
-- Fix header HeaderBackButton title TypeScript type
-
-## [3.5.0] - [2019-03-19](https://github.com/react-navigation/react-navigation/releases/tag/3.5.0)
-
-## Fixed
-
-- Fixed types for `BottomTabBar`
-- export `NavigationContext` type
-
-## Changed
-
-- Make 'react-native-gesture-handler' a peer dependency rather than a hard dependency
-
-## [3.4.1] - [2019-03-16](https://github.com/react-navigation/react-navigation/releases/tag/3.4.1)
-
-## Fixed
-
-- Fix missing TypeScript definitions file in release package
-
-## [3.4.0] - [2019-03-15](https://github.com/react-navigation/react-navigation/releases/tag/3.4.0)
-
-## Added
-
-- TypeScript type definition now included in the project.
-- Better support for react-native-web in core and stack.
-
-## Fixed
-
-- Default key to null in stack reset action (https://github.com/react-navigation/react-navigation-core/commit/59238160d86284a3353d53af10688fcf3f36004f)
-- Fix header back button label and title label scaling. Defaults to false. (https://github.com/react-navigation/react-navigation-stack/commit/c1f1dff465e9eebe274a08e274cf10570045fa23)
-
-## Changed
-
-- Remove react-lifecycles-compat from @react-navigation/core
-- NavigationPlayground uses TypeScript
-
-## [3.3.2] - [2019-02-25](https://github.com/react-navigation/react-navigation/releases/tag/3.3.2)
-
-## Fixed
-
-- Updated Flow types (https://github.com/react-navigation/react-navigation/commit/d3040e52b39bc8e91ffc1354d9c5f8c096baf597)
-
-## [3.3.1] - [2019-02-25](https://github.com/react-navigation/react-navigation/releases/tag/3.3.1)
-
-## Fixed
-
-- SafeAreaView bottom inset on iPhone XR and XS fixed. (https://github.com/react-navigation/react-navigation/issues/5625)
-
-## [3.3.0] - [2019-02-16](https://github.com/react-navigation/react-navigation/releases/tag/3.3.0)
-
-## Added
-
-- Pass through `drawerOpenProgress` to drawer content component (https://github.com/react-navigation/react-navigation-drawer/pull/40)
-
-## [3.2.3] - [2019-02-09](https://github.com/react-navigation/react-navigation/releases/tag/3.2.3)
-
-## Fixed
-
-- `await` the result of `onTransitionStart` before starting the transition (https://github.com/react-navigation/react-navigation-stack/pull/79)
-
-## [3.2.2]
-
-- Oops, I skipped it. Nothing here.
-
-## [3.2.1] - [2019-02-09](https://github.com/react-navigation/react-navigation/releases/tag/3.2.1)
-
-## Fixed
-
-- Remove accidental console.log
-
-## [3.2.0] - [2019-02-08](https://github.com/react-navigation/react-navigation/releases/tag/3.2.0)
-
-## Added
-
-- Add support for `backBehavior: history'` and `backBehavior: 'order'` to any navigator based on SwitchRouter (eg: tab navigators). (https://github.com/react-navigation/react-navigation-core/pull/31)
-
-## [3.1.5] - [2019-02-06](https://github.com/react-navigation/react-navigation/releases/tag/3.1.5)
-
-## Fixed
-
-- Revert "Transparent header measurement fix (https://github.com/react-navigation/react-navigation-stack/pull/71)"
-
-## [3.1.4] - [2019-02-05](https://github.com/react-navigation/react-navigation/releases/tag/3.1.4)
-
-## Fixed
-
-- Fix references to onGestureFinish in StackViewLayout, should be onGestureEnd
-
-## [3.1.3] - [2019-02-04](https://github.com/react-navigation/react-navigation/releases/tag/3.1.3)
-
-## Fixed
-
-- Stack navigator properly dismisses and restores keyboard when gesture starts and is cancelled
-- Transparent header measurement fix (https://github.com/react-navigation/react-navigation-stack/pull/71)
-
-## [3.1.2] - [2019-02-01](https://github.com/react-navigation/react-navigation/releases/tag/3.1.2)
-
-## Fixed
-
-- Update flow definition for `withNavigation` and `withNavigationFocus` to support `defaultProps`
-- Prevent onRef callback be called twice on withNavigationFocus components (https://github.com/react-navigation/react-navigation-core/pull/30)
-- Bump react-navigation-drawer version to improve performance - if you use Expo, you will need expo@^32.0.3 to update!
-
-## [3.0.9] - [2018-12-19](https://github.com/react-navigation/react-navigation/releases/tag/3.0.9)
-
-## Fixed
-
-- Intermittent flicker when changing tabs while using react-native-screens fixed by not changing opacity (https://github.com/react-navigation/react-navigation-tabs/pull/80)
-- Prevent fading the previous screen on push/pop on Android (https://github.com/react-navigation/react-navigation-stack/pull/73)
-
-## [3.0.8] - [2018-12-08](https://github.com/react-navigation/react-navigation/releases/tag/3.0.8)
-
-## Changed
-
-- Lock create-react-context to 0.2.2
-
-## [3.0.7] - [2018-12-08](https://github.com/react-navigation/react-navigation/releases/tag/3.0.7)
-
-## Changed
-
-- Optimize stack gesture to avoid a setState and reduce unnecessary Animated node creation (https://github.com/react-navigation/react-navigation-stack/pull/70)
-
-## [3.0.6] - [2018-12-06](https://github.com/react-navigation/react-navigation/releases/tag/3.0.6)
-
-## Fixes
-
-- Fix drawer accessibility label when drawer label is not a string
-
-## [3.0.5] - [2018-12-03](https://github.com/react-navigation/react-navigation/releases/tag/3.0.5)
-
-## Fixes
-
-- Fix crash in rare case where onNavigationStateChange on container leads to setState and container has screenProps (https://github.com/react-navigation/react-navigation/issues/5301)
-- Expose underlaying ScrollView methods to NavigationAwareScrollable (https://github.com/react-navigation/react-navigation-native/pull/8)
-
-## [3.0.4] - [2018-11-30](https://github.com/react-navigation/react-navigation/releases/tag/3.0.4)
-
-## Changed
-
-- Lock dependencies to exact versions
-
-## Fixes
-
-- Fix crash when screenInterpolator is null (https://github.com/react-navigation/react-navigation-stack/issues/64)
-- Fix renderPager override (https://github.com/react-navigation/react-navigation-tabs/pull/70)
-
-## Added
-
-- Accessibility labels on drawer items (https://github.com/react-navigation/react-navigation-drawer/pull/30)
-
-## [3.0.3] - [2018-11-30](https://github.com/react-navigation/react-navigation/releases/tag/3.0.3)
-
-## Fixes
-
-- Fix bug where if you navigate immediately when the navigator is first mounted the stack could get in an invalid state.
-- Transparent stack card factors in header height now, even though you probably won't want to use this.
-- Fix bug where shadow was still rendered on transparent stack
-- Fix gestureResponseDistance custom values being ignored for modal stack
-
-## [3.0.2] - [2018-11-27](https://github.com/react-navigation/react-navigation/releases/tag/3.0.2)
-
-## Fixes
-
-- Fix `drawerLockMode` on drawer navigator
-- Fix RTL support in drawer navigator
-
-## [3.0.1] - [2018-11-26](https://github.com/react-navigation/react-navigation/releases/tag/3.0.1)
-
-## Fixes
-
-- fix NavigationTestUtils.js deprecated file import.
-- Update `getParam` flow typings to check `key` and `fallback` arguments, as well as return the correct type automatically.
-- Fix regression in backgroundColor on cardStyle for stack navigator.
-
-## [3.0.0] - [2018-11-17](https://github.com/react-navigation/react-navigation/releases/tag/3.0.0)
-
-- Changes between the latest 2.x release and 3.0.0 are listed on the blog at https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html
-
-# [Previous major versions]
-
-- [2.x](https://github.com/react-navigation/react-navigation/blob/2.x/CHANGELOG.md)
-
-[Unreleased]: Fixed NavigationStackScreenOptions types by adding headerTitleContainerStyle
-[Unreleased]: https://github.com/react-navigation/react-navigation/compare/3.10.0...HEAD
-[3.10.0]: https://github.com/react-navigation/react-navigation/compare/3.10.0...3.9.0
-[3.9.0]: https://github.com/react-navigation/react-navigation/compare/3.8.1...3.9.0
-[3.8.1]: https://github.com/react-navigation/react-navigation/compare/3.8.0...3.8.1
-[3.8.0]: https://github.com/react-navigation/react-navigation/compare/3.7.1...3.8.0
-[3.7.1]: https://github.com/react-navigation/react-navigation/compare/3.6.1...3.7.1
-[3.6.1]: https://github.com/react-navigation/react-navigation/compare/3.6.0...3.6.1
-[3.6.0]: https://github.com/react-navigation/react-navigation/compare/3.5.1...3.6.0
-[3.5.1]: https://github.com/react-navigation/react-navigation/compare/3.5.0...3.5.1
-[3.5.0]: https://github.com/react-navigation/react-navigation/compare/3.4.1...3.5.0
-[3.4.1]: https://github.com/react-navigation/react-navigation/compare/3.4.0...3.4.1
-[3.4.0]: https://github.com/react-navigation/react-navigation/compare/3.3.2...3.4.0
-[3.3.2]: https://github.com/react-navigation/react-navigation/compare/3.3.1...3.3.2
-[3.3.1]: https://github.com/react-navigation/react-navigation/compare/3.3.0...3.3.1
-[3.3.0]: https://github.com/react-navigation/react-navigation/compare/3.2.3...3.3.0
-[3.2.3]: https://github.com/react-navigation/react-navigation/compare/3.2.1...3.2.3
-[3.2.1]: https://github.com/react-navigation/react-navigation/compare/3.2.0...3.2.1
-[3.2.0]: https://github.com/react-navigation/react-navigation/compare/3.1.5...3.2.0
-[3.1.5]: https://github.com/react-navigation/react-navigation/compare/3.1.4...3.1.5
-[3.1.4]: https://github.com/react-navigation/react-navigation/compare/3.1.3...3.1.4
-[3.1.3]: https://github.com/react-navigation/react-navigation/compare/3.1.2...3.1.3
-[3.1.2]: https://github.com/react-navigation/react-navigation/compare/3.0.9...3.1.2
-[3.0.9]: https://github.com/react-navigation/react-navigation/compare/3.0.8...3.0.9
-[3.0.8]: https://github.com/react-navigation/react-navigation/compare/3.0.7...3.0.8
-[3.0.7]: https://github.com/react-navigation/react-navigation/compare/3.0.6...3.0.7
-[3.0.6]: https://github.com/react-navigation/react-navigation/compare/3.0.5...3.0.6
-[3.0.5]: https://github.com/react-navigation/react-navigation/compare/3.0.4...3.0.5
-[3.0.4]: https://github.com/react-navigation/react-navigation/compare/3.0.3...3.0.4
-[3.0.3]: https://github.com/react-navigation/react-navigation/compare/3.0.2...3.0.3
-[3.0.2]: https://github.com/react-navigation/react-navigation/compare/3.0.1...3.0.2
-[3.0.1]: https://github.com/react-navigation/react-navigation/compare/3.0.0...3.0.1
-[3.0.0]: https://github.com/react-navigation/react-navigation/compare/2.x...3.0.0

LICENSE

@@ -1,26 +1,21 @@
-BSD License
+MIT License
 
-For React Navigation software
+Copyright (c) 2017 React Native Community
 
-Copyright (c) 2016-present, React Navigation Contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
- * Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
- * Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -17,6 +17,10 @@ See: https://reactnavigation.org/docs/en/getting-started.html
 * The [Community Resources](https://github.com/react-navigation/react-navigation/blob/master/COMMUNITY_RESOURCES.md) document lists some other resources submitted to us by people who use React Navigation. Feel free to open a pull request to add your resource to the list.
 * You can contribute improvements to the documentation [in the website repository](https://github.com/react-navigation/react-navigation.github.io).
 
+## Changelog
+
+The changes for each release are outlined on [the Github releases page](https://github.com/react-navigation/react-navigation/releases).
+
 ## Try it out
 
 You can also try out the [Navigation Playground app](https://exp.host/@react-navigation/NavigationPlayground) to get a sense for some of the tools built in to React Navigation. The "Fundamentals" in the documentation also include examples you can play with.
@@ -45,4 +49,4 @@ This library has adopted a Code of Conduct that we expect project participants t
 
 ## License
 
-React Navigation is licensed under the [BSD 2-clause "Simplified" License](https://github.com/react-community/react-navigation/blob/master/LICENSE).
+React Navigation is licensed under the [MIT](https://github.com/react-community/react-navigation/blob/master/LICENSE).

assetsTransformer.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-commonjs */
 /**
  * This file is needed to hijack asset imports so that test files don't attempt
  * to import them as JavaScript modules.
@@ -6,7 +7,7 @@
 const path = require('path');
 
 module.exports = {
-  process(src, filename, config, options) {
+  process(src, filename) {
     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
   },
 };

babel.config.js

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

commitlint.config.js

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

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["expo"]
+}

example/.eslintrc

@@ -0,0 +1,18 @@
+{
+  'extends': '../.eslintrc',
+
+  'settings':
+    {
+      'import/core-modules':
+        [
+          'expo-asset',
+          'react-navigation-stack',
+          'react-native-gesture-handler',
+          'react-native-reanimated',
+        ],
+    },
+
+  "rules": {
+    "react-native/no-inline-styles": "off"
+  }
+}

example/App.tsx

@@ -19,9 +19,9 @@ import {
   ThemeContext,
   Themed,
   createAppContainer,
-  createStackNavigator,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import CustomTabs from './src/CustomTabs';
 import CustomTabUI from './src/CustomTabUI';
@@ -428,13 +428,6 @@ const styles = StyleSheet.create({
     color: '#999',
     fontSize: 13,
   },
-  image: {
-    alignSelf: 'center',
-    height: 120,
-    marginBottom: 20,
-    resizeMode: 'contain',
-    width: 120,
-  },
   item: {
     borderBottomWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 16,

example/app.json

@@ -0,0 +1,14 @@
+{
+  "expo": {
+    "name": "React Navigation Stack Example",
+    "description": "Demonstrates the various capabilities of react-navigation-stack",
+    "slug": "react-navigation-stack-demo",
+    "sdkVersion": "33.0.0",
+    "version": "1.0.0",
+    "primaryColor": "#2196f3",
+    "packagerOpts": {
+      "config": "./metro.config.js",
+      "projectRoots": ""
+    }
+  }
+}

example/metro.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
+
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const project = require('../package.json');
+const escape = require('escape-string-regexp');
+
+const projectDependencies = Object.keys({
+  ...project.dependencies,
+  ...project.peerDependencies,
+});
+
+module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [path.resolve(__dirname, '..')],
+
+  resolver: {
+    blacklistRE: blacklist([
+      new RegExp(
+        `^${escape(
+          path.resolve(__dirname, 'node_modules', project.name)
+        )}\\/.*$`
+      ),
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
+      ),
+    ]),
+
+    providesModuleNodeModules: [
+      '@expo/vector-icons',
+      '@babel/runtime',
+      ...projectDependencies,
+    ],
+  },
+};

example/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "playground",
+  "version": "0.0.1",
+  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "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",
+    "@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",
+    "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"
+  },
+  "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"
+  }
+}

example/src/CustomTabUI.tsx

@@ -8,16 +8,18 @@ import {
   Text,
   View,
 } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  MaterialTopTabBar,
   Themed,
-  createMaterialTopTabNavigator,
   ThemeContext,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 interface Props {
@@ -108,11 +110,7 @@ class MaterialTopTabBarWrapper extends React.Component<MaterialTopTabBarProps> {
 }
 
 class FeaturedScreen extends React.Component<Props> {
-  static navigationOptions = ({
-    navigation,
-  }: {
-    navigation: NavigationScreenProp<NavigationState>;
-  }) => ({
+  static navigationOptions = {
     tabBarLabel: 'Featured',
     tabBarIcon: ({
       tintColor,
@@ -129,7 +127,8 @@ class FeaturedScreen extends React.Component<Props> {
         style={{ color: tintColor }}
       />
     ),
-  });
+  };
+
   render() {
     const { navigation } = this.props;
     return (

example/src/CustomTabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, StatusBar, StyleSheet, Text } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 import {
   createNavigator,

example/src/Drawer.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { ScrollView, StyleProp, TextStyle } from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { MaterialIcons } from '@expo/vector-icons';
 import {
-  createDrawerNavigator,
-  createStackNavigator,
   Themed,
   SafeAreaView,
+  NavigationScreenProp,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationScreenProp, NavigationState } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -36,7 +37,7 @@ const InboxScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
 InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
@@ -45,13 +46,13 @@ const EmailScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Email Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
 
 const DraftsScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
 DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };
@@ -63,7 +64,7 @@ const InboxStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="move-to-inbox"
           size={24}
@@ -82,7 +83,7 @@ const DraftsStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="drafts"
           size={24}

example/src/ModalStack.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
   Themed,
   SafeAreaView,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationState } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -99,7 +99,7 @@ const MyHeaderTestScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={`Full screen view`} navigation={navigation} />;
+}) => <MyNavScreen banner="Full screen view" navigation={navigation} />;
 MyHeaderTestScreen.navigationOptions = ({
   navigation,
 }: {

example/src/SampleText.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Themed } from 'react-navigation';
 
 /**

example/src/SimpleStack.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import {
-  createStackNavigator,
   NavigationActions,
   NavigationEventPayload,
   NavigationEventSubscription,
@@ -14,6 +13,7 @@ import {
   Themed,
   withNavigation,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -148,7 +148,7 @@ interface MyPhotosScreenProps {
 }
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
-    headerLeft: <MyBackButtonWithNavigation />,
+    headerLeft: () => <MyBackButtonWithNavigation />,
     title: 'Photos',
   };
   s0: NavigationEventSubscription | null = null;

example/src/SimpleTabs.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  createBottomTabNavigator,
   FlatList,
   NavigationEventSubscription,
   NavigationScreenProp,
   SafeAreaView,
   Themed,
   ScrollView,
+  NavigationEventPayload,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationEventPayload, NavigationState } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -37,7 +38,10 @@ const MyNavScreen = ({
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
       {TEXT.split('\n').map((p, n) => (
-        <Themed.Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
+        <Themed.Text
+          key={n}
+          style={{ marginVertical: 10, marginHorizontal: 8 }}
+        >
           {p}
         </Themed.Text>
       ))}
@@ -46,17 +50,15 @@ const MyNavScreen = ({
   </ScrollView>
 );
 
-const MyListScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
+const MyListScreen = () => (
   <FlatList
     data={TEXT.split('\n')}
     style={{ paddingTop: 10 }}
-    keyExtractor={(item, index) => index.toString()}
+    keyExtractor={(_, index) => index.toString()}
     renderItem={({ item }) => (
-      <Themed.Text style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}>
+      <Themed.Text
+        style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}
+      >
         {item}
       </Themed.Text>
     )}
@@ -72,7 +74,6 @@ const MyHomeScreen = ({
 MyHomeScreen.navigationOptions = {
   tabBarIcon: ({
     tintColor,
-    focused,
     horizontal,
   }: {
     tintColor: string;
@@ -80,7 +81,7 @@ MyHomeScreen.navigationOptions = {
     horizontal: boolean;
   }) => (
     <Ionicons
-      name={'ios-home'}
+      name="ios-home"
       size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />
@@ -100,7 +101,6 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
   static navigationOptions = {
     tabBarIcon: ({
       tintColor,
-      focused,
       horizontal,
     }: {
       tintColor: string;
@@ -108,7 +108,7 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
       horizontal: boolean;
     }) => (
       <Ionicons
-        name={'ios-people'}
+        name="ios-people"
         size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
@@ -147,7 +147,6 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
   static navigationOptions = {
     tabBarIcon: ({
       tintColor,
-      focused,
       horizontal,
     }: {
       tintColor: string;
@@ -155,7 +154,7 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
       horizontal: boolean;
     }) => (
       <Ionicons
-        name={'ios-chatboxes'}
+        name="ios-chatboxes"
         size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
@@ -196,7 +195,6 @@ const MySettingsScreen = ({
 MySettingsScreen.navigationOptions = {
   tabBarIcon: ({
     tintColor,
-    focused,
     horizontal,
   }: {
     tintColor: string;
@@ -204,7 +202,7 @@ MySettingsScreen.navigationOptions = {
     horizontal: boolean;
   }) => (
     <Ionicons
-      name={'ios-settings'}
+      name="ios-settings"
       size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />

example/src/StackWithCustomHeaderBackImage.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Button, Image, StyleSheet } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   NavigationScreenConfigProps,
   Themed,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import SampleText from './SampleText';
 
 interface MyNavScreenProps {

example/src/StackWithHeaderPreset.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { StatusBar } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
+  Themed,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 
@@ -30,7 +30,7 @@ class HomeScreen extends React.Component<NavScreenProps> {
           title="Push screen with no header"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go Home" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -57,7 +57,7 @@ class OtherScreen extends React.Component<NavScreenProps> {
         />
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -76,7 +76,7 @@ class ScreenWithLongTitle extends React.Component<NavScreenProps> {
       <SafeAreaView style={{ paddingTop: 30 }}>
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -97,7 +97,7 @@ class ScreenWithNoHeader extends React.Component<NavScreenProps> {
         <Button onPress={() => push('Other')} title="Push another screen" />
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }

example/src/StackWithTranslucentHeader.tsx

@@ -3,18 +3,18 @@ import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { BlurView } from 'expo-blur';
 import { isIphoneX } from 'react-native-iphone-x-helper';
 import {
-  createStackNavigator,
-  Header,
-  HeaderStyleInterpolator,
   NavigationEventPayload,
-  NavigationScreenConfigProps,
   NavigationEventSubscription,
   NavigationScreenProp,
   NavigationState,
   Themed,
   SupportedThemes,
-  TransitionConfig,
 } from 'react-navigation';
+import {
+  createStackNavigator,
+  Header,
+  HeaderStyleInterpolator,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -226,7 +226,7 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
+    defaultNavigationOptions: ({ theme }) => ({
       headerBackground:
         Platform.OS === 'ios' ? (
           <BlurView
@@ -245,11 +245,10 @@ const StackWithTranslucentHeader = createStackNavigator(
     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,
-      } as TransitionConfig),
+    transitionConfig: () => ({
+      headerBackgroundInterpolator:
+        HeaderStyleInterpolator.forBackgroundWithTranslation,
+    }),
   }
 );
 

example/src/StacksAndKeys.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { StatusBar, Text, View } from 'react-native';
-import { createStackNavigator, NavigationScreenProp } from 'react-navigation';
-import { NavigationState } from 'react-navigation';
+import { Text, View } from 'react-native';
+import {
+  NavigationScreenProp,
+  NavigationState,
+  Themed,
+} from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 interface Props {
@@ -27,7 +31,7 @@ class HomeScreen extends React.Component<Props, any> {
           title="Go back to other examples"
           onPress={() => this.props.navigation.goBack(null)}
         />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }

example/src/StacksInTabs.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { StatusBar, Text } from 'react-native';
+import { Text } from 'react-native';
 import {
-  createBottomTabNavigator,
-  createStackNavigator,
+  Themed,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
   ScrollView,
 } from 'react-navigation';
-
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import { Ionicons } from '@expo/vector-icons';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -53,7 +53,7 @@ class MyNavScreen extends React.Component<Props> {
           ))}
         </SafeAreaView>
 
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </ScrollView>
     );
   }

example/src/StacksOverTabs.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { ScrollView, StatusBar } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  createBottomTabNavigator,
-  createStackNavigator,
   getActiveChildNavigationOptions,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 

example/src/StacksOverTopTabs.tsx

@@ -7,13 +7,15 @@ import {
   View,
 } from 'react-native';
 import {
-  createMaterialTopTabNavigator,
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
-import { MaterialTopTabBar } from 'react-navigation-tabs';
+import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';

example/src/SwitchWithStacks.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import {
   ActivityIndicator,
   AsyncStorage,
-  StatusBar,
   StyleSheet,
   View,
   Platform,
 } from 'react-native';
-import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
+import { Themed, createSwitchNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 class SignInScreen extends React.Component<any, any> {
@@ -23,7 +23,7 @@ class SignInScreen extends React.Component<any, any> {
           title="Go back to other examples"
           onPress={() => this.props.navigation.goBack(null)}
         />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }
@@ -44,7 +44,7 @@ class HomeScreen extends React.Component<any, any> {
       <View style={styles.container}>
         <Button title="Show me more of the app" onPress={this.showMoreApp} />
         <Button title="Actually, sign me out :)" onPress={this.signOutAsync} />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }
@@ -54,7 +54,12 @@ class HomeScreen extends React.Component<any, any> {
   };
 
   signOutAsync = async () => {
-    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
+    if (Platform.OS === 'ios') {
+      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
+    } else {
+      await AsyncStorage.clear();
+    }
+
     this.props.navigation.navigate('Auth');
   };
 }
@@ -68,13 +73,18 @@ class OtherScreen extends React.Component<any, any> {
     return (
       <View style={styles.container}>
         <Button title="I'm done, sign me out" onPress={this.signOutAsync} />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }
 
   signOutAsync = async () => {
-    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
+    if (Platform.OS === 'ios') {
+      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
+    } else {
+      await AsyncStorage.clear();
+    }
+
     this.props.navigation.navigate('Auth');
   };
 }
@@ -94,7 +104,7 @@ class LoadingScreen extends React.Component<any, any> {
     return (
       <View style={styles.container}>
         <ActivityIndicator />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }

example/src/TabsInDrawer.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Platform, ScrollView } from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { createDrawerNavigator } from 'react-navigation';
+import { MaterialIcons } from '@expo/vector-icons';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import SimpleTabs from './SimpleTabs';
 import StacksOverTabs from './StacksOverTabs';
 

example/src/commonComponents/Button.tsx

@@ -1,42 +1,49 @@
 import React from 'react';
-import { AccessibilityState, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  AccessibilityStates,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 export interface ButtonProps {
   /**
    * Text to display inside the button
    */
-  title: string,
+  title: string;
 
   /**
    * Handler to be called when the user taps the button
    */
-  onPress: (event?: any) => void,
+  onPress: (event?: any) => void;
 
   /**
    * Color of the text (iOS), or background color of the button (Android)
    */
-  color?: string,
+  color?: string;
 
   /**
    * TV preferred focus (see documentation for the View component).
    */
-  hasTVPreferredFocus?: boolean,
+  hasTVPreferredFocus?: boolean;
 
   /**
    * Text to display for blindness accessibility features
    */
-  accessibilityLabel?: string,
+  accessibilityLabel?: string;
 
   /**
    * If true, disable all interactions for this component.
    */
-  disabled?: boolean,
+  disabled?: boolean;
 
   /**
    * Used to locate this view in end-to-end tests.
    */
-  testID?: string,
-};
+  testID?: string;
+}
 
 /**
  * A basic button component that should render nicely on any platform. Supports
@@ -81,7 +88,7 @@ export default class Button extends React.Component<ButtonProps> {
         buttonStyles.push({ backgroundColor: color });
       }
     }
-    const accessibilityStates: AccessibilityState[] = [];
+    const accessibilityStates: AccessibilityStates[] = [];
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
@@ -99,9 +106,7 @@ export default class Button extends React.Component<ButtonProps> {
         onPress={onPress}
       >
         <View style={buttonStyles}>
-          <Text style={textStyles}>
-            {formattedTitle}
-          </Text>
+          <Text style={textStyles}>{formattedTitle}</Text>
         </View>
       </TouchableOpacity>
     );

example/src/commonComponents/ButtonWithMargin.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import BaseButton, { ButtonProps } from './Button';
 
 export const Button = (props: ButtonProps) => (

example/src/commonComponents/HeaderButtons.tsx

@@ -1,9 +1,11 @@
-import DefaultHeaderButtons from 'react-navigation-header-buttons';
 import * as React from 'react';
-import { Platform } from 'react-native';
+import {
+  HeaderButtons as DefaultHeaderButtons,
+  Item,
+} from 'react-navigation-header-buttons';
 
 export class HeaderButtons extends React.PureComponent {
-  static Item = DefaultHeaderButtons.Item;
+  static Item = Item;
 
   render() {
     return (

examples/NavigationPlayground/.expo-shared/assets.json

@@ -1,7 +0,0 @@
-{
-  "2597acb02c2c2a7cf6627e6e3570f99612cb9e87847e685e6a60b5668e2799a0": true,
-  "5e5a970a20c69dd6ecd2e5c3db621effc6e7eba78c972a63dacd69e9e6734616": true,
-  "69ef6f9ec53cb7b1657de525c6c77f03fcecbe3607d4b6086995c73024a013fe": true,
-  "33e0eb31a7feec0d570d18432ac02c90520557ee17f021652be26b0a51fb9dcc": true,
-  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
-}

examples/NavigationPlayground/.gitattributes

@@ -1 +0,0 @@
-*.pbxproj -text

examples/NavigationPlayground/.gitignore

@@ -1,63 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# Visual Studio Code
-#
-.vscode/
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
-
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
-
-# Bundle artifact
-*.jsbundle
-
-# Exponent
-.expo/*

examples/NavigationPlayground/README.md

@@ -1,14 +0,0 @@
-# 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 # in the react-navigation root directory
-cd examples/NavigationPlayground
-yarn
-yarn 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).

examples/NavigationPlayground/app.json

@@ -1,31 +0,0 @@
-{
-  "expo": {
-    "name": "React Navigation Playground",
-    "description": "Explore various patterns for navigation",
-    "slug": "NavigationPlayground",
-    "privacy": "public",
-    "sdkVersion": "33.0.0",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./src/assets/icon.png",
-    "splash": {
-      "image": "./src/assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "org.reactnavigation.playground"
-    }
-  }
-}

examples/NavigationPlayground/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};

examples/NavigationPlayground/package.json

@@ -1,74 +0,0 @@
-{
-  "name": "NavigationPlayground",
-  "version": "0.1.0",
-  "private": true,
-  "main": "./node_modules/expo/AppEntry.js",
-  "scripts": {
-    "postinstall": "patch-package && rm -rf node_modules/react-navigation/node_modules/react-native && rm -rf node_modules/react-navigation/node_modules/@types && rm -rf node_modules/react-navigation/node_modules/examples && rm -rf node_modules/react-navigation/node_modules/react-native-gesture-handler && rm -rf node_modules/react-navigation/node_modules/react && rm -rf node_modules/react-navigation/examples",
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "eject": "expo eject",
-    "test": "jest && tsc",
-    "tsc": "tsc",
-    "release": "release-it"
-  },
-  "dependencies": {
-    "expo": "^33.0.7",
-    "expo-blur": "~5.0.1",
-    "patch-package": "^6.0.5",
-    "postinstall-postinstall": "^2.0.0",
-    "react": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "react-native-gesture-handler": "^1.1.0",
-    "react-native-iphone-x-helper": "^1.2.0",
-    "react-native-vector-icons": "^6.1.0",
-    "react-navigation": "file:../..",
-    "react-navigation-header-buttons": "^2.1.1"
-  },
-  "devDependencies": {
-    "@types/jest": "23.3.10",
-    "@types/react-native": "~0.57.38",
-    "@types/react-native-vector-icons": "^4.6.4",
-    "@types/react-test-renderer": "16.0.3",
-    "babel-jest": "23.6.0",
-    "jest": "23.6.0",
-    "metro-react-native-babel-preset": "0.50.0",
-    "react-test-renderer": "16.6.1",
-    "ts-jest": "^23.10.4",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.16.0",
-    "tslint-react": "^3.6.0",
-    "typescript": "3.2.1"
-  },
-  "jest": {
-    "preset": "react-native",
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation/.*))"
-    ],
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "tsconfig.jest.json"
-      }
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "setupFiles": [
-      "./tests/setup.js"
-    ]
-  },
-  "resolutions": {
-    "react-native-gesture-handler": "^1.1.0"
-  }
-}

examples/NavigationPlayground/prettier.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  trailingComma: 'es5',
-  singleQuote: true,
-};

examples/NavigationPlayground/tests/setup.js

@@ -1,46 +0,0 @@
-import { NativeModules } from 'react-native';
-
-NativeModules.ReactLocalization = {
-  language: 'en',
-};
-
-// TODO: remove these mocks!
-jest.mock('react-native-gesture-handler', () => {
-  const View = require('react-native/Libraries/Components/View/View');
-  return {
-    Swipeable: View,
-    DrawerLayout: View,
-    State: {},
-    ScrollView: View,
-    Slider: View,
-    Switch: View,
-    TextInput: View,
-    ToolbarAndroid: View,
-    ViewPagerAndroid: View,
-    DrawerLayoutAndroid: View,
-    WebView: View,
-    NativeViewGestureHandler: View,
-    TapGestureHandler: View,
-    FlingGestureHandler: View,
-    ForceTouchGestureHandler: View,
-    LongPressGestureHandler: View,
-    PanGestureHandler: View,
-    PinchGestureHandler: View,
-    RotationGestureHandler: View,
-    /* Buttons */
-    RawButton: View,
-    BaseButton: View,
-    RectButton: View,
-    BorderlessButton: View,
-    /* Other */
-    FlatList: View,
-    gestureHandlerRootHOC: jest.fn(),
-    Directions: {},
-  };
-});
-
-jest.mock('react-native-gesture-handler/DrawerLayout', () => {
-  return {
-    Directions: null,
-  };
-});

examples/NavigationPlayground/tsconfig.jest.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "jsx": "react",
-    "module": "commonjs"
-  }
-}

examples/NavigationPlayground/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "jsx": "react-native",
-    "lib": ["es6"],
-    "moduleResolution": "node",
-    "noEmit": true,
-    "strict": true,
-    "target": "esnext"
-  },
-  "exclude": ["node_modules"]
-}

examples/NavigationPlayground/tslint.json

@@ -1,11 +0,0 @@
-{
-  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
-  "rules": {
-    "jsx-no-lambda": false,
-    "member-access": false,
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "no-console": false,
-    "object-literal-sort-keys": false
-  }
-}

examples/NavigationPlayground/types/react-navigation-tabs.d.ts

@@ -1,9 +0,0 @@
-declare module 'react-navigation-tabs' {
-  import * as React from 'react';
-
-  interface MaterialTopbarProperties {
-    // it actually has some properties but yolo
-  }
-  export class MaterialTopTabBar extends React.Component<MaterialTopbarProperties> {}
-
-}

jest-setup.js

@@ -1,7 +1,4 @@
-/**
- * @flow
- * eslint-env jest
- */
+/* eslint-env jest */
 
 import React from 'react';
 
@@ -11,9 +8,7 @@ jest.mock('Linking', () => ({
   removeEventListener: jest.fn(),
   openURL: jest.fn(),
   canOpenURL: jest.fn(),
-  getInitialURL: jest
-    .fn()
-    .mockImplementation((value: string) => Promise.resolve(value)),
+  getInitialURL: jest.fn().mockImplementation(value => Promise.resolve(value)),
 }));
 
 // See https://github.com/facebook/react-native/issues/11659

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "3.11.2",
+  "version": "4.0.2",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -8,19 +8,14 @@
     "url": "git@github.com:react-navigation/react-navigation.git",
     "type": "git"
   },
-  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>, Brent Vatne <brent@expo.io>",
-  "license": "BSD-2-Clause",
+  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>, Brent Vatne <brent@expo.io>, Satyajit Sahoo <satyajit.happy@gmail.com>",
+  "license": "MIT",
   "scripts": {
-    "start": "npm run ios",
-    "ios": "cd examples/NavigationPlayground && yarn && yarn ios",
-    "android": "cd examples/NavigationPlayground && yarn && yarn android",
-    "test": "npm run lint && npm run jest",
-    "codecov": "codecov",
-    "jest": "jest",
-    "test-update-snapshot": "jest --updateSnapshot",
-    "lint": "eslint .",
-    "format": "eslint --fix .",
-    "precommit": "lint-staged",
+    "bootstrap": "yarn example && yarn",
+    "example": "yarn --cwd example",
+    "test": "jest",
+    "lint": "eslint . --ext '.js,.ts,.tsx'",
+    "typescript": "tsc --noEmit",
     "release": "release-it"
   },
   "publishConfig": {
@@ -36,37 +31,28 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "~3.5.1",
-    "@react-navigation/native": "~3.6.2",
-    "react-navigation-drawer": "~1.4.0",
-    "react-navigation-stack": "1.5.3",
-    "react-navigation-tabs": "~1.2.0"
+    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/native": "^3.6.2"
   },
   "devDependencies": {
-    "@types/react-native": "~0.57.38",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^22.4.1",
-    "babel-preset-react-native": "^2.1.0",
-    "codecov": "^2.2.0",
-    "eslint": "^4.2.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react": "^7.1.0",
-    "husky": "^0.14.3",
-    "jest": "^24.5.0",
-    "jest-expo": "^25.1.0",
-    "lint-staged": "^4.2.1",
-    "prettier": "^1.12.1",
-    "prettier-eslint": "^8.8.1",
-    "react": "16.6.1",
-    "react-native": "~0.57.7",
-    "react-native-vector-icons": "^4.2.0",
-    "react-test-renderer": "^16.0.0",
-    "release-it": "^7.6.1"
+    "@commitlint/config-conventional": "^8.0.0",
+    "@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",
+    "eslint-plugin-react-native-globals": "^0.1.0",
+    "husky": "^3.0.0",
+    "jest": "^24.9.0",
+    "prettier": "^1.18.2",
+    "react": "16.8.3",
+    "react-native": "~0.59.8",
+    "react-test-renderer": "16.8.3",
+    "release-it": "^12.3.6",
+    "typescript": "^3.6.2"
   },
   "jest": {
     "notify": true,
@@ -90,17 +76,20 @@
       "\\.png$": "<rootDir>/assetsTransformer.js"
     },
     "modulePathIgnorePatterns": [
-      "<rootDir>/examples/"
+      "<rootDir>/example/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
+      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
     ]
   },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write flow/react-navigation.js",
-      "git add"
-    ]
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn typescript && yarn lint && yarn test",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
   }
 }

prettier.config.js

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

scripts/build-push-docker.sh

@@ -1,6 +0,0 @@
-#!/bin/bash
-
-set -eo pipefail
-
-docker build -t reactcommunity/node-ci:8.4.0-0 -f ./ci.Dockerfile .
-docker push reactcommunity/node-ci:8.4.0-0

scripts/ci.Dockerfile

@@ -1,19 +0,0 @@
-FROM node:8.4.0
-
-RUN apt-get update -y && \
-    apt-get install -y ocaml libelf1 && \
-    rm -rf /var/lib/apt/lists/* && \
-    curl -o- -L https://yarnpkg.com/install.sh | bash && \
-    yarn global add exp
-    
-RUN git clone https://github.com/facebook/watchman.git \
-    && cd watchman \
-    && git checkout v4.7.0 \
-    && apt-get update -y \
-    && apt-get install -y autoconf automake build-essential python-dev \
-    && ./autogen.sh \
-    && ./configure \
-    && make \
-    && make install \
-    && apt-get remove --purge -y autoconf automake build-essential python-dev \
-    && rm -rf /var/lib/apt/lists/*

scripts/test.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-set -eo pipefail
-
-case $CIRCLE_NODE_INDEX in
-  0) yarn test && yarn codecov ;;
-esac

src/deprecations.js

@@ -0,0 +1,158 @@
+/* eslint-disable getter-return, import/no-commonjs */
+
+const throwError = (message, page) => {
+  throw new Error(
+    `${message}. See https://reactnavigation.org/docs/4.x/${page}.html for more details.`
+  );
+};
+
+module.exports = {
+  get createNavigationContainer() {
+    throw new Error(
+      '`createNavigationContainer()` has been removed. Use `createAppContainer()` instead. You can also import createAppContainer directly from `@react-navigation/native`.'
+    );
+  },
+
+  get createStackNavigator() {
+    throwError(
+      '`createStackNavigator()` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get createBottomTabNavigator() {
+    throwError(
+      '`createBottomTabNavigator()` has been moved to `react-navigation-tabs`',
+      'bottom-tab-navigator'
+    );
+  },
+
+  get createMaterialTopTabNavigator() {
+    throwError(
+      '`createMaterialTopTabNavigator()` has been moved to `react-navigation-tabs`',
+      'material-top-tab-navigator'
+    );
+  },
+
+  get createDrawerNavigator() {
+    throwError(
+      '`createDrawerNavigator()` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  // Gesture contexts
+
+  get StackGestureContext() {
+    throwError(
+      '`StackGestureContext` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get DrawerGestureContext() {
+    throwError(
+      '`DrawerGestureContext` has been moved to `react-navigation-drawer`',
+      'stack-navigator'
+    );
+  },
+
+  // Routers and Actions
+
+  get DrawerRouter() {
+    throwError(
+      '`DrawerRouter` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  get DrawerActions() {
+    throwError(
+      '`DrawerActions` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  // Views
+  get Transitioner() {
+    throwError('`Transitioner` has been removed.', 'stack-navigator');
+  },
+
+  get StackView() {
+    throwError('`StackView` has been removed', 'stack-navigator');
+  },
+
+  get StackViewCard() {
+    throwError('`StackViewCard` has been removed', 'stack-navigator');
+  },
+
+  get StackViewTransitionConfigs() {
+    throwError(
+      '`StackViewTransitionConfigs` has been removed',
+      'stack-navigator'
+    );
+  },
+
+  // Header
+  get Header() {
+    throwError(
+      '`Header` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get HeaderTitle() {
+    throwError(
+      '`HeaderTitle` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get HeaderBackButton() {
+    throwError(
+      '`HeaderBackButton` has been moved to `react-navigation-stack`',
+      'stack-navigator'
+    );
+  },
+
+  get HeaderStyleInterpolator() {
+    throwError('`HeaderStyleInterpolator` has been removed', 'stack-navigator');
+  },
+
+  // DrawerView
+  get DrawerView() {
+    throwError(
+      '`createStackNavigator()` has been moved to `react-navigation-drawer`',
+      'stack-navigator'
+    );
+  },
+
+  get DrawerItems() {
+    throwError(
+      '`DrawerItems` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  get DrawerSidebar() {
+    throwError(
+      '`DrawerSidebar` has been moved to `react-navigation-drawer`',
+      'drawer-navigator'
+    );
+  },
+
+  // Tabs
+  get BottomTabBar() {
+    throwError(
+      '`BottomTabBar` has been moved to `react-navigation-tabs`',
+      'bottom-tab-navigator'
+    );
+  },
+
+  get MaterialTopTabBar() {
+    throwError(
+      '`MaterialTopTabBar` has been moved to `react-navigation-tabs`',
+      'material-top-tab-navigator'
+    );
+  },
+};

src/react-navigation.js

@@ -1,208 +1,4 @@
-/* eslint global-require: 0 */
+export * from '@react-navigation/core';
+export * from '@react-navigation/native';
 
-module.exports = {
-  // Themes
-  get useTheme() {
-    return require('@react-navigation/core').useTheme;
-  },
-  get ThemeContext() {
-    return require('@react-navigation/core').ThemeContext;
-  },
-  get ThemeColors() {
-    return require('@react-navigation/core').ThemeColors;
-  },
-  get Themed() {
-    return require('@react-navigation/native').Themed;
-  },
-
-  // Native
-  get createAppContainer() {
-    return require('@react-navigation/native').createAppContainer;
-  },
-  get createNavigationContainer() {
-    console.warn(
-      '`createNavigationContainer()` has been deprecated, please use `createAppContainer()` instead. You can also import createAppContainer directly from @react-navigation/native'
-    );
-    return require('@react-navigation/native').createAppContainer;
-  },
-  get createKeyboardAwareNavigator() {
-    return require('@react-navigation/native').createKeyboardAwareNavigator;
-  },
-  get createNavigationAwareScrollable() {
-    return require('@react-navigation/native').createNavigationAwareScrollable;
-  },
-  get ScrollView() {
-    return require('@react-navigation/native').ScrollView;
-  },
-  get FlatList() {
-    return require('@react-navigation/native').FlatList;
-  },
-  get SectionList() {
-    return require('@react-navigation/native').SectionList;
-  },
-  get ResourceSavingSceneView() {
-    return require('@react-navigation/native').ResourceSavingSceneView;
-  },
-  get SafeAreaView() {
-    return require('@react-navigation/native').SafeAreaView;
-  },
-  get withOrientation() {
-    return require('@react-navigation/native').withOrientation;
-  },
-
-  // Core
-  get createNavigator() {
-    return require('@react-navigation/core').createNavigator;
-  },
-  get StateUtils() {
-    return require('@react-navigation/core').StateUtils;
-  },
-  get getNavigation() {
-    return require('@react-navigation/core').getNavigation;
-  },
-  get NavigationContext() {
-    return require('@react-navigation/core').NavigationContext;
-  },
-  get NavigationProvider() {
-    return require('@react-navigation/core').NavigationProvider;
-  },
-  get NavigationConsumer() {
-    return require('@react-navigation/core').NavigationConsumer;
-  },
-  get NavigationActions() {
-    return require('@react-navigation/core').NavigationActions;
-  },
-  get StackActions() {
-    return require('@react-navigation/core').StackActions;
-  },
-  get StackRouter() {
-    return require('@react-navigation/core').StackRouter;
-  },
-  get TabRouter() {
-    return require('@react-navigation/core').TabRouter;
-  },
-  get SwitchRouter() {
-    return require('@react-navigation/core').SwitchRouter;
-  },
-  get SwitchActions() {
-    return require('@react-navigation/core').SwitchActions;
-  },
-  get createConfigGetter() {
-    return require('@react-navigation/core').StackAcreateConfigGetterctions;
-  },
-  get getScreenForRouteName() {
-    return require('@react-navigation/core').getScreenForRouteName;
-  },
-  get validateRouteConfigMap() {
-    return require('@react-navigation/core').validateRouteConfigMap;
-  },
-  get getActiveChildNavigationOptions() {
-    return require('@react-navigation/core').getActiveChildNavigationOptions;
-  },
-  get pathUtils() {
-    return require('@react-navigation/core').pathUtils;
-  },
-  get SceneView() {
-    return require('@react-navigation/core').SceneView;
-  },
-  get SwitchView() {
-    return require('@react-navigation/core').SwitchView;
-  },
-  get NavigationEvents() {
-    return require('@react-navigation/core').NavigationEvents;
-  },
-  get withNavigation() {
-    return require('@react-navigation/core').withNavigation;
-  },
-  get withNavigationFocus() {
-    return require('@react-navigation/core').withNavigationFocus;
-  },
-
-  // Navigators
-
-  get createStackNavigator() {
-    return require('react-navigation-stack').createStackNavigator;
-  },
-  get createSwitchNavigator() {
-    return require('@react-navigation/core').createSwitchNavigator;
-  },
-
-  get createBottomTabNavigator() {
-    return require('react-navigation-tabs').createBottomTabNavigator;
-  },
-  get createMaterialTopTabNavigator() {
-    return require('react-navigation-tabs').createMaterialTopTabNavigator;
-  },
-
-  get createDrawerNavigator() {
-    return require('react-navigation-drawer').createDrawerNavigator;
-  },
-
-  // Gesture contexts
-
-  get StackGestureContext() {
-    return require('react-navigation-stack').StackGestureContext;
-  },
-  get DrawerGestureContext() {
-    return require('react-navigation-drawer').DrawerGestureContext;
-  },
-
-  // Routers and Actions
-
-  get DrawerRouter() {
-    return require('react-navigation-drawer').DrawerRouter;
-  },
-  get DrawerActions() {
-    return require('react-navigation-drawer').DrawerActions;
-  },
-
-  // Views
-  get Transitioner() {
-    console.warn(
-      'Importing the stack Transitioner directly from react-navigation is now deprecated. Instead, import { Transitioner } from "react-navigation-stack";'
-    );
-    return require('react-navigation-stack').Transitioner;
-  },
-  get StackView() {
-    return require('react-navigation-stack').StackView;
-  },
-  get StackViewCard() {
-    return require('react-navigation-stack').StackViewCard;
-  },
-  get StackViewTransitionConfigs() {
-    return require('react-navigation-stack').StackViewTransitionConfigs;
-  },
-
-  // Header
-  get Header() {
-    return require('react-navigation-stack').Header;
-  },
-  get HeaderTitle() {
-    return require('react-navigation-stack').HeaderTitle;
-  },
-  get HeaderBackButton() {
-    return require('react-navigation-stack').HeaderBackButton;
-  },
-  get HeaderStyleInterpolator() {
-    return require('react-navigation-stack').HeaderStyleInterpolator;
-  },
-
-  // DrawerView
-  get DrawerView() {
-    return require('react-navigation-drawer').DrawerView;
-  },
-  get DrawerItems() {
-    return require('react-navigation-drawer').DrawerNavigatorItems;
-  },
-  get DrawerSidebar() {
-    return require('react-navigation-drawer').DrawerSidebar;
-  },
-
-  // Tabs
-  get BottomTabBar() {
-    return require('react-navigation-tabs').BottomTabBar;
-  },
-  get MaterialTopTabBar() {
-    return require('react-navigation-tabs').MaterialTopTabBar;
-  },
-};
+export * from './deprecations';

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "react-navigation": ["../src/index"]
+    },
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  }
+}

typescript/react-navigation.d.ts

@@ -33,7 +33,6 @@
 
 declare module 'react-navigation' {
   import * as React from 'react';
-  import { PanGestureHandler } from 'react-native-gesture-handler';
 
   import {
     Animated,
@@ -50,63 +49,17 @@ declare module 'react-navigation' {
   // @todo: should we re-export from RNGH? not currently exposed through it
   export { FlatList, SectionList, ScrollView } from 'react-native';
 
-  // @todo: improve this type! not super important as it's not commonly used
-  type HeaderStyleInterpolatorFunction = (props: any) => any;
-
-  type HeaderStyleInterpolatorStatic = {
-    forLayout: HeaderStyleInterpolatorFunction;
-    forLeft: HeaderStyleInterpolatorFunction;
-    forLeftButton: HeaderStyleInterpolatorFunction;
-    forLeftLabel: HeaderStyleInterpolatorFunction;
-    forCenterFromLeft: HeaderStyleInterpolatorFunction;
-    forCenter: HeaderStyleInterpolatorFunction;
-    forRight: HeaderStyleInterpolatorFunction;
-    forBackground: HeaderStyleInterpolatorFunction;
-    forBackgroundWithInactiveHidden: HeaderStyleInterpolatorFunction;
-    forBackgroundWithFade: HeaderStyleInterpolatorFunction;
-    forBackgroundWithTranslation: HeaderStyleInterpolatorFunction;
-  };
-
-  export const HeaderStyleInterpolator: HeaderStyleInterpolatorStatic;
-
-  export type ScreenProps = {
-    [key: string]: any;
-  };
-
   // @todo - any..
   export function getActiveChildNavigationOptions<S>(
     navigation: NavigationProp<S>,
-    screenProps?: ScreenProps,
-    theme?: SupportedThemes,
+    screenProps?: unknown,
+    theme?: SupportedThemes
   ): NavigationParams;
 
   // @todo when we split types into common, native and web,
   // we can properly change Animated.Value to its real value
   export type AnimatedValue = any;
 
-  export type HeaderMode = 'float' | 'screen' | 'none';
-
-  export interface HeaderForceInset {
-    horizontal?: string;
-    vertical?: string;
-    left?: string;
-    right?: string;
-    top?: string;
-    bottom?: string;
-  }
-
-  export interface HeaderProps extends NavigationSceneRendererProps {
-    mode: HeaderMode;
-    router: NavigationRouter<NavigationState, NavigationStackScreenOptions>;
-    getScreenDetails: (
-      navigationScene: NavigationScene
-    ) => NavigationScreenDetails<NavigationStackScreenOptions>;
-    leftInterpolator: (props: NavigationSceneRendererProps) => {};
-    titleInterpolator: (props: NavigationSceneRendererProps) => {};
-    rightInterpolator: (props: NavigationSceneRendererProps) => {};
-    style: StyleProp<ViewStyle>;
-  }
-
   /**
    * NavigationState is a tree of routes for a single navigator, where each child
    * route may either be a NavigationScreenRoute or a NavigationRouterRoute.
@@ -180,8 +133,8 @@ declare module 'react-navigation' {
 
   export type NavigationScreenOptionsGetter<Options> = (
     navigation: NavigationScreenProp<NavigationRoute<any>>,
-    screenProps: ScreenProps | null,
-    theme: SupportedThemes,
+    screenProps: unknown | null,
+    theme: SupportedThemes
   ) => Options;
 
   export interface NavigationRouter<State = NavigationState, Options = {}> {
@@ -215,6 +168,13 @@ declare module 'react-navigation' {
 
     getComponentForState: (state: State) => NavigationComponent;
 
+    getActionCreators: (
+      route: NavigationRoute,
+      key: string
+    ) => {
+      [key: string]: () => NavigationAction;
+    };
+
     /**
      * Gets the screen navigation options for a given screen.
      *
@@ -236,13 +196,9 @@ declare module 'react-navigation' {
     navigation: NavigationScreenProp<NavigationRoute>;
   }
 
-  export type NavigationScreenOptions = NavigationStackScreenOptions &
-    NavigationTabScreenOptions &
-    NavigationDrawerScreenOptions;
-
   export interface NavigationScreenConfigProps {
     navigation: NavigationScreenProp<NavigationRoute>;
-    screenProps: ScreenProps;
+    screenProps: unknown;
     theme: SupportedThemes;
   }
 
@@ -297,6 +253,7 @@ declare module 'react-navigation' {
 
   export interface NavigationBackActionPayload {
     key?: string | null;
+    immediate?: boolean;
   }
 
   export interface NavigationBackAction extends NavigationBackActionPayload {
@@ -322,6 +279,7 @@ declare module 'react-navigation' {
 
   export interface NavigationInitAction extends NavigationInitActionPayload {
     type: 'Navigation/INIT';
+    key?: string;
   }
 
   export interface NavigationReplaceActionPayload {
@@ -342,6 +300,7 @@ declare module 'react-navigation' {
 
   export interface NavigationCompleteTransitionActionPayload {
     key?: string;
+    toChildKey?: string;
   }
 
   export interface NavigationCompleteTransitionAction {
@@ -375,6 +334,7 @@ declare module 'react-navigation' {
 
   export interface NavigationPopAction extends NavigationPopActionPayload {
     type: 'Navigation/POP';
+    key?: string;
   }
 
   export interface NavigationPopToTopActionPayload {
@@ -416,6 +376,16 @@ declare module 'react-navigation' {
     params?: NavigationParams;
   }
 
+  export interface NavigationDrawerOpenedAction {
+    key?: string;
+    type: 'Navigation/DRAWER_OPENED';
+  }
+
+  export interface NavigationDrawerClosedAction {
+    key?: string;
+    type: 'Navigation/DRAWER_CLOSED';
+  }
+
   export interface NavigationOpenDrawerAction {
     key?: string;
     type: 'Navigation/OPEN_DRAWER';
@@ -431,89 +401,22 @@ declare module 'react-navigation' {
     type: 'Navigation/TOGGLE_DRAWER';
   }
 
-  export interface NavigationStackViewConfig {
-    mode?: 'card' | 'modal';
-    headerMode?: HeaderMode;
-    headerBackTitleVisible?: boolean;
-    headerTransitionPreset?: 'fade-in-place' | 'uikit';
-    headerLayoutPreset?: 'left' | 'center';
-    cardShadowEnabled?: boolean;
-    cardOverlayEnabled?: boolean;
-    cardStyle?: StyleProp<ViewStyle>;
-    transparentCard?: boolean;
-    transitionConfig?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps: NavigationTransitionProps,
-      isModal: boolean
-    ) => TransitionConfig;
-    onTransitionStart?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => Promise<void> | void;
-    onTransitionEnd?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => void;
-  }
-
   /**
    * Switch Navigator
    */
-
-  export interface SwitchRouter extends NavigationRouter {}
-
   export interface NavigationSwitchRouterConfig {
     initialRouteName?: string;
     initialRouteParams?: NavigationParams;
     paths?: NavigationPathsConfig;
-    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
     order?: string[];
-    backBehavior: 'none' | 'initialRoute' | 'history' | 'order'; // defaults to 'none'
+    backBehavior?: 'none' | 'initialRoute' | 'history' | 'order'; // defaults to 'none'
     resetOnBlur?: boolean; // defaults to `true`
   }
 
-  export interface NavigationStackScreenOptions {
-    title?: string;
-    header?:
-      | React.ReactElement<any>
-      | ((headerProps: HeaderProps) => React.ReactElement<any>)
-      | null;
-    headerTransparent?: boolean;
-    headerTitle?: string | React.ReactElement<any>;
-    headerTitleStyle?: StyleProp<TextStyle>;
-    headerTitleAllowFontScaling?: boolean;
-    headerTitleContainerStyle?: StyleProp<TextStyle>;
-    headerTintColor?: string;
-    headerLeft?:
-      | React.ReactElement<any>
-      | ((backButtonProps: HeaderBackButtonProps) => React.ReactElement<any>)
-      | null;
-    headerBackTitle?: string | null;
-    headerBackImage?: React.ReactElement<any>;
-    headerTruncatedBackTitle?: string;
-    headerBackTitleStyle?: StyleProp<TextStyle>;
-    headerPressColorAndroid?: string;
-    headerRight?: React.ReactElement<any> | null;
-    headerStyle?: StyleProp<ViewStyle>;
-    headerLeftContainerStyle?: StyleProp<ViewStyle>;
-    headerRightContainerStyle?: StyleProp<ViewStyle>;
-    headerForceInset?: HeaderForceInset;
-    headerBackground?: React.ReactNode | React.ReactType;
-    headerBackgroundTransitionPreset?: 'toggle' | 'fade' | 'translate';
-    gesturesEnabled?: boolean;
-    gestureResponseDistance?: { vertical?: number; horizontal?: number };
-    gestureDirection?: 'default' | 'inverted';
-  }
-
-  export interface NavigationStackRouterConfig {
-    headerTransitionPreset?: 'fade-in-place' | 'uikit';
-    initialRouteName?: string;
-    initialRouteParams?: NavigationParams;
-    paths?: NavigationPathsConfig;
-    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    initialRouteKey?: string;
-  }
+  export function SwitchRouter(
+    routeConfigs: NavigationRouteConfigMap,
+    config?: NavigationSwitchRouterConfig
+  ): NavigationRouter<any, any>;
 
   export type NavigationStackAction =
     | NavigationInitAction
@@ -533,6 +436,8 @@ declare module 'react-navigation' {
     | NavigationBackAction;
 
   export type NavigationDrawerAction =
+    | NavigationDrawerOpenedAction
+    | NavigationDrawerClosedAction
     | NavigationOpenDrawerAction
     | NavigationCloseDrawerAction
     | NavigationToggleDrawerAction;
@@ -544,7 +449,8 @@ declare module 'react-navigation' {
     | NavigationStackAction
     | NavigationTabAction
     | NavigationDrawerAction
-    | NavigationSwitchAction;
+    | NavigationSwitchAction
+    | { type: 'CHILD_ACTION'; key?: string };
 
   export type NavigationRouteConfig =
     | NavigationComponent
@@ -567,7 +473,7 @@ declare module 'react-navigation' {
   }
 
   // tslint:disable-next-line:strict-export-declare-modifiers
-  interface NavigationTabRouterConfigBase {
+  interface NavigationTabRouterConfig {
     initialRouteName?: string;
     initialRouteParams?: NavigationParams;
     paths?: NavigationPathsConfig;
@@ -575,100 +481,6 @@ declare module 'react-navigation' {
     backBehavior?: 'none' | 'initialRoute' | 'history' | 'order'; // defaults to 'initialRoute'
     resetOnBlur?: boolean;
   }
-  export interface NavigationTabRouterConfig
-    extends NavigationTabRouterConfigBase {
-    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    navigationOptions?: NavigationScreenConfig<any>;
-  }
-  export interface NavigationBottomTabRouterConfig
-    extends NavigationTabRouterConfigBase {
-    defaultNavigationOptions?: NavigationScreenConfig<
-      NavigationBottomTabScreenOptions
-    >;
-    navigationOptions?: NavigationScreenConfig<any>;
-  }
-  export interface TabScene {
-    route: NavigationRoute;
-    focused: boolean;
-    index: number;
-    tintColor?: string;
-  }
-
-  export interface TabBarIconProps {
-    tintColor: string | null;
-    focused: boolean;
-    horizontal: boolean;
-  }
-
-  export interface TabBarLabelProps {
-    tintColor: string | null;
-    focused: boolean;
-  }
-
-  // tslint:disable-next-line:strict-export-declare-modifiers
-  interface NavigationTabScreenOptionsBase {
-    title?: string;
-    tabBarIcon?:
-      | React.ReactElement<any>
-      | ((options: TabBarIconProps) => React.ReactElement<any> | null);
-    tabBarLabel?:
-      | string
-      | React.ReactElement<any>
-      | ((
-          options: TabBarLabelProps
-        ) => React.ReactElement<any> | string | null);
-    tabBarVisible?: boolean;
-    tabBarTestIDProps?: { testID?: string; accessibilityLabel?: string };
-  }
-  export interface NavigationTabScreenOptions
-    extends NavigationTabScreenOptionsBase {
-    swipeEnabled?: boolean;
-    tabBarOnPress?: (options: {
-      previousScene: TabScene;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-    tabBarOnLongPress?: (options: {
-      previousScene: TabScene;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-  }
-  export interface NavigationBottomTabScreenOptions
-    extends NavigationTabScreenOptionsBase {
-    tabBarOnPress?: (options: {
-      navigation: NavigationScreenProp<NavigationRoute>;
-      defaultHandler: () => void;
-    }) => void;
-    tabBarOnLongPress?: (options: {
-      navigation: NavigationScreenProp<NavigationRoute>;
-      defaultHandler: () => void;
-    }) => void;
-  }
-
-  export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
-
-  export interface DrawerIconProps {
-    tintColor: string | null;
-    focused: boolean;
-  }
-
-  export interface DrawerLabelProps {
-    tintColor: string | null;
-    focused: boolean;
-  }
-
-  export interface NavigationDrawerScreenOptions {
-    title?: string;
-    drawerIcon?:
-      | React.ReactElement<any>
-      | ((options: DrawerIconProps) => React.ReactElement<any> | null);
-    drawerLabel?:
-      | string
-      | React.ReactElement<any>
-      | ((options: DrawerLabelProps) => React.ReactElement<any> | null);
-    drawerLockMode?: DrawerLockMode;
-  }
 
   export interface NavigationRouteConfigMap {
     [routeName: string]: NavigationRouteConfig;
@@ -772,145 +584,10 @@ declare module 'react-navigation' {
     theme?: SupportedThemes | 'no-preference';
     detached?: boolean;
     navigation?: NavigationProp<S>;
-    screenProps?: ScreenProps;
+    screenProps?: unknown;
     navigationOptions?: O;
   }
 
-  /**
-   * Gestures, Animations, and Interpolators
-   */
-
-  export type NavigationGestureDirection = 'horizontal' | 'vertical';
-
-  export interface NavigationLayout {
-    height: AnimatedValue;
-    initHeight: number;
-    initWidth: number;
-    isMeasured: boolean;
-    width: AnimatedValue;
-  }
-
-  export interface NavigationScene {
-    index: number;
-    isActive: boolean;
-    isStale: boolean;
-    key: string;
-    route: NavigationRoute;
-    descriptor: NavigationDescriptor;
-  }
-
-  export interface NavigationTransitionProps {
-    // The layout of the screen container
-    layout: NavigationLayout;
-
-    // The destination navigation state of the transition
-    navigation: NavigationScreenProp<NavigationState>;
-
-    // The progressive index of the transitioner's navigation state.
-    position: AnimatedValue;
-
-    // The value that represents the progress of the transition when navigation
-    // state changes from one to another. Its numberic value will range from 0
-    // to 1.
-    //  progress.__getAnimatedValue() < 1 : transtion is happening.
-    //  progress.__getAnimatedValue() == 1 : transtion completes.
-    progress: AnimatedValue;
-
-    // All the scenes of the transitioner.
-    scenes: NavigationScene[];
-
-    // The active scene, corresponding to the route at
-    // `navigation.state.routes[navigation.state.index]`. When rendering
-    // NavigationSceneRendererPropsIndex, the scene does not refer to the active
-    // scene, but instead the scene that is being rendered. The index always
-    // is the index of the scene
-    scene: NavigationScene;
-    index: number;
-
-    screenProps?: ScreenProps;
-  }
-
-  // The scene renderer props are nearly identical to the props used for rendering
-  // a transition. The exception is that the passed scene is not the active scene
-  // but is instead the scene that the renderer should render content for.
-  export type NavigationSceneRendererProps = NavigationTransitionProps;
-
-  export interface NavigationTransitionSpec {
-    duration?: number;
-    // An easing function from `Easing`.
-    easing?: (t: number) => number;
-    // A timing function such as `Animated.timing`.
-    timing?: (value: AnimatedValue, config: any) => any;
-    friction?: number;
-    tension?: number;
-    useNativeDriver?: boolean;
-  }
-
-  /**
-   * Describes a visual transition from one screen to another.
-   */
-  export interface TransitionConfig {
-    // The basics properties of the animation, such as duration and easing
-    transitionSpec?: NavigationTransitionSpec;
-    // How to animate position and opacity of the screen
-    // based on the value generated by the transitionSpec
-    screenInterpolator?: (props: NavigationSceneRendererProps) => any;
-    // How to animate position and opacity of the header componetns
-    // based on the value generated by the transitionSpec
-    headerLeftInterpolator?: (props: NavigationSceneRendererProps) => any;
-    headerTitleInterpolator?: (props: NavigationSceneRendererProps) => any;
-    headerRightInterpolator?: (props: NavigationSceneRendererProps) => any;
-    // The style of the container. Useful when a scene doesn't have
-    // 100% opacity and the underlying container is visible.
-    containerStyle?: StyleProp<ViewStyle>;
-  }
-
-  export type TransitionConfigurer = (
-    transitionProps: NavigationTransitionProps,
-    prevTransitionProps: NavigationTransitionProps,
-    isModal: boolean
-  ) => TransitionConfig;
-
-  export interface StackViewTransitionConfigsType {
-    defaultTransitionConfig: TransitionConfigurer;
-    getTransitionConfig: (
-      transitionConfigurer: TransitionConfigurer,
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps: NavigationTransitionProps,
-      isModal: boolean
-    ) => TransitionConfig;
-    SlideFromRightIOS: TransitionConfig;
-    ModalSlideFromBottomIOS: TransitionConfig;
-    FadeInFromBottomAndroid: TransitionConfig;
-    FadeOutToBottomAndroid: TransitionConfig;
-    NoAnimation: TransitionConfig;
-  }
-
-  export const StackViewTransitionConfigs: StackViewTransitionConfigsType;
-
-  export type NavigationAnimationSetter = (
-    position: AnimatedValue,
-    newState: NavigationState,
-    lastState: NavigationState
-  ) => void;
-
-  export type NavigationSceneRenderer = () => React.ReactElement<any> | null;
-
-  export type NavigationStyleInterpolator = (
-    props: NavigationSceneRendererProps
-  ) => ViewStyle;
-
-  export interface LayoutEvent {
-    nativeEvent: {
-      layout: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-      };
-    };
-  }
-
   export type NavigatorType =
     | 'react-navigation/STACK'
     | 'react-navigation/TABS'
@@ -940,7 +617,7 @@ declare module 'react-navigation' {
     persistNavigationState?: (state: NavigationState) => Promise<any>;
 
     renderLoadingExperimental?: React.ComponentType;
-    screenProps?: ScreenProps;
+    screenProps?: unknown;
     navigationOptions?: O;
     style?: StyleProp<ViewStyle>;
   }
@@ -962,22 +639,11 @@ declare module 'react-navigation' {
     ): NavigationContainerComponent;
 
     router: NavigationRouter<any, any>;
-    screenProps: ScreenProps;
+    screenProps: unknown;
     navigationOptions: any;
     state: { nav: NavigationState | null };
   }
 
-  export interface StackNavigatorConfig
-    extends NavigationStackViewConfig,
-      NavigationStackRouterConfig {
-    containerOptions?: any;
-  }
-
-  export function createStackNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    stackConfig?: StackNavigatorConfig
-  ): NavigationContainer;
-
   export interface SwitchNavigatorConfig {
     initialRouteName: string;
     resetOnBlur?: boolean;
@@ -993,208 +659,6 @@ declare module 'react-navigation' {
     switchConfig?: SwitchNavigatorConfig
   ): NavigationContainer;
 
-  // DrawerItems
-  export const DrawerItems: React.ComponentType<DrawerItemsProps>;
-
-  export interface DrawerItemsProps {
-    navigation: NavigationScreenProp<DrawerNavigationState>;
-    items: NavigationRoute[];
-    activeItemKey?: string;
-    activeTintColor?: string;
-    activeBackgroundColor?: string;
-    inactiveTintColor?: string;
-    inactiveBackgroundColor?: string;
-    getLabel: (scene: DrawerScene) => React.ReactNode | string;
-    renderIcon: (scene: DrawerScene) => React.ReactNode;
-    onItemPress: (info: DrawerItem) => void;
-    itemsContainerStyle?: StyleProp<ViewStyle>;
-    itemStyle?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    activeLabelStyle?: StyleProp<TextStyle>;
-    inactiveLabelStyle?: StyleProp<TextStyle>;
-    iconContainerStyle?: StyleProp<ViewStyle>;
-    drawerPosition: 'left' | 'right';
-  }
-  export interface DrawerScene {
-    route: NavigationRoute;
-    focused: boolean;
-    index: number;
-    tintColor?: string;
-  }
-  export interface DrawerItem {
-    route: NavigationRoute;
-    focused: boolean;
-  }
-
-  /**
-   * Drawer Navigator
-   */
-  export interface DrawerViewConfig {
-    drawerBackgroundColor?: string;
-    drawerWidth?: number;
-    drawerPosition?: 'left' | 'right';
-    contentComponent?: React.ComponentType<DrawerItemsProps>;
-    contentOptions?: any;
-    style?: StyleProp<ViewStyle>;
-  }
-  export interface DrawerNavigatorConfig
-    extends NavigationTabRouterConfig,
-      DrawerViewConfig {
-    containerConfig?: any;
-    contentOptions?: {
-      activeTintColor?: string;
-      activeBackgroundColor?: string;
-      inactiveTintColor?: string;
-      inactiveBackgroundColor?: string;
-      style?: StyleProp<ViewStyle>;
-      labelStyle?: StyleProp<TextStyle>;
-    };
-    drawerType?: 'front' | 'back' | 'slide';
-    drawerLockMode?: DrawerLockMode;
-    edgeWidth?: number;
-    hideStatusBar?: boolean;
-    overlayColor?: string;
-    unmountInactiveRoutes?: boolean;
-  }
-
-  export function DrawerNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawerConfig?: DrawerNavigatorConfig
-  ): NavigationContainer;
-
-  export function createDrawerNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawerConfig?: DrawerNavigatorConfig
-  ): NavigationContainer;
-
-  /**
-   * Tab Navigator
-   */
-
-  // From views/TabView/TabView.js
-  export interface TabViewConfig {
-    tabBarComponent?: React.ReactType;
-    tabBarPosition?: 'top' | 'bottom';
-    tabBarOptions?: {
-      activeTintColor?: string;
-      allowFontScaling?: boolean;
-      activeBackgroundColor?: string;
-      inactiveTintColor?: string;
-      inactiveBackgroundColor?: string;
-      showLabel?: boolean;
-      style?: StyleProp<ViewStyle>;
-      labelStyle?: StyleProp<TextStyle>;
-      iconStyle?: StyleProp<ViewStyle>;
-      // Top
-      showIcon?: boolean;
-      upperCaseLabel?: boolean;
-      pressColor?: string;
-      pressOpacity?: number;
-      scrollEnabled?: boolean;
-      tabStyle?: StyleProp<ViewStyle>;
-      indicatorStyle?: StyleProp<ViewStyle>;
-      keyboardHidesTabBar?: boolean;
-    };
-    swipeEnabled?: boolean;
-    animationEnabled?: boolean;
-    lazy?: boolean;
-  }
-
-  export interface InitialLayout {
-    height: number;
-    width: number;
-  }
-
-  // From navigators/TabNavigator.js
-  export interface TabNavigatorConfig
-    extends NavigationTabRouterConfig,
-      TabViewConfig {
-    lazy?: boolean;
-    removeClippedSubviews?: boolean;
-    initialLayout?: InitialLayout;
-  }
-  export interface BottomTabNavigatorConfig
-    extends NavigationBottomTabRouterConfig,
-      TabViewConfig {
-    lazy?: boolean;
-    removeClippedSubviews?: boolean;
-    initialLayout?: InitialLayout;
-  }
-
-  export function createBottomTabNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawConfig?: BottomTabNavigatorConfig
-  ): NavigationContainer;
-
-  export function createMaterialTopTabNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    drawConfig?: TabNavigatorConfig
-  ): NavigationContainer;
-
-  export interface MaterialTopTabBarProps {
-    activeTintColor: string;
-    inactiveTintColor: string;
-    indicatorStyle: StyleProp<ViewStyle>;
-    showIcon: boolean;
-    showLabel: boolean;
-    upperCaseLabel: boolean;
-    allowFontScaling: boolean;
-    position: AnimatedValue;
-    tabBarPosition: string;
-    navigation: NavigationScreenProp<NavigationState>;
-    jumpToIndex: (index: number) => void;
-    getLabelText: (scene: TabScene) => React.ReactNode | string;
-    getOnPress: (
-      previousScene: NavigationRoute,
-      scene: TabScene
-    ) => (args: {
-      previousScene: NavigationRoute;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-    renderIcon: (scene: TabScene) => React.ReactElement<any>;
-    labelStyle?: TextStyle;
-    iconStyle?: ViewStyle;
-  }
-
-  export interface BottomTabBarProps {
-    activeTintColor: string;
-    activeBackgroundColor: string;
-    adaptive?: boolean;
-    inactiveTintColor: string;
-    inactiveBackgroundColor: string;
-    showLabel?: boolean;
-    allowFontScaling: boolean;
-    position: AnimatedValue;
-    navigation: NavigationScreenProp<NavigationState>;
-    jumpToIndex: (index: number) => void;
-    getLabelText: (scene: TabScene) => React.ReactNode | string;
-    getOnPress: (
-      previousScene: NavigationRoute,
-      scene: TabScene
-    ) => (args: {
-      previousScene: NavigationRoute;
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }) => void;
-    getTestIDProps: (scene: TabScene) => (scene: TabScene) => any;
-    renderIcon: (scene: TabScene) => React.ReactNode;
-    style?: ViewStyle;
-    animateStyle?: ViewStyle;
-    labelStyle?: TextStyle;
-    tabStyle?: ViewStyle;
-    showIcon?: boolean;
-    safeAreaInset?: {
-      top?: SafeAreaViewForceInsetValue;
-      bottom?: SafeAreaViewForceInsetValue;
-      left?: SafeAreaViewForceInsetValue;
-      right?: SafeAreaViewForceInsetValue;
-    };
-  }
-
-  export const MaterialTopTabBar: React.ComponentType<MaterialTopTabBarProps>;
-  export const BottomTabBar: React.ComponentType<BottomTabBarProps>;
-
   /**
    * NavigationActions
    */
@@ -1253,7 +717,7 @@ declare module 'react-navigation' {
     ): NavigationReplaceAction;
 
     function completeTransition(
-      payload: NavigationCompleteTransitionActionPayload
+      payload?: NavigationCompleteTransitionActionPayload
     ): NavigationCompleteTransitionAction;
   }
 
@@ -1268,44 +732,6 @@ declare module 'react-navigation' {
     ): NavigationJumpToAction;
   }
 
-  /**
-   * Transitioner
-   * @desc From react-navigation/src/views/Transitioner.js
-   */
-  export interface TransitionerProps {
-    configureTransition: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => NavigationTransitionSpec;
-    navigation: NavigationScreenProp<NavigationState>;
-    onTransitionStart?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => Promise<void> | void;
-    onTransitionEnd?: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => void;
-    render: (
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps?: NavigationTransitionProps
-    ) => any;
-    descriptors?: { [key: string]: NavigationDescriptor };
-    style?: StyleProp<ViewStyle>;
-  }
-
-  export interface TransitionerState {
-    layout: NavigationLayout;
-    position: Animated.Value;
-    progress: Animated.Value;
-    scenes: NavigationScene[];
-  }
-
-  export class Transitioner extends React.Component<
-    TransitionerProps,
-    TransitionerState
-  > {}
-
   /**
    * Tab Router
    *
@@ -1323,19 +749,29 @@ declare module 'react-navigation' {
    */
   export function StackRouter(
     routeConfigs: NavigationRouteConfigMap,
-    config: NavigationTabRouterConfig
+    config?: NavigationTabRouterConfig
   ): NavigationRouter<any, any>;
 
+  export interface NavigationStackRouterConfig {
+    initialRouteName?: string;
+    initialRouteParams?: NavigationParams;
+    paths?: NavigationPathsConfig;
+    initialRouteKey?: string;
+  }
+
   /**
    * Create Navigator
    *
    * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js
    */
-  export interface NavigationDescriptor<Params = NavigationParams> {
+  export interface NavigationDescriptor<
+    Params = NavigationParams,
+    Options = {}
+  > {
     key: string;
     state: NavigationLeafRoute<Params> | NavigationStateRoute<Params>;
     navigation: NavigationScreenProp<any>;
-    options: NavigationScreenOptions;
+    options: Options;
     getComponent: () => React.ComponentType;
   }
 
@@ -1343,7 +779,7 @@ declare module 'react-navigation' {
     {
       descriptors: { [key: string]: NavigationDescriptor };
       navigationConfig: O;
-      screenProps?: ScreenProps;
+      screenProps?: unknown;
     } & NavigationInjectedProps
   >;
 
@@ -1388,7 +824,7 @@ declare module 'react-navigation' {
     Options = any
   > {
     navigation: NavigationScreenProp<NavigationRoute<Params>, Params>;
-    screenProps?: ScreenProps;
+    screenProps?: unknown;
     navigationOptions?: NavigationScreenConfig<Options>;
   }
 
@@ -1396,32 +832,6 @@ declare module 'react-navigation' {
    * END CUSTOM CONVENIENCE INTERFACES
    */
 
-  /*
-   * Header
-   */
-
-  // src/views/HeaderBackButton.js
-
-  export interface HeaderBackButtonProps {
-    onPress?: () => void;
-    pressColorAndroid?: string;
-    title?: string | null;
-    titleStyle?: StyleProp<TextStyle>;
-    tintColor?: string;
-    truncatedTitle?: string;
-    width?: number;
-    disabled?: boolean;
-    backTitleVisible?: boolean;
-  }
-
-  export const HeaderBackButton: React.ComponentClass<HeaderBackButtonProps>;
-  /**
-   * Header Component
-   */
-  export class Header extends React.Component<HeaderProps> {
-    static HEIGHT: number;
-  }
-
   export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 
   export type InferProps<
@@ -1432,6 +842,11 @@ declare module 'react-navigation' {
     isLandscape: boolean;
   }
 
+  export function createKeyboardAwareNavigator<Props>(
+    Comp: React.ComponentType<Props>,
+    stackConfig: object
+  ): React.ComponentType<Props>;
+
   export function withOrientation<P extends NavigationOrientationInjectedProps>(
     Component: React.ComponentType<P>
   ): React.ComponentType<Omit<P, keyof NavigationOrientationInjectedProps>>;
@@ -1463,6 +878,10 @@ declare module 'react-navigation' {
     T & { onRef?: React.Ref<React.Component<T & NavigationInjectedProps<P>>> }
   >;
 
+  export const NavigationProvider: React.ComponentType<{
+    value: NavigationProp<any>;
+  }>;
+
   export interface NavigationFocusInjectedProps<P = NavigationParams>
     extends NavigationInjectedProps<P> {
     isFocused: boolean;
@@ -1514,10 +933,11 @@ declare module 'react-navigation' {
   export const NavigationContext: React.Context<
     NavigationScreenProp<NavigationRoute>
   >;
-  export const StackGestureContext: React.Context<React.Ref<PanGestureHandler>>;
-  export const DrawerGestureContext: React.Context<
-    React.Ref<PanGestureHandler>
-  >;
+
+  export function createKeyboardAwareNavigator<Props>(
+    Comp: React.ComponentType<Props>,
+    stackConfig: object
+  ): React.ComponentType<Props>;
 
   /**
    * SceneView
@@ -1525,11 +945,11 @@ declare module 'react-navigation' {
 
   export interface SceneViewProps {
     component: React.ComponentType;
-    screenProps: ScreenProps;
-    navigation: NavigationScreenProp<NavigationRoute>;
+    screenProps: unknown;
+    navigation: NavigationProp<any>;
   }
 
-  export class SceneView extends React.Component {}
+  export const SceneView: React.ComponentType<SceneViewProps>;
 
   /**
    * Themes

typings/react-navigation-tabs.d.ts

@@ -0,0 +1 @@
+declare module 'react-navigation-tabs';