chore: release 3.11.2

.circleci/config.yml

@@ -1,65 +1,11 @@
-version: 2
-
-defaults: &defaults
-  docker:
-    - image: circleci/node:10.9.0
-  working_directory: ~/project
-
+version: 3
 jobs:
-  install-dependencies:
-    <<: *defaults
+  build:
+    docker:
+      - image: circleci/node:10
+    parallelism: 2
+    working_directory: ~/react-navigation
     steps:
       - checkout
-      - 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
+      - run: yarn install --frozen-lockfile
+      - run: ./scripts/test.sh

.eslintignore

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

.eslintrc

@@ -1,21 +1,52 @@
 {
-  "extends": "eslint-config-satya164",
-
-  "plugins": ["react-native-globals"],
-
-  "settings": {
-    "react": {
-      "version": "detect"
-    },
-  },
-
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "prettier",
+    "prettier/react"
+  ],
+  "parser": "babel-eslint",
+  "plugins": ["react", "prettier"],
   "env": {
-    "es6": true,
-    "react-native-globals/all": true,
+    "jasmine": 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/sort-comp": "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
+    }
   }
 }

.release-it.json

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

LICENSE

@@ -1,21 +1,26 @@
-MIT License
+BSD License
 
-Copyright (c) 2017 React Native Community
+For React Navigation software
 
-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:
+Copyright (c) 2016-present, React Navigation Contributors. All rights reserved.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
 
-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.
+ * 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.

assetsTransformer.js

@@ -1,4 +1,3 @@
-/* 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.
@@ -7,7 +6,7 @@
 const path = require('path');
 
 module.exports = {
-  process(src, filename) {
+  process(src, filename, config, options) {
     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
   },
 };

babel.config.js

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

commitlint.config.js

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

example/.babelrc

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

example/.eslintrc

@@ -1,18 +0,0 @@
-{
-  '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.json

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

example/metro.config.js

@@ -1,35 +0,0 @@
-/* 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

@@ -1,37 +0,0 @@
-{
-  "name": "playground",
-  "version": "0.0.1",
-  "private": true,
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios"
-  },
-  "dependencies": {
-    "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "^0.1.1",
-    "@react-navigation/core": "^3.5.0",
-    "@react-navigation/native": "^3.6.2",
-    "expo": "^33.0.7",
-    "expo-asset": "^5.0.1",
-    "expo-blur": "~5.0.1",
-    "expo-constants": "~5.0.1",
-    "hoist-non-react-statics": "^3.3.0",
-    "react": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
-    "react-native-iphone-x-helper": "^1.2.1",
-    "react-native-paper": "^2.15.2",
-    "react-navigation-drawer": "^2.0.1",
-    "react-navigation-header-buttons": "^3.0.2",
-    "react-navigation-stack": "^1.5.1",
-    "react-navigation-tabs": "^1.2.0"
-  },
-  "devDependencies": {
-    "babel-plugin-module-resolver": "^3.2.0"
-  },
-  "resolutions": {
-    "react-native-safe-area-view": "0.14.6",
-    "react-native-screens": "1.0.0-alpha.23"
-  }
-}

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

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

examples/NavigationPlayground/.gitattributes

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

examples/NavigationPlayground/.gitignore

@@ -0,0 +1,63 @@
+# 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.tsx

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

examples/NavigationPlayground/README.md

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

examples/NavigationPlayground/app.json

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

examples/NavigationPlayground/babel.config.js

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

examples/NavigationPlayground/package.json

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

examples/NavigationPlayground/prettier.config.js

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

examples/NavigationPlayground/src/CustomTabUI.tsx

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

examples/NavigationPlayground/src/CustomTabs.tsx

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

examples/NavigationPlayground/src/Drawer.tsx

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

examples/NavigationPlayground/src/ModalStack.tsx

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

examples/NavigationPlayground/src/SampleText.tsx

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

examples/NavigationPlayground/src/SimpleStack.tsx

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

examples/NavigationPlayground/src/SimpleTabs.tsx

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

examples/NavigationPlayground/src/StackWithCustomHeaderBackImage.tsx

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

examples/NavigationPlayground/src/StackWithHeaderPreset.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { StatusBar } from 'react-native';
 import {
+  createStackNavigator,
   NavigationScreenProp,
   NavigationState,
   SafeAreaView,
 } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 

examples/NavigationPlayground/src/StackWithTranslucentHeader.tsx

@@ -3,18 +3,18 @@ import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { BlurView } from 'expo-blur';
 import { isIphoneX } from 'react-native-iphone-x-helper';
 import {
+  createStackNavigator,
+  Header,
+  HeaderStyleInterpolator,
   NavigationEventPayload,
+  NavigationScreenConfigProps,
   NavigationEventSubscription,
   NavigationScreenProp,
   NavigationState,
   Themed,
   SupportedThemes,
+  TransitionConfig,
 } from 'react-navigation';
-import {
-  createStackNavigator,
-  Header,
-  HeaderStyleInterpolator,
-} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 import SampleText from './SampleText';
@@ -226,7 +226,7 @@ const StackWithTranslucentHeader = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: ({ theme }) => ({
+    defaultNavigationOptions: ({ theme }: NavigationScreenConfigProps) => ({
       headerBackground:
         Platform.OS === 'ios' ? (
           <BlurView
@@ -245,10 +245,11 @@ const StackWithTranslucentHeader = createStackNavigator(
     headerTransitionPreset: 'uikit',
     // You can leave this out if you don't want the card shadow to
     // be visible through the header
-    transitionConfig: () => ({
-      headerBackgroundInterpolator:
-        HeaderStyleInterpolator.forBackgroundWithTranslation,
-    }),
+    transitionConfig: () =>
+      ({
+        headerBackgroundInterpolator:
+          HeaderStyleInterpolator.forBackgroundWithTranslation,
+      } as TransitionConfig),
   }
 );
 

examples/NavigationPlayground/src/StacksAndKeys.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StatusBar, Text, View } from 'react-native';
-import { NavigationScreenProp, NavigationState } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import { createStackNavigator, NavigationScreenProp } from 'react-navigation';
+import { NavigationState } from 'react-navigation';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 interface Props {

examples/NavigationPlayground/src/StacksInTabs.tsx

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

examples/NavigationPlayground/src/StacksOverTabs.tsx

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

examples/NavigationPlayground/src/StacksOverTopTabs.tsx

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

examples/NavigationPlayground/src/SwitchWithStacks.tsx

@@ -7,8 +7,7 @@ import {
   View,
   Platform,
 } from 'react-native';
-import { createSwitchNavigator } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
+import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 class SignInScreen extends React.Component<any, any> {
@@ -55,12 +54,7 @@ class HomeScreen extends React.Component<any, any> {
   };
 
   signOutAsync = async () => {
-    if (Platform.OS === 'ios') {
-      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
-    } else {
-      await AsyncStorage.clear();
-    }
-
+    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
     this.props.navigation.navigate('Auth');
   };
 }
@@ -80,12 +74,7 @@ class OtherScreen extends React.Component<any, any> {
   }
 
   signOutAsync = async () => {
-    if (Platform.OS === 'ios') {
-      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
-    } else {
-      await AsyncStorage.clear();
-    }
-
+    Platform.OS === 'ios' ? await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove) : await AsyncStorage.clear()
     this.props.navigation.navigate('Auth');
   };
 }

examples/NavigationPlayground/src/TabsInDrawer.tsx

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

examples/NavigationPlayground/src/commonComponents/Button.tsx

@@ -1,49 +1,42 @@
 import React from 'react';
-import {
-  AccessibilityStates,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { AccessibilityState, 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
@@ -88,7 +81,7 @@ export default class Button extends React.Component<ButtonProps> {
         buttonStyles.push({ backgroundColor: color });
       }
     }
-    const accessibilityStates: AccessibilityStates[] = [];
+    const accessibilityStates: AccessibilityState[] = [];
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
@@ -106,7 +99,9 @@ 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>
     );

examples/NavigationPlayground/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) => (

examples/NavigationPlayground/src/commonComponents/HeaderButtons.tsx

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

examples/NavigationPlayground/tests/setup.js

@@ -0,0 +1,46 @@
+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

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

examples/NavigationPlayground/tsconfig.json

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

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

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

jest-setup.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "4.0.0",
+  "version": "3.11.2",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "types": "typescript/react-navigation.d.ts",
@@ -8,14 +8,19 @@
     "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>, Satyajit Sahoo <satyajit.happy@gmail.com>",
-  "license": "MIT",
+  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>, Brent Vatne <brent@expo.io>",
+  "license": "BSD-2-Clause",
   "scripts": {
-    "bootstrap": "yarn example && yarn",
-    "example": "yarn --cwd example",
-    "test": "jest",
-    "lint": "eslint . --ext '.js,.ts,.tsx'",
-    "typescript": "tsc --noEmit",
+    "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",
     "release": "release-it"
   },
   "publishConfig": {
@@ -31,28 +36,37 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "^3.5.0",
-    "@react-navigation/native": "^3.6.2"
+    "@react-navigation/core": "~3.5.1",
+    "@react-navigation/native": "~3.6.2",
+    "react-navigation-drawer": "~1.4.0",
+    "react-navigation-stack": "1.5.3",
+    "react-navigation-tabs": "~1.2.0"
   },
   "devDependencies": {
-    "@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"
+    "@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"
   },
   "jest": {
     "notify": true,
@@ -76,20 +90,17 @@
       "\\.png$": "<rootDir>/assetsTransformer.js"
     },
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/"
+      "<rootDir>/examples/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
+      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
     ]
   },
-  "prettier": {
-    "trailingComma": "es5",
-    "singleQuote": true
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn typescript && yarn lint && yarn test",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write flow/react-navigation.js",
+      "git add"
+    ]
   }
 }

prettier.config.js

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

scripts/build-push-docker.sh

@@ -0,0 +1,6 @@
+#!/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

@@ -0,0 +1,19 @@
+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

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

src/deprecations.js

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

tsconfig.json

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

typescript/react-navigation.d.ts

@@ -50,6 +50,25 @@ declare module 'react-navigation' {
   // @todo: should we re-export from RNGH? not currently exposed through it
   export { FlatList, SectionList, ScrollView } from 'react-native';
 
+  // @todo: improve this type! not super important as it's not commonly used
+  type HeaderStyleInterpolatorFunction = (props: any) => any;
+
+  type HeaderStyleInterpolatorStatic = {
+    forLayout: HeaderStyleInterpolatorFunction;
+    forLeft: HeaderStyleInterpolatorFunction;
+    forLeftButton: HeaderStyleInterpolatorFunction;
+    forLeftLabel: HeaderStyleInterpolatorFunction;
+    forCenterFromLeft: HeaderStyleInterpolatorFunction;
+    forCenter: HeaderStyleInterpolatorFunction;
+    forRight: HeaderStyleInterpolatorFunction;
+    forBackground: HeaderStyleInterpolatorFunction;
+    forBackgroundWithInactiveHidden: HeaderStyleInterpolatorFunction;
+    forBackgroundWithFade: HeaderStyleInterpolatorFunction;
+    forBackgroundWithTranslation: HeaderStyleInterpolatorFunction;
+  };
+
+  export const HeaderStyleInterpolator: HeaderStyleInterpolatorStatic;
+
   export type ScreenProps = {
     [key: string]: any;
   };
@@ -58,13 +77,36 @@ declare module 'react-navigation' {
   export function getActiveChildNavigationOptions<S>(
     navigation: NavigationProp<S>,
     screenProps?: ScreenProps,
-    theme?: SupportedThemes
+    theme?: SupportedThemes,
   ): NavigationParams;
 
   // @todo when we split types into common, native and web,
   // we can properly change Animated.Value to its real value
   export type AnimatedValue = any;
 
+  export type HeaderMode = 'float' | 'screen' | 'none';
+
+  export interface HeaderForceInset {
+    horizontal?: string;
+    vertical?: string;
+    left?: string;
+    right?: string;
+    top?: string;
+    bottom?: string;
+  }
+
+  export interface HeaderProps extends NavigationSceneRendererProps {
+    mode: HeaderMode;
+    router: NavigationRouter<NavigationState, NavigationStackScreenOptions>;
+    getScreenDetails: (
+      navigationScene: NavigationScene
+    ) => NavigationScreenDetails<NavigationStackScreenOptions>;
+    leftInterpolator: (props: NavigationSceneRendererProps) => {};
+    titleInterpolator: (props: NavigationSceneRendererProps) => {};
+    rightInterpolator: (props: NavigationSceneRendererProps) => {};
+    style: StyleProp<ViewStyle>;
+  }
+
   /**
    * NavigationState is a tree of routes for a single navigator, where each child
    * route may either be a NavigationScreenRoute or a NavigationRouterRoute.
@@ -139,7 +181,7 @@ declare module 'react-navigation' {
   export type NavigationScreenOptionsGetter<Options> = (
     navigation: NavigationScreenProp<NavigationRoute<any>>,
     screenProps: ScreenProps | null,
-    theme: SupportedThemes
+    theme: SupportedThemes,
   ) => Options;
 
   export interface NavigationRouter<State = NavigationState, Options = {}> {
@@ -389,6 +431,31 @@ declare module 'react-navigation' {
     type: 'Navigation/TOGGLE_DRAWER';
   }
 
+  export interface NavigationStackViewConfig {
+    mode?: 'card' | 'modal';
+    headerMode?: HeaderMode;
+    headerBackTitleVisible?: boolean;
+    headerTransitionPreset?: 'fade-in-place' | 'uikit';
+    headerLayoutPreset?: 'left' | 'center';
+    cardShadowEnabled?: boolean;
+    cardOverlayEnabled?: boolean;
+    cardStyle?: StyleProp<ViewStyle>;
+    transparentCard?: boolean;
+    transitionConfig?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps: NavigationTransitionProps,
+      isModal: boolean
+    ) => TransitionConfig;
+    onTransitionStart?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps?: NavigationTransitionProps
+    ) => Promise<void> | void;
+    onTransitionEnd?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps?: NavigationTransitionProps
+    ) => void;
+  }
+
   /**
    * Switch Navigator
    */
@@ -405,6 +472,48 @@ declare module 'react-navigation' {
     resetOnBlur?: boolean; // defaults to `true`
   }
 
+  export interface NavigationStackScreenOptions {
+    title?: string;
+    header?:
+      | React.ReactElement<any>
+      | ((headerProps: HeaderProps) => React.ReactElement<any>)
+      | null;
+    headerTransparent?: boolean;
+    headerTitle?: string | React.ReactElement<any>;
+    headerTitleStyle?: StyleProp<TextStyle>;
+    headerTitleAllowFontScaling?: boolean;
+    headerTitleContainerStyle?: StyleProp<TextStyle>;
+    headerTintColor?: string;
+    headerLeft?:
+      | React.ReactElement<any>
+      | ((backButtonProps: HeaderBackButtonProps) => React.ReactElement<any>)
+      | null;
+    headerBackTitle?: string | null;
+    headerBackImage?: React.ReactElement<any>;
+    headerTruncatedBackTitle?: string;
+    headerBackTitleStyle?: StyleProp<TextStyle>;
+    headerPressColorAndroid?: string;
+    headerRight?: React.ReactElement<any> | null;
+    headerStyle?: StyleProp<ViewStyle>;
+    headerLeftContainerStyle?: StyleProp<ViewStyle>;
+    headerRightContainerStyle?: StyleProp<ViewStyle>;
+    headerForceInset?: HeaderForceInset;
+    headerBackground?: React.ReactNode | React.ReactType;
+    headerBackgroundTransitionPreset?: 'toggle' | 'fade' | 'translate';
+    gesturesEnabled?: boolean;
+    gestureResponseDistance?: { vertical?: number; horizontal?: number };
+    gestureDirection?: 'default' | 'inverted';
+  }
+
+  export interface NavigationStackRouterConfig {
+    headerTransitionPreset?: 'fade-in-place' | 'uikit';
+    initialRouteName?: string;
+    initialRouteParams?: NavigationParams;
+    paths?: NavigationPathsConfig;
+    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+    navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+    initialRouteKey?: string;
+  }
 
   export type NavigationStackAction =
     | NavigationInitAction
@@ -478,6 +587,88 @@ declare module 'react-navigation' {
     >;
     navigationOptions?: NavigationScreenConfig<any>;
   }
+  export interface TabScene {
+    route: NavigationRoute;
+    focused: boolean;
+    index: number;
+    tintColor?: string;
+  }
+
+  export interface TabBarIconProps {
+    tintColor: string | null;
+    focused: boolean;
+    horizontal: boolean;
+  }
+
+  export interface TabBarLabelProps {
+    tintColor: string | null;
+    focused: boolean;
+  }
+
+  // tslint:disable-next-line:strict-export-declare-modifiers
+  interface NavigationTabScreenOptionsBase {
+    title?: string;
+    tabBarIcon?:
+      | React.ReactElement<any>
+      | ((options: TabBarIconProps) => React.ReactElement<any> | null);
+    tabBarLabel?:
+      | string
+      | React.ReactElement<any>
+      | ((
+          options: TabBarLabelProps
+        ) => React.ReactElement<any> | string | null);
+    tabBarVisible?: boolean;
+    tabBarTestIDProps?: { testID?: string; accessibilityLabel?: string };
+  }
+  export interface NavigationTabScreenOptions
+    extends NavigationTabScreenOptionsBase {
+    swipeEnabled?: boolean;
+    tabBarOnPress?: (options: {
+      previousScene: TabScene;
+      scene: TabScene;
+      jumpToIndex: (index: number) => void;
+    }) => void;
+    tabBarOnLongPress?: (options: {
+      previousScene: TabScene;
+      scene: TabScene;
+      jumpToIndex: (index: number) => void;
+    }) => void;
+  }
+  export interface NavigationBottomTabScreenOptions
+    extends NavigationTabScreenOptionsBase {
+    tabBarOnPress?: (options: {
+      navigation: NavigationScreenProp<NavigationRoute>;
+      defaultHandler: () => void;
+    }) => void;
+    tabBarOnLongPress?: (options: {
+      navigation: NavigationScreenProp<NavigationRoute>;
+      defaultHandler: () => void;
+    }) => void;
+  }
+
+  export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
+
+  export interface DrawerIconProps {
+    tintColor: string | null;
+    focused: boolean;
+  }
+
+  export interface DrawerLabelProps {
+    tintColor: string | null;
+    focused: boolean;
+  }
+
+  export interface NavigationDrawerScreenOptions {
+    title?: string;
+    drawerIcon?:
+      | React.ReactElement<any>
+      | ((options: DrawerIconProps) => React.ReactElement<any> | null);
+    drawerLabel?:
+      | string
+      | React.ReactElement<any>
+      | ((options: DrawerLabelProps) => React.ReactElement<any> | null);
+    drawerLockMode?: DrawerLockMode;
+  }
 
   export interface NavigationRouteConfigMap {
     [routeName: string]: NavigationRouteConfig;
@@ -585,6 +776,141 @@ declare module 'react-navigation' {
     navigationOptions?: O;
   }
 
+  /**
+   * Gestures, Animations, and Interpolators
+   */
+
+  export type NavigationGestureDirection = 'horizontal' | 'vertical';
+
+  export interface NavigationLayout {
+    height: AnimatedValue;
+    initHeight: number;
+    initWidth: number;
+    isMeasured: boolean;
+    width: AnimatedValue;
+  }
+
+  export interface NavigationScene {
+    index: number;
+    isActive: boolean;
+    isStale: boolean;
+    key: string;
+    route: NavigationRoute;
+    descriptor: NavigationDescriptor;
+  }
+
+  export interface NavigationTransitionProps {
+    // The layout of the screen container
+    layout: NavigationLayout;
+
+    // The destination navigation state of the transition
+    navigation: NavigationScreenProp<NavigationState>;
+
+    // The progressive index of the transitioner's navigation state.
+    position: AnimatedValue;
+
+    // The value that represents the progress of the transition when navigation
+    // state changes from one to another. Its numberic value will range from 0
+    // to 1.
+    //  progress.__getAnimatedValue() < 1 : transtion is happening.
+    //  progress.__getAnimatedValue() == 1 : transtion completes.
+    progress: AnimatedValue;
+
+    // All the scenes of the transitioner.
+    scenes: NavigationScene[];
+
+    // The active scene, corresponding to the route at
+    // `navigation.state.routes[navigation.state.index]`. When rendering
+    // NavigationSceneRendererPropsIndex, the scene does not refer to the active
+    // scene, but instead the scene that is being rendered. The index always
+    // is the index of the scene
+    scene: NavigationScene;
+    index: number;
+
+    screenProps?: ScreenProps;
+  }
+
+  // The scene renderer props are nearly identical to the props used for rendering
+  // a transition. The exception is that the passed scene is not the active scene
+  // but is instead the scene that the renderer should render content for.
+  export type NavigationSceneRendererProps = NavigationTransitionProps;
+
+  export interface NavigationTransitionSpec {
+    duration?: number;
+    // An easing function from `Easing`.
+    easing?: (t: number) => number;
+    // A timing function such as `Animated.timing`.
+    timing?: (value: AnimatedValue, config: any) => any;
+    friction?: number;
+    tension?: number;
+    useNativeDriver?: boolean;
+  }
+
+  /**
+   * Describes a visual transition from one screen to another.
+   */
+  export interface TransitionConfig {
+    // The basics properties of the animation, such as duration and easing
+    transitionSpec?: NavigationTransitionSpec;
+    // How to animate position and opacity of the screen
+    // based on the value generated by the transitionSpec
+    screenInterpolator?: (props: NavigationSceneRendererProps) => any;
+    // How to animate position and opacity of the header componetns
+    // based on the value generated by the transitionSpec
+    headerLeftInterpolator?: (props: NavigationSceneRendererProps) => any;
+    headerTitleInterpolator?: (props: NavigationSceneRendererProps) => any;
+    headerRightInterpolator?: (props: NavigationSceneRendererProps) => any;
+    // The style of the container. Useful when a scene doesn't have
+    // 100% opacity and the underlying container is visible.
+    containerStyle?: StyleProp<ViewStyle>;
+  }
+
+  export type TransitionConfigurer = (
+    transitionProps: NavigationTransitionProps,
+    prevTransitionProps: NavigationTransitionProps,
+    isModal: boolean
+  ) => TransitionConfig;
+
+  export interface StackViewTransitionConfigsType {
+    defaultTransitionConfig: TransitionConfigurer;
+    getTransitionConfig: (
+      transitionConfigurer: TransitionConfigurer,
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps: NavigationTransitionProps,
+      isModal: boolean
+    ) => TransitionConfig;
+    SlideFromRightIOS: TransitionConfig;
+    ModalSlideFromBottomIOS: TransitionConfig;
+    FadeInFromBottomAndroid: TransitionConfig;
+    FadeOutToBottomAndroid: TransitionConfig;
+    NoAnimation: TransitionConfig;
+  }
+
+  export const StackViewTransitionConfigs: StackViewTransitionConfigsType;
+
+  export type NavigationAnimationSetter = (
+    position: AnimatedValue,
+    newState: NavigationState,
+    lastState: NavigationState
+  ) => void;
+
+  export type NavigationSceneRenderer = () => React.ReactElement<any> | null;
+
+  export type NavigationStyleInterpolator = (
+    props: NavigationSceneRendererProps
+  ) => ViewStyle;
+
+  export interface LayoutEvent {
+    nativeEvent: {
+      layout: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      };
+    };
+  }
+
   export type NavigatorType =
     | 'react-navigation/STACK'
     | 'react-navigation/TABS'
@@ -641,6 +967,17 @@ declare module 'react-navigation' {
     state: { nav: NavigationState | null };
   }
 
+  export interface StackNavigatorConfig
+    extends NavigationStackViewConfig,
+      NavigationStackRouterConfig {
+    containerOptions?: any;
+  }
+
+  export function createStackNavigator(
+    routeConfigMap: NavigationRouteConfigMap,
+    stackConfig?: StackNavigatorConfig
+  ): NavigationContainer;
+
   export interface SwitchNavigatorConfig {
     initialRouteName: string;
     resetOnBlur?: boolean;
@@ -656,6 +993,208 @@ declare module 'react-navigation' {
     switchConfig?: SwitchNavigatorConfig
   ): NavigationContainer;
 
+  // DrawerItems
+  export const DrawerItems: React.ComponentType<DrawerItemsProps>;
+
+  export interface DrawerItemsProps {
+    navigation: NavigationScreenProp<DrawerNavigationState>;
+    items: NavigationRoute[];
+    activeItemKey?: string;
+    activeTintColor?: string;
+    activeBackgroundColor?: string;
+    inactiveTintColor?: string;
+    inactiveBackgroundColor?: string;
+    getLabel: (scene: DrawerScene) => React.ReactNode | string;
+    renderIcon: (scene: DrawerScene) => React.ReactNode;
+    onItemPress: (info: DrawerItem) => void;
+    itemsContainerStyle?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    activeLabelStyle?: StyleProp<TextStyle>;
+    inactiveLabelStyle?: StyleProp<TextStyle>;
+    iconContainerStyle?: StyleProp<ViewStyle>;
+    drawerPosition: 'left' | 'right';
+  }
+  export interface DrawerScene {
+    route: NavigationRoute;
+    focused: boolean;
+    index: number;
+    tintColor?: string;
+  }
+  export interface DrawerItem {
+    route: NavigationRoute;
+    focused: boolean;
+  }
+
+  /**
+   * Drawer Navigator
+   */
+  export interface DrawerViewConfig {
+    drawerBackgroundColor?: string;
+    drawerWidth?: number;
+    drawerPosition?: 'left' | 'right';
+    contentComponent?: React.ComponentType<DrawerItemsProps>;
+    contentOptions?: any;
+    style?: StyleProp<ViewStyle>;
+  }
+  export interface DrawerNavigatorConfig
+    extends NavigationTabRouterConfig,
+      DrawerViewConfig {
+    containerConfig?: any;
+    contentOptions?: {
+      activeTintColor?: string;
+      activeBackgroundColor?: string;
+      inactiveTintColor?: string;
+      inactiveBackgroundColor?: string;
+      style?: StyleProp<ViewStyle>;
+      labelStyle?: StyleProp<TextStyle>;
+    };
+    drawerType?: 'front' | 'back' | 'slide';
+    drawerLockMode?: DrawerLockMode;
+    edgeWidth?: number;
+    hideStatusBar?: boolean;
+    overlayColor?: string;
+    unmountInactiveRoutes?: boolean;
+  }
+
+  export function DrawerNavigator(
+    routeConfigMap: NavigationRouteConfigMap,
+    drawerConfig?: DrawerNavigatorConfig
+  ): NavigationContainer;
+
+  export function createDrawerNavigator(
+    routeConfigMap: NavigationRouteConfigMap,
+    drawerConfig?: DrawerNavigatorConfig
+  ): NavigationContainer;
+
+  /**
+   * Tab Navigator
+   */
+
+  // From views/TabView/TabView.js
+  export interface TabViewConfig {
+    tabBarComponent?: React.ReactType;
+    tabBarPosition?: 'top' | 'bottom';
+    tabBarOptions?: {
+      activeTintColor?: string;
+      allowFontScaling?: boolean;
+      activeBackgroundColor?: string;
+      inactiveTintColor?: string;
+      inactiveBackgroundColor?: string;
+      showLabel?: boolean;
+      style?: StyleProp<ViewStyle>;
+      labelStyle?: StyleProp<TextStyle>;
+      iconStyle?: StyleProp<ViewStyle>;
+      // Top
+      showIcon?: boolean;
+      upperCaseLabel?: boolean;
+      pressColor?: string;
+      pressOpacity?: number;
+      scrollEnabled?: boolean;
+      tabStyle?: StyleProp<ViewStyle>;
+      indicatorStyle?: StyleProp<ViewStyle>;
+      keyboardHidesTabBar?: boolean;
+    };
+    swipeEnabled?: boolean;
+    animationEnabled?: boolean;
+    lazy?: boolean;
+  }
+
+  export interface InitialLayout {
+    height: number;
+    width: number;
+  }
+
+  // From navigators/TabNavigator.js
+  export interface TabNavigatorConfig
+    extends NavigationTabRouterConfig,
+      TabViewConfig {
+    lazy?: boolean;
+    removeClippedSubviews?: boolean;
+    initialLayout?: InitialLayout;
+  }
+  export interface BottomTabNavigatorConfig
+    extends NavigationBottomTabRouterConfig,
+      TabViewConfig {
+    lazy?: boolean;
+    removeClippedSubviews?: boolean;
+    initialLayout?: InitialLayout;
+  }
+
+  export function createBottomTabNavigator(
+    routeConfigMap: NavigationRouteConfigMap,
+    drawConfig?: BottomTabNavigatorConfig
+  ): NavigationContainer;
+
+  export function createMaterialTopTabNavigator(
+    routeConfigMap: NavigationRouteConfigMap,
+    drawConfig?: TabNavigatorConfig
+  ): NavigationContainer;
+
+  export interface MaterialTopTabBarProps {
+    activeTintColor: string;
+    inactiveTintColor: string;
+    indicatorStyle: StyleProp<ViewStyle>;
+    showIcon: boolean;
+    showLabel: boolean;
+    upperCaseLabel: boolean;
+    allowFontScaling: boolean;
+    position: AnimatedValue;
+    tabBarPosition: string;
+    navigation: NavigationScreenProp<NavigationState>;
+    jumpToIndex: (index: number) => void;
+    getLabelText: (scene: TabScene) => React.ReactNode | string;
+    getOnPress: (
+      previousScene: NavigationRoute,
+      scene: TabScene
+    ) => (args: {
+      previousScene: NavigationRoute;
+      scene: TabScene;
+      jumpToIndex: (index: number) => void;
+    }) => void;
+    renderIcon: (scene: TabScene) => React.ReactElement<any>;
+    labelStyle?: TextStyle;
+    iconStyle?: ViewStyle;
+  }
+
+  export interface BottomTabBarProps {
+    activeTintColor: string;
+    activeBackgroundColor: string;
+    adaptive?: boolean;
+    inactiveTintColor: string;
+    inactiveBackgroundColor: string;
+    showLabel?: boolean;
+    allowFontScaling: boolean;
+    position: AnimatedValue;
+    navigation: NavigationScreenProp<NavigationState>;
+    jumpToIndex: (index: number) => void;
+    getLabelText: (scene: TabScene) => React.ReactNode | string;
+    getOnPress: (
+      previousScene: NavigationRoute,
+      scene: TabScene
+    ) => (args: {
+      previousScene: NavigationRoute;
+      scene: TabScene;
+      jumpToIndex: (index: number) => void;
+    }) => void;
+    getTestIDProps: (scene: TabScene) => (scene: TabScene) => any;
+    renderIcon: (scene: TabScene) => React.ReactNode;
+    style?: ViewStyle;
+    animateStyle?: ViewStyle;
+    labelStyle?: TextStyle;
+    tabStyle?: ViewStyle;
+    showIcon?: boolean;
+    safeAreaInset?: {
+      top?: SafeAreaViewForceInsetValue;
+      bottom?: SafeAreaViewForceInsetValue;
+      left?: SafeAreaViewForceInsetValue;
+      right?: SafeAreaViewForceInsetValue;
+    };
+  }
+
+  export const MaterialTopTabBar: React.ComponentType<MaterialTopTabBarProps>;
+  export const BottomTabBar: React.ComponentType<BottomTabBarProps>;
+
   /**
    * NavigationActions
    */
@@ -729,6 +1268,44 @@ declare module 'react-navigation' {
     ): NavigationJumpToAction;
   }
 
+  /**
+   * Transitioner
+   * @desc From react-navigation/src/views/Transitioner.js
+   */
+  export interface TransitionerProps {
+    configureTransition: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps?: NavigationTransitionProps
+    ) => NavigationTransitionSpec;
+    navigation: NavigationScreenProp<NavigationState>;
+    onTransitionStart?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps?: NavigationTransitionProps
+    ) => Promise<void> | void;
+    onTransitionEnd?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps?: NavigationTransitionProps
+    ) => void;
+    render: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps?: NavigationTransitionProps
+    ) => any;
+    descriptors?: { [key: string]: NavigationDescriptor };
+    style?: StyleProp<ViewStyle>;
+  }
+
+  export interface TransitionerState {
+    layout: NavigationLayout;
+    position: Animated.Value;
+    progress: Animated.Value;
+    scenes: NavigationScene[];
+  }
+
+  export class Transitioner extends React.Component<
+    TransitionerProps,
+    TransitionerState
+  > {}
+
   /**
    * Tab Router
    *
@@ -749,15 +1326,6 @@ declare module 'react-navigation' {
     config: NavigationTabRouterConfig
   ): NavigationRouter<any, any>;
 
-  export interface NavigationStackRouterConfig {
-    initialRouteName?: string;
-    initialRouteParams?: NavigationParams;
-    paths?: NavigationPathsConfig;
-    defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-    initialRouteKey?: string;
-  }
-
   /**
    * Create Navigator
    *
@@ -828,6 +1396,32 @@ declare module 'react-navigation' {
    * END CUSTOM CONVENIENCE INTERFACES
    */
 
+  /*
+   * Header
+   */
+
+  // src/views/HeaderBackButton.js
+
+  export interface HeaderBackButtonProps {
+    onPress?: () => void;
+    pressColorAndroid?: string;
+    title?: string | null;
+    titleStyle?: StyleProp<TextStyle>;
+    tintColor?: string;
+    truncatedTitle?: string;
+    width?: number;
+    disabled?: boolean;
+    backTitleVisible?: boolean;
+  }
+
+  export const HeaderBackButton: React.ComponentClass<HeaderBackButtonProps>;
+  /**
+   * Header Component
+   */
+  export class Header extends React.Component<HeaderProps> {
+    static HEIGHT: number;
+  }
+
   export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 
   export type InferProps<
@@ -920,6 +1514,10 @@ declare module 'react-navigation' {
   export const NavigationContext: React.Context<
     NavigationScreenProp<NavigationRoute>
   >;
+  export const StackGestureContext: React.Context<React.Ref<PanGestureHandler>>;
+  export const DrawerGestureContext: React.Context<
+    React.Ref<PanGestureHandler>
+  >;
 
   /**
    * SceneView

typings/react-navigation-tabs.d.ts

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