chore: release 4.0.9

As mentioned in https://reactnavigation.org/docs/en/switch-actions.html
the param which's name is 'key' of `SwitchActions.jumpTo()`  should be optional

.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
-
-## [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,12 @@
+{
+  "presets": [
+    "expo"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "react-navigation": "../src/react-navigation"
+      }
+    }]
+  ]
+}

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

@@ -5,6 +5,7 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
+  TouchableOpacity,
   Text,
   View,
 } from 'react-native';
@@ -13,10 +14,15 @@ import {
   RectButton,
 } from 'react-native-gesture-handler';
 import {
+  SupportedThemes,
+  ThemeColors,
+  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';
 import Drawer from './src/Drawer';
@@ -173,6 +179,9 @@ interface State {
 }
 
 class MainScreen extends React.Component<any, State> {
+  static contextType = ThemeContext;
+  context!: React.ContextType<typeof ThemeContext>;
+
   state = {
     scrollY: new Animated.Value(0),
   };
@@ -218,7 +227,7 @@ class MainScreen extends React.Component<any, State> {
       <View style={{ flex: 1 }}>
         <NativeViewGestureHandler>
           <Animated.ScrollView
-            style={{ flex: 1, backgroundColor: '#eee' }}
+            style={{ flex: 1, backgroundColor: ThemeColors[this.context].body }}
             scrollEventThrottle={1}
             onScroll={Animated.event(
               [
@@ -263,7 +272,11 @@ class MainScreen extends React.Component<any, State> {
               forceInset={{ top: 'never', bottom: 'always' }}
               style={{ backgroundColor: '#eee' }}
             >
-              <View style={{ backgroundColor: '#fff' }}>
+              <View
+                style={{
+                  backgroundColor: ThemeColors[this.context].bodyContent,
+                }}
+              >
                 {Object.keys(ExampleRoutes).map((routeName: string) => (
                   <RectButton
                     key={routeName}
@@ -283,10 +296,17 @@ class MainScreen extends React.Component<any, State> {
                       }
                     }}
                   >
-                    <View style={styles.item}>
-                      <Text style={styles.title}>
+                    <View
+                      style={[
+                        styles.item,
+                        this.context === 'dark'
+                          ? styles.itemDark
+                          : styles.itemLight,
+                      ]}
+                    >
+                      <Themed.Text style={styles.title}>
                         {ExampleInfo[routeName].name}
-                      </Text>
+                      </Themed.Text>
                       <Text style={styles.description}>
                         {ExampleInfo[routeName].description}
                       </Text>
@@ -306,7 +326,7 @@ class MainScreen extends React.Component<any, State> {
   }
 }
 
-const AppNavigator = createAppContainer(
+const Navigation = createAppContainer(
   createStackNavigator(
     {
       ...ExampleRoutes,
@@ -327,11 +347,50 @@ const AppNavigator = createAppContainer(
   )
 );
 
-export default class App extends React.Component {
-  render() {
-    return <AppNavigator /* persistenceKey="if-you-want-it" */ />;
-  }
-}
+export default () => {
+  let [theme, setTheme] = React.useState<SupportedThemes>('light');
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Navigation theme={theme} />
+      <View style={{ position: 'absolute', bottom: 60, right: 20 }}>
+        <TouchableOpacity
+          onPress={() => {
+            setTheme(theme === 'light' ? 'dark' : 'light');
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: ThemeColors[theme].bodyContent,
+              borderRadius: 25,
+              width: 50,
+              height: 50,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderColor: ThemeColors[theme].bodyBorder,
+              borderWidth: 1,
+              shadowColor: ThemeColors[theme].label,
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowOpacity: 0.4,
+              shadowRadius: 2,
+
+              elevation: 5,
+            }}
+          >
+            <MaterialCommunityIcons
+              name="theme-light-dark"
+              size={30}
+              color={ThemeColors[theme].label}
+            />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   backgroundUnderlay: {
@@ -369,19 +428,17 @@ const styles = StyleSheet.create({
     color: '#999',
     fontSize: 13,
   },
-  image: {
-    alignSelf: 'center',
-    height: 120,
-    marginBottom: 20,
-    resizeMode: 'contain',
-    width: 120,
-  },
   item: {
-    borderBottomColor: '#ddd',
     borderBottomWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
+  itemLight: {
+    borderBottomColor: ThemeColors.light.bodyBorder,
+  },
+  itemDark: {
+    borderBottomColor: ThemeColors.dark.bodyBorder,
+  },
   statusBarUnderlay: {
     backgroundColor: '#673ab7',
     height: 20,
@@ -391,7 +448,6 @@ const styles = StyleSheet.create({
     top: 0,
   },
   title: {
-    color: '#444',
     fontSize: 16,
     fontWeight: 'bold',
   },

example/README.md

@@ -5,10 +5,8 @@ The NavigationPlayground example app includes a variety of patterns and is used
 ## Usage
 
 ```bash
-yarn # in the react-navigation root directory
-cd examples/NavigationPlayground
-yarn
-yarn start
+yarn bootstrap # in the react-navigation root directory
+yarn example start
 ```
 
 You can view this example application directly on Android phones by visiting scanning the QR code on [this site](https://exp.host/@react-navigation/NavigationPlayground) with the [Expo app](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en).

example/app.json

@@ -0,0 +1,10 @@
+{
+  "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"
+  }
+}

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.1",
+    "@react-navigation/native": "^3.6.2",
+    "expo": "^33.0.7",
+    "expo-asset": "^5.0.1",
+    "expo-blur": "~5.0.1",
+    "expo-constants": "~5.0.1",
+    "hoist-non-react-statics": "^3.3.0",
+    "react": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "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.7.2",
+    "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

@@ -1,18 +1,25 @@
 import React from 'react';
 import {
+  Alert,
+  TouchableOpacity,
   LayoutAnimation,
   StatusBar,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  createMaterialTopTabNavigator,
+  Themed,
+  ThemeContext,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 interface Props {
@@ -42,7 +49,7 @@ class MyHomeScreen extends React.Component<Props> {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Home Screen</Text>
+        <Themed.Text>Home Screen</Themed.Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -53,9 +60,9 @@ class MyHomeScreen extends React.Component<Props> {
   }
 }
 
-class RecommendedScreen extends React.Component<Props> {
+class StarredScreen extends React.Component<Props> {
   static navigationOptions = {
-    tabBarLabel: 'Recommended',
+    tabBarLabel: 'Starred',
     tabBarIcon: ({
       tintColor,
       focused,
@@ -76,7 +83,7 @@ class RecommendedScreen extends React.Component<Props> {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Recommended Screen</Text>
+        <Themed.Text>Starred Screen</Themed.Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -87,12 +94,23 @@ class RecommendedScreen extends React.Component<Props> {
   }
 }
 
+type MaterialTopTabBarProps = React.ComponentProps<typeof MaterialTopTabBar>;
+
+class MaterialTopTabBarWrapper extends React.Component<MaterialTopTabBarProps> {
+  render() {
+    return (
+      <SafeAreaView
+        style={{ backgroundColor: '#000' }}
+        forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}
+      >
+        <MaterialTopTabBar {...this.props} />
+      </SafeAreaView>
+    );
+  }
+}
+
 class FeaturedScreen extends React.Component<Props> {
-  static navigationOptions = ({
-    navigation,
-  }: {
-    navigation: NavigationScreenProp<NavigationState>;
-  }) => ({
+  static navigationOptions = {
     tabBarLabel: 'Featured',
     tabBarIcon: ({
       tintColor,
@@ -109,12 +127,13 @@ class FeaturedScreen extends React.Component<Props> {
         style={{ color: tintColor }}
       />
     ),
-  });
+  };
+
   render() {
     const { navigation } = this.props;
     return (
       <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Featured Screen</Text>
+        <Themed.Text>Featured Screen</Themed.Text>
         <Button
           onPress={() => navigation.navigate('Home')}
           title="Go to home tab"
@@ -125,13 +144,25 @@ class FeaturedScreen extends React.Component<Props> {
   }
 }
 
-const SimpleTabs = createMaterialTopTabNavigator({
-  Home: MyHomeScreen,
-  Recommended: RecommendedScreen,
-  Featured: FeaturedScreen,
-});
+const SimpleTabs = createMaterialTopTabNavigator(
+  {
+    Home: MyHomeScreen,
+    Starred: StarredScreen,
+    Featured: FeaturedScreen,
+  },
+  {
+    tabBarComponent: MaterialTopTabBarWrapper,
+    tabBarOptions: {
+      style: {
+        backgroundColor: '#000',
+      },
+    },
+  }
+);
 
 class TabNavigator extends React.Component<Props> {
+  static contextType = ThemeContext;
+
   static router = SimpleTabs.router;
   componentWillUpdate() {
     LayoutAnimation.easeInEaseOut();
@@ -143,25 +174,38 @@ class TabNavigator extends React.Component<Props> {
     let bottom = null;
     if (activeRoute.routeName !== 'Home') {
       bottom = (
-        <View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
-          <Button
-            title="Check out"
+        <View
+          style={{
+            height: 50,
+            borderTopWidth: StyleSheet.hairlineWidth,
+            backgroundColor: this.context === 'light' ? '#000' : '#fff',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <TouchableOpacity
             onPress={() => {
+              Alert.alert('hello!');
               //
             }}
-          />
+          >
+            <Text
+              style={{
+                fontSize: 20,
+                color: this.context === 'light' ? '#fff' : '#000',
+                fontWeight: 'bold',
+              }}
+            >
+              Check out
+            </Text>
+          </TouchableOpacity>
         </View>
       );
     }
     return (
       <View style={{ flex: 1 }}>
-        <StatusBar barStyle="default" />
-        <SafeAreaView
-          style={{ flex: 1 }}
-          forceInset={{ horizontal: 'always', top: 'always' }}
-        >
-          <SimpleTabs navigation={navigation} />
-        </SafeAreaView>
+        <StatusBar barStyle="light-content" />
+        <SimpleTabs navigation={navigation} />
         {bottom}
       </View>
     );

example/src/CustomTabs.tsx

@@ -1,14 +1,17 @@
 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,
   NavigationState,
   SafeAreaView,
   TabRouter,
+  Themed,
+  useTheme,
+  createAppContainer,
+  NavigationScreenProp,
 } from 'react-navigation';
-import { createAppContainer } from 'react-navigation';
-import { NavigationScreenProp } from 'react-navigation';
+
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -29,7 +32,7 @@ const MyNavScreen = ({
         title="Go back"
       />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
@@ -65,13 +68,12 @@ const CustomTabBar = ({
           style={styles.tab}
           key={route.routeName}
         >
-          <Text>{route.routeName}</Text>
+          <Themed.Text>{route.routeName}</Themed.Text>
         </BorderlessButton>
       ))}
     </SafeAreaView>
   );
 };
-
 // @todo - how does the type definition for a custom navigator work?
 class CustomTabView extends React.Component<any> {
   render() {
@@ -129,4 +131,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CustomTabs;
+export default () => {
+  // Need to thread the theme through to detached nested navigator
+  let theme = useTheme();
+
+  return <CustomTabs detached theme={theme} />;
+};

example/src/Drawer.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
-import { ScrollView, StatusBar, StyleProp, TextStyle } from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { ScrollView, StyleProp, TextStyle } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
 import {
-  createDrawerNavigator,
-  createStackNavigator,
+  Themed,
   SafeAreaView,
+  NavigationScreenProp,
+  NavigationState,
 } from 'react-navigation';
-import { NavigationScreenProp, NavigationState } from 'react-navigation';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -27,7 +32,7 @@ const MyNavScreen = ({
       />
       <Button onPress={() => navigation.navigate('Index')} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
@@ -35,22 +40,18 @@ const InboxScreen = ({
   navigation,
 }: {
   navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />;
+}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
 InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
 
-const EmailScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Email Screen'} navigation={navigation} />;
+const EmailScreen = ({ navigation }: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Email Screen" navigation={navigation} />
+);
 
-const DraftsScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />;
+const DraftsScreen = ({ navigation }: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Drafts Screen" navigation={navigation} />
+);
 DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };
@@ -62,7 +63,7 @@ const InboxStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="move-to-inbox"
           size={24}
@@ -81,7 +82,7 @@ const DraftsStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="drafts"
           size={24}

example/src/ModalStack.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import { ScrollView, StatusBar, Text } from 'react-native';
+import { ScrollView } from 'react-native';
+import {
+  NavigationScreenProp,
+  Themed,
+  SafeAreaView,
+  NavigationState,
+} from 'react-navigation';
 import {
   createStackNavigator,
-  NavigationScreenProp,
-  SafeAreaView,
-} from 'react-navigation';
-import { NavigationState } from 'react-navigation';
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
 
@@ -45,7 +49,7 @@ const MyNavScreen = ({
       )}
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
@@ -94,16 +98,13 @@ const ProfileNavigator = createStackNavigator(
   }
 );
 
-const MyHeaderTestScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner={`Full screen view`} navigation={navigation} />;
+const MyHeaderTestScreen = ({ navigation }: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Full screen view" navigation={navigation} />
+);
+
 MyHeaderTestScreen.navigationOptions = ({
   navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => {
+}: NavigationStackScreenProps) => {
   const headerVisible =
     navigation.state.params && navigation.state.params.headerVisible;
   return {

example/src/SampleText.tsx

@@ -1,12 +1,13 @@
 import React, { ReactNode } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Themed } from 'react-navigation';
 
 /**
  * Used across examples as a screen placeholder.
  */
 
 const SampleText = ({ children }: { children?: ReactNode }) => (
-  <Text style={styles.sampleText}>{children}</Text>
+  <Themed.Text style={styles.sampleText}>{children}</Themed.Text>
 );
 
 export default SampleText;

example/src/SimpleStack.tsx

@@ -1,19 +1,20 @@
 // tslint:disable no-unused-expression
 
 import * as React from 'react';
-import { StatusBar } from 'react-native';
 import {
-  createStackNavigator,
   NavigationActions,
   NavigationEventPayload,
   NavigationEventSubscription,
-  NavigationScreenProp,
-  NavigationState,
-  NavigationStateRoute,
   SafeAreaView,
   StackActions,
+  Themed,
   withNavigation,
 } from 'react-navigation';
+import {
+  createStackNavigator,
+  NavigationStackProp,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -21,12 +22,12 @@ import SampleText from './SampleText';
 const DEBUG = false;
 
 interface MyNavScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   banner: React.ReactNode;
 }
 
 interface BackButtonProps {
-  navigation: NavigationScreenProp<NavigationStateRoute<any>>;
+  navigation: NavigationStackProp;
 }
 
 class MyBackButton extends React.Component<BackButtonProps, any> {
@@ -93,17 +94,13 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Go back"
         />
         <Button onPress={() => dismiss()} title="Dismiss" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
 }
 
-interface MyHomeScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-
-class MyHomeScreen extends React.Component<MyHomeScreenProps> {
+class MyHomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
@@ -143,12 +140,9 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-interface MyPhotosScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
-}
-class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
+class MyPhotosScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
-    headerLeft: <MyBackButtonWithNavigation />,
+    headerLeft: () => <MyBackButtonWithNavigation />,
     title: 'Photos',
   };
   s0: NavigationEventSubscription | null = null;
@@ -195,7 +189,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 const MyProfileScreen = ({
   navigation,
 }: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }) => (
   <MyNavScreen
     banner={`${
@@ -205,7 +199,7 @@ const MyProfileScreen = ({
   />
 );
 
-MyProfileScreen.navigationOptions = (props: MyHomeScreenProps) => {
+MyProfileScreen.navigationOptions = (props: NavigationStackScreenProps) => {
   const { navigation } = props;
   const { state, setParams } = navigation;
   const { params } = state;

example/src/SimpleTabs.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Animated, Platform, StatusBar, Text, View } from 'react-native';
-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,28 +38,29 @@ const MyNavScreen = ({
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
       {TEXT.split('\n').map((p, n) => (
-        <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
+        <Themed.Text
+          key={n}
+          style={{ marginVertical: 10, marginHorizontal: 8 }}
+        >
           {p}
-        </Text>
+        </Themed.Text>
       ))}
-      <StatusBar barStyle="default" />
+      <Themed.StatusBar />
     </SafeAreaView>
   </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 }) => (
-      <Text style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}>
+      <Themed.Text
+        style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}
+      >
         {item}
-      </Text>
+      </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,11 +1,15 @@
 import * as React from 'react';
-import { Button, Image, StatusBar, StyleSheet } from 'react-native';
+import { Button, Image, StyleSheet } from 'react-native';
 import {
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
+  Themed,
   SafeAreaView,
 } from 'react-navigation';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import SampleText from './SampleText';
 
 interface MyNavScreenProps {
@@ -36,7 +40,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Navigate to a photos screen"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -81,7 +85,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
           title="Navigate to a profile screen"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -91,12 +95,9 @@ interface MyProfileScreenProps {
   navigation: NavigationScreenProp<NavigationState>;
 }
 class MyProfileScreen extends React.Component<MyProfileScreenProps> {
-  static navigationOptions = () => ({
-    headerBackImage: (
-      <MyCustomHeaderBackImage style={styles.myCustomHeaderBackImageAlt} />
-    ),
+  static navigationOptions = {
     title: 'Profile',
-  });
+  };
 
   render() {
     const { navigation } = this.props;
@@ -104,7 +105,7 @@ class MyProfileScreen extends React.Component<MyProfileScreenProps> {
       <SafeAreaView>
         <SampleText>{`${navigation.state.params!.name}'s Profile`}</SampleText>
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -125,9 +126,18 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
-      headerBackImage: MyCustomHeaderBackImage as any,
-    },
+    defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
+      headerBackImage: () => (
+        <MyCustomHeaderBackImage
+          style={[
+            styles.myCustomHeaderBackImageAlt,
+            {
+              tintColor: theme === 'light' ? '#000' : '#fff',
+            },
+          ]}
+        />
+      ),
+    }),
   }
 );
 
@@ -142,7 +152,5 @@ const styles = StyleSheet.create({
     resizeMode: 'contain',
     width: 24,
   },
-  myCustomHeaderBackImageAlt: {
-    tintColor: '#f00',
-  },
+  myCustomHeaderBackImageAlt: {},
 });

example/src/StackWithHeaderPreset.tsx

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

@@ -1,29 +1,26 @@
 import * as React from 'react';
-import {
-  Platform,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  View,
-} from 'react-native';
-import { BlurView } from 'react-native-blur';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
 import { isIphoneX } from 'react-native-iphone-x-helper';
+import {
+  NavigationEventPayload,
+  NavigationEventSubscription,
+  Themed,
+  SupportedThemes,
+} from 'react-navigation';
 import {
   createStackNavigator,
   Header,
   HeaderStyleInterpolator,
-  NavigationEventPayload,
-  NavigationEventSubscription,
-  NavigationScreenProp,
-  NavigationState,
-  TransitionConfig,
-} from 'react-navigation';
+  NavigationStackScreenProps,
+  NavigationStackProp,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
 
 interface MyNavScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   banner: React.ReactNode;
 }
 
@@ -49,7 +46,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
         <Button onPress={() => popToTop()} title="Pop to top" />
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </ScrollView>
     );
   }
@@ -84,7 +81,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
 }
 
 interface MyHomeScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
@@ -128,7 +125,7 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
 }
 
 interface MyPhotosScreenProps {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
@@ -178,7 +175,7 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
 const MyProfileScreen = ({
   navigation,
 }: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
 }) => (
   <MyNavScreen
     banner={`${navigation.state.params!.mode === 'edit' ? 'Now Editing ' : ''}${
@@ -189,9 +186,10 @@ const MyProfileScreen = ({
 );
 
 MyProfileScreen.navigationOptions = (props: {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
+  theme: SupportedThemes;
 }) => {
-  const { navigation } = props;
+  const { navigation, theme } = props;
   const { state, setParams } = navigation;
   const { params } = state;
   return {
@@ -201,6 +199,7 @@ MyProfileScreen.navigationOptions = (props: {
     headerRight: (
       <HeaderButtons>
         <HeaderButtons.Item
+          color={theme === 'light' ? '#000' : '#fff'}
           title={params!.mode === 'edit' ? 'Done' : 'Edit'}
           onPress={() =>
             setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
@@ -227,27 +226,29 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
+    defaultNavigationOptions: ({ theme }: NavigationStackScreenProps) => ({
       headerBackground:
-      Platform.OS === 'ios' ? (
-        <BlurView style={{ flex: 1 }} blurType="light" />
-      ) : (
-        <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
-      ),
+        Platform.OS === 'ios' ? (
+          <BlurView
+            style={{ flex: 1 }}
+            blurType={theme === 'light' ? 'light' : 'dark'}
+          />
+        ) : (
+          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
+        ),
       headerStyle: {
-        borderBottomColor: '#A7A7AA',
+        borderBottomColor: theme === 'light' ? '#A7A7AA' : 'transparent',
         borderBottomWidth: StyleSheet.hairlineWidth,
       },
       headerTransparent: true,
-    },
+    }),
     headerTransitionPreset: 'uikit',
     // You can leave this out if you don't want the card shadow to
     // be visible through the header
-    transitionConfig: () =>
-      ({
-        headerBackgroundInterpolator:
-          HeaderStyleInterpolator.forBackgroundWithTranslation,
-      } as TransitionConfig),
+    transitionConfig: () => ({
+      headerBackgroundInterpolator:
+        HeaderStyleInterpolator.forBackgroundWithTranslation,
+    }),
   }
 );
 

example/src/StacksAndKeys.tsx

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

example/src/StacksInTabs.tsx

@@ -1,15 +1,19 @@
 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,
+  NavigationStackScreenProps,
+  NavigationStackProp,
+} 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';
 
@@ -19,7 +23,7 @@ Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam eg
 Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
 
 interface Props {
-  navigation: NavigationScreenProp<NavigationState>;
+  navigation: NavigationStackProp;
   banner: string;
 }
 
@@ -53,17 +57,13 @@ class MyNavScreen extends React.Component<Props> {
           ))}
         </SafeAreaView>
 
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </ScrollView>
     );
   }
 }
 
-const MyProfileScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
+const MyProfileScreen = ({ navigation }: NavigationStackScreenProps) => (
   <MyNavScreen
     banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}

example/src/StacksOverTabs.tsx

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

example/src/StacksOverTopTabs.tsx

@@ -7,13 +7,18 @@ import {
   View,
 } from 'react-native';
 import {
-  createMaterialTopTabNavigator,
-  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
-import { MaterialTopTabBar } from 'react-navigation-tabs';
+import {
+  createStackNavigator,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 import SampleText from './SampleText';
@@ -62,11 +67,7 @@ const MyHomeScreen = ({
   />
 );
 
-const MyProfileScreen = ({
-  navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => (
+const MyProfileScreen = ({ navigation }: NavigationStackScreenProps) => (
   <MyNavScreen
     banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}
@@ -75,9 +76,9 @@ const MyProfileScreen = ({
 
 const MyNotificationsSettingsScreen = ({
   navigation,
-}: {
-  navigation: NavigationScreenProp<NavigationState>;
-}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
+}: NavigationStackScreenProps) => (
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
+);
 
 const MySettingsScreen = ({
   navigation,
@@ -157,11 +158,7 @@ const StackNavigator = createStackNavigator(
     },
     Profile: {
       screen: MyProfileScreen,
-      navigationOptions: ({
-        navigation,
-      }: {
-        navigation: NavigationScreenProp<NavigationState>;
-      }) => ({
+      navigationOptions: ({ navigation }: NavigationStackScreenProps) => ({
         title: `${navigation.state.params!.name}'s Profile!`,
       }),
     },

example/src/SwitchWithStacks.tsx

@@ -2,15 +2,18 @@ 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,
+  NavigationStackScreenProps,
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-class SignInScreen extends React.Component<any, any> {
+class SignInScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Please sign in',
   };
@@ -23,7 +26,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>
     );
   }
@@ -34,7 +37,7 @@ class SignInScreen extends React.Component<any, any> {
   };
 }
 
-class HomeScreen extends React.Component<any, any> {
+class HomeScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Welcome to the app!',
   };
@@ -44,7 +47,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,12 +57,17 @@ 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');
   };
 }
 
-class OtherScreen extends React.Component<any, any> {
+class OtherScreen extends React.Component<NavigationStackScreenProps> {
   static navigationOptions = {
     title: 'Lots of features here',
   };
@@ -68,13 +76,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 +107,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/.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/app.json

@@ -1,29 +0,0 @@
-{
-  "expo": {
-    "name": "NavigationPlayground",
-    "slug": "NavigationPlayground",
-    "privacy": "public",
-    "sdkVersion": "32.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
-    }
-  }
-}

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",
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "eject": "expo eject",
-    "test": "jest && tsc",
-    "tsc": "tsc",
-    "release": "release-it"
-  },
-  "dependencies": {
-    "expo": "^32.0.0",
-    "patch-package": "^6.0.5",
-    "postinstall-postinstall": "^2.0.0",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-blur": "^3.2.2",
-    "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/patches/react-native-gesture-handler+1.1.0.patch

@@ -1,59 +0,0 @@
-diff --git a/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts b/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts
-index 7a1332b..6328045 100644
---- a/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts
-+++ b/node_modules/react-native-gesture-handler/react-native-gesture-handler.d.ts
-@@ -7,11 +7,9 @@ declare module 'react-native-gesture-handler' {
-     Animated,
-     FlatListProperties,
-     ScrollViewProperties,
--    SliderProperties,
-     SwitchProperties,
-     TextInputProperties,
-     ToolbarAndroidProperties,
--    ViewPagerAndroidProperties,
-     DrawerLayoutAndroidProperties,
-     TouchableHighlightProperties,
-     TouchableOpacityProperties,
-@@ -409,10 +407,6 @@ declare module 'react-native-gesture-handler' {
-     NativeViewGestureHandlerProperties & ScrollViewProperties
-   > {}
- 
--  export class Slider extends React.Component<
--    NativeViewGestureHandlerProperties & SliderProperties
--  > {}
--
-   export class Switch extends React.Component<
-     NativeViewGestureHandlerProperties & SwitchProperties
-   > {}
-@@ -425,10 +419,6 @@ declare module 'react-native-gesture-handler' {
-     NativeViewGestureHandlerProperties & ToolbarAndroidProperties
-   > {}
- 
--  export class ViewPagerAndroid extends React.Component<
--    NativeViewGestureHandlerProperties & ViewPagerAndroidProperties
--  > {}
--
-   export class DrawerLayoutAndroid extends React.Component<
-     NativeViewGestureHandlerProperties & DrawerLayoutAndroidProperties
-   > {}
-@@ -443,6 +433,11 @@ declare module 'react-native-gesture-handler' {
-     Component: React.ComponentType<any>,
-     containerStyles?: StyleProp<ViewStyle>
-   ): React.ComponentType<any>;
-+
-+  export function createNativeWrapper(
-+    Component: React.ComponentType<any>,
-+    config: NativeViewGestureHandlerProperties
-+  ): React.ComponentType<any>;
- }
- 
- declare module 'react-native-gesture-handler/Swipeable' {
-@@ -482,7 +477,7 @@ declare module 'react-native-gesture-handler/Swipeable' {
- }
- 
- declare module 'react-native-gesture-handler/DrawerLayout' {
--  import { Animated, StatusBarAnimation } from 'react-native';
-+  import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
- 
-   interface DrawerLayoutProperties {
-     renderNavigationView: (

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> {}
-
-}

flow/react-navigation.js

@@ -775,7 +775,7 @@ declare module 'react-navigation' {
     // How to animate position and opacity of the screen
     // based on the value generated by the transitionSpec
     screenInterpolator?: (props: NavigationSceneRendererProps) => {},
-    // How to animate position and opacity of the header componetns
+    // How to animate position and opacity of the header components
     // based on the value generated by the transitionSpec
     headerLeftInterpolator?: (props: NavigationSceneRendererProps) => {},
     headerTitleInterpolator?: (props: NavigationSceneRendererProps) => {},
@@ -1303,4 +1303,8 @@ declare module 'react-navigation' {
     navigation: NavigationScreenProp<State>,
     screenProps?: {}
   ): Options;
+
+  declare export var NavigationContext: React$Context<{}>;
+
+  declare export var ScrollView: React$ComponentType<{}>;
 }

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.1",
+  "version": "4.0.9",
   "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.4.1",
-    "@react-navigation/native": "~3.5.0",
-    "react-navigation-drawer": "~1.2.1",
-    "react-navigation-stack": "~1.4.0",
-    "react-navigation-tabs": "~1.1.4"
+    "@react-navigation/core": "^3.5.1",
+    "@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,194 +1,29 @@
-/* eslint global-require: 0 */
+export * from '@react-navigation/core';
+export * from '@react-navigation/native';
 
-module.exports = {
-  // 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 each item individually so that they can be evaluated lazily
+// https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#lazy
+export {
+  createNavigationContainer,
+  createStackNavigator,
+  createBottomTabNavigator,
+  createMaterialTopTabNavigator,
+  createDrawerNavigator,
+  StackGestureContext,
+  DrawerGestureContext,
+  DrawerRouter,
+  DrawerActions,
+  Transitioner,
+  StackView,
+  StackViewCard,
+  StackViewTransitionConfigs,
+  Header,
+  HeaderTitle,
+  HeaderBackButton,
+  HeaderStyleInterpolator,
+  DrawerView,
+  DrawerItems,
+  DrawerSidebar,
+  BottomTabBar,
+  MaterialTopTabBar,
+} from './deprecations';

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"
+  }
+}

typings/react-navigation-tabs.d.ts

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