chore: release 4.0.3

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

.babelrc

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

.circleci/config.yml

@@ -1,40 +1,65 @@
 version: 2
+
+defaults: &defaults
+  docker:
+    - image: circleci/node:10.9.0
+  working_directory: ~/project
+
 jobs:
-  build:
-    docker:
-      - image: reactcommunity/node-ci:8.4.0-0 # custom image -- includes ocaml, libelf1, Yarn
-    parallelism: 2
-    working_directory: ~/react-navigation
+  install-dependencies:
+    <<: *defaults
     steps:
       - checkout
+      - attach_workspace:
+          at: ~/project
       - restore_cache:
-          # cache by branch + package.json, by branch, and then master
-          keys: 
-            - v3-react-navigation-{{ .Branch }}-{{ checksum "package.json" }}
-            - v3-react-navigation-{{ .Branch }}
-            - v3-react-navigation-master
-      - run: yarn # install root deps
-      - run: ./scripts/test.sh # run tests
-      - setup_remote_docker
-      # - deploy:
-      #    command: |
-      #      set -x
-      #        VER="17.03.0-ce"
-      #       curl -L -o /tmp/docker-$VER.tgz https://get.docker.com/builds/Linux/x86_64/docker-$VER.tgz
-      #       tar -xz -C /tmp -f /tmp/docker-$VER.tgz
-      #       mv /tmp/docker/* /usr/bin
-      #
-            # yarn global add exp
-            # set +x
-            # exp login -u "$EXPO_USERNAME" -p "$EXPO_PASSWORD"
-            # set -x
-            # cd examples/NavigationPlayground && yarn && exp publish --release-channel "${CIRCLE_SHA1}"
+          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: v3-react-navigation-{{ .Branch }}-{{ checksum "package.json" }}
-          paths:
-            - ~/.cache/yarn
-            - ~/react-navigation/examples/NavigationPlayground/node_modules
-            - ~/react-navigation/examples/ReduxExample/node_modules
-# notify:
-#  webhooks:
-#    - url: https://react-navigation-ci.now.sh
+          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.

.gitignore

@@ -13,8 +13,8 @@ yarn-error.log
 # OS X
 .DS_Store
 
-# Exponent
-.exponent
+# Expo
+.expo
 
 # Jest
 coverage

.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,171 +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.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]: https://github.com/react-navigation/react-navigation/compare/3.3.1...HEAD
-[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.
@@ -33,7 +37,7 @@ See our [Contributing Guide](CONTRIBUTING.md)!
 
 #### Is this the only library available for navigation?
 
-Certainly not! There other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the [alternative libraries](https://reactnavigation.org/docs/alternatives.html) documentation, and read React Navigation's [pitch & anti-pitch](https://reactnavigation.org/docs/pitch.html) to understand the tradeoffs.
+Certainly not! There are other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the [alternative libraries](https://reactnavigation.org/docs/alternatives.html) documentation, and read React Navigation's [pitch & anti-pitch](https://reactnavigation.org/docs/pitch.html) to understand the tradeoffs.
 
 #### Can I use this library for web?
 
@@ -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

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

commitlint.config.js

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

example/.babelrc

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

example/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

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/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/App.tsx

@@ -1,184 +1,169 @@
-/* @flow */
-
 import React from 'react';
-import { Asset, Constants, ScreenOrientation } from 'expo';
-
-ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
-
 import {
   Animated,
   Image,
   Platform,
-  ScrollView,
-  StyleSheet,
-  Text,
   StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
   View,
 } from 'react-native';
 import {
-  RectButton,
   NativeViewGestureHandler,
+  RectButton,
 } from 'react-native-gesture-handler';
 import {
+  SupportedThemes,
+  ThemeColors,
+  ThemeContext,
+  Themed,
   createAppContainer,
   SafeAreaView,
-  createStackNavigator,
 } from 'react-navigation';
-import { Assets as StackAssets } from 'react-navigation-stack';
+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';
+import ModalStack from './src/ModalStack';
+import SimpleStack from './src/SimpleStack';
+import SimpleTabs from './src/SimpleTabs';
+import StacksInTabs from './src/StacksInTabs';
+import StacksOverTabs from './src/StacksOverTabs';
+import StacksOverTopTabs from './src/StacksOverTopTabs';
+import StacksAndKeys from './src/StacksAndKeys';
+import StackWithCustomHeaderBackImage from './src/StackWithCustomHeaderBackImage';
+import StackWithHeaderPreset from './src/StackWithHeaderPreset';
+import StackWithTranslucentHeader from './src/StackWithTranslucentHeader';
+import SwitchWithStacks from './src/SwitchWithStacks';
+import TabsInDrawer from './src/TabsInDrawer';
 
-import CustomTabs from './CustomTabs';
-import CustomTransitioner from './CustomTransitioner';
-import Drawer from './Drawer';
-import MultipleDrawer from './MultipleDrawer';
-import TabsInDrawer from './TabsInDrawer';
-import ModalStack from './ModalStack';
-import StacksInTabs from './StacksInTabs';
-import StacksOverTabs from './StacksOverTabs';
-import StacksOverTopTabs from './StacksOverTopTabs';
-import StacksWithKeys from './StacksWithKeys';
-import InactiveStack from './InactiveStack';
-import StackWithCustomHeaderBackImage from './StackWithCustomHeaderBackImage';
-import SimpleStack from './SimpleStack';
-import StackWithHeaderPreset from './StackWithHeaderPreset';
-import StackWithTranslucentHeader from './StackWithTranslucentHeader';
-import SimpleTabs from './SimpleTabs';
-import CustomTabUI from './CustomTabUI';
-import SwitchWithStacks from './SwitchWithStacks';
-import TabsWithNavigationFocus from './TabsWithNavigationFocus';
-import TabsWithNavigationEvents from './TabsWithNavigationEvents';
-import KeyboardHandlingExample from './KeyboardHandlingExample';
-
-process.env.REACT_NAV_LOGGING = true;
-
-const ExampleInfo = {
-  SimpleStack: {
-    name: 'Stack Example',
-    description: 'A card stack',
-  },
-  SwitchWithStacks: {
-    name: 'Switch between routes',
-    description: 'Jump between routes',
-  },
-  InactiveStack: {
-    name: 'Navigate idempotently to stacks in inactive routes',
-    description:
-      'An inactive route in a stack should be given the opportunity to handle actions',
-  },
-  StackWithCustomHeaderBackImage: {
-    name: 'Custom header back image',
-    description: 'Stack with custom header back image',
-  },
-  SimpleTabs: {
-    name: 'Tabs Example',
-    description: 'Tabs following platform conventions',
-  },
-  Drawer: {
-    name: 'Drawer Example',
-    description: 'Android-style drawer navigation',
-  },
-  StackWithHeaderPreset: {
-    name: 'UIKit-style Header Transitions',
-    description: 'Masked back button and sliding header items. iOS only.',
-  },
-  StackWithTranslucentHeader: {
-    name: 'Translucent Header',
-    description: 'Render arbitrary translucent content in header background.',
-  },
-  // MultipleDrawer: {
-  //   name: 'Multiple Drawer Example',
-  //   description: 'Add any drawer you need',
-  // },
-  TabsInDrawer: {
-    name: 'Drawer + Tabs Example',
-    description: 'A drawer combined with tabs',
+const ExampleInfo: any = {
+  CustomTabUI: {
+    description: 'Render additional views around a Tab navigator',
+    name: 'Custom Tabs UI',
   },
   CustomTabs: {
-    name: 'Custom Tabs',
     description: 'Custom tabs with tab router',
+    name: 'Custom Tabs',
   },
   CustomTransitioner: {
-    name: 'Custom Transitioner',
     description: 'Custom transitioner with stack router',
+    name: 'Custom Transitioner',
+  },
+  Drawer: {
+    description: 'Android-style drawer navigation',
+    name: 'Drawer Example',
+  },
+  InactiveStack: {
+    description:
+      'An inactive route in a stack should be given the opportunity to handle actions',
+    name: 'Navigate idempotently to stacks in inactive routes',
+  },
+  KeyboardHandlingExample: {
+    description:
+      'Demo automatic handling of keyboard showing/hiding inside StackNavigator',
+    name: 'Keyboard Handling Example',
+  },
+  LinkStack: {
+    description: 'Deep linking into a route in stack',
+    name: 'Link in Stack',
+  },
+  LinkTabs: {
+    description: 'Deep linking into a route in tab',
+    name: 'Link to Settings Tab',
   },
   ModalStack: {
-    name:
-      Platform.OS === 'ios'
-        ? 'Modal Stack Example'
-        : 'Stack with Dynamic Header',
     description:
       Platform.OS === 'ios'
         ? 'Stack navigation with modals'
         : 'Dynamically showing and hiding the header',
+    name:
+      Platform.OS === 'ios'
+        ? 'Modal Stack Example'
+        : 'Stack with Dynamic Header',
+  },
+  SimpleStack: {
+    description: 'A card stack',
+    name: 'Stack Example',
+  },
+  SimpleTabs: {
+    description: 'Tabs following platform conventions',
+    name: 'Tabs Example',
+  },
+  StackWithCustomHeaderBackImage: {
+    description: 'Stack with custom header back image',
+    name: 'Custom header back image',
+  },
+  StackWithHeaderPreset: {
+    description: 'Masked back button and sliding header items. iOS only.',
+    name: 'UIKit-style Header Transitions',
+  },
+  StackWithTranslucentHeader: {
+    description: 'Render arbitrary translucent content in header background.',
+    name: 'Translucent Header',
   },
   StacksInTabs: {
-    name: 'Stacks in Tabs',
     description: 'Nested stack navigation in tabs',
+    name: 'Stacks in Tabs',
   },
   StacksOverTabs: {
-    name: 'Stacks over Tabs',
     description: 'Nested stack navigation that pushes on top of tabs',
+    name: 'Stacks over Tabs',
   },
   StacksOverTopTabs: {
-    name: 'Stacks with non-standard header height',
     description: 'Tab navigator in stack with custom header heights',
+    name: 'Stacks with non-standard header height',
   },
-  StacksWithKeys: {
-    name: 'Link in Stack with keys',
+  StacksAndKeys: {
     description: 'Use keys to link between screens',
+    name: 'Link in Stack with keys',
   },
-  LinkStack: {
-    name: 'Link in Stack',
-    description: 'Deep linking into a route in stack',
+  SwitchWithStacks: {
+    description: 'Jump between routes',
+    name: 'Switch between routes',
   },
-  LinkTabs: {
-    name: 'Link to Settings Tab',
-    description: 'Deep linking into a route in tab',
-  },
-  TabsWithNavigationFocus: {
-    name: 'withNavigationFocus',
-    description: 'Receive the focus prop to know when a screen is focused',
+  // MultipleDrawer: {
+  //   description: 'Add any drawer you need',
+  //   name: 'Multiple Drawer Example',
+  // },
+  TabsInDrawer: {
+    description: 'A drawer combined with tabs',
+    name: 'Drawer + Tabs Example',
   },
   TabsWithNavigationEvents: {
-    name: 'NavigationEvents',
     description:
       'Declarative NavigationEvents component to subscribe to navigation events',
+    name: 'NavigationEvents',
   },
-  KeyboardHandlingExample: {
-    name: 'Keyboard Handling Example',
-    description:
-      'Demo automatic handling of keyboard showing/hiding inside StackNavigator',
-  },
-  CustomTabUI: {
-    name: 'Custom Tabs UI',
-    description: 'Render additional views around a Tab navigator',
+  TabsWithNavigationFocus: {
+    description: 'Receive the focus prop to know when a screen is focused',
+    name: 'withNavigationFocus',
   },
 };
 
-const ExampleRoutes = {
+const ExampleRoutes: any = {
+  CustomTabUI,
+  CustomTabs,
+  Drawer,
+  ModalStack,
   SimpleStack,
+  SimpleTabs,
+  StackWithCustomHeaderBackImage,
+  StackWithTranslucentHeader,
+  StacksAndKeys,
+  StacksOverTabs,
   SwitchWithStacks,
-  SimpleTabs: SimpleTabs,
-  Drawer: Drawer,
-  // MultipleDrawer: {
-  //   screen: MultipleDrawer,
-  // },
-  StackWithCustomHeaderBackImage: StackWithCustomHeaderBackImage,
+  StacksOverTopTabs,
+  StacksInTabs,
   ...Platform.select({
-    ios: {
-      StackWithHeaderPreset: StackWithHeaderPreset,
-    },
     android: {},
+    ios: {
+      StackWithHeaderPreset,
+    },
   }),
-  StackWithTranslucentHeader: StackWithTranslucentHeader,
-  TabsInDrawer: TabsInDrawer,
-  CustomTabs: CustomTabs,
-  CustomTransitioner: CustomTransitioner,
-  ModalStack: ModalStack,
-  StacksWithKeys: StacksWithKeys,
-  StacksInTabs: StacksInTabs,
-  CustomTabUI: CustomTabUI,
-  StacksOverTabs: StacksOverTabs,
-  StacksOverTopTabs: StacksOverTopTabs,
+  TabsInDrawer,
   LinkStack: {
     screen: SimpleStack,
     path: 'people/Jordan',
@@ -187,32 +172,27 @@ const ExampleRoutes = {
     screen: SimpleTabs,
     path: 'settings',
   },
-  TabsWithNavigationFocus,
-  TabsWithNavigationEvents,
-  KeyboardHandlingExample,
-  // This is commented out because it's rarely useful
-  // InactiveStack,
 };
 
-type State = {
-  scrollY: Animated.Value,
-};
+interface State {
+  scrollY: Animated.Value;
+}
+
 class MainScreen extends React.Component<any, State> {
+  static contextType = ThemeContext;
+  context!: React.ContextType<typeof ThemeContext>;
+
   state = {
     scrollY: new Animated.Value(0),
   };
 
-  componentDidMount() {
-    Asset.loadAsync(StackAssets);
-  }
-
   render() {
     const { navigation } = this.props;
 
     const scale = this.state.scrollY.interpolate({
+      extrapolate: 'clamp',
       inputRange: [-450, 0, 100],
       outputRange: [2, 1, 0.8],
-      extrapolate: 'clamp',
     });
 
     const translateY = this.state.scrollY.interpolate({
@@ -221,21 +201,21 @@ class MainScreen extends React.Component<any, State> {
     });
 
     const opacity = this.state.scrollY.interpolate({
+      extrapolate: 'clamp',
       inputRange: [0, 50],
       outputRange: [1, 0],
-      extrapolate: 'clamp',
     });
 
     const underlayOpacity = this.state.scrollY.interpolate({
+      extrapolate: 'clamp',
       inputRange: [0, 50],
       outputRange: [0, 1],
-      extrapolate: 'clamp',
     });
 
     const backgroundScale = this.state.scrollY.interpolate({
+      extrapolate: 'clamp',
       inputRange: [-450, 0],
       outputRange: [3, 1],
-      extrapolate: 'clamp',
     });
 
     const backgroundTranslateY = this.state.scrollY.interpolate({
@@ -247,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(
               [
@@ -278,7 +258,7 @@ class MainScreen extends React.Component<any, State> {
               >
                 <View style={styles.banner}>
                   <Image
-                    source={require('./assets/NavLogo.png')}
+                    source={require('./src/assets/NavLogo.png')}
                     style={styles.bannerImage}
                   />
                   <Text style={styles.bannerTitle}>
@@ -292,14 +272,18 @@ 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}
                     underlayColor="#ccc"
                     activeOpacity={0.3}
                     onPress={() => {
-                      let route = ExampleRoutes[routeName];
+                      const route = ExampleRoutes[routeName];
                       if (route.screen || route.path || route.params) {
                         const { path, params, screen } = route;
                         const { router } = screen;
@@ -312,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>
@@ -335,7 +326,7 @@ class MainScreen extends React.Component<any, State> {
   }
 }
 
-const AppNavigator = createAppContainer(
+const Navigation = createAppContainer(
   createStackNavigator(
     {
       ...ExampleRoutes,
@@ -344,84 +335,120 @@ const AppNavigator = createAppContainer(
       },
     },
     {
-      initialRouteName: 'Index',
       headerMode: 'none',
+      initialRouteName: 'Index',
 
       /*
-     * Use modal on iOS because the card mode comes from the right,
-     * which conflicts with the drawer example gesture
-     */
+       * Use modal on iOS because the card mode comes from the right,
+       * which conflicts with the drawer example gesture
+       */
       mode: Platform.OS === 'ios' ? 'modal' : 'card',
     }
   )
 );
 
-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({
-  item: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#ddd',
-  },
-  image: {
-    width: 120,
-    height: 120,
-    alignSelf: 'center',
-    marginBottom: 20,
-    resizeMode: 'contain',
-  },
-  statusBarUnderlay: {
-    backgroundColor: '#673ab7',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: Constants.statusBarHeight,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#444',
-  },
-  description: {
-    fontSize: 13,
-    color: '#999',
-  },
   backgroundUnderlay: {
     backgroundColor: '#673ab7',
-    position: 'absolute',
-    top: -100,
     height: 300,
     left: 0,
+    position: 'absolute',
     right: 0,
+    top: -100,
+  },
+  banner: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 16,
   },
   bannerContainer: {
     // backgroundColor: '#673ab7',
     alignItems: 'center',
   },
-  banner: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-  },
   bannerImage: {
-    width: 36,
     height: 36,
+    margin: 8,
     resizeMode: 'contain',
     tintColor: '#fff',
-    margin: 8,
+    width: 36,
   },
   bannerTitle: {
+    color: '#fff',
     fontSize: 18,
     fontWeight: '200',
-    color: '#fff',
-    marginVertical: 8,
     marginRight: 5,
+    marginVertical: 8,
+  },
+  description: {
+    color: '#999',
+    fontSize: 13,
+  },
+  item: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  itemLight: {
+    borderBottomColor: ThemeColors.light.bodyBorder,
+  },
+  itemDark: {
+    borderBottomColor: ThemeColors.dark.bodyBorder,
+  },
+  statusBarUnderlay: {
+    backgroundColor: '#673ab7',
+    height: 20,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
   },
 });

example/app.json

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

example/metro.config.js

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

example/package.json

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

example/src/CustomTabUI.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import {
+  Alert,
+  TouchableOpacity,
+  LayoutAnimation,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import {
+  Themed,
+  ThemeContext,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
+} from 'react-navigation';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
+import { Button } from './commonComponents/ButtonWithMargin';
+
+interface Props {
+  navigation: NavigationScreenProp<NavigationState>;
+}
+
+class MyHomeScreen extends React.Component<Props> {
+  static navigationOptions = {
+    tabBarLabel: 'Home',
+    tabBarIcon: ({
+      tintColor,
+      focused,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
+      <Ionicons
+        name={focused ? 'ios-home' : 'ios-home'}
+        size={horizontal ? 20 : 26}
+        style={{ color: tintColor }}
+      />
+    ),
+  };
+  render() {
+    const { navigation } = this.props;
+    return (
+      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
+        <Themed.Text>Home Screen</Themed.Text>
+        <Button
+          onPress={() => navigation.navigate('Home')}
+          title="Go to home tab"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class StarredScreen extends React.Component<Props> {
+  static navigationOptions = {
+    tabBarLabel: 'Starred',
+    tabBarIcon: ({
+      tintColor,
+      focused,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
+      <Ionicons
+        name={focused ? 'ios-people' : 'ios-people'}
+        size={horizontal ? 20 : 26}
+        style={{ color: tintColor }}
+      />
+    ),
+  };
+  render() {
+    const { navigation } = this.props;
+    return (
+      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
+        <Themed.Text>Starred Screen</Themed.Text>
+        <Button
+          onPress={() => navigation.navigate('Home')}
+          title="Go to home tab"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+      </SafeAreaView>
+    );
+  }
+}
+
+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 = {
+    tabBarLabel: 'Featured',
+    tabBarIcon: ({
+      tintColor,
+      focused,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
+      <Ionicons
+        name={focused ? 'ios-star' : 'ios-star'}
+        size={horizontal ? 20 : 26}
+        style={{ color: tintColor }}
+      />
+    ),
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
+        <Themed.Text>Featured Screen</Themed.Text>
+        <Button
+          onPress={() => navigation.navigate('Home')}
+          title="Go to home tab"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+      </SafeAreaView>
+    );
+  }
+}
+
+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();
+  }
+  render() {
+    const { navigation } = this.props;
+    const { routes, index } = navigation.state;
+    const activeRoute = routes[index];
+    let bottom = null;
+    if (activeRoute.routeName !== 'Home') {
+      bottom = (
+        <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="light-content" />
+        <SimpleTabs navigation={navigation} />
+        {bottom}
+      </View>
+    );
+  }
+}
+
+export default TabNavigator;

example/src/CustomTabs.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+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 { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
+
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}) => (
+  <ScrollView>
+    <SafeAreaView forceInset={{ horizontal: 'always' }}>
+      <SampleText>{banner}</SampleText>
+      <Button
+        onPress={() => {
+          navigation.goBack(null);
+        }}
+        title="Go back"
+      />
+    </SafeAreaView>
+    <Themed.StatusBar />
+  </ScrollView>
+);
+
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
+
+const MyNotificationsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
+
+const MySettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />;
+
+const CustomTabBar = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => {
+  const { routes } = navigation.state;
+  return (
+    <SafeAreaView style={styles.tabContainer}>
+      {routes.map(route => (
+        <BorderlessButton
+          onPress={() => navigation.navigate(route.routeName)}
+          style={styles.tab}
+          key={route.routeName}
+        >
+          <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() {
+    const { navigation, descriptors } = this.props;
+    const { routes, index } = navigation.state;
+    const descriptor = descriptors[routes[index].key];
+    const ActiveScreen = descriptor.getComponent();
+    return (
+      <SafeAreaView forceInset={{ top: 'always' }}>
+        <CustomTabBar navigation={navigation} />
+        <ActiveScreen navigation={descriptor.navigation} />
+      </SafeAreaView>
+    );
+  }
+}
+
+const CustomTabRouter = TabRouter(
+  {
+    Home: {
+      path: '',
+      screen: MyHomeScreen,
+    },
+    Notifications: {
+      path: 'notifications',
+      screen: MyNotificationsScreen,
+    },
+    Settings: {
+      path: 'settings',
+      screen: MySettingsScreen,
+    },
+  },
+  {
+    // Change this to start on a different tab
+    initialRouteName: 'Home',
+  }
+);
+
+const CustomTabs = createAppContainer(
+  createNavigator(CustomTabView, CustomTabRouter, {})
+);
+
+const styles = StyleSheet.create({
+  tab: {
+    alignItems: 'center',
+    borderColor: '#ddd',
+    borderRadius: 4,
+    borderWidth: 1,
+    flex: 1,
+    justifyContent: 'center',
+    margin: 4,
+  },
+  tabContainer: {
+    flexDirection: 'row',
+    height: 48,
+  },
+});
+
+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,19 +1,24 @@
-/**
- * @flow
- */
-
 import React from 'react';
-import { Platform, ScrollView, StatusBar } from 'react-native';
+import { ScrollView, StyleProp, TextStyle } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
 import {
-  createStackNavigator,
-  createDrawerNavigator,
+  Themed,
   SafeAreaView,
+  NavigationScreenProp,
+  NavigationState,
 } from 'react-navigation';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import SampleText from './SampleText';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
 
-const MyNavScreen = ({ navigation, banner }) => (
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}) => (
   <ScrollView>
     <SafeAreaView forceInset={{ top: 'always' }}>
       <SampleText>{banner}</SampleText>
@@ -24,43 +29,49 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.navigate('Index')} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
-const InboxScreen = ({ navigation }) => (
-  <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />
-);
+const InboxScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Inbox Screen" navigation={navigation} />;
 InboxScreen.navigationOptions = {
   headerTitle: 'Inbox',
 };
 
-const EmailScreen = ({ navigation }) => (
-  <MyNavScreen banner={'Email Screen'} navigation={navigation} />
-);
+const EmailScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Email Screen" navigation={navigation} />;
 
-const DraftsScreen = ({ navigation }) => (
-  <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
-);
+const DraftsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Drafts Screen" navigation={navigation} />;
 DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };
 
 const InboxStack = createStackNavigator(
   {
-    Inbox: { screen: InboxScreen },
     Email: { screen: EmailScreen },
+    Inbox: { screen: InboxScreen },
   },
   {
     navigationOptions: {
-      drawerLabel: 'Inbox',
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons
           name="move-to-inbox"
           size={24}
-          style={{ color: tintColor }}
+          style={{ color: tintColor } as StyleProp<TextStyle>}
         />
       ),
+      drawerLabel: 'Inbox',
     },
   }
 );
@@ -72,31 +83,35 @@ const DraftsStack = createStackNavigator(
   },
   {
     navigationOptions: {
-      drawerLabel: 'Drafts',
-      drawerIcon: ({ tintColor }) => (
-        <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
+        <MaterialIcons
+          name="drafts"
+          size={24}
+          style={{ color: tintColor } as StyleProp<TextStyle>}
+        />
       ),
+      drawerLabel: 'Drafts',
     },
   }
 );
 
 const DrawerExample = createDrawerNavigator(
   {
-    Inbox: {
-      path: '/',
-      screen: InboxStack,
-    },
     Drafts: {
       path: '/sent',
       screen: DraftsStack,
     },
+    Inbox: {
+      path: '/',
+      screen: InboxStack,
+    },
   },
 
   {
-    initialRouteName: 'Drafts',
     contentOptions: {
       activeTintColor: '#e91e63',
     },
+    initialRouteName: 'Drafts',
   }
 );
 

example/src/ModalStack.tsx

@@ -1,14 +1,22 @@
-/**
- * @flow
- */
-
 import React from 'react';
-import { ScrollView, StatusBar, Text } from 'react-native';
-import { SafeAreaView, createStackNavigator } from 'react-navigation';
-import SampleText from './SampleText';
+import { ScrollView } from 'react-native';
+import {
+  NavigationScreenProp,
+  Themed,
+  SafeAreaView,
+  NavigationState,
+} from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
 
-const MyNavScreen = ({ navigation, banner }) => (
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationScreenProp<NavigationState & any>;
+  banner: string;
+}) => (
   <ScrollView>
     <SafeAreaView
       forceInset={{
@@ -38,25 +46,35 @@ const MyNavScreen = ({ navigation, banner }) => (
       )}
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <Themed.StatusBar />
   </ScrollView>
 );
 
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
-);
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
 MyHomeScreen.navigationOptions = {
   title: 'Welcome',
 };
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
-    banner={`${navigation.state.params.name}'s Profile`}
+    banner={`${navigation.state.params!.name}'s Profile`}
     navigation={navigation}
   />
 );
-MyProfileScreen.navigationOptions = ({ navigation }) => ({
-  title: `${navigation.state.params.name}'s Profile!`,
+MyProfileScreen.navigationOptions = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => ({
+  title: `${navigation.state.params!.name}'s Profile!`,
 });
 
 const ProfileNavigator = createStackNavigator(
@@ -77,10 +95,16 @@ const ProfileNavigator = createStackNavigator(
   }
 );
 
-const MyHeaderTestScreen = ({ navigation }) => (
-  <MyNavScreen banner={`Full screen view`} navigation={navigation} />
-);
-MyHeaderTestScreen.navigationOptions = ({ navigation }) => {
+const MyHeaderTestScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Full screen view" navigation={navigation} />;
+MyHeaderTestScreen.navigationOptions = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => {
   const headerVisible =
     navigation.state.params && navigation.state.params.headerVisible;
   return {
@@ -91,10 +115,10 @@ MyHeaderTestScreen.navigationOptions = ({ navigation }) => {
 
 const ModalStack = createStackNavigator(
   {
+    HeaderTest: { screen: MyHeaderTestScreen },
     ProfileNavigator: {
       screen: ProfileNavigator,
     },
-    HeaderTest: { screen: MyHeaderTestScreen },
   },
   {
     defaultNavigationOptions: {

example/src/SampleText.tsx

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

example/src/SimpleStack.tsx

@@ -1,64 +1,55 @@
-/**
- * @flow
- */
+// tslint:disable no-unused-expression
 
-import type {
+import * as React from 'react';
+import {
+  NavigationActions,
+  NavigationEventPayload,
+  NavigationEventSubscription,
   NavigationScreenProp,
   NavigationState,
   NavigationStateRoute,
-  NavigationEventSubscription,
-} from 'react-navigation';
-
-import * as React from 'react';
-import { Platform, ScrollView, StatusBar } from 'react-native';
-import {
-  createStackNavigator,
   SafeAreaView,
-  withNavigation,
-  NavigationActions,
   StackActions,
+  Themed,
+  withNavigation,
 } from 'react-navigation';
-import invariant from 'invariant';
-
-import SampleText from './SampleText';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
+import SampleText from './SampleText';
 
 const DEBUG = false;
 
-type MyNavScreenProps = {
-  navigation: NavigationScreenProp<NavigationState>,
-  banner: React.Node,
-};
+interface MyNavScreenProps {
+  // TODO: satya164 - use stack's navigation type
+  navigation: any;
+  banner: React.ReactNode;
+}
 
-type BackButtonProps = {
-  navigation: NavigationScreenProp<NavigationStateRoute>,
-};
+interface BackButtonProps {
+  navigation: NavigationScreenProp<NavigationStateRoute<any>>;
+}
 
 class MyBackButton extends React.Component<BackButtonProps, any> {
   render() {
     return (
       <HeaderButtons>
-        <HeaderButtons.Item title="Back" onPress={this._navigateBack} />
+        <HeaderButtons.Item title="Back" onPress={this.navigateBack} />
       </HeaderButtons>
     );
   }
 
-  _navigateBack = () => {
+  navigateBack = () => {
     this.props.navigation.goBack(null);
   };
 }
 
-const MyBackButtonWithNavigation = withNavigation(MyBackButton);
+const MyBackButtonWithNavigation: any = withNavigation(MyBackButton);
 
 class MyNavScreen extends React.Component<MyNavScreenProps> {
   render() {
     const { navigation, banner } = this.props;
     const { push, replace, popToTop, pop, dismiss } = navigation;
-    invariant(
-      push && replace && popToTop && pop && dismiss,
-      'missing action creators for StackNavigator'
-    );
     return (
       <SafeAreaView forceInset={{ top: 'never' }}>
         <SampleText>{banner}</SampleText>
@@ -70,13 +61,13 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           onPress={() =>
             navigation.dispatch(
               StackActions.reset({
-                index: 0,
                 actions: [
                   NavigationActions.navigate({
-                    routeName: 'Photos',
                     params: { name: 'Jane' },
+                    routeName: 'Photos',
                   }),
                 ],
+                index: 0,
               })
             )
           }
@@ -103,48 +94,48 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
           title="Go back"
         />
         <Button onPress={() => dismiss()} title="Dismiss" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
 }
 
-type MyHomeScreenProps = {
-  navigation: NavigationScreenProp<NavigationState>,
-};
+interface MyHomeScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
 
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+    this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
+    this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
+    this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
+    this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    this.s0!.remove();
+    this.s1!.remove();
+    this.s2!.remove();
+    this.s3!.remove();
   }
-  _onWF = a => {
-    DEBUG && console.log('_willFocus HomeScreen', a);
+  onWF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willFocus HomeScreen', a);
   };
-  _onDF = a => {
-    DEBUG && console.log('_didFocus HomeScreen', a);
+  onDF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didFocus HomeScreen', a);
   };
-  _onWB = a => {
-    DEBUG && console.log('_willBlur HomeScreen', a);
+  onWB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willBlur HomeScreen', a);
   };
-  _onDB = a => {
-    DEBUG && console.log('_didBlur HomeScreen', a);
+  onDB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didBlur HomeScreen', a);
   };
 
   render() {
@@ -153,42 +144,44 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-type MyPhotosScreenProps = {
-  navigation: NavigationScreenProp<NavigationState>,
-};
+interface MyPhotosScreenProps {
+  // TODO: satya164 - use stack's navigation type
+  navigation: any;
+}
+
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
+    headerLeft: () => <MyBackButtonWithNavigation />,
     title: 'Photos',
-    headerLeft: <MyBackButtonWithNavigation />,
   };
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
 
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+    this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
+    this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
+    this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
+    this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    this.s0!.remove();
+    this.s1!.remove();
+    this.s2!.remove();
+    this.s3!.remove();
   }
-  _onWF = a => {
-    DEBUG && console.log('_willFocus PhotosScreen', a);
+  onWF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willFocus PhotosScreen', a);
   };
-  _onDF = a => {
-    DEBUG && console.log('_didFocus PhotosScreen', a);
+  onDF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didFocus PhotosScreen', a);
   };
-  _onWB = a => {
-    DEBUG && console.log('_willBlur PhotosScreen', a);
+  onWB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willBlur PhotosScreen', a);
   };
-  _onDB = a => {
-    DEBUG && console.log('_didBlur PhotosScreen', a);
+  onDB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didBlur PhotosScreen', a);
   };
 
   render() {
@@ -202,7 +195,11 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   }
 }
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
     banner={`${
       navigation.getParam('mode') === 'edit' ? 'Now Editing ' : ''
@@ -211,25 +208,25 @@ const MyProfileScreen = ({ navigation }) => (
   />
 );
 
-MyProfileScreen.navigationOptions = props => {
+MyProfileScreen.navigationOptions = (props: MyHomeScreenProps) => {
   const { navigation } = props;
   const { state, setParams } = navigation;
   const { params } = state;
   return {
-    headerBackImage: params.headerBackImage,
-    headerTitle: `${params.name}'s Profile!`,
+    headerBackImage: params!.headerBackImage,
     // Render a button on the right side of the header.
     // When pressed switches the screen to edit mode.
     headerRight: (
       <HeaderButtons>
         <HeaderButtons.Item
-          title={params.mode === 'edit' ? 'Done' : 'Edit'}
+          title={params!.mode === 'edit' ? 'Done' : 'Edit'}
           onPress={() =>
-            setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
+            setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
           }
         />
       </HeaderButtons>
     ),
+    headerTitle: `${params!.name}'s Profile!`,
   };
 };
 
@@ -238,14 +235,14 @@ const SimpleStack = createStackNavigator(
     Home: {
       screen: MyHomeScreen,
     },
-    Profile: {
-      path: 'people/:name',
-      screen: MyProfileScreen,
-    },
     Photos: {
       path: 'photos/:name',
       screen: MyPhotosScreen,
     },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
   },
   {
     // headerLayoutPreset: 'center',

example/src/SimpleTabs.tsx

@@ -1,31 +1,31 @@
-/**
- * @flow
- */
-
-import type {
-  NavigationScreenProp,
-  NavigationEventSubscription,
-} from 'react-navigation';
-
 import React from 'react';
-import { Animated, Platform, Text, StatusBar, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  ScrollView,
   FlatList,
+  NavigationEventSubscription,
+  NavigationScreenProp,
   SafeAreaView,
-  createBottomTabNavigator,
-  withNavigation,
+  Themed,
+  ScrollView,
+  NavigationEventPayload,
+  NavigationState,
 } from 'react-navigation';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import SampleText from './SampleText';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
 
 const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
 Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
 Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
 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.`;
-const MyNavScreen = ({ navigation, banner }) => (
-  <ScrollView navigation={navigation} style={{ flex: 1 }}>
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}) => (
+  <ScrollView style={{ flex: 1 }}>
     <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
       <SampleText>{banner}</SampleText>
       <Button
@@ -38,81 +38,100 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <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, data }) => (
+const MyListScreen = () => (
   <FlatList
-    navigation={navigation}
     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>
     )}
   />
 );
 
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Tab" navigation={navigation} />
-);
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Home Tab" navigation={navigation} />;
 
 MyHomeScreen.navigationOptions = {
-  tabBarTestIDProps: {
-    testID: 'TEST_ID_HOME',
-    accessibilityLabel: 'TEST_ID_HOME_ACLBL',
-  },
-  tabBarLabel: 'Home',
-  tabBarIcon: ({ tintColor, focused, horizontal }) => (
+  tabBarIcon: ({
+    tintColor,
+    horizontal,
+  }: {
+    tintColor: string;
+    focused: boolean;
+    horizontal: boolean;
+  }) => (
     <Ionicons
-      name={'ios-home'}
+      name="ios-home"
       size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />
   ),
+  tabBarLabel: 'Home',
+  tabBarTestIDProps: {
+    accessibilityLabel: 'TEST_ID_HOME_ACLBL',
+    testID: 'TEST_ID_HOME',
+  },
 };
 MyListScreen.navigationOptions = MyHomeScreen.navigationOptions;
 
-type MyPeopleScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyPeopleScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
-
   static navigationOptions = {
-    tabBarLabel: 'People',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
+    tabBarIcon: ({
+      tintColor,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
       <Ionicons
-        name={'ios-people'}
+        name="ios-people"
         size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
     ),
+    tabBarLabel: 'People',
   };
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
   componentDidMount() {
-    // this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    // this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    // this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    // this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
+    // this.s0! = this.props.navigation.addListener('willFocus', this.onEvent);
+    // this.s1! = this.props.navigation.addListener('didFocus', this.onEvent);
+    // this.s2! = this.props.navigation.addListener('willBlur', this.onEvent);
+    // this.s3! = this.props.navigation.addListener('didBlur', this.onEvent);
   }
   componentWillUnmount() {
-    // this._s0.remove();
-    // this._s1.remove();
-    // this._s2.remove();
-    // this._s3.remove();
+    // this.s0!.remove();
+    // this.s1!.remove();
+    // this.s2!.remove();
+    // this.s3!.remove();
   }
-  _onEvent = a => {
+  onEvent = (a: NavigationEventPayload) => {
     console.log('EVENT ON PEOPLE TAB', a.type, a);
   };
   render() {
@@ -121,38 +140,44 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
   }
 }
 
-type MyChatScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyChatScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyChatScreen extends React.Component<MyChatScreenProps> {
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
-
   static navigationOptions = {
-    tabBarLabel: 'Chat',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
+    tabBarIcon: ({
+      tintColor,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
       <Ionicons
-        name={'ios-chatboxes'}
+        name="ios-chatboxes"
         size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
     ),
+    tabBarLabel: 'Chat',
   };
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
   componentDidMount() {
-    // this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    // this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    // this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    // this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
+    // this.s0! = this.props.navigation.addListener('willFocus', this.onEvent);
+    // this.s1! = this.props.navigation.addListener('didFocus', this.onEvent);
+    // this.s2! = this.props.navigation.addListener('willBlur', this.onEvent);
+    // this.s3! = this.props.navigation.addListener('didBlur', this.onEvent);
   }
   componentWillUnmount() {
-    // this._s0.remove();
-    // this._s1.remove();
-    // this._s2.remove();
-    // this._s3.remove();
+    // this.s0!.remove();
+    // this.s1!.remove();
+    // this.s2!.remove();
+    // this.s3!.remove();
   }
-  _onEvent = a => {
+  onEvent = (a: NavigationEventPayload) => {
     console.log('EVENT ON CHAT TAB', a.type, a);
   };
   render() {
@@ -161,38 +186,47 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
   }
 }
 
-const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Settings Tab" navigation={navigation} />
-);
+const MySettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Settings Tab" navigation={navigation} />;
 
 MySettingsScreen.navigationOptions = {
-  tabBarLabel: 'Settings',
-  tabBarIcon: ({ tintColor, focused, horizontal }) => (
+  tabBarIcon: ({
+    tintColor,
+    horizontal,
+  }: {
+    tintColor: string;
+    focused: boolean;
+    horizontal: boolean;
+  }) => (
     <Ionicons
-      name={'ios-settings'}
+      name="ios-settings"
       size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />
   ),
+  tabBarLabel: 'Settings',
 };
 
 const SimpleTabs = createBottomTabNavigator(
   {
+    Chat: {
+      path: 'chat',
+      screen: MyChatScreen,
+    },
     Home: {
-      screen: MyListScreen,
       path: '',
+      screen: MyListScreen,
     },
     People: {
-      screen: MyPeopleScreen,
       path: 'cart',
-    },
-    Chat: {
-      screen: MyChatScreen,
-      path: 'chat',
+      screen: MyPeopleScreen,
     },
     Settings: {
-      screen: MySettingsScreen,
       path: 'settings',
+      screen: MySettingsScreen,
     },
   },
   {
@@ -203,30 +237,30 @@ const SimpleTabs = createBottomTabNavigator(
   }
 );
 
-type SimpleTabsContainerProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface SimpleTabsContainerProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 
 class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
   static router = SimpleTabs.router;
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
 
   componentDidMount() {
-    // this._s0 = this.props.navigation.addListener('willFocus', this._onAction);
-    // this._s1 = this.props.navigation.addListener('didFocus', this._onAction);
-    // this._s2 = this.props.navigation.addListener('willBlur', this._onAction);
-    // this._s3 = this.props.navigation.addListener('didBlur', this._onAction);
+    // this.s0! = this.props.navigation.addListener('willFocus', this.onAction);
+    // this.s1! = this.props.navigation.addListener('didFocus', this.onAction);
+    // this.s2! = this.props.navigation.addListener('willBlur', this.onAction);
+    // this.s3! = this.props.navigation.addListener('didBlur', this.onAction);
   }
   componentWillUnmount() {
-    // this._s0.remove();
-    // this._s1.remove();
-    // this._s2.remove();
-    // this._s3.remove();
+    // this.s0!.remove();
+    // this.s1!.remove();
+    // this.s2!.remove();
+    // this.s3!.remove();
   }
-  _onAction = a => {
+  onAction = (a: NavigationEventPayload) => {
     console.log('TABS EVENT', a.type, a);
   };
   render() {

example/src/StackWithCustomHeaderBackImage.tsx

@@ -1,18 +1,19 @@
-/**
- * @flow
- */
-
-import type { NavigationScreenProp } from 'react-navigation';
-
 import * as React from 'react';
-import { Image, Button, StatusBar, StyleSheet } from 'react-native';
-import { createStackNavigator, SafeAreaView } from 'react-navigation';
+import { Button, Image, StyleSheet } from 'react-native';
+import {
+  NavigationScreenProp,
+  NavigationState,
+  NavigationScreenConfigProps,
+  Themed,
+  SafeAreaView,
+} from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import SampleText from './SampleText';
 
-type MyNavScreenProps = {
-  navigation: NavigationScreenProp<*>,
-  banner: React.Node,
-};
+interface MyNavScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: React.ReactNode;
+}
 
 class MyCustomHeaderBackImage extends React.Component<any, any> {
   render() {
@@ -37,20 +38,20 @@ 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>
     );
   }
 }
 
-type MyHomeScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyHomeScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   static navigationOptions = {
-    title: 'Welcome',
     headerBackTitle: null,
+    title: 'Welcome',
   };
 
   render() {
@@ -59,49 +60,50 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-type MyPhotosScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyPhotosScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
-  static navigationOptions = ({ navigation }) => ({
-    title: `${navigation.state.params.name}'s photos`,
+  static navigationOptions = ({
+    navigation,
+  }: {
+    navigation: NavigationScreenProp<NavigationState>;
+  }) => ({
     headerBackTitle: null,
+    title: `${navigation.state.params!.name}'s photos`,
   });
 
   render() {
     const { navigation } = this.props;
     return (
       <SafeAreaView>
-        <SampleText>{`${navigation.state.params.name}'s Photos`}</SampleText>
+        <SampleText>{`${navigation.state.params!.name}'s Photos`}</SampleText>
         <Button
           onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
           title="Navigate to a profile screen"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
 }
 
-type MyProfileScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyProfileScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyProfileScreen extends React.Component<MyProfileScreenProps> {
-  static navigationOptions = ({ navigation }) => ({
+  static navigationOptions = {
     title: 'Profile',
-    headerBackImage: (
-      <MyCustomHeaderBackImage style={styles.myCustomHeaderBackImageAlt} />
-    ),
-  });
+  };
 
   render() {
     const { navigation } = this.props;
     return (
       <SafeAreaView>
-        <SampleText>{`${navigation.state.params.name}'s Profile`}</SampleText>
+        <SampleText>{`${navigation.state.params!.name}'s Profile`}</SampleText>
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -122,9 +124,21 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
-      headerBackImage: MyCustomHeaderBackImage,
-    },
+    // TODO: satya164 - use stack's navigation type
+    defaultNavigationOptions: ({
+      theme,
+    }: NavigationScreenConfigProps<any>) => ({
+      headerBackImage: (
+        <MyCustomHeaderBackImage
+          style={[
+            styles.myCustomHeaderBackImageAlt,
+            {
+              tintColor: theme === 'light' ? '#000' : '#fff',
+            },
+          ]}
+        />
+      ),
+    }),
   }
 );
 
@@ -133,13 +147,11 @@ export default StackWithCustomHeaderBackImage;
 const styles = StyleSheet.create({
   myCustomHeaderBackImage: {
     height: 14.5,
-    width: 24,
     marginLeft: 9,
     marginRight: 12,
     marginVertical: 12,
     resizeMode: 'contain',
+    width: 24,
   },
-  myCustomHeaderBackImageAlt: {
-    tintColor: '#f00',
-  },
+  myCustomHeaderBackImageAlt: {},
 });

example/src/StackWithHeaderPreset.tsx

@@ -1,18 +1,13 @@
-/**
- * @flow
- */
-import type { NavigationScreenProp } from 'react-navigation';
-
 import * as React from 'react';
-import { ScrollView, StatusBar } from 'react-native';
-import { createStackNavigator, SafeAreaView } from 'react-navigation';
-import invariant from 'invariant';
+import { SafeAreaView, Themed } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 
-type NavScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface NavScreenProps {
+  // TODO: satya164 - use stack's navigation type
+  navigation: any;
+}
 
 class HomeScreen extends React.Component<NavScreenProps> {
   static navigationOptions = {
@@ -22,7 +17,6 @@ class HomeScreen extends React.Component<NavScreenProps> {
   render() {
     const { navigation } = this.props;
     const { push } = navigation;
-    invariant(push, 'missing `push` action creator for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
@@ -32,7 +26,7 @@ class HomeScreen extends React.Component<NavScreenProps> {
           title="Push screen with no header"
         />
         <Button onPress={() => navigation.goBack(null)} title="Go Home" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -46,7 +40,6 @@ class OtherScreen extends React.Component<NavScreenProps> {
   render() {
     const { navigation } = this.props;
     const { push, pop } = navigation;
-    invariant(push && pop, 'missing action creators for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
@@ -60,7 +53,7 @@ class OtherScreen extends React.Component<NavScreenProps> {
         />
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -74,13 +67,12 @@ class ScreenWithLongTitle extends React.Component<NavScreenProps> {
   render() {
     const { navigation } = this.props;
     const { pop } = navigation;
-    invariant(pop, 'missing `pop` action creator for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
         <Button onPress={() => pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </SafeAreaView>
     );
   }
@@ -95,14 +87,13 @@ class ScreenWithNoHeader extends React.Component<NavScreenProps> {
   render() {
     const { navigation } = this.props;
     const { push, pop } = navigation;
-    invariant(push && pop, 'missing action creators for StackNavigator');
 
     return (
       <SafeAreaView style={{ paddingTop: 30 }}>
         <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>
     );
   }
@@ -112,8 +103,8 @@ const StackWithHeaderPreset = createStackNavigator(
   {
     Home: HomeScreen,
     Other: OtherScreen,
-    ScreenWithNoHeader: ScreenWithNoHeader,
-    ScreenWithLongTitle: ScreenWithLongTitle,
+    ScreenWithLongTitle,
+    ScreenWithNoHeader,
   },
   {
     headerTransitionPreset: 'uikit',

example/src/StackWithTranslucentHeader.tsx

@@ -1,48 +1,34 @@
-/**
- * @flow
- */
-
-import type {
-  NavigationScreenProp,
-  NavigationEventSubscription,
-} from 'react-navigation';
-
-import { isIphoneX } from 'react-native-iphone-x-helper';
-
 import * as React from 'react';
-import { BlurView, Constants } from 'expo';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { isIphoneX } from 'react-native-iphone-x-helper';
 import {
-  Dimensions,
-  Platform,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  View,
-} from 'react-native';
+  NavigationEventPayload,
+  NavigationEventSubscription,
+  NavigationScreenProp,
+  NavigationState,
+  Themed,
+  SupportedThemes,
+} from 'react-navigation';
 import {
+  createStackNavigator,
   Header,
   HeaderStyleInterpolator,
-  createStackNavigator,
-} from 'react-navigation';
-import invariant from 'invariant';
-
-import SampleText from './SampleText';
+} from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
+import SampleText from './SampleText';
 
-type MyNavScreenProps = {
-  navigation: NavigationScreenProp<*>,
-  banner: React.Node,
-};
+interface MyNavScreenProps {
+  // TODO: satya164 - use stack's navigation type
+  navigation: any;
+  banner: React.ReactNode;
+}
 
 class MyNavScreen extends React.Component<MyNavScreenProps> {
   render() {
     const { navigation, banner } = this.props;
     const { push, replace, popToTop, pop } = navigation;
-    invariant(
-      push && replace && popToTop && pop,
-      'missing action creators for StackNavigator'
-    );
     return (
       <ScrollView style={{ flex: 1 }} {...this.getHeaderInset()}>
         <SampleText>{banner}</SampleText>
@@ -61,7 +47,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>
     );
   }
@@ -70,7 +56,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
   // And improved abstraction for this will be built in to react-navigation
   // at some point.
 
-  getHeaderInset() {
+  getHeaderInset(): any {
     const NOTCH_HEIGHT = isIphoneX() ? 25 : 0;
 
     // $FlowIgnore: we will remove the HEIGHT static soon enough
@@ -79,58 +65,58 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
     const HEADER_HEIGHT =
       Platform.OS === 'ios'
         ? BASE_HEADER_HEIGHT + NOTCH_HEIGHT
-        : BASE_HEADER_HEIGHT + Constants.statusBarHeight;
+        : BASE_HEADER_HEIGHT + 20;
 
     return Platform.select({
-      ios: {
-        contentInset: { top: HEADER_HEIGHT },
-        contentOffset: { y: -HEADER_HEIGHT },
-      },
       android: {
         contentContainerStyle: {
           paddingTop: HEADER_HEIGHT,
         },
       },
+      ios: {
+        contentInset: { top: HEADER_HEIGHT },
+        contentOffset: { y: -HEADER_HEIGHT },
+      },
     });
   }
 }
 
-type MyHomeScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyHomeScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 
 class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   static navigationOptions = {
     title: 'Welcome',
   };
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
 
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+    this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
+    this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
+    this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
+    this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    this.s0!.remove();
+    this.s1!.remove();
+    this.s2!.remove();
+    this.s3!.remove();
   }
-  _onWF = a => {
-    console.log('_willFocus HomeScreen', a);
+  onWF = (a: NavigationEventPayload) => {
+    console.log('willFocus HomeScreen', a);
   };
-  _onDF = a => {
-    console.log('_didFocus HomeScreen', a);
+  onDF = (a: NavigationEventPayload) => {
+    console.log('didFocus HomeScreen', a);
   };
-  _onWB = a => {
-    console.log('_willBlur HomeScreen', a);
+  onWB = (a: NavigationEventPayload) => {
+    console.log('willBlur HomeScreen', a);
   };
-  _onDB = a => {
-    console.log('_didBlur HomeScreen', a);
+  onDB = (a: NavigationEventPayload) => {
+    console.log('didBlur HomeScreen', a);
   };
 
   render() {
@@ -139,82 +125,90 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-type MyPhotosScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyPhotosScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
     title: 'Photos',
   };
-  _s0: NavigationEventSubscription;
-  _s1: NavigationEventSubscription;
-  _s2: NavigationEventSubscription;
-  _s3: NavigationEventSubscription;
+  s0: NavigationEventSubscription | null = null;
+  s1: NavigationEventSubscription | null = null;
+  s2: NavigationEventSubscription | null = null;
+  s3: NavigationEventSubscription | null = null;
 
   componentDidMount() {
-    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
-    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
-    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
-    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+    this.s0 = this.props.navigation.addListener('willFocus', this.onWF);
+    this.s1 = this.props.navigation.addListener('didFocus', this.onDF);
+    this.s2 = this.props.navigation.addListener('willBlur', this.onWB);
+    this.s3 = this.props.navigation.addListener('didBlur', this.onDB);
   }
   componentWillUnmount() {
-    this._s0.remove();
-    this._s1.remove();
-    this._s2.remove();
-    this._s3.remove();
+    this.s0!.remove();
+    this.s1!.remove();
+    this.s2!.remove();
+    this.s3!.remove();
   }
-  _onWF = a => {
-    console.log('_willFocus PhotosScreen', a);
+  onWF = (a: NavigationEventPayload) => {
+    console.log('willFocus PhotosScreen', a);
   };
-  _onDF = a => {
-    console.log('_didFocus PhotosScreen', a);
+  onDF = (a: NavigationEventPayload) => {
+    console.log('didFocus PhotosScreen', a);
   };
-  _onWB = a => {
-    console.log('_willBlur PhotosScreen', a);
+  onWB = (a: NavigationEventPayload) => {
+    console.log('willBlur PhotosScreen', a);
   };
-  _onDB = a => {
-    console.log('_didBlur PhotosScreen', a);
+  onDB = (a: NavigationEventPayload) => {
+    console.log('didBlur PhotosScreen', a);
   };
 
   render() {
     const { navigation } = this.props;
     return (
       <MyNavScreen
-        banner={`${navigation.state.params.name}'s Photos`}
+        banner={`${navigation.state.params!.name}'s Photos`}
         navigation={navigation}
       />
     );
   }
 }
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
-    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${
-      navigation.state.params.name
+    banner={`${navigation.state.params!.mode === 'edit' ? 'Now Editing ' : ''}${
+      navigation.state.params!.name
     }'s Profile`}
     navigation={navigation}
   />
 );
 
-MyProfileScreen.navigationOptions = props => {
-  const { navigation } = props;
+MyProfileScreen.navigationOptions = (props: {
+  navigation: NavigationScreenProp<NavigationState>;
+  theme: SupportedThemes;
+}) => {
+  const { navigation, theme } = props;
   const { state, setParams } = navigation;
   const { params } = state;
   return {
-    headerBackImage: params.headerBackImage,
-    headerTitle: `${params.name}'s Profile!`,
+    headerBackImage: params!.headerBackImage,
     // Render a button on the right side of the header.
     // When pressed switches the screen to edit mode.
     headerRight: (
       <HeaderButtons>
         <HeaderButtons.Item
-          title={params.mode === 'edit' ? 'Done' : 'Edit'}
+          color={theme === 'light' ? '#000' : '#fff'}
+          title={params!.mode === 'edit' ? 'Done' : 'Edit'}
           onPress={() =>
-            setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
+            setParams({ mode: params!.mode === 'edit' ? '' : 'edit' })
           }
         />
       </HeaderButtons>
     ),
+    headerTitle: `${params!.name}'s Profile!`,
   };
 };
 
@@ -223,16 +217,32 @@ const StackWithTranslucentHeader = createStackNavigator(
     Home: {
       screen: MyHomeScreen,
     },
-    Profile: {
-      path: 'people/:name',
-      screen: MyProfileScreen,
-    },
     Photos: {
       path: 'photos/:name',
       screen: MyPhotosScreen,
     },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
   },
   {
+    defaultNavigationOptions: ({ theme }) => ({
+      headerBackground:
+        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: 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
@@ -240,19 +250,6 @@ const StackWithTranslucentHeader = createStackNavigator(
       headerBackgroundInterpolator:
         HeaderStyleInterpolator.forBackgroundWithTranslation,
     }),
-    defaultNavigationOptions: {
-      headerTransparent: true,
-      headerStyle: {
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: '#A7A7AA',
-      },
-      headerBackground: Platform.select({
-        ios: <BlurView style={{ flex: 1 }} intensity={98} />,
-        android: (
-          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
-        ),
-      }),
-    },
   }
 );
 

example/src/StacksAndKeys.tsx

@@ -1,9 +1,18 @@
 import React from 'react';
-import { StatusBar, Text, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation';
+import { Text, View } from 'react-native';
+import {
+  NavigationScreenProp,
+  NavigationState,
+  Themed,
+} from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-class HomeScreen extends React.Component<any, any> {
+interface Props {
+  navigation: NavigationScreenProp<NavigationState & any>;
+}
+
+class HomeScreen extends React.Component<Props, any> {
   render() {
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -12,9 +21,9 @@ class HomeScreen extends React.Component<any, any> {
           title="Navigate to 'Profile' with key 'A'"
           onPress={() =>
             this.props.navigation.navigate({
-              routeName: 'Profile',
               key: 'A',
               params: { homeKey: this.props.navigation.state.key },
+              routeName: 'Profile',
             })
           }
         />
@@ -22,7 +31,7 @@ class HomeScreen extends React.Component<any, any> {
           title="Go back to other examples"
           onPress={() => this.props.navigation.goBack(null)}
         />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }
@@ -38,9 +47,9 @@ class ProfileScreen extends React.Component<any, any> {
           title="Navigate to 'Settings' with key 'B'"
           onPress={() =>
             this.props.navigation.navigate({
-              routeName: 'Settings',
               key: 'B',
               params: { homeKey },
+              routeName: 'Settings',
             })
           }
         />
@@ -55,9 +64,9 @@ class ProfileScreen extends React.Component<any, any> {
   }
 }
 
-class SettingsScreen extends React.Component<any, any> {
+class SettingsScreen extends React.Component<Props, any> {
   render() {
-    const { homeKey } = this.props.navigation.state.params;
+    const { homeKey } = this.props.navigation.state.params!;
 
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -72,8 +81,8 @@ class SettingsScreen extends React.Component<any, any> {
           title="Navigate back to 'Profile' with key 'A'"
           onPress={() =>
             this.props.navigation.navigate({
-              routeName: 'Profile',
               key: 'A',
+              routeName: 'Profile',
             })
           }
         />

example/src/StacksInTabs.tsx

@@ -1,27 +1,29 @@
-/**
- * @flow
- */
-
 import React from 'react';
-import { StatusBar, Text } from 'react-native';
+import { Text } from 'react-native';
 import {
-  ScrollView,
+  Themed,
+  NavigationScreenProp,
+  NavigationState,
   SafeAreaView,
-  createStackNavigator,
-  createBottomTabNavigator,
-  withNavigation,
+  ScrollView,
 } from 'react-navigation';
-
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import SampleText from './SampleText';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import { Ionicons } from '@expo/vector-icons';
 import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
 
 const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
 Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
 Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
 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.`;
 
-class MyNavScreen extends React.Component {
+interface Props {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}
+
+class MyNavScreen extends React.Component<Props> {
   render() {
     const { navigation } = this.props;
     const banner = navigation.getParam('banner');
@@ -51,77 +53,97 @@ class MyNavScreen extends React.Component {
           ))}
         </SafeAreaView>
 
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </ScrollView>
     );
   }
 }
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
-    banner={`${navigation.state.params.name}s Profile`}
+    banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}
   />
 );
 
 const MainTab = createStackNavigator({
   Home: {
-    screen: MyNavScreen,
-    path: '/',
-    params: { banner: 'Home Screen' },
     navigationOptions: {
       title: 'Welcome',
     },
+    params: { banner: 'Home Screen' },
+    path: '/',
+    screen: MyNavScreen,
   },
   Profile: {
-    screen: MyProfileScreen,
-    path: '/people/:name',
-    navigationOptions: ({ navigation }) => ({
-      title: `${navigation.state.params.name}'s Profile!`,
+    navigationOptions: ({
+      navigation,
+    }: {
+      navigation: NavigationScreenProp<NavigationState>;
+    }) => ({
+      title: `${navigation.state.params!.name}'s Profile!`,
     }),
+    path: '/people/:name',
+    screen: MyProfileScreen,
   },
 });
 
 const SettingsTab = createStackNavigator({
-  Settings: {
-    screen: MyNavScreen,
-    path: '/',
-    params: { banner: 'Settings Screen' },
-    navigationOptions: () => ({
-      title: 'Settings',
-    }),
-  },
   NotifSettings: {
-    screen: MyNavScreen,
-    params: { banner: 'Notifications Screen' },
     navigationOptions: {
       title: 'Notifications',
     },
+    params: { banner: 'Notifications Screen' },
+    screen: MyNavScreen,
+  },
+  Settings: {
+    navigationOptions: () => ({
+      title: 'Settings',
+    }),
+    params: { banner: 'Settings Screen' },
+    path: '/',
+    screen: MyNavScreen,
   },
 });
 
 const StacksInTabs = createBottomTabNavigator(
   {
     MainTab: {
-      screen: MainTab,
-      path: '/',
       navigationOptions: {
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ tintColor, focused }) => (
+        tabBarIcon: ({
+          tintColor,
+          focused,
+        }: {
+          tintColor: string;
+          focused: boolean;
+        }) => (
           <Ionicons
             name={focused ? 'ios-home' : 'ios-home'}
             size={26}
             style={{ color: tintColor }}
           />
         ),
+        tabBarLabel: 'Home',
       },
+      path: '/',
+      screen: MainTab,
     },
     SettingsTab: {
       screen: SettingsTab,
       path: '/settings',
       navigationOptions: {
         tabBarLabel: 'Settings',
-        tabBarIcon: ({ tintColor, focused }) => (
+        tabBarIcon: ({
+          tintColor,
+          focused,
+        }: {
+          tintColor: string;
+          focused: boolean;
+        }) => (
           <Ionicons
             name={focused ? 'ios-settings' : 'ios-settings'}
             size={26}

example/src/StacksOverTabs.tsx

@@ -1,21 +1,24 @@
-/**
- * @flow
- */
-
 import React from 'react';
 import { ScrollView, StatusBar } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import {
-  SafeAreaView,
-  createStackNavigator,
-  createBottomTabNavigator,
   getActiveChildNavigationOptions,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
 } from 'react-navigation';
-
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import SampleText from './SampleText';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
 
-const MyNavScreen = ({ navigation, banner }) => (
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}) => (
   <ScrollView>
     <SafeAreaView forceInset={{ horizontal: 'always', vertical: 'never' }}>
       <SampleText>{banner}</SampleText>
@@ -37,65 +40,93 @@ const MyNavScreen = ({ navigation, banner }) => (
   </ScrollView>
 );
 
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
-);
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Home Screen" navigation={navigation} />;
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
-    banner={`${navigation.state.params.name}s Profile`}
+    banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}
   />
 );
 
-const MyNotificationsSettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
-);
+const MyNotificationsSettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
 
-const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Settings Screen" navigation={navigation} />
-);
+const MySettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />;
 
 const TabNav = createBottomTabNavigator(
   {
     MainTab: {
-      screen: MyHomeScreen,
-      path: '/',
       navigationOptions: {
-        title: 'Welcome',
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ tintColor, focused }) => (
+        tabBarIcon: ({
+          tintColor,
+          focused,
+        }: {
+          tintColor: string;
+          focused: boolean;
+        }) => (
           <Ionicons
             name={focused ? 'ios-home' : 'ios-home'}
             size={26}
             style={{ color: tintColor }}
           />
         ),
+        tabBarLabel: 'Home',
+        title: 'Welcome',
       },
+      path: '/',
+      screen: MyHomeScreen,
     },
     SettingsTab: {
-      screen: MySettingsScreen,
-      path: '/settings',
       navigationOptions: {
-        title: 'Settings',
-        tabBarIcon: ({ tintColor, focused }) => (
+        tabBarIcon: ({
+          tintColor,
+          focused,
+        }: {
+          tintColor: string;
+          focused: boolean;
+        }) => (
           <Ionicons
             name={focused ? 'ios-settings' : 'ios-settings'}
             size={26}
             style={{ color: tintColor }}
           />
         ),
+        title: 'Settings',
       },
+      path: '/settings',
+      screen: MySettingsScreen,
     },
   },
   {
-    tabBarPosition: 'bottom',
     animationEnabled: false,
     swipeEnabled: false,
+    tabBarPosition: 'bottom',
   }
 );
 
-TabNav.navigationOptions = ({ navigation, screenProps }) => {
+TabNav.navigationOptions = ({
+  navigation,
+  screenProps,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  screenProps: { [key: string]: any };
+}) => {
   const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
   return {
     title: childOptions.title,
@@ -103,21 +134,25 @@ TabNav.navigationOptions = ({ navigation, screenProps }) => {
 };
 
 const StacksOverTabs = createStackNavigator({
-  Root: {
-    screen: TabNav,
-  },
   NotifSettings: {
-    screen: MyNotificationsSettingsScreen,
     navigationOptions: {
       title: 'Notifications',
     },
+    screen: MyNotificationsSettingsScreen,
   },
   Profile: {
-    screen: MyProfileScreen,
-    path: '/people/:name',
-    navigationOptions: ({ navigation }) => ({
-      title: `${navigation.state.params.name}'s Profile!`,
+    navigationOptions: ({
+      navigation,
+    }: {
+      navigation: NavigationScreenProp<NavigationState>;
+    }) => ({
+      title: `${navigation.state.params!.name}'s Profile!`,
     }),
+    path: '/people/:name',
+    screen: MyProfileScreen,
+  },
+  Root: {
+    screen: TabNav,
   },
 });
 

example/src/StacksOverTopTabs.tsx

@@ -1,23 +1,36 @@
-/**
- * @flow
- */
-
 import React from 'react';
-import { View, ScrollView, StatusBar, StyleSheet } from 'react-native';
 import {
+  ScrollView,
+  StatusBar,
+  StatusBarStyle,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  NavigationScreenProp,
+  NavigationState,
   SafeAreaView,
-  createStackNavigator,
-  createMaterialTopTabNavigator,
 } from 'react-navigation';
-import { Constants } from 'expo';
-import { MaterialTopTabBar } from 'react-navigation-tabs';
+import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabBar,
+} from 'react-navigation-tabs';
 
-import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
 
 const HEADER_HEIGHT = 64;
 
-const MyNavScreen = ({ navigation, banner, statusBarStyle }) => (
+const MyNavScreen = ({
+  navigation,
+  banner,
+  statusBarStyle,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+  statusBarStyle?: StatusBarStyle;
+}) => (
   <ScrollView>
     <SafeAreaView forceInset={{ horizontal: 'always' }}>
       <SampleText>{banner}</SampleText>
@@ -39,7 +52,11 @@ const MyNavScreen = ({ navigation, banner, statusBarStyle }) => (
   </ScrollView>
 );
 
-const MyHomeScreen = ({ navigation }) => (
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
     banner="Home Screen"
     navigation={navigation}
@@ -47,18 +64,28 @@ const MyHomeScreen = ({ navigation }) => (
   />
 );
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
-    banner={`${navigation.state.params.name}s Profile`}
+    banner={`${navigation.state.params!.name}s Profile`}
     navigation={navigation}
   />
 );
 
-const MyNotificationsSettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
-);
+const MyNotificationsSettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Notifications Screen" navigation={navigation} />;
 
-const MySettingsScreen = ({ navigation }) => (
+const MySettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
     banner="Settings Screen"
     navigation={navigation}
@@ -75,15 +102,20 @@ const styles = StyleSheet.create({
   },
 });
 
-function MaterialTopTabBarWithStatusBar(props) {
+function MaterialTopTabBarWithStatusBar(props: any) {
   return (
     <View
       style={{
-        paddingTop: Constants.statusBarHeight,
+        paddingTop: 20,
         backgroundColor: '#2196f3',
       }}
     >
-      <MaterialTopTabBar {...props} jumpToIndex={() => {}} />
+      <MaterialTopTabBar
+        {...props}
+        jumpToIndex={() => {
+          //
+        }}
+      />
     </View>
   );
 }
@@ -127,8 +159,12 @@ const StackNavigator = createStackNavigator(
     },
     Profile: {
       screen: MyProfileScreen,
-      navigationOptions: ({ navigation }) => ({
-        title: `${navigation.state.params.name}'s Profile!`,
+      navigationOptions: ({
+        navigation,
+      }: {
+        navigation: NavigationScreenProp<NavigationState>;
+      }) => ({
+        title: `${navigation.state.params!.name}'s Profile!`,
       }),
     },
   },

example/src/SwitchWithStacks.tsx

@@ -1,16 +1,13 @@
-/**
- * @flow
- */
-
 import React from 'react';
 import {
   ActivityIndicator,
   AsyncStorage,
-  StatusBar,
   StyleSheet,
   View,
+  Platform,
 } from 'react-native';
-import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
+import { Themed, createSwitchNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Button } from './commonComponents/ButtonWithMargin';
 
 class SignInScreen extends React.Component<any, any> {
@@ -21,17 +18,17 @@ class SignInScreen extends React.Component<any, any> {
   render() {
     return (
       <View style={styles.container}>
-        <Button title="Sign in!" onPress={this._signInAsync} />
+        <Button title="Sign in!" onPress={this.signInAsync} />
         <Button
           title="Go back to other examples"
           onPress={() => this.props.navigation.goBack(null)}
         />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }
 
-  _signInAsync = async () => {
+  signInAsync = async () => {
     await AsyncStorage.setItem('userToken', 'abc');
     this.props.navigation.navigate('Home');
   };
@@ -45,19 +42,24 @@ class HomeScreen extends React.Component<any, any> {
   render() {
     return (
       <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" />
+        <Button title="Show me more of the app" onPress={this.showMoreApp} />
+        <Button title="Actually, sign me out :)" onPress={this.signOutAsync} />
+        <Themed.StatusBar />
       </View>
     );
   }
 
-  _showMoreApp = () => {
+  showMoreApp = () => {
     this.props.navigation.navigate('Other');
   };
 
-  _signOutAsync = async () => {
-    await AsyncStorage.clear();
+  signOutAsync = async () => {
+    if (Platform.OS === 'ios') {
+      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
+    } else {
+      await AsyncStorage.clear();
+    }
+
     this.props.navigation.navigate('Auth');
   };
 }
@@ -70,26 +72,31 @@ class OtherScreen extends React.Component<any, any> {
   render() {
     return (
       <View style={styles.container}>
-        <Button title="I'm done, sign me out" onPress={this._signOutAsync} />
-        <StatusBar barStyle="default" />
+        <Button title="I'm done, sign me out" onPress={this.signOutAsync} />
+        <Themed.StatusBar />
       </View>
     );
   }
 
-  _signOutAsync = async () => {
-    await AsyncStorage.clear();
+  signOutAsync = async () => {
+    if (Platform.OS === 'ios') {
+      await AsyncStorage.getAllKeys().then(AsyncStorage.multiRemove);
+    } else {
+      await AsyncStorage.clear();
+    }
+
     this.props.navigation.navigate('Auth');
   };
 }
 
 class LoadingScreen extends React.Component<any, any> {
   componentDidMount() {
-    this._bootstrapAsync();
+    this.bootstrapAsync();
   }
 
-  _bootstrapAsync = async () => {
+  bootstrapAsync = async () => {
     const userToken = await AsyncStorage.getItem('userToken');
-    let initialRouteName = userToken ? 'App' : 'Auth';
+    const initialRouteName = userToken ? 'App' : 'Auth';
     this.props.navigation.navigate(initialRouteName);
   };
 
@@ -97,7 +104,7 @@ class LoadingScreen extends React.Component<any, any> {
     return (
       <View style={styles.container}>
         <ActivityIndicator />
-        <StatusBar barStyle="default" />
+        <Themed.StatusBar />
       </View>
     );
   }
@@ -105,8 +112,8 @@ class LoadingScreen extends React.Component<any, any> {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: 'center',
+    flex: 1,
     justifyContent: 'center',
   },
 });
@@ -115,7 +122,7 @@ const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
 const AuthStack = createStackNavigator({ SignIn: SignInScreen });
 
 export default createSwitchNavigator({
-  Loading: LoadingScreen,
   App: AppStack,
   Auth: AuthStack,
+  Loading: LoadingScreen,
 });

example/src/TabsInDrawer.tsx

@@ -1,32 +1,27 @@
-/**
- * @flow
- */
-
 import React from 'react';
-import { Platform, ScrollView } from 'react-native';
-import { createDrawerNavigator } from 'react-navigation';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { MaterialIcons } from '@expo/vector-icons';
+import { createDrawerNavigator } from 'react-navigation-drawer';
 import SimpleTabs from './SimpleTabs';
 import StacksOverTabs from './StacksOverTabs';
 
 const TabsInDrawer = createDrawerNavigator({
   SimpleTabs: {
-    screen: SimpleTabs,
     navigationOptions: {
-      drawerLabel: 'Simple tabs',
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons name="filter-1" size={24} style={{ color: tintColor }} />
       ),
+      drawerLabel: 'Simple tabs',
     },
+    screen: SimpleTabs,
   },
   StacksOverTabs: {
-    screen: StacksOverTabs,
     navigationOptions: {
-      drawerLabel: 'Stacks Over Tabs',
-      drawerIcon: ({ tintColor }) => (
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
         <MaterialIcons name="filter-2" size={24} style={{ color: tintColor }} />
       ),
+      drawerLabel: 'Stacks Over Tabs',
     },
+    screen: StacksOverTabs,
   },
 });
 

example/src/commonComponents/Button.tsx

@@ -1,45 +1,49 @@
 import React from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { BorderlessButton, RectButton } from 'react-native-gesture-handler';
+import {
+  AccessibilityStates,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
-const invariant = require('fbjs/lib/invariant');
-
-type ButtonProps = $ReadOnly<{|
+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) => mixed,
+  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
@@ -47,11 +51,7 @@ type ButtonProps = $ReadOnly<{|
  *
  * <center><img src="img/buttonExample.png"></img></center>
  *
- * If this button doesn't look right for your app, you can build your own
- * button using [TouchableOpacity](docs/touchableopacity.html)
- * or [TouchableNativeFeedback](docs/touchablenativefeedback.html).
- * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
- * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
+ * This button is built using TouchableOpacity
  *
  * Example usage:
  *
@@ -76,90 +76,81 @@ export default class Button extends React.Component<ButtonProps> {
       color,
       onPress,
       title,
-      hasTVPreferredFocus,
       disabled,
       testID,
     } = this.props;
-    const buttonStyles = [styles.button];
-    const textStyles = [styles.text];
+    const buttonStyles: any = [styles.button];
+    const textStyles: any = [styles.text];
     if (color) {
       if (Platform.OS === 'ios') {
-        textStyles.push({ color: color });
+        textStyles.push({ color });
       } else {
         buttonStyles.push({ backgroundColor: color });
       }
     }
-    const accessibilityStates = [];
+    const accessibilityStates: AccessibilityStates[] = [];
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
       accessibilityStates.push('disabled');
     }
-    invariant(
-      typeof title === 'string',
-      'The title prop of a Button must be a string'
-    );
     const formattedTitle =
       Platform.OS === 'android' ? title.toUpperCase() : title;
-    const Touchable = Platform.OS === 'android' ? RectButton : BorderlessButton;
     return (
-      <Touchable
+      <TouchableOpacity
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
         accessibilityStates={accessibilityStates}
-        hasTVPreferredFocus={hasTVPreferredFocus}
         testID={testID}
         disabled={disabled}
         onPress={onPress}
       >
         <View style={buttonStyles}>
-          <Text style={textStyles} disabled={disabled}>
-            {formattedTitle}
-          </Text>
+          <Text style={textStyles}>{formattedTitle}</Text>
         </View>
-      </Touchable>
+      </TouchableOpacity>
     );
   }
 }
 
 const styles = StyleSheet.create({
   button: Platform.select({
-    ios: {},
     android: {
-      elevation: 4,
-      // Material design blue from https://material.google.com/style/color.html#color-color-palette
       backgroundColor: '#2196F3',
       borderRadius: 2,
+      elevation: 4,
+      // Material design blue from https://material.google.com/style/color.html#color-color-palette
     },
+    ios: {},
+  }),
+  buttonDisabled: Platform.select({
+    android: {
+      backgroundColor: '#dfdfdf',
+      elevation: 0,
+    },
+    ios: {},
   }),
   text: {
-    textAlign: 'center',
     padding: 8,
+    textAlign: 'center',
     ...Platform.select({
+      android: {
+        color: 'white',
+        fontWeight: '500',
+      },
       ios: {
         // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
         color: '#007AFF',
         fontSize: 18,
       },
-      android: {
-        color: 'white',
-        fontWeight: '500',
-      },
     }),
   },
-  buttonDisabled: Platform.select({
-    ios: {},
-    android: {
-      elevation: 0,
-      backgroundColor: '#dfdfdf',
-    },
-  }),
   textDisabled: Platform.select({
-    ios: {
-      color: '#cdcdcd',
-    },
     android: {
       color: '#a1a1a1',
     },
+    ios: {
+      color: '#cdcdcd',
+    },
   }),
 });

example/src/commonComponents/ButtonWithMargin.tsx

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

example/src/commonComponents/HeaderButtons.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {
+  HeaderButtons as DefaultHeaderButtons,
+  Item,
+} from 'react-navigation-header-buttons';
+
+export class HeaderButtons extends React.PureComponent {
+  static Item = Item;
+
+  render() {
+    return (
+      <DefaultHeaderButtons
+        // color={Platform.OS === 'ios' ? '#037aff' : 'black'}
+        {...this.props}
+      />
+    );
+  }
+}

examples/NavigationPlayground/.babelrc

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

examples/NavigationPlayground/.flowconfig

@@ -1,79 +0,0 @@
-[ignore]
-; We fork some components by platform
-.*/*[.]android.js
-
-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
-
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-
-; Ignore polyfills
-.*/Libraries/polyfills/.*
-
-.*/react-navigation/node_modules/.*
-
-; Additional create-react-native-app ignores
-
-; Ignore duplicate module providers
-.*/node_modules/fbemitter/lib/*
-
-; Ignore misbehaving dev-dependencies
-.*/node_modules/xdl/build/*
-.*/node_modules/reqwest/tests/*
-
-; Ignore missing expo-sdk dependencies (temporarily)
-; https://github.com/expo/expo/issues/162
-.*/node_modules/expo/src/*
-
-; Ignore react-native-fbads dependency of the expo sdk
-.*/node_modules/react-native-fbads/*
-
-.*/react-navigation/examples/ReduxExample/.*
-.*/react-navigation/website/.*
-
-; This package is required by Expo and causes Flow errors
-.*/node_modules/react-native-gesture-handler/.*
-
-.*/node_modules/metro/.*
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow/
-node_modules/react-native/flow-github/
-../../flow/
-
-[options]
-module.system=haste
-
-emoji=true
-
-munge_underscores=true
-
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
-module.file_ext=.js
-module.file_ext=.jsx
-module.file_ext=.json
-module.file_ext=.native.js
-
-suppress_type=$FlowIgnore
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FlowFixMeProps
-suppress_type=$FlowFixMeState
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
-[version]
-^0.67.0

examples/NavigationPlayground/.gitignore

@@ -1,3 +0,0 @@
-node_modules/
-.expo/
-npm-debug.*

examples/NavigationPlayground/.watchmanconfig

@@ -1 +0,0 @@
-{}

examples/NavigationPlayground/App.js

@@ -1,9 +0,0 @@
-import { Platform } from 'react-native';
-import { useScreens } from 'react-native-screens';
-
-if (Platform.OS === 'android') {
-  //  useScreens();
-}
-
-import App from './js/App';
-export default App;

examples/NavigationPlayground/App.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import App from './App';
-
-import renderer from 'react-test-renderer';
-
-it('renders without crashing', () => {
-  const rendered = renderer.create(<App />).toJSON();
-  // Will be null because the playground uses state persistence which happens asyncronously
-  expect(rendered).toEqual(null);
-});

examples/NavigationPlayground/README.md

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

examples/NavigationPlayground/app.json

@@ -1,26 +0,0 @@
-{
-  "expo": {
-    "name": "NavigationPlayground",
-    "description": "Try out react-navigation now with this awesome playground",
-    "version": "1.0.0",
-    "slug": "NavigationPlayground",
-    "privacy": "public",
-    "orientation": "portrait",
-    "primaryColor": "#cccccc",
-    "icon": "./assets/icons/icon.png",
-    "splash": {
-      "image": "./assets/icons/splash.png"
-    },
-    "sdkVersion": "32.0.0",
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "bundleIdentifier": "com.reactnavigation.example",
-      "supportsTablet": true
-    },
-    "android": {
-      "package": "com.reactnavigation.example"
-    }
-  }
-}

examples/NavigationPlayground/flow-typed/npm/babel-jest_vx.x.x.js

@@ -1,32 +0,0 @@
-// flow-typed signature: ee7b4028012cfdcd83cc6541a39b2282
-// flow-typed version: <<STUB>>/babel-jest_v^21.0.0/flow_v0.61.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'babel-jest'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'babel-jest' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'babel-jest/build/index' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'babel-jest/build/index.js' {
-  declare module.exports: $Exports<'babel-jest/build/index'>;
-}

examples/NavigationPlayground/flow-typed/npm/expo_vx.x.x.js

@@ -1,823 +0,0 @@
-// flow-typed signature: c1ecfe71fbb86c3602b7da3d7c141df1
-// flow-typed version: <<STUB>>/expo_v^24.0.2/flow_v0.61.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'expo'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'expo' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'expo/AppEntry' {
-  declare module.exports: any;
-}
-
-declare module 'expo/flow/metro-bundler' {
-  declare module.exports: any;
-}
-
-declare module 'expo/flow/react-native-gesture-handler' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__mocks__/Constants-development' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Amplitude-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/AuthSession-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Constants-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/ErrorRecovery-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Expo-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Facebook-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Font-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Location-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Notifications-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/SecureStore-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/Segment-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/__tests__/WebBrowser-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/admob/RNAdMobBanner' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/admob/RNAdMobInterstitial' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/admob/RNAdMobRewarded' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/admob/RNPublisherBanner' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Amplitude' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/apisAreAvailable' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Asset' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/AuthSession' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/av/Audio' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/av/Audio/Recording' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/av/Audio/Sound' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/av/AV' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/av/Video' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/BarCodeScanner.android' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/BarCodeScanner.ios' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Brightness' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Camera' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/CameraBasedBarCodeScanner' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Constants' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Contacts' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/DangerZone' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/DocumentPicker' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/effects/BlurView.android' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/effects/BlurView.ios' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/effects/LinearGradient.android' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/effects/LinearGradient.ios' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/environment/__tests__/validate-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/environment/logging' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/environment/validate' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/ErrorRecovery' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Expo' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/facebook-ads/AdSettings' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/facebook-ads/BannerViewManager' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/facebook-ads/index' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/facebook-ads/InterstitialAdManager' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/facebook-ads/NativeAdsManager' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/facebook-ads/withNativeAd' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Facebook' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/FaceDetector' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/FileSystem' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Fingerprint' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Font' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/GLView' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Google' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Icon' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/ImageManipulator' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/ImagePicker' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/IntentLauncherAndroid' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/KeepAwake' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/launch/AppLoading' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/launch/AppLoadingNativeWrapper.android' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/launch/AppLoadingNativeWrapper.ios' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/launch/registerRootComponent' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/launch/RootErrorBoundary' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/lib/Queue' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Location' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/__tests__/Logs-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/__tests__/LogSerialization-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/__tests__/RemoteConsole-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/__tests__/RemoteLogging-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/__tests__/RemoteLogs-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/Logs' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/LogSerialization' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/RemoteConsole' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/logs/RemoteLogging' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/modal/Modal' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/modal/ModalHost' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/modal/ModalImplementation' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/modal/PureContainer' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Notifications' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/OldBarCodeScanner' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Payments' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Pedometer' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Permissions' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/ScreenOrientation' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/SecureStore' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Segment' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/__tests__/Accelerometer-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/__tests__/DeviceMotion-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/__tests__/DeviceSensor-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/__tests__/Gyroscope-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/__tests__/Magnetometer-test' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/Accelerometer' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/DeviceMotion' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/DeviceSensor' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/Gyroscope' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/Magnetometer' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/MagnetometerUncalibrated' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/sensor/ThreeAxisSensor' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Speech' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/SQLite' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Svg' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/takeSnapshotAsync' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/timer/polyfillNextTick' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/Util' {
-  declare module.exports: any;
-}
-
-declare module 'expo/src/WebBrowser' {
-  declare module.exports: any;
-}
-
-declare module 'expo/tools/hashAssetFiles' {
-  declare module.exports: any;
-}
-
-declare module 'expo/tools/LogReporter' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'expo/AppEntry.js' {
-  declare module.exports: $Exports<'expo/AppEntry'>;
-}
-declare module 'expo/flow/metro-bundler.js' {
-  declare module.exports: $Exports<'expo/flow/metro-bundler'>;
-}
-declare module 'expo/flow/react-native-gesture-handler.js' {
-  declare module.exports: $Exports<'expo/flow/react-native-gesture-handler'>;
-}
-declare module 'expo/src/__mocks__/Constants-development.js' {
-  declare module.exports: $Exports<'expo/src/__mocks__/Constants-development'>;
-}
-declare module 'expo/src/__tests__/Amplitude-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Amplitude-test'>;
-}
-declare module 'expo/src/__tests__/AuthSession-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/AuthSession-test'>;
-}
-declare module 'expo/src/__tests__/Constants-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Constants-test'>;
-}
-declare module 'expo/src/__tests__/ErrorRecovery-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/ErrorRecovery-test'>;
-}
-declare module 'expo/src/__tests__/Expo-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Expo-test'>;
-}
-declare module 'expo/src/__tests__/Facebook-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Facebook-test'>;
-}
-declare module 'expo/src/__tests__/Font-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Font-test'>;
-}
-declare module 'expo/src/__tests__/Location-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Location-test'>;
-}
-declare module 'expo/src/__tests__/Notifications-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Notifications-test'>;
-}
-declare module 'expo/src/__tests__/SecureStore-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/SecureStore-test'>;
-}
-declare module 'expo/src/__tests__/Segment-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/Segment-test'>;
-}
-declare module 'expo/src/__tests__/WebBrowser-test.js' {
-  declare module.exports: $Exports<'expo/src/__tests__/WebBrowser-test'>;
-}
-declare module 'expo/src/admob/RNAdMobBanner.js' {
-  declare module.exports: $Exports<'expo/src/admob/RNAdMobBanner'>;
-}
-declare module 'expo/src/admob/RNAdMobInterstitial.js' {
-  declare module.exports: $Exports<'expo/src/admob/RNAdMobInterstitial'>;
-}
-declare module 'expo/src/admob/RNAdMobRewarded.js' {
-  declare module.exports: $Exports<'expo/src/admob/RNAdMobRewarded'>;
-}
-declare module 'expo/src/admob/RNPublisherBanner.js' {
-  declare module.exports: $Exports<'expo/src/admob/RNPublisherBanner'>;
-}
-declare module 'expo/src/Amplitude.js' {
-  declare module.exports: $Exports<'expo/src/Amplitude'>;
-}
-declare module 'expo/src/apisAreAvailable.js' {
-  declare module.exports: $Exports<'expo/src/apisAreAvailable'>;
-}
-declare module 'expo/src/Asset.js' {
-  declare module.exports: $Exports<'expo/src/Asset'>;
-}
-declare module 'expo/src/AuthSession.js' {
-  declare module.exports: $Exports<'expo/src/AuthSession'>;
-}
-declare module 'expo/src/av/Audio.js' {
-  declare module.exports: $Exports<'expo/src/av/Audio'>;
-}
-declare module 'expo/src/av/Audio/Recording.js' {
-  declare module.exports: $Exports<'expo/src/av/Audio/Recording'>;
-}
-declare module 'expo/src/av/Audio/Sound.js' {
-  declare module.exports: $Exports<'expo/src/av/Audio/Sound'>;
-}
-declare module 'expo/src/av/AV.js' {
-  declare module.exports: $Exports<'expo/src/av/AV'>;
-}
-declare module 'expo/src/av/Video.js' {
-  declare module.exports: $Exports<'expo/src/av/Video'>;
-}
-declare module 'expo/src/BarCodeScanner.android.js' {
-  declare module.exports: $Exports<'expo/src/BarCodeScanner.android'>;
-}
-declare module 'expo/src/BarCodeScanner.ios.js' {
-  declare module.exports: $Exports<'expo/src/BarCodeScanner.ios'>;
-}
-declare module 'expo/src/Brightness.js' {
-  declare module.exports: $Exports<'expo/src/Brightness'>;
-}
-declare module 'expo/src/Camera.js' {
-  declare module.exports: $Exports<'expo/src/Camera'>;
-}
-declare module 'expo/src/CameraBasedBarCodeScanner.js' {
-  declare module.exports: $Exports<'expo/src/CameraBasedBarCodeScanner'>;
-}
-declare module 'expo/src/Constants.js' {
-  declare module.exports: $Exports<'expo/src/Constants'>;
-}
-declare module 'expo/src/Contacts.js' {
-  declare module.exports: $Exports<'expo/src/Contacts'>;
-}
-declare module 'expo/src/DangerZone.js' {
-  declare module.exports: $Exports<'expo/src/DangerZone'>;
-}
-declare module 'expo/src/DocumentPicker.js' {
-  declare module.exports: $Exports<'expo/src/DocumentPicker'>;
-}
-declare module 'expo/src/effects/BlurView.android.js' {
-  declare module.exports: $Exports<'expo/src/effects/BlurView.android'>;
-}
-declare module 'expo/src/effects/BlurView.ios.js' {
-  declare module.exports: $Exports<'expo/src/effects/BlurView.ios'>;
-}
-declare module 'expo/src/effects/LinearGradient.android.js' {
-  declare module.exports: $Exports<'expo/src/effects/LinearGradient.android'>;
-}
-declare module 'expo/src/effects/LinearGradient.ios.js' {
-  declare module.exports: $Exports<'expo/src/effects/LinearGradient.ios'>;
-}
-declare module 'expo/src/environment/__tests__/validate-test.js' {
-  declare module.exports: $Exports<'expo/src/environment/__tests__/validate-test'>;
-}
-declare module 'expo/src/environment/logging.js' {
-  declare module.exports: $Exports<'expo/src/environment/logging'>;
-}
-declare module 'expo/src/environment/validate.js' {
-  declare module.exports: $Exports<'expo/src/environment/validate'>;
-}
-declare module 'expo/src/ErrorRecovery.js' {
-  declare module.exports: $Exports<'expo/src/ErrorRecovery'>;
-}
-declare module 'expo/src/Expo.js' {
-  declare module.exports: $Exports<'expo/src/Expo'>;
-}
-declare module 'expo/src/facebook-ads/AdSettings.js' {
-  declare module.exports: $Exports<'expo/src/facebook-ads/AdSettings'>;
-}
-declare module 'expo/src/facebook-ads/BannerViewManager.js' {
-  declare module.exports: $Exports<'expo/src/facebook-ads/BannerViewManager'>;
-}
-declare module 'expo/src/facebook-ads/index.js' {
-  declare module.exports: $Exports<'expo/src/facebook-ads/index'>;
-}
-declare module 'expo/src/facebook-ads/InterstitialAdManager.js' {
-  declare module.exports: $Exports<'expo/src/facebook-ads/InterstitialAdManager'>;
-}
-declare module 'expo/src/facebook-ads/NativeAdsManager.js' {
-  declare module.exports: $Exports<'expo/src/facebook-ads/NativeAdsManager'>;
-}
-declare module 'expo/src/facebook-ads/withNativeAd.js' {
-  declare module.exports: $Exports<'expo/src/facebook-ads/withNativeAd'>;
-}
-declare module 'expo/src/Facebook.js' {
-  declare module.exports: $Exports<'expo/src/Facebook'>;
-}
-declare module 'expo/src/FaceDetector.js' {
-  declare module.exports: $Exports<'expo/src/FaceDetector'>;
-}
-declare module 'expo/src/FileSystem.js' {
-  declare module.exports: $Exports<'expo/src/FileSystem'>;
-}
-declare module 'expo/src/Fingerprint.js' {
-  declare module.exports: $Exports<'expo/src/Fingerprint'>;
-}
-declare module 'expo/src/Font.js' {
-  declare module.exports: $Exports<'expo/src/Font'>;
-}
-declare module 'expo/src/GLView.js' {
-  declare module.exports: $Exports<'expo/src/GLView'>;
-}
-declare module 'expo/src/Google.js' {
-  declare module.exports: $Exports<'expo/src/Google'>;
-}
-declare module 'expo/src/Icon.js' {
-  declare module.exports: $Exports<'expo/src/Icon'>;
-}
-declare module 'expo/src/ImageManipulator.js' {
-  declare module.exports: $Exports<'expo/src/ImageManipulator'>;
-}
-declare module 'expo/src/ImagePicker.js' {
-  declare module.exports: $Exports<'expo/src/ImagePicker'>;
-}
-declare module 'expo/src/IntentLauncherAndroid.js' {
-  declare module.exports: $Exports<'expo/src/IntentLauncherAndroid'>;
-}
-declare module 'expo/src/KeepAwake.js' {
-  declare module.exports: $Exports<'expo/src/KeepAwake'>;
-}
-declare module 'expo/src/launch/AppLoading.js' {
-  declare module.exports: $Exports<'expo/src/launch/AppLoading'>;
-}
-declare module 'expo/src/launch/AppLoadingNativeWrapper.android.js' {
-  declare module.exports: $Exports<'expo/src/launch/AppLoadingNativeWrapper.android'>;
-}
-declare module 'expo/src/launch/AppLoadingNativeWrapper.ios.js' {
-  declare module.exports: $Exports<'expo/src/launch/AppLoadingNativeWrapper.ios'>;
-}
-declare module 'expo/src/launch/registerRootComponent.js' {
-  declare module.exports: $Exports<'expo/src/launch/registerRootComponent'>;
-}
-declare module 'expo/src/launch/RootErrorBoundary.js' {
-  declare module.exports: $Exports<'expo/src/launch/RootErrorBoundary'>;
-}
-declare module 'expo/src/lib/Queue.js' {
-  declare module.exports: $Exports<'expo/src/lib/Queue'>;
-}
-declare module 'expo/src/Location.js' {
-  declare module.exports: $Exports<'expo/src/Location'>;
-}
-declare module 'expo/src/logs/__tests__/Logs-test.js' {
-  declare module.exports: $Exports<'expo/src/logs/__tests__/Logs-test'>;
-}
-declare module 'expo/src/logs/__tests__/LogSerialization-test.js' {
-  declare module.exports: $Exports<'expo/src/logs/__tests__/LogSerialization-test'>;
-}
-declare module 'expo/src/logs/__tests__/RemoteConsole-test.js' {
-  declare module.exports: $Exports<'expo/src/logs/__tests__/RemoteConsole-test'>;
-}
-declare module 'expo/src/logs/__tests__/RemoteLogging-test.js' {
-  declare module.exports: $Exports<'expo/src/logs/__tests__/RemoteLogging-test'>;
-}
-declare module 'expo/src/logs/__tests__/RemoteLogs-test.js' {
-  declare module.exports: $Exports<'expo/src/logs/__tests__/RemoteLogs-test'>;
-}
-declare module 'expo/src/logs/Logs.js' {
-  declare module.exports: $Exports<'expo/src/logs/Logs'>;
-}
-declare module 'expo/src/logs/LogSerialization.js' {
-  declare module.exports: $Exports<'expo/src/logs/LogSerialization'>;
-}
-declare module 'expo/src/logs/RemoteConsole.js' {
-  declare module.exports: $Exports<'expo/src/logs/RemoteConsole'>;
-}
-declare module 'expo/src/logs/RemoteLogging.js' {
-  declare module.exports: $Exports<'expo/src/logs/RemoteLogging'>;
-}
-declare module 'expo/src/modal/Modal.js' {
-  declare module.exports: $Exports<'expo/src/modal/Modal'>;
-}
-declare module 'expo/src/modal/ModalHost.js' {
-  declare module.exports: $Exports<'expo/src/modal/ModalHost'>;
-}
-declare module 'expo/src/modal/ModalImplementation.js' {
-  declare module.exports: $Exports<'expo/src/modal/ModalImplementation'>;
-}
-declare module 'expo/src/modal/PureContainer.js' {
-  declare module.exports: $Exports<'expo/src/modal/PureContainer'>;
-}
-declare module 'expo/src/Notifications.js' {
-  declare module.exports: $Exports<'expo/src/Notifications'>;
-}
-declare module 'expo/src/OldBarCodeScanner.js' {
-  declare module.exports: $Exports<'expo/src/OldBarCodeScanner'>;
-}
-declare module 'expo/src/Payments.js' {
-  declare module.exports: $Exports<'expo/src/Payments'>;
-}
-declare module 'expo/src/Pedometer.js' {
-  declare module.exports: $Exports<'expo/src/Pedometer'>;
-}
-declare module 'expo/src/Permissions.js' {
-  declare module.exports: $Exports<'expo/src/Permissions'>;
-}
-declare module 'expo/src/ScreenOrientation.js' {
-  declare module.exports: $Exports<'expo/src/ScreenOrientation'>;
-}
-declare module 'expo/src/SecureStore.js' {
-  declare module.exports: $Exports<'expo/src/SecureStore'>;
-}
-declare module 'expo/src/Segment.js' {
-  declare module.exports: $Exports<'expo/src/Segment'>;
-}
-declare module 'expo/src/sensor/__tests__/Accelerometer-test.js' {
-  declare module.exports: $Exports<'expo/src/sensor/__tests__/Accelerometer-test'>;
-}
-declare module 'expo/src/sensor/__tests__/DeviceMotion-test.js' {
-  declare module.exports: $Exports<'expo/src/sensor/__tests__/DeviceMotion-test'>;
-}
-declare module 'expo/src/sensor/__tests__/DeviceSensor-test.js' {
-  declare module.exports: $Exports<'expo/src/sensor/__tests__/DeviceSensor-test'>;
-}
-declare module 'expo/src/sensor/__tests__/Gyroscope-test.js' {
-  declare module.exports: $Exports<'expo/src/sensor/__tests__/Gyroscope-test'>;
-}
-declare module 'expo/src/sensor/__tests__/Magnetometer-test.js' {
-  declare module.exports: $Exports<'expo/src/sensor/__tests__/Magnetometer-test'>;
-}
-declare module 'expo/src/sensor/Accelerometer.js' {
-  declare module.exports: $Exports<'expo/src/sensor/Accelerometer'>;
-}
-declare module 'expo/src/sensor/DeviceMotion.js' {
-  declare module.exports: $Exports<'expo/src/sensor/DeviceMotion'>;
-}
-declare module 'expo/src/sensor/DeviceSensor.js' {
-  declare module.exports: $Exports<'expo/src/sensor/DeviceSensor'>;
-}
-declare module 'expo/src/sensor/Gyroscope.js' {
-  declare module.exports: $Exports<'expo/src/sensor/Gyroscope'>;
-}
-declare module 'expo/src/sensor/Magnetometer.js' {
-  declare module.exports: $Exports<'expo/src/sensor/Magnetometer'>;
-}
-declare module 'expo/src/sensor/MagnetometerUncalibrated.js' {
-  declare module.exports: $Exports<'expo/src/sensor/MagnetometerUncalibrated'>;
-}
-declare module 'expo/src/sensor/ThreeAxisSensor.js' {
-  declare module.exports: $Exports<'expo/src/sensor/ThreeAxisSensor'>;
-}
-declare module 'expo/src/Speech.js' {
-  declare module.exports: $Exports<'expo/src/Speech'>;
-}
-declare module 'expo/src/SQLite.js' {
-  declare module.exports: $Exports<'expo/src/SQLite'>;
-}
-declare module 'expo/src/Svg.js' {
-  declare module.exports: $Exports<'expo/src/Svg'>;
-}
-declare module 'expo/src/takeSnapshotAsync.js' {
-  declare module.exports: $Exports<'expo/src/takeSnapshotAsync'>;
-}
-declare module 'expo/src/timer/polyfillNextTick.js' {
-  declare module.exports: $Exports<'expo/src/timer/polyfillNextTick'>;
-}
-declare module 'expo/src/Util.js' {
-  declare module.exports: $Exports<'expo/src/Util'>;
-}
-declare module 'expo/src/WebBrowser.js' {
-  declare module.exports: $Exports<'expo/src/WebBrowser'>;
-}
-declare module 'expo/tools/hashAssetFiles.js' {
-  declare module.exports: $Exports<'expo/tools/hashAssetFiles'>;
-}
-declare module 'expo/tools/LogReporter.js' {
-  declare module.exports: $Exports<'expo/tools/LogReporter'>;
-}

examples/NavigationPlayground/flow-typed/npm/flow-bin_v0.x.x.js

@@ -1,6 +0,0 @@
-// flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583
-// flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x
-
-declare module "flow-bin" {
-  declare module.exports: string;
-}

examples/NavigationPlayground/flow-typed/npm/jest-expo_vx.x.x.js

@@ -1,46 +0,0 @@
-// flow-typed signature: b1e3826a494aecf4ff482336321b54bd
-// flow-typed version: <<STUB>>/jest-expo_v^24.0.0/flow_v0.61.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'jest-expo'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'jest-expo' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'jest-expo/src/createMockConstants' {
-  declare module.exports: any;
-}
-
-declare module 'jest-expo/src/expoModules' {
-  declare module.exports: any;
-}
-
-declare module 'jest-expo/src/setup' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'jest-expo/src/createMockConstants.js' {
-  declare module.exports: $Exports<'jest-expo/src/createMockConstants'>;
-}
-declare module 'jest-expo/src/expoModules.js' {
-  declare module.exports: $Exports<'jest-expo/src/expoModules'>;
-}
-declare module 'jest-expo/src/setup.js' {
-  declare module.exports: $Exports<'jest-expo/src/setup'>;
-}

examples/NavigationPlayground/flow-typed/npm/jest_v21.x.x.js

@@ -1,584 +0,0 @@
-// flow-typed signature: 107cf7068b8835594e97f938e8848244
-// flow-typed version: 8b4dd96654/jest_v21.x.x/flow_>=v0.39.x
-
-type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
-  (...args: TArguments): TReturn,
-  /**
-   * An object for introspecting mock calls
-   */
-  mock: {
-    /**
-     * An array that represents all calls that have been made into this mock
-     * function. Each call is represented by an array of arguments that were
-     * passed during the call.
-     */
-    calls: Array<TArguments>,
-    /**
-     * An array that contains all the object instances that have been
-     * instantiated from this mock function.
-     */
-    instances: Array<TReturn>
-  },
-  /**
-   * Resets all information stored in the mockFn.mock.calls and
-   * mockFn.mock.instances arrays. Often this is useful when you want to clean
-   * up a mock's usage data between two assertions.
-   */
-  mockClear(): void,
-  /**
-   * Resets all information stored in the mock. This is useful when you want to
-   * completely restore a mock back to its initial state.
-   */
-  mockReset(): void,
-  /**
-   * Removes the mock and restores the initial implementation. This is useful
-   * when you want to mock functions in certain test cases and restore the
-   * original implementation in others. Beware that mockFn.mockRestore only
-   * works when mock was created with jest.spyOn. Thus you have to take care of
-   * restoration yourself when manually assigning jest.fn().
-   */
-  mockRestore(): void,
-  /**
-   * Accepts a function that should be used as the implementation of the mock.
-   * The mock itself will still record all calls that go into and instances
-   * that come from itself -- the only difference is that the implementation
-   * will also be executed when the mock is called.
-   */
-  mockImplementation(
-    fn: (...args: TArguments) => TReturn
-  ): JestMockFn<TArguments, TReturn>,
-  /**
-   * Accepts a function that will be used as an implementation of the mock for
-   * one call to the mocked function. Can be chained so that multiple function
-   * calls produce different results.
-   */
-  mockImplementationOnce(
-    fn: (...args: TArguments) => TReturn
-  ): JestMockFn<TArguments, TReturn>,
-  /**
-   * Just a simple sugar function for returning `this`
-   */
-  mockReturnThis(): void,
-  /**
-   * Deprecated: use jest.fn(() => value) instead
-   */
-  mockReturnValue(value: TReturn): JestMockFn<TArguments, TReturn>,
-  /**
-   * Sugar for only returning a value once inside your mock
-   */
-  mockReturnValueOnce(value: TReturn): JestMockFn<TArguments, TReturn>
-};
-
-type JestAsymmetricEqualityType = {
-  /**
-   * A custom Jasmine equality tester
-   */
-  asymmetricMatch(value: mixed): boolean
-};
-
-type JestCallsType = {
-  allArgs(): mixed,
-  all(): mixed,
-  any(): boolean,
-  count(): number,
-  first(): mixed,
-  mostRecent(): mixed,
-  reset(): void
-};
-
-type JestClockType = {
-  install(): void,
-  mockDate(date: Date): void,
-  tick(milliseconds?: number): void,
-  uninstall(): void
-};
-
-type JestMatcherResult = {
-  message?: string | (() => string),
-  pass: boolean
-};
-
-type JestMatcher = (actual: any, expected: any) => JestMatcherResult;
-
-type JestPromiseType = {
-  /**
-   * Use rejects to unwrap the reason of a rejected promise so any other
-   * matcher can be chained. If the promise is fulfilled the assertion fails.
-   */
-  rejects: JestExpectType,
-  /**
-   * Use resolves to unwrap the value of a fulfilled promise so any other
-   * matcher can be chained. If the promise is rejected the assertion fails.
-   */
-  resolves: JestExpectType
-};
-
-/**
- *  Plugin: jest-enzyme
- */
-type EnzymeMatchersType = {
-  toBeChecked(): void,
-  toBeDisabled(): void,
-  toBeEmpty(): void,
-  toBePresent(): void,
-  toContainReact(element: React$Element<any>): void,
-  toHaveClassName(className: string): void,
-  toHaveHTML(html: string): void,
-  toHaveProp(propKey: string, propValue?: any): void,
-  toHaveRef(refName: string): void,
-  toHaveState(stateKey: string, stateValue?: any): void,
-  toHaveStyle(styleKey: string, styleValue?: any): void,
-  toHaveTagName(tagName: string): void,
-  toHaveText(text: string): void,
-  toIncludeText(text: string): void,
-  toHaveValue(value: any): void,
-  toMatchElement(element: React$Element<any>): void,
-  toMatchSelector(selector: string): void
-};
-
-type JestExpectType = {
-  not: JestExpectType & EnzymeMatchersType,
-  /**
-   * If you have a mock function, you can use .lastCalledWith to test what
-   * arguments it was last called with.
-   */
-  lastCalledWith(...args: Array<any>): void,
-  /**
-   * toBe just checks that a value is what you expect. It uses === to check
-   * strict equality.
-   */
-  toBe(value: any): void,
-  /**
-   * Use .toHaveBeenCalled to ensure that a mock function got called.
-   */
-  toBeCalled(): void,
-  /**
-   * Use .toBeCalledWith to ensure that a mock function was called with
-   * specific arguments.
-   */
-  toBeCalledWith(...args: Array<any>): void,
-  /**
-   * Using exact equality with floating point numbers is a bad idea. Rounding
-   * means that intuitive things fail.
-   */
-  toBeCloseTo(num: number, delta: any): void,
-  /**
-   * Use .toBeDefined to check that a variable is not undefined.
-   */
-  toBeDefined(): void,
-  /**
-   * Use .toBeFalsy when you don't care what a value is, you just want to
-   * ensure a value is false in a boolean context.
-   */
-  toBeFalsy(): void,
-  /**
-   * To compare floating point numbers, you can use toBeGreaterThan.
-   */
-  toBeGreaterThan(number: number): void,
-  /**
-   * To compare floating point numbers, you can use toBeGreaterThanOrEqual.
-   */
-  toBeGreaterThanOrEqual(number: number): void,
-  /**
-   * To compare floating point numbers, you can use toBeLessThan.
-   */
-  toBeLessThan(number: number): void,
-  /**
-   * To compare floating point numbers, you can use toBeLessThanOrEqual.
-   */
-  toBeLessThanOrEqual(number: number): void,
-  /**
-   * Use .toBeInstanceOf(Class) to check that an object is an instance of a
-   * class.
-   */
-  toBeInstanceOf(cls: Class<*>): void,
-  /**
-   * .toBeNull() is the same as .toBe(null) but the error messages are a bit
-   * nicer.
-   */
-  toBeNull(): void,
-  /**
-   * Use .toBeTruthy when you don't care what a value is, you just want to
-   * ensure a value is true in a boolean context.
-   */
-  toBeTruthy(): void,
-  /**
-   * Use .toBeUndefined to check that a variable is undefined.
-   */
-  toBeUndefined(): void,
-  /**
-   * Use .toContain when you want to check that an item is in a list. For
-   * testing the items in the list, this uses ===, a strict equality check.
-   */
-  toContain(item: any): void,
-  /**
-   * Use .toContainEqual when you want to check that an item is in a list. For
-   * testing the items in the list, this matcher recursively checks the
-   * equality of all fields, rather than checking for object identity.
-   */
-  toContainEqual(item: any): void,
-  /**
-   * Use .toEqual when you want to check that two objects have the same value.
-   * This matcher recursively checks the equality of all fields, rather than
-   * checking for object identity.
-   */
-  toEqual(value: any): void,
-  /**
-   * Use .toHaveBeenCalled to ensure that a mock function got called.
-   */
-  toHaveBeenCalled(): void,
-  /**
-   * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
-   * number of times.
-   */
-  toHaveBeenCalledTimes(number: number): void,
-  /**
-   * Use .toHaveBeenCalledWith to ensure that a mock function was called with
-   * specific arguments.
-   */
-  toHaveBeenCalledWith(...args: Array<any>): void,
-  /**
-   * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
-   * with specific arguments.
-   */
-  toHaveBeenLastCalledWith(...args: Array<any>): void,
-  /**
-   * Check that an object has a .length property and it is set to a certain
-   * numeric value.
-   */
-  toHaveLength(number: number): void,
-  /**
-   *
-   */
-  toHaveProperty(propPath: string, value?: any): void,
-  /**
-   * Use .toMatch to check that a string matches a regular expression or string.
-   */
-  toMatch(regexpOrString: RegExp | string): void,
-  /**
-   * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
-   */
-  toMatchObject(object: Object | Array<Object>): void,
-  /**
-   * This ensures that a React component matches the most recent snapshot.
-   */
-  toMatchSnapshot(name?: string): void,
-  /**
-   * Use .toThrow to test that a function throws when it is called.
-   * If you want to test that a specific error gets thrown, you can provide an
-   * argument to toThrow. The argument can be a string for the error message,
-   * a class for the error, or a regex that should match the error.
-   *
-   * Alias: .toThrowError
-   */
-  toThrow(message?: string | Error | Class<Error> | RegExp): void,
-  toThrowError(message?: string | Error | Class<Error> | RegExp): void,
-  /**
-   * Use .toThrowErrorMatchingSnapshot to test that a function throws a error
-   * matching the most recent snapshot when it is called.
-   */
-  toThrowErrorMatchingSnapshot(): void
-};
-
-type JestObjectType = {
-  /**
-   *  Disables automatic mocking in the module loader.
-   *
-   *  After this method is called, all `require()`s will return the real
-   *  versions of each module (rather than a mocked version).
-   */
-  disableAutomock(): JestObjectType,
-  /**
-   * An un-hoisted version of disableAutomock
-   */
-  autoMockOff(): JestObjectType,
-  /**
-   * Enables automatic mocking in the module loader.
-   */
-  enableAutomock(): JestObjectType,
-  /**
-   * An un-hoisted version of enableAutomock
-   */
-  autoMockOn(): JestObjectType,
-  /**
-   * Clears the mock.calls and mock.instances properties of all mocks.
-   * Equivalent to calling .mockClear() on every mocked function.
-   */
-  clearAllMocks(): JestObjectType,
-  /**
-   * Resets the state of all mocks. Equivalent to calling .mockReset() on every
-   * mocked function.
-   */
-  resetAllMocks(): JestObjectType,
-  /**
-   * Removes any pending timers from the timer system.
-   */
-  clearAllTimers(): void,
-  /**
-   * The same as `mock` but not moved to the top of the expectation by
-   * babel-jest.
-   */
-  doMock(moduleName: string, moduleFactory?: any): JestObjectType,
-  /**
-   * The same as `unmock` but not moved to the top of the expectation by
-   * babel-jest.
-   */
-  dontMock(moduleName: string): JestObjectType,
-  /**
-   * Returns a new, unused mock function. Optionally takes a mock
-   * implementation.
-   */
-  fn<TArguments: $ReadOnlyArray<*>, TReturn>(
-    implementation?: (...args: TArguments) => TReturn
-  ): JestMockFn<TArguments, TReturn>,
-  /**
-   * Determines if the given function is a mocked function.
-   */
-  isMockFunction(fn: Function): boolean,
-  /**
-   * Given the name of a module, use the automatic mocking system to generate a
-   * mocked version of the module for you.
-   */
-  genMockFromModule(moduleName: string): any,
-  /**
-   * Mocks a module with an auto-mocked version when it is being required.
-   *
-   * The second argument can be used to specify an explicit module factory that
-   * is being run instead of using Jest's automocking feature.
-   *
-   * The third argument can be used to create virtual mocks -- mocks of modules
-   * that don't exist anywhere in the system.
-   */
-  mock(
-    moduleName: string,
-    moduleFactory?: any,
-    options?: Object
-  ): JestObjectType,
-  /**
-   * Returns the actual module instead of a mock, bypassing all checks on
-   * whether the module should receive a mock implementation or not.
-   */
-  requireActual(moduleName: string): any,
-  /**
-   * Returns a mock module instead of the actual module, bypassing all checks
-   * on whether the module should be required normally or not.
-   */
-  requireMock(moduleName: string): any,
-  /**
-   * Resets the module registry - the cache of all required modules. This is
-   * useful to isolate modules where local state might conflict between tests.
-   */
-  resetModules(): JestObjectType,
-  /**
-   * Exhausts the micro-task queue (usually interfaced in node via
-   * process.nextTick).
-   */
-  runAllTicks(): void,
-  /**
-   * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
-   * setInterval(), and setImmediate()).
-   */
-  runAllTimers(): void,
-  /**
-   * Exhausts all tasks queued by setImmediate().
-   */
-  runAllImmediates(): void,
-  /**
-   * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
-   * or setInterval() and setImmediate()).
-   */
-  runTimersToTime(msToRun: number): void,
-  /**
-   * Executes only the macro-tasks that are currently pending (i.e., only the
-   * tasks that have been queued by setTimeout() or setInterval() up to this
-   * point)
-   */
-  runOnlyPendingTimers(): void,
-  /**
-   * Explicitly supplies the mock object that the module system should return
-   * for the specified module. Note: It is recommended to use jest.mock()
-   * instead.
-   */
-  setMock(moduleName: string, moduleExports: any): JestObjectType,
-  /**
-   * Indicates that the module system should never return a mocked version of
-   * the specified module from require() (e.g. that it should always return the
-   * real module).
-   */
-  unmock(moduleName: string): JestObjectType,
-  /**
-   * Instructs Jest to use fake versions of the standard timer functions
-   * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
-   * setImmediate and clearImmediate).
-   */
-  useFakeTimers(): JestObjectType,
-  /**
-   * Instructs Jest to use the real versions of the standard timer functions.
-   */
-  useRealTimers(): JestObjectType,
-  /**
-   * Creates a mock function similar to jest.fn but also tracks calls to
-   * object[methodName].
-   */
-  spyOn(object: Object, methodName: string): JestMockFn<any, any>,
-  /**
-   * Set the default timeout interval for tests and before/after hooks in milliseconds.
-   * Note: The default timeout interval is 5 seconds if this method is not called.
-   */
-  setTimeout(timeout: number): JestObjectType
-};
-
-type JestSpyType = {
-  calls: JestCallsType
-};
-
-/** Runs this function after every test inside this context */
-declare function afterEach(
-  fn: (done: () => void) => ?Promise<mixed>,
-  timeout?: number
-): void;
-/** Runs this function before every test inside this context */
-declare function beforeEach(
-  fn: (done: () => void) => ?Promise<mixed>,
-  timeout?: number
-): void;
-/** Runs this function after all tests have finished inside this context */
-declare function afterAll(
-  fn: (done: () => void) => ?Promise<mixed>,
-  timeout?: number
-): void;
-/** Runs this function before any tests have started inside this context */
-declare function beforeAll(
-  fn: (done: () => void) => ?Promise<mixed>,
-  timeout?: number
-): void;
-
-/** A context for grouping tests together */
-declare var describe: {
-  /**
-   * Creates a block that groups together several related tests in one "test suite"
-   */
-  (name: string, fn: () => void): void,
-
-  /**
-   * Only run this describe block
-   */
-  only(name: string, fn: () => void): void,
-
-  /**
-   * Skip running this describe block
-   */
-  skip(name: string, fn: () => void): void
-};
-
-/** An individual test unit */
-declare var it: {
-  /**
-   * An individual test unit
-   *
-   * @param {string} Name of Test
-   * @param {Function} Test
-   * @param {number} Timeout for the test, in milliseconds.
-   */
-  (
-    name: string,
-    fn?: (done: () => void) => ?Promise<mixed>,
-    timeout?: number
-  ): void,
-  /**
-   * Only run this test
-   *
-   * @param {string} Name of Test
-   * @param {Function} Test
-   * @param {number} Timeout for the test, in milliseconds.
-   */
-  only(
-    name: string,
-    fn?: (done: () => void) => ?Promise<mixed>,
-    timeout?: number
-  ): void,
-  /**
-   * Skip running this test
-   *
-   * @param {string} Name of Test
-   * @param {Function} Test
-   * @param {number} Timeout for the test, in milliseconds.
-   */
-  skip(
-    name: string,
-    fn?: (done: () => void) => ?Promise<mixed>,
-    timeout?: number
-  ): void,
-  /**
-   * Run the test concurrently
-   *
-   * @param {string} Name of Test
-   * @param {Function} Test
-   * @param {number} Timeout for the test, in milliseconds.
-   */
-  concurrent(
-    name: string,
-    fn?: (done: () => void) => ?Promise<mixed>,
-    timeout?: number
-  ): void
-};
-declare function fit(
-  name: string,
-  fn: (done: () => void) => ?Promise<mixed>,
-  timeout?: number
-): void;
-/** An individual test unit */
-declare var test: typeof it;
-/** A disabled group of tests */
-declare var xdescribe: typeof describe;
-/** A focused group of tests */
-declare var fdescribe: typeof describe;
-/** A disabled individual test */
-declare var xit: typeof it;
-/** A disabled individual test */
-declare var xtest: typeof it;
-
-/** The expect function is used every time you want to test a value */
-declare var expect: {
-  /** The object that you want to make assertions against */
-  (value: any): JestExpectType & JestPromiseType & EnzymeMatchersType,
-  /** Add additional Jasmine matchers to Jest's roster */
-  extend(matchers: { [name: string]: JestMatcher }): void,
-  /** Add a module that formats application-specific data structures. */
-  addSnapshotSerializer(serializer: (input: Object) => string): void,
-  assertions(expectedAssertions: number): void,
-  hasAssertions(): void,
-  any(value: mixed): JestAsymmetricEqualityType,
-  anything(): void,
-  arrayContaining(value: Array<mixed>): void,
-  objectContaining(value: Object): void,
-  /** Matches any received string that contains the exact expected string. */
-  stringContaining(value: string): void,
-  stringMatching(value: string | RegExp): void
-};
-
-// TODO handle return type
-// http://jasmine.github.io/2.4/introduction.html#section-Spies
-declare function spyOn(value: mixed, method: string): Object;
-
-/** Holds all functions related to manipulating test runner */
-declare var jest: JestObjectType;
-
-/**
- * The global Jasmine object, this is generally not exposed as the public API,
- * using features inside here could break in later versions of Jest.
- */
-declare var jasmine: {
-  DEFAULT_TIMEOUT_INTERVAL: number,
-  any(value: mixed): JestAsymmetricEqualityType,
-  anything(): void,
-  arrayContaining(value: Array<mixed>): void,
-  clock(): JestClockType,
-  createSpy(name: string): JestSpyType,
-  createSpyObj(
-    baseName: string,
-    methodNames: Array<string>
-  ): { [methodName: string]: JestSpyType },
-  objectContaining(value: Object): void,
-  stringMatching(value: string): void
-};

examples/NavigationPlayground/flow-typed/npm/jest_vx.x.x.js

@@ -1,39 +0,0 @@
-// flow-typed signature: 3ba80f288ae054d394dca2d025d14dd9
-// flow-typed version: <<STUB>>/jest_v^21.0.1/flow_v0.53.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'jest'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'jest' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'jest/bin/jest' {
-  declare module.exports: any;
-}
-
-declare module 'jest/build/jest' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'jest/bin/jest.js' {
-  declare module.exports: $Exports<'jest/bin/jest'>;
-}
-declare module 'jest/build/jest.js' {
-  declare module.exports: $Exports<'jest/build/jest'>;
-}

examples/NavigationPlayground/flow-typed/npm/react-addons-test-utils_vx.x.x.js

@@ -1,33 +0,0 @@
-// flow-typed signature: fe3ce80849031f84c8c106122bef896a
-// flow-typed version: <<STUB>>/react-addons-test-utils_v16.0.0-alpha.3/flow_v0.53.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-addons-test-utils'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-addons-test-utils' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-
-
-// Filename aliases
-declare module 'react-addons-test-utils/index' {
-  declare module.exports: $Exports<'react-addons-test-utils'>;
-}
-declare module 'react-addons-test-utils/index.js' {
-  declare module.exports: $Exports<'react-addons-test-utils'>;
-}

examples/NavigationPlayground/flow-typed/npm/react-native-scripts_vx.x.x.js

@@ -1,123 +0,0 @@
-// flow-typed signature: 42d8cd2e84e894c09d28f891fef9f01d
-// flow-typed version: <<STUB>>/react-native-scripts_v^1.5.0/flow_v0.61.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-native-scripts'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-native-scripts' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-native-scripts/build/bin/crna-entry' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/bin/react-native-scripts' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/scripts/android' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/scripts/eject' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/scripts/init' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/scripts/ios' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/scripts/start' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/util/clearConsole' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/util/expo' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/util/install' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/util/log' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/build/util/packager' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/template/App' {
-  declare module.exports: any;
-}
-
-declare module 'react-native-scripts/template/App.test' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-native-scripts/build/bin/crna-entry.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/bin/crna-entry'>;
-}
-declare module 'react-native-scripts/build/bin/react-native-scripts.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/bin/react-native-scripts'>;
-}
-declare module 'react-native-scripts/build/scripts/android.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/scripts/android'>;
-}
-declare module 'react-native-scripts/build/scripts/eject.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/scripts/eject'>;
-}
-declare module 'react-native-scripts/build/scripts/init.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/scripts/init'>;
-}
-declare module 'react-native-scripts/build/scripts/ios.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/scripts/ios'>;
-}
-declare module 'react-native-scripts/build/scripts/start.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/scripts/start'>;
-}
-declare module 'react-native-scripts/build/util/clearConsole.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/util/clearConsole'>;
-}
-declare module 'react-native-scripts/build/util/expo.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/util/expo'>;
-}
-declare module 'react-native-scripts/build/util/install.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/util/install'>;
-}
-declare module 'react-native-scripts/build/util/log.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/util/log'>;
-}
-declare module 'react-native-scripts/build/util/packager.js' {
-  declare module.exports: $Exports<'react-native-scripts/build/util/packager'>;
-}
-declare module 'react-native-scripts/template/App.js' {
-  declare module.exports: $Exports<'react-native-scripts/template/App'>;
-}
-declare module 'react-native-scripts/template/App.test.js' {
-  declare module.exports: $Exports<'react-native-scripts/template/App.test'>;
-}

examples/NavigationPlayground/flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -1,62 +0,0 @@
-// flow-typed signature: 2d946f2ec4aba5210b19d053c411a59d
-// flow-typed version: 95b3e05165/react-test-renderer_v16.x.x/flow_>=v0.47.x
-
-// Type definitions for react-test-renderer 16.x.x
-// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
-
-type ReactTestRendererJSON = {
-  type: string,
-  props: { [propName: string]: any },
-  children: null | ReactTestRendererJSON[]
-};
-
-type ReactTestRendererTree = ReactTestRendererJSON & {
-  nodeType: "component" | "host",
-  instance: any,
-  rendered: null | ReactTestRendererTree
-};
-
-type ReactTestInstance = {
-  instance: any,
-  type: string,
-  props: { [propName: string]: any },
-  parent: null | ReactTestInstance,
-  children: Array<ReactTestInstance | string>,
-
-  find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,
-  findByType(type: React$ElementType): ReactTestInstance,
-  findByProps(props: { [propName: string]: any }): ReactTestInstance,
-
-  findAll(
-    predicate: (node: ReactTestInstance) => boolean,
-    options?: { deep: boolean }
-  ): ReactTestInstance[],
-  findAllByType(
-    type: React$ElementType,
-    options?: { deep: boolean }
-  ): ReactTestInstance[],
-  findAllByProps(
-    props: { [propName: string]: any },
-    options?: { deep: boolean }
-  ): ReactTestInstance[]
-};
-
-type ReactTestRenderer = {
-  toJSON(): null | ReactTestRendererJSON,
-  toTree(): null | ReactTestRendererTree,
-  unmount(nextElement?: React$Element<any>): void,
-  update(nextElement: React$Element<any>): void,
-  getInstance(): null | ReactTestInstance,
-  root: ReactTestInstance
-};
-
-type TestRendererOptions = {
-  createNodeMock(element: React$Element<any>): any
-};
-
-declare module "react-test-renderer" {
-  declare function create(
-    nextElement: React$Element<any>,
-    options?: TestRendererOptions
-  ): ReactTestRenderer;
-}

examples/NavigationPlayground/flow-typed/npm/react-test-renderer_vx.x.x.js

@@ -1,66 +0,0 @@
-// flow-typed signature: bc77d9125cee5869fd1f9ffe55231e21
-// flow-typed version: <<STUB>>/react-test-renderer_v16.0.0-alpha.12/flow_v0.53.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-test-renderer'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-test-renderer' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-test-renderer/cjs/react-test-renderer-shallow.development' {
-  declare module.exports: any;
-}
-
-declare module 'react-test-renderer/cjs/react-test-renderer-stack.development' {
-  declare module.exports: any;
-}
-
-declare module 'react-test-renderer/cjs/react-test-renderer.development' {
-  declare module.exports: any;
-}
-
-declare module 'react-test-renderer/shallow' {
-  declare module.exports: any;
-}
-
-declare module 'react-test-renderer/stack' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-test-renderer/cjs/react-test-renderer-shallow.development.js' {
-  declare module.exports: $Exports<'react-test-renderer/cjs/react-test-renderer-shallow.development'>;
-}
-declare module 'react-test-renderer/cjs/react-test-renderer-stack.development.js' {
-  declare module.exports: $Exports<'react-test-renderer/cjs/react-test-renderer-stack.development'>;
-}
-declare module 'react-test-renderer/cjs/react-test-renderer.development.js' {
-  declare module.exports: $Exports<'react-test-renderer/cjs/react-test-renderer.development'>;
-}
-declare module 'react-test-renderer/index' {
-  declare module.exports: $Exports<'react-test-renderer'>;
-}
-declare module 'react-test-renderer/index.js' {
-  declare module.exports: $Exports<'react-test-renderer'>;
-}
-declare module 'react-test-renderer/shallow.js' {
-  declare module.exports: $Exports<'react-test-renderer/shallow'>;
-}
-declare module 'react-test-renderer/stack.js' {
-  declare module.exports: $Exports<'react-test-renderer/stack'>;
-}

examples/NavigationPlayground/js/Banner.js

@@ -1,45 +0,0 @@
-/* @flow */
-
-import React from 'react';
-
-import { Image, Platform, StyleSheet, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-navigation';
-
-const Banner = () => (
-  <SafeAreaView
-    style={styles.bannerContainer}
-    forceInset={{ top: 'always' }}
-  >
-    <View style={styles.banner}>
-      <Image source={require('./assets/NavLogo.png')} style={styles.image} />
-      <Text style={styles.title}>React Navigation Examples</Text>
-    </View>
-  </SafeAreaView>
-);
-
-export default Banner;
-
-const styles = StyleSheet.create({
-  bannerContainer: {
-    backgroundColor: '#673ab7',
-    paddingTop: 20,
-  },
-  banner: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-  },
-  image: {
-    width: 36,
-    height: 36,
-    resizeMode: 'contain',
-    tintColor: '#fff',
-    margin: 8,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '200',
-    color: '#fff',
-    margin: 8,
-  },
-});

examples/NavigationPlayground/js/CustomTabUI.js

@@ -1,129 +0,0 @@
-import React from 'react';
-import {
-  LayoutAnimation,
-  View,
-  StyleSheet,
-  StatusBar,
-  Text,
-} from 'react-native';
-import { SafeAreaView, createMaterialTopTabNavigator } from 'react-navigation';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
-      <Ionicons
-        name={focused ? 'ios-home' : 'ios-home'}
-        size={horizontal ? 20 : 26}
-        style={{ color: tintColor }}
-      />
-    ),
-  };
-  render() {
-    const { navigation } = this.props;
-    return (
-      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Home Screen</Text>
-        <Button
-          onPress={() => navigation.navigate('Home')}
-          title="Go to home tab"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      </SafeAreaView>
-    );
-  }
-}
-
-class ReccomendedScreen extends React.Component {
-  static navigationOptions = {
-    tabBarLabel: 'Reccomended',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
-      <Ionicons
-        name={focused ? 'ios-people' : 'ios-people'}
-        size={horizontal ? 20 : 26}
-        style={{ color: tintColor }}
-      />
-    ),
-  };
-  render() {
-    const { navigation } = this.props;
-    return (
-      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Reccomended Screen</Text>
-        <Button
-          onPress={() => navigation.navigate('Home')}
-          title="Go to home tab"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      </SafeAreaView>
-    );
-  }
-}
-
-class FeaturedScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
-    tabBarLabel: 'Featured',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
-      <Ionicons
-        name={focused ? 'ios-star' : 'ios-star'}
-        size={horizontal ? 20 : 26}
-        style={{ color: tintColor }}
-      />
-    ),
-  });
-  render() {
-    const { navigation } = this.props;
-    return (
-      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Featured Screen</Text>
-        <Button
-          onPress={() => navigation.navigate('Home')}
-          title="Go to home tab"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      </SafeAreaView>
-    );
-  }
-}
-
-const SimpleTabs = createMaterialTopTabNavigator({
-  Home: MyHomeScreen,
-  Reccomended: ReccomendedScreen,
-  Featured: FeaturedScreen,
-});
-
-class TabNavigator extends React.Component {
-  static router = SimpleTabs.router;
-  componentWillUpdate() {
-    LayoutAnimation.easeInEaseOut();
-  }
-  render() {
-    const { navigation } = this.props;
-    const { routes, index } = navigation.state;
-    const activeRoute = routes[index];
-    let bottom = null;
-    if (activeRoute.routeName !== 'Home') {
-      bottom = (
-        <View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
-          <Button title="Check out" onPress={() => {}} />
-        </View>
-      );
-    }
-    return (
-      <View style={{ flex: 1 }}>
-        <StatusBar barStyle="default" />
-        <SafeAreaView
-          style={{ flex: 1 }}
-          forceInset={{ horizontal: 'always', top: 'always' }}
-        >
-          <SimpleTabs navigation={navigation} />
-        </SafeAreaView>
-        {bottom}
-      </View>
-    );
-  }
-}
-
-export default TabNavigator;

examples/NavigationPlayground/js/CustomTabs.js

@@ -1,117 +0,0 @@
-/**
- * @flow
- */
-
-import React from 'react';
-import {
-  Platform,
-  ScrollView,
-  StyleSheet,
-  StatusBar,
-  Text,
-  View,
-} from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
-import { createNavigator, SafeAreaView, TabRouter } from 'react-navigation';
-import { createAppContainer } from 'react-navigation';
-import SampleText from './SampleText';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-const MyNavScreen = ({ navigation, banner }) => (
-  <ScrollView>
-    <SafeAreaView forceInset={{ horizontal: 'always' }}>
-      <SampleText>{banner}</SampleText>
-      <Button
-        onPress={() => {
-          navigation.goBack(null);
-        }}
-        title="Go back"
-      />
-    </SafeAreaView>
-    <StatusBar barStyle="default" />
-  </ScrollView>
-);
-
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
-);
-
-const MyNotificationsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
-);
-
-const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Settings Screen" navigation={navigation} />
-);
-
-const CustomTabBar = ({ navigation }) => {
-  const { routes } = navigation.state;
-  return (
-    <SafeAreaView style={styles.tabContainer}>
-      {routes.map(route => (
-        <BorderlessButton
-          onPress={() => navigation.navigate(route.routeName)}
-          style={styles.tab}
-          key={route.routeName}
-        >
-          <Text>{route.routeName}</Text>
-        </BorderlessButton>
-      ))}
-    </SafeAreaView>
-  );
-};
-
-const CustomTabView = ({ descriptors, navigation }) => {
-  const { routes, index } = navigation.state;
-  const descriptor = descriptors[routes[index].key];
-  const ActiveScreen = descriptor.getComponent();
-  return (
-    <SafeAreaView forceInset={{ top: 'always' }}>
-      <CustomTabBar navigation={navigation} />
-      <ActiveScreen navigation={descriptor.navigation} />
-    </SafeAreaView>
-  );
-};
-
-const CustomTabRouter = TabRouter(
-  {
-    Home: {
-      screen: MyHomeScreen,
-      path: '',
-    },
-    Notifications: {
-      screen: MyNotificationsScreen,
-      path: 'notifications',
-    },
-    Settings: {
-      screen: MySettingsScreen,
-      path: 'settings',
-    },
-  },
-  {
-    // Change this to start on a different tab
-    initialRouteName: 'Home',
-  }
-);
-
-const CustomTabs = createAppContainer(
-  createNavigator(CustomTabView, CustomTabRouter, {})
-);
-
-const styles = StyleSheet.create({
-  tabContainer: {
-    flexDirection: 'row',
-    height: 48,
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: 4,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 4,
-  },
-});
-
-export default CustomTabs;

examples/NavigationPlayground/js/CustomTransitioner.js

@@ -1,117 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import {
-  Animated,
-  Easing,
-  Image,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  View,
-} from 'react-native';
-import {
-  createAppContainer,
-  Transitioner,
-  SafeAreaView,
-  StackRouter,
-  createNavigator,
-} from 'react-navigation';
-import SampleText from './SampleText';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-const MyNavScreen = ({ navigation, banner }) => (
-  <SafeAreaView forceInset={{ top: 'always' }}>
-    <SampleText>{banner}</SampleText>
-    {navigation.state &&
-      navigation.state.routeName !== 'Settings' && (
-        <Button
-          onPress={() => navigation.navigate('Settings')}
-          title="Go to a settings screen"
-        />
-      )}
-
-    <Button onPress={() => navigation.goBack(null)} title="Go back" />
-    <StatusBar barStyle="default" />
-  </SafeAreaView>
-);
-
-const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
-);
-
-const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Settings Screen" navigation={navigation} />
-);
-
-class CustomNavigationView extends Component {
-  render() {
-    const { navigation, router, descriptors } = this.props;
-
-    return (
-      <Transitioner
-        configureTransition={this._configureTransition}
-        descriptors={descriptors}
-        navigation={navigation}
-        render={this._render}
-      />
-    );
-  }
-
-  _configureTransition(transitionProps, prevTransitionProps) {
-    return {
-      duration: 200,
-      easing: Easing.out(Easing.ease),
-    };
-  }
-
-  _render = (transitionProps, prevTransitionProps) => {
-    const scenes = transitionProps.scenes.map(scene =>
-      this._renderScene(transitionProps, scene)
-    );
-    return <View style={{ flex: 1 }}>{scenes}</View>;
-  };
-
-  _renderScene = (transitionProps, scene) => {
-    const { navigation, router } = this.props;
-    const { routes } = navigation.state;
-    const { position } = transitionProps;
-    const { index } = scene;
-
-    const animatedValue = position.interpolate({
-      inputRange: [index - 1, index, index + 1],
-      outputRange: [0, 1, 0],
-    });
-
-    const animation = {
-      opacity: animatedValue,
-      transform: [{ scale: animatedValue }],
-    };
-
-    const Scene = scene.descriptor.getComponent();
-    return (
-      <Animated.View key={index} style={[styles.view, animation]}>
-        <Scene navigation={scene.descriptor.navigation} />
-      </Animated.View>
-    );
-  };
-}
-
-const CustomRouter = StackRouter({
-  Home: { screen: MyHomeScreen },
-  Settings: { screen: MySettingsScreen },
-});
-
-const CustomTransitioner = createAppContainer(
-  createNavigator(CustomNavigationView, CustomRouter, {})
-);
-
-export default CustomTransitioner;
-
-const styles = StyleSheet.create({
-  view: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-  },
-});

examples/NavigationPlayground/js/InactiveStack.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import { Button, Text, StatusBar, View, StyleSheet } from 'react-native';
-import {
-  SafeAreaView,
-  createStackNavigator,
-  createSwitchNavigator,
-  NavigationActions,
-} from 'react-navigation';
-
-const runSubRoutes = navigation => {
-  navigation.dispatch(NavigationActions.navigate({ routeName: 'First2' }));
-  navigation.dispatch(NavigationActions.navigate({ routeName: 'Second2' }));
-  navigation.dispatch(NavigationActions.navigate({ routeName: 'First2' }));
-};
-
-const runSubRoutesWithIntermediate = navigation => {
-  navigation.dispatch(toFirst1);
-  navigation.dispatch(toSecond2);
-  navigation.dispatch(toFirst);
-  navigation.dispatch(toFirst2);
-};
-
-const runSubAction = navigation => {
-  navigation.dispatch(toFirst2);
-  navigation.dispatch(toSecond2);
-  navigation.dispatch(toFirstChild1);
-};
-
-const DummyScreen = ({ routeName, navigation, style }) => {
-  return (
-    <SafeAreaView
-      style={[
-        StyleSheet.absoluteFill,
-        {
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: 'white',
-        },
-        style,
-      ]}
-    >
-      <Text style={{ fontWeight: '800' }}>
-        {routeName}({navigation.state.key})
-      </Text>
-      <View>
-        <Button title="back" onPress={() => navigation.goBack()} />
-        <Button title="dismiss" onPress={() => navigation.dismiss()} />
-        <Button
-          title="between sub-routes"
-          onPress={() => runSubRoutes(navigation)}
-        />
-        <Button
-          title="between sub-routes (with intermediate)"
-          onPress={() => runSubRoutesWithIntermediate(navigation)}
-        />
-
-        <Button
-          title="with sub-action"
-          onPress={() => runSubAction(navigation)}
-        />
-      </View>
-      <StatusBar barStyle="default" />
-    </SafeAreaView>
-  );
-};
-
-const createDummyScreen = routeName => {
-  const BoundDummyScreen = props => DummyScreen({ ...props, routeName });
-  return BoundDummyScreen;
-};
-
-const toFirst = NavigationActions.navigate({ routeName: 'First' });
-const toFirst1 = NavigationActions.navigate({ routeName: 'First1' });
-const toFirst2 = NavigationActions.navigate({ routeName: 'First2' });
-const toSecond2 = NavigationActions.navigate({ routeName: 'Second2' });
-const toFirstChild1 = NavigationActions.navigate({
-  routeName: 'First',
-  action: NavigationActions.navigate({ routeName: 'First1' }),
-});
-
-export default createStackNavigator(
-  {
-    Other: createDummyScreen('Leaf'),
-    First: createStackNavigator({
-      First1: createDummyScreen('First1'),
-      First2: createDummyScreen('First2'),
-    }),
-    Second: createStackNavigator({
-      Second1: createDummyScreen('Second1'),
-      Second2: createDummyScreen('Second2'),
-    }),
-  },
-  {
-    headerMode: 'none',
-  }
-);

examples/NavigationPlayground/js/KeyboardHandlingExample.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { StatusBar, View, TextInput, InteractionManager } from 'react-native';
-import { createStackNavigator, withNavigationFocus } from 'react-navigation';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-class ScreenOne extends React.Component {
-  static navigationOptions = {
-    title: 'Home',
-  };
-
-  render() {
-    const { navigation } = this.props;
-    return (
-      <View style={{ paddingTop: 30 }}>
-        <Button
-          onPress={() => navigation.push('ScreenTwo')}
-          title="Push screen with focused text input"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go Home" />
-        <StatusBar barStyle="default" />
-      </View>
-    );
-  }
-}
-
-class ScreenTwo extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
-    title: navigation.getParam('inputValue', 'Screen w/ Input'),
-  });
-
-  componentDidMount() {
-    InteractionManager.runAfterInteractions(() => {
-      this._textInput.focus();
-    });
-  }
-
-  render() {
-    const { navigation } = this.props;
-    return (
-      <View style={{ paddingTop: 30 }}>
-        <View style={{ alignSelf: 'center', paddingVertical: 20 }}>
-          <TextInput
-            ref={c => (this._textInput = c)}
-            onChangeText={inputValue => navigation.setParams({ inputValue })}
-            style={{
-              backgroundColor: 'white',
-              height: 24,
-              width: 150,
-              borderColor: '#555',
-              borderWidth: 1,
-            }}
-          />
-        </View>
-        <Button onPress={() => navigation.pop()} title="Pop" />
-      </View>
-    );
-  }
-}
-
-export default createStackNavigator({
-  ScreenOne,
-  ScreenTwo: withNavigationFocus(ScreenTwo),
-});

examples/NavigationPlayground/js/MultipleDrawer.js

@@ -1,75 +0,0 @@
-/**
- * @flow
- */
-
-import React from 'react';
-import { Platform, ScrollView, StyleSheet } from 'react-native';
-import { createDrawerNavigator } from 'react-navigation';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import SampleText from './SampleText';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-const MyNavScreen = ({ navigation, banner }) => (
-  <ScrollView style={styles.container}>
-    <SampleText>{banner}</SampleText>
-    <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
-    <Button onPress={() => navigation.goBack(null)} title="Go back" />
-  </ScrollView>
-);
-
-const InboxScreen = ({ navigation }) => (
-  <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />
-);
-InboxScreen.navigationOptions = {
-  drawerLabel: 'Inbox',
-  drawerIcon: ({ tintColor }) => (
-    <MaterialIcons
-      name="move-to-inbox"
-      size={24}
-      style={{ color: tintColor }}
-    />
-  ),
-};
-
-const DraftsScreen = ({ navigation }) => (
-  <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
-);
-DraftsScreen.navigationOptions = {
-  drawerLabel: 'Drafts',
-  drawerIcon: ({ tintColor }) => (
-    <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
-  ),
-};
-
-const DrawerExample = createDrawerNavigator(
-  {
-    Inbox: {
-      path: '/',
-      screen: InboxScreen,
-    },
-    Drafts: {
-      path: '/sent',
-      screen: DraftsScreen,
-    },
-  },
-  {
-    initialRouteName: 'Drafts',
-    contentOptions: {
-      activeTintColor: '#e91e63',
-    },
-  }
-);
-
-const MainDrawerExample = createDrawerNavigator({
-  Drafts: {
-    screen: DrawerExample,
-  },
-});
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: Platform.OS === 'ios' ? 20 : 0,
-  },
-});
-
-export default MainDrawerExample;

examples/NavigationPlayground/js/SampleText.js

@@ -1,22 +0,0 @@
-/* @flow */
-
-import React from 'react';
-
-import { StyleSheet, Text } from 'react-native';
-
-/**
- * Used across examples as a screen placeholder.
- */
-import type { ChildrenArray } from 'react';
-
-const SampleText = ({ children }: { children?: ChildrenArray<*> }) => (
-  <Text style={styles.sampleText}>{children}</Text>
-);
-
-export default SampleText;
-
-const styles = StyleSheet.create({
-  sampleText: {
-    margin: 14,
-  },
-});

examples/NavigationPlayground/js/TabsWithNavigationEvents.js

@@ -1,127 +0,0 @@
-/**
- * @flow
- */
-
-import React from 'react';
-import { FlatList, SafeAreaView, StatusBar, Text, View } from 'react-native';
-import { NavigationEvents } from 'react-navigation';
-import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
-const Event = ({ event }) => (
-  <View
-    style={{
-      borderColor: 'grey',
-      borderWidth: 1,
-      borderRadius: 3,
-      padding: 5,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    }}
-  >
-    <Text>{event.type}</Text>
-    <Text>
-      {event.action.type.replace('Navigation/', '')}
-      {event.action.routeName ? '=>' + event.action.routeName : ''}
-    </Text>
-  </View>
-);
-
-const createTabScreen = (name, icon, focusedIcon) => {
-  class TabScreen extends React.Component<any, any> {
-    static navigationOptions = {
-      tabBarLabel: name,
-      tabBarIcon: ({ tintColor, focused }) => (
-        <MaterialCommunityIcons
-          name={focused ? focusedIcon : icon}
-          size={26}
-          style={{ color: focused ? tintColor : '#ccc' }}
-        />
-      ),
-    };
-
-    state = { eventLog: [] };
-
-    append = navigationEvent => {
-      this.setState(({ eventLog }) => ({
-        eventLog: eventLog.concat(navigationEvent),
-      }));
-    };
-
-    render() {
-      return (
-        <SafeAreaView
-          forceInset={{ horizontal: 'always', top: 'always' }}
-          style={{
-            flex: 1,
-          }}
-        >
-          <Text
-            style={{
-              margin: 10,
-              marginTop: 30,
-              fontSize: 30,
-              fontWeight: 'bold',
-            }}
-          >
-            Events for tab {name}
-          </Text>
-
-          <View style={{ flex: 1, width: '100%', marginTop: 10 }}>
-            <FlatList
-              data={this.state.eventLog}
-              keyExtractor={item => `${this.state.eventLog.indexOf(item)}`}
-              renderItem={({ item }) => (
-                <View
-                  style={{
-                    marginVertical: 5,
-                    marginHorizontal: 10,
-                    backgroundColor: '#e4e4e4',
-                  }}
-                >
-                  <Event event={item} />
-                </View>
-              )}
-            />
-          </View>
-
-          <NavigationEvents
-            onWillFocus={this.append}
-            onDidFocus={this.append}
-            onWillBlur={this.append}
-            onDidBlur={this.append}
-          />
-
-          <StatusBar barStyle="default" />
-        </SafeAreaView>
-      );
-    }
-  }
-
-  return TabScreen;
-};
-
-const TabsWithNavigationEvents = createMaterialBottomTabNavigator(
-  {
-    One: {
-      screen: createTabScreen('One', 'numeric-1-box', 'numeric-1-box'),
-    },
-    Two: {
-      screen: createTabScreen('Two', 'numeric-2-box', 'numeric-2-box'),
-    },
-    Three: {
-      screen: createTabScreen(
-        'Three',
-        'numeric-3-box',
-        'numeric-3-box'
-      ),
-    },
-  },
-  {
-    shifting: false,
-    activeTintColor: '#F44336',
-  }
-);
-
-export default TabsWithNavigationEvents;

examples/NavigationPlayground/js/TabsWithNavigationFocus.js

@@ -1,103 +0,0 @@
-/**
- * @flow
- */
-
-import React from 'react';
-import { SafeAreaView, StatusBar, Text, View } from 'react-native';
-import { withNavigationFocus } from 'react-navigation';
-import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-import SampleText from './SampleText';
-
-class Child extends React.Component<any, any> {
-  render() {
-    return (
-      <Text style={{ color: this.props.isFocused ? 'green' : 'maroon' }}>
-        {this.props.isFocused
-          ? 'I know that my parent is focused!'
-          : 'My parent is not focused! :O'}
-      </Text>
-    );
-  }
-}
-
-const ChildWithNavigationFocus = withNavigationFocus(Child);
-
-const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
-  class TabScreen extends React.Component<any, any> {
-    static navigationOptions = {
-      tabBarLabel: name,
-      tabBarIcon: ({ tintColor, focused }) => (
-        <MaterialCommunityIcons
-          name={focused ? focusedIcon : icon}
-          size={26}
-          style={{ color: focused ? tintColor : '#ccc' }}
-        />
-      ),
-    };
-
-    state = { showChild: false };
-
-    render() {
-      const { isFocused } = this.props;
-
-      return (
-        <SafeAreaView
-          forceInset={{ horizontal: 'always', top: 'always' }}
-          style={{
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Text style={{ fontWeight: '700', fontSize: 16, marginBottom: 5 }}>
-            {'Tab ' + name.toLowerCase()}
-          </Text>
-          <Text style={{ marginBottom: 20 }}>
-            {'props.isFocused: ' + (isFocused ? ' true' : 'false')}
-          </Text>
-          {this.state.showChild ? (
-            <ChildWithNavigationFocus />
-          ) : (
-            <Button
-              title="Press me"
-              onPress={() => this.setState({ showChild: true })}
-            />
-          )}
-          <Button
-            onPress={() => this.props.navigation.pop()}
-            title="Back to other examples"
-          />
-          <StatusBar barStyle="default" />
-        </SafeAreaView>
-      );
-    }
-  }
-  return withNavigationFocus(TabScreen);
-};
-
-const TabsWithNavigationFocus = createMaterialBottomTabNavigator(
-  {
-    One: {
-      screen: createTabScreen('One', 'numeric-1-box', 'numeric-1-box'),
-    },
-    Two: {
-      screen: createTabScreen('Two', 'numeric-2-box', 'numeric-2-box'),
-    },
-    Three: {
-      screen: createTabScreen(
-        'Three',
-        'numeric-3-box',
-        'numeric-3-box'
-      ),
-    },
-  },
-  {
-    shifting: false,
-    activeTintColor: '#F44336',
-  }
-);
-
-export default TabsWithNavigationFocus;

examples/NavigationPlayground/js/commonComponents/HeaderButtons.js

@@ -1,16 +0,0 @@
-import DefaultHeaderButtons from 'react-navigation-header-buttons';
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-export class HeaderButtons extends React.PureComponent {
-  static Item = DefaultHeaderButtons.Item;
-
-  render() {
-    return (
-      <DefaultHeaderButtons
-        color={Platform.OS === 'ios' ? '#037aff' : 'black'}
-        {...this.props}
-      />
-    );
-  }
-}

examples/NavigationPlayground/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "NavigationPlayground",
-  "version": "0.1.0",
-  "private": true,
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "postinstall": "rm -rf node_modules/react-navigation/{.git,node_modules,examples}",
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "test": "flow"
-  },
-  "dependencies": {
-    "expo": "^32.0.0",
-    "hoist-non-react-statics": "^3.0.1",
-    "invariant": "^2.2.4",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-iphone-x-helper": "^1.0.2",
-    "react-native-paper": "^2.1.3",
-    "react-navigation": "../..",
-    "react-navigation-header-buttons": "^0.0.4",
-    "react-navigation-material-bottom-tabs": "1.0.0"
-  },
-  "devDependencies": {
-    "babel-jest": "^22.4.1",
-    "babel-plugin-transform-remove-console": "^6.9.0",
-    "flow-bin": "^0.67.0",
-    "jest": "^22.1.3",
-    "jest-expo": "^28.0.0",
-    "react-test-renderer": "16.3.1"
-  },
-  "jest": {
-    "preset": "jest-expo",
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "jsx",
-      "node"
-    ]
-  }
-}

flow/react-navigation.js

@@ -44,18 +44,68 @@ declare module 'react-navigation' {
   };
   declare type ImageSource = ImageURISource | number | Array<ImageURISource>;
 
-  // This one is too large to copy. Actual definition is in
-  // react-native/Libraries/Animated/src/nodes/AnimatedValue.js
-  declare type AnimatedValue = Object;
-
-  declare type HeaderForceInset = {
-    horizontal?: string,
-    vertical?: string,
-    left?: string,
-    right?: string,
-    top?: string,
-    bottom?: string,
+  // This is copied from
+  // react-native/Libraries/Animated/src/nodes/AnimatedInterpolation.js
+  declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
+  declare type InterpolationConfigType = {
+    inputRange: Array<number>,
+    outputRange: Array<number> | Array<string>,
+    easing?: (input: number) => number,
+    extrapolate?: ExtrapolateType,
+    extrapolateLeft?: ExtrapolateType,
+    extrapolateRight?: ExtrapolateType,
   };
+  declare class AnimatedInterpolation {
+    interpolate(config: InterpolationConfigType): AnimatedInterpolation;
+  }
+
+  // This is copied from
+  // react-native/Libraries/Animated/src/animations/Animation.js
+  declare type EndResult = { finished: boolean };
+  declare type EndCallback = (result: EndResult) => void;
+  declare class Animation {
+    start(
+      fromValue: number,
+      onUpdate: (value: number) => void,
+      onEnd: ?EndCallback,
+      previousAnimation: ?Animation,
+      animatedValue: AnimatedValue
+    ): void;
+    stop(): void;
+  }
+
+  // This is vaguely copied from
+  // react-native/Libraries/Animated/src/nodes/AnimatedTracking.js
+  declare class AnimatedTracking {
+    constructor(
+      value: AnimatedValue,
+      parent: any,
+      animationClass: any,
+      animationConfig: Object,
+      callback?: ?EndCallback
+    ): void;
+    update(): void;
+  }
+
+  // This is vaguely copied from
+  // react-native/Libraries/Animated/src/nodes/AnimatedValue.js
+  declare type ValueListenerCallback = (state: { value: number }) => void;
+  declare class AnimatedValue {
+    constructor(value: number): void;
+    setValue(value: number): void;
+    setOffset(offset: number): void;
+    flattenOffset(): void;
+    extractOffset(): void;
+    addListener(callback: ValueListenerCallback): string;
+    removeListener(id: string): void;
+    removeAllListeners(): void;
+    stopAnimation(callback?: ?(value: number) => void): void;
+    resetAnimation(callback?: ?(value: number) => void): void;
+    interpolate(config: InterpolationConfigType): AnimatedInterpolation;
+    animate(animation: Animation, callback: ?EndCallback): void;
+    stopTracking(): void;
+    track(tracking: AnimatedTracking): void;
+  }
 
   /**
    * Next, all the type declarations
@@ -131,6 +181,14 @@ declare module 'react-navigation' {
     +key?: string,
   |};
 
+  declare export type NavigationJumpToAction = {|
+    +type: 'Navigation/JUMP_TO',
+    +preserveFocus: boolean,
+    +routeName: string,
+    +key: string,
+    +params?: NavigationParams,
+  |};
+
   declare export type NavigationOpenDrawerAction = {|
     +type: 'Navigation/OPEN_DRAWER',
     +key?: string,
@@ -163,6 +221,7 @@ declare module 'react-navigation' {
     | NavigationResetAction
     | NavigationReplaceAction
     | NavigationCompleteTransitionAction
+    | NavigationJumpToAction
     | NavigationOpenDrawerAction
     | NavigationCloseDrawerAction
     | NavigationToggleDrawerAction
@@ -188,6 +247,7 @@ declare module 'react-navigation' {
      */
     index: number,
     routes: Array<NavigationRoute>,
+    isTransitioning?: boolean,
   };
 
   declare export type NavigationRoute =
@@ -302,12 +362,8 @@ declare module 'react-navigation' {
   declare export type NavigationScreenComponent<
     Route: NavigationRoute,
     Options: {},
-    Props: {}
-  > = React$ComponentType<{
-    ...Props,
-    ...NavigationNavigatorProps<Options, Route>,
-  }> &
-    withOptionalNavigationOptions<Options>;
+    Props: NavigationNavigatorProps<Options, Route>
+  > = React$ComponentType<Props> & withOptionalNavigationOptions<Options>;
 
   declare interface withRouter<State, Options> {
     router: NavigationRouter<State, Options>;
@@ -316,11 +372,8 @@ declare module 'react-navigation' {
   declare export type NavigationNavigator<
     State: NavigationState,
     Options: {},
-    Props: {}
-  > = React$StatelessFunctionalComponent<{
-    ...Props,
-    ...NavigationNavigatorProps<Options, State>,
-  }> &
+    Props: NavigationNavigatorProps<Options, State>
+  > = React$ComponentType<Props> &
     withRouter<State, Options> &
     withOptionalNavigationOptions<Options>;
 
@@ -357,9 +410,7 @@ declare module 'react-navigation' {
     NavigationSceneRendererProps & {
       mode: HeaderMode,
       router: NavigationRouter<NavigationState, NavigationStackScreenOptions>,
-      getScreenDetails: NavigationScene => NavigationScreenDetails<
-        NavigationStackScreenOptions
-      >,
+      getScreenDetails: NavigationScene => NavigationScreenDetails<NavigationStackScreenOptions>,
       leftInterpolator: (props: NavigationSceneRendererProps) => {},
       titleInterpolator: (props: NavigationSceneRendererProps) => {},
       rightInterpolator: (props: NavigationSceneRendererProps) => {},
@@ -385,7 +436,7 @@ declare module 'react-navigation' {
     headerPressColorAndroid?: string,
     headerRight?: React$Node,
     headerStyle?: ViewStyleProp,
-    headerForceInset?: HeaderForceInset,
+    headerForceInset?: _SafeAreaViewInsets,
     headerBackground?: React$Node | React$ElementType,
     gesturesEnabled?: boolean,
     gestureResponseDistance?: { vertical?: number, horizontal?: number },
@@ -407,21 +458,29 @@ declare module 'react-navigation' {
     headerLayoutPreset?: 'left' | 'center',
     headerBackTitleVisible?: boolean,
     cardStyle?: ViewStyleProp,
+    cardShadowEnabled?: boolean,
+    cardOverlayEnabled?: boolean,
     transitionConfig?: (
       transitionProps: NavigationTransitionProps,
       prevTransitionProps: ?NavigationTransitionProps,
       isModal: boolean
     ) => TransitionConfig,
-    onTransitionStart?: () => void,
-    onTransitionEnd?: () => void,
+    onTransitionStart?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps: ?NavigationTransitionProps
+    ) => void,
+    onTransitionEnd?: (
+      transitionProps: NavigationTransitionProps,
+      prevTransitionProps: ?NavigationTransitionProps
+    ) => void,
     transparentCard?: boolean,
     disableKeyboardHandling?: boolean,
   |};
 
-  declare export type StackNavigatorConfig = {|
+  declare export type StackNavigatorConfig = $Shape<{|
     ...NavigationStackViewConfig,
     ...NavigationStackRouterConfig,
-  |};
+  |}>;
 
   /**
    * Switch Navigator
@@ -538,7 +597,7 @@ declare module 'react-navigation' {
       fallback?: $ElementType<
         $PropertyType<
           {|
-            ...{| params: {| [ParamName]: void |} |},
+            ...{| params: {} |},
             ...$Exact<S>,
           |},
           'params'
@@ -548,15 +607,16 @@ declare module 'react-navigation' {
     ) => $ElementType<
       $PropertyType<
         {|
-          ...{| params: {| [ParamName]: void |} |},
+          ...{| params: {} |},
           ...$Exact<S>,
         |},
         'params'
       >,
       ParamName
     >,
-    dangerouslyGetParent: () => NavigationScreenProp<*>,
+    dangerouslyGetParent: () => ?NavigationScreenProp<NavigationState>,
     isFocused: () => boolean,
+    isFirstRouteInParent: () => boolean,
     // Shared action creators that exist for all routers
     goBack: (routeKey?: ?string) => boolean,
     navigate: (
@@ -610,9 +670,7 @@ declare module 'react-navigation' {
     onWillBlur?: NavigationEventCallback,
     onDidBlur?: NavigationEventCallback,
   };
-  declare export var NavigationEvents: React$ComponentType<
-    _NavigationEventsProps
-  >;
+  declare export var NavigationEvents: React$ComponentType<_NavigationEventsProps>;
 
   /**
    * Navigation container
@@ -621,11 +679,8 @@ declare module 'react-navigation' {
   declare export type NavigationContainer<
     State: NavigationState,
     Options: {},
-    Props: {}
-  > = React$ComponentType<{
-    ...Props,
-    ...NavigationContainerProps<State, Options>,
-  }> &
+    Props: NavigationContainerProps<Options, State>
+  > = React$ComponentType<Props> &
     withRouter<State, Options> &
     withOptionalNavigationOptions<Options>;
 
@@ -663,6 +718,7 @@ declare module 'react-navigation' {
     isStale: boolean,
     key: string,
     route: NavigationRoute,
+    descriptor: ?NavigationDescriptor,
   };
 
   declare export type NavigationTransitionProps = $Shape<{
@@ -719,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) => {},
@@ -827,7 +883,8 @@ declare module 'react-navigation' {
       n?: number,
       immediate?: boolean,
     }) => NavigationPopAction,
-    popToTop: (payload: {
+    popToTop: (payload?: {
+      key?: string,
       immediate?: boolean,
     }) => NavigationPopToTopAction,
     push: (payload: {
@@ -852,6 +909,16 @@ declare module 'react-navigation' {
     }) => NavigationCompleteTransitionAction,
   };
 
+  declare export var SwitchActions: {
+    JUMP_TO: 'Navigation/JUMP_TO',
+
+    jumpTo: (payload: {
+      routeName: string,
+      key: string,
+      params?: NavigationParams,
+    }) => NavigationJumpToAction,
+  };
+
   declare export var DrawerActions: {
     OPEN_DRAWER: 'Navigation/OPEN_DRAWER',
     CLOSE_DRAWER: 'Navigation/CLOSE_DRAWER',
@@ -874,9 +941,9 @@ declare module 'react-navigation' {
     router: NavigationRouter<S, O>,
   };
 
-  declare type NavigationDescriptor = {
+  declare export type NavigationDescriptor = {
     key: string,
-    state: NavigationLeafRoute | NavigationStateRoute,
+    state: NavigationRoute,
     navigation: NavigationScreenProp<*>,
     getComponent: () => React$ComponentType<{}>,
   };
@@ -884,6 +951,7 @@ declare module 'react-navigation' {
   declare type NavigationView<O, S> = React$ComponentType<{
     descriptors: { [key: string]: NavigationDescriptor },
     navigation: NavigationScreenProp<S>,
+    navigationConfig: *,
   }>;
 
   declare export function createNavigator<O: *, S: *, NavigatorConfig: *>(
@@ -892,10 +960,6 @@ declare module 'react-navigation' {
     navigatorConfig?: NavigatorConfig
   ): NavigationNavigator<S, O, *>;
 
-  declare export function StackNavigator(
-    routeConfigMap: NavigationRouteConfigMap,
-    stackConfig?: StackNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
   declare export function createStackNavigator(
     routeConfigMap: NavigationRouteConfigMap,
     stackConfig?: StackNavigatorConfig
@@ -920,14 +984,6 @@ declare module 'react-navigation' {
     removeClippedSubviews?: boolean,
     containerOptions?: void,
   |};
-  declare export function TabNavigator(
-    routeConfigs: NavigationRouteConfigMap,
-    config?: _TabNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
-  declare export function createTabNavigator(
-    routeConfigs: NavigationRouteConfigMap,
-    config?: _TabNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
   /* TODO: fix the config for each of these tab navigator types */
   declare export function createBottomTabNavigator(
     routeConfigs: NavigationRouteConfigMap,
@@ -940,10 +996,6 @@ declare module 'react-navigation' {
   declare type _SwitchNavigatorConfig = {|
     ...NavigationSwitchRouterConfig,
   |};
-  declare export function SwitchNavigator(
-    routeConfigs: NavigationRouteConfigMap,
-    config?: _SwitchNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
   declare export function createSwitchNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _SwitchNavigatorConfig
@@ -965,10 +1017,6 @@ declare module 'react-navigation' {
     ..._DrawerViewConfig,
     containerConfig?: void,
   }>;
-  declare export function DrawerNavigator(
-    routeConfigs: NavigationRouteConfigMap,
-    config?: _DrawerNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
   declare export function createDrawerNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _DrawerNavigatorConfig
@@ -1011,9 +1059,7 @@ declare module 'react-navigation' {
      */
     transitionConfig?: () => TransitionConfig,
   } & NavigationNavigatorProps<NavigationStackScreenOptions, NavigationState>;
-  declare export var CardStackTransitioner: React$ComponentType<
-    _CardStackTransitionerProps
-  >;
+  declare export var CardStackTransitioner: React$ComponentType<_CardStackTransitionerProps>;
 
   declare type _CardStackProps = {
     screenProps?: {},
@@ -1049,15 +1095,16 @@ declare module 'react-navigation' {
   declare export var Card: React$ComponentType<_CardProps>;
 
   declare type _SafeAreaViewForceInsetValue = 'always' | 'never' | number;
+  declare type _SafeAreaViewInsets = $Shape<{
+    top: _SafeAreaViewForceInsetValue,
+    bottom: _SafeAreaViewForceInsetValue,
+    left: _SafeAreaViewForceInsetValue,
+    right: _SafeAreaViewForceInsetValue,
+    vertical: _SafeAreaViewForceInsetValue,
+    horizontal: _SafeAreaViewForceInsetValue,
+  }>;
   declare type _SafeAreaViewProps = {
-    forceInset?: {
-      top?: _SafeAreaViewForceInsetValue,
-      bottom?: _SafeAreaViewForceInsetValue,
-      left?: _SafeAreaViewForceInsetValue,
-      right?: _SafeAreaViewForceInsetValue,
-      vertical?: _SafeAreaViewForceInsetValue,
-      horizontal?: _SafeAreaViewForceInsetValue,
-    },
+    forceInset?: _SafeAreaViewInsets,
     children?: React$Node,
     style?: AnimatedViewStyleProp,
   };
@@ -1082,10 +1129,10 @@ declare module 'react-navigation' {
     tintColor?: ?string,
     truncatedTitle?: ?string,
     width?: ?number,
+    disabled?: boolean,
+    backTitleVisible?: boolean,
   };
-  declare export var HeaderBackButton: React$ComponentType<
-    _HeaderBackButtonProps
-  >;
+  declare export var HeaderBackButton: React$ComponentType<_HeaderBackButtonProps>;
 
   declare type _DrawerViewProps = {
     drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
@@ -1151,7 +1198,7 @@ declare module 'react-navigation' {
   };
   declare export var TabView: React$ComponentType<_TabViewProps>;
 
-  declare type _TabBarTopProps = {
+  declare type _MaterialTopTabBarProps = {
     activeTintColor: string,
     inactiveTintColor: string,
     showIcon: boolean,
@@ -1175,9 +1222,16 @@ declare module 'react-navigation' {
     labelStyle?: TextStyleProp,
     iconStyle?: ViewStyleProp,
   };
-  declare export var TabBarTop: React$ComponentType<_TabBarTopProps>;
+  declare export var MaterialTopTabBar: React$ComponentType<_MaterialTopTabBarProps>;
 
-  declare type _TabBarBottomProps = {
+  declare type _BottomTabBarButtonComponentProps = {
+    onPress: () => void,
+    onLongPress: () => void,
+    testID: string,
+    accessibilityLabel: string,
+    style: ViewStyleProp,
+  };
+  declare type _BottomTabBarProps = {
     activeTintColor: string,
     activeBackgroundColor: string,
     adaptive?: boolean,
@@ -1200,15 +1254,21 @@ declare module 'react-navigation' {
     }) => void,
     getTestIDProps: (scene: TabScene) => (scene: TabScene) => any,
     renderIcon: (scene: TabScene) => React$Node,
+    getButtonComponent: (
+      scene: TabScene
+    ) => React$ComponentType<_BottomTabBarButtonComponentProps>,
     style?: ViewStyleProp,
     animateStyle?: ViewStyleProp,
     labelStyle?: TextStyleProp,
     tabStyle?: ViewStyleProp,
     showIcon?: boolean,
   };
-  declare export var TabBarBottom: React$ComponentType<_TabBarBottomProps>;
+  declare export var BottomTabBar: React$ComponentType<_BottomTabBarProps>;
 
-  declare export function withNavigation<Props: {}, ComponentType: React$ComponentType<Props>>(
+  declare export function withNavigation<
+    Props: {},
+    ComponentType: React$ComponentType<Props>
+  >(
     Component: ComponentType
   ): React$ComponentType<
     $Diff<
@@ -1218,9 +1278,14 @@ declare module 'react-navigation' {
       }
     >
   >;
-  declare export function withNavigationFocus<Props: {}, ComponentType: React$ComponentType<Props>>(
+  declare export function withNavigationFocus<
+    Props: {},
+    ComponentType: React$ComponentType<Props>
+  >(
     Component: ComponentType
-  ): React$ComponentType<$Diff<React$ElementConfig<ComponentType>, { isFocused: boolean | void }>>;
+  ): React$ComponentType<
+    $Diff<React$ElementConfig<ComponentType>, { isFocused: boolean | void }>
+  >;
 
   declare export function getNavigation<State: NavigationState, Options: {}>(
     router: NavigationRouter<State, Options>,
@@ -1230,4 +1295,16 @@ declare module 'react-navigation' {
     getScreenProps: () => {},
     getCurrentNavigation: () => ?NavigationScreenProp<State>
   ): NavigationScreenProp<State>;
+
+  declare export function getActiveChildNavigationOptions<
+    State: NavigationState,
+    Options: {}
+  >(
+    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,25 +1,21 @@
 {
   "name": "react-navigation",
-  "version": "3.3.1",
+  "version": "4.0.3",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
+  "types": "typescript/react-navigation.d.ts",
   "repository": {
     "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": {
@@ -27,44 +23,36 @@
   },
   "files": [
     "src",
-    "NavigationTestUtils.js"
+    "NavigationTestUtils.js",
+    "typescript"
   ],
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "3.1.1",
-    "@react-navigation/native": "3.1.5",
-    "react-navigation-drawer": "1.2.0",
-    "react-navigation-stack": "1.0.10",
-    "react-navigation-tabs": "1.0.2"
+    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/native": "^3.6.2"
   },
   "devDependencies": {
-    "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",
-    "conventional-changelog-cli": "^2.0.5",
-    "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": "^22.1.3",
-    "jest-expo": "^25.1.0",
-    "lint-staged": "^4.2.1",
-    "prettier": "^1.12.1",
-    "prettier-eslint": "^8.8.1",
-    "react": "16.2.0",
-    "react-native": "^0.52.0",
-    "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,
@@ -88,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,9 +0,0 @@
-#!/bin/bash
-
-set -eo pipefail
-
-case $CIRCLE_NODE_INDEX in 
-  0) yarn test && yarn codecov ;; 
-  #1) cd examples/NavigationPlayground && yarn && yarn test ;; 
-  #2) cd examples/ReduxExample && yarn && yarn test ;; 
-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,182 +1,4 @@
-/* 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 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;
-  },
-
-  // Routers and Actions
-
-  get DrawerRouter() {
-    return require('react-navigation-drawer').DrawerRouter;
-  },
-  get DrawerActions() {
-    return require('react-navigation-drawer').DrawerActions;
-  },
-
-  // Views
-  get Transitioner() {
-    console.warn(
-      'Importing the stack Transitioner directly from react-navigation is now deprecated. Instead, import { Transitioner } from "react-navigation-stack";'
-    );
-    return require('react-navigation-stack').Transitioner;
-  },
-  get StackView() {
-    return require('react-navigation-stack').StackView;
-  },
-  get StackViewCard() {
-    return require('react-navigation-stack').StackViewCard;
-  },
-  get StackViewTransitionConfigs() {
-    return require('react-navigation-stack').StackViewTransitionConfigs;
-  },
-
-  // Header
-  get Header() {
-    return require('react-navigation-stack').Header;
-  },
-  get HeaderTitle() {
-    return require('react-navigation-stack').HeaderTitle;
-  },
-  get HeaderBackButton() {
-    return require('react-navigation-stack').HeaderBackButton;
-  },
-  get HeaderStyleInterpolator() {
-    return require('react-navigation-stack').HeaderStyleInterpolator;
-  },
-
-  // DrawerView
-  get DrawerView() {
-    return require('react-navigation-drawer').DrawerView;
-  },
-  get DrawerItems() {
-    return require('react-navigation-drawer').DrawerNavigatorItems;
-  },
-  get DrawerSidebar() {
-    return require('react-navigation-drawer').DrawerSidebar;
-  },
-
-  // Tabs
-  get BottomTabBar() {
-    return require('react-navigation-tabs').BottomTabBar;
-  },
-  get MaterialTopTabBar() {
-    return require('react-navigation-tabs').MaterialTopTabBar;
-  },
-};
+export * from './deprecations';

tsconfig.json

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

typescript/react-navigation.d.ts

@@ -0,0 +1,957 @@
+// Type definitions for react-navigation 3.0.0
+// Project: https://github.com/react-navigation/react-navigation
+// Definitions by: Huhuanming <https://github.com/huhuanming>
+//                 mhcgrq <https://github.com/mhcgrq>
+//                 fangpenlin <https://github.com/fangpenlin>
+//                 petejkim <https://github.com/petejkim>
+//                 Kyle Roach <https://github.com/iRoachie>
+//                 phanalpha <https://github.com/phanalpha>
+//                 charlesfamu <https://github.com/charlesfamu>
+//                 Tim Wang <https://github.com/timwangdev>
+//                 Qibang Sun <https://github.com/bang88>
+//                 Sergei Butko: <https://github.com/svbutko>
+//                 Veit Lehmann: <https://github.com/levito>
+//                 Steven Miller <https://github.com/YourGamesBeOver>
+//                 Armando Assuncao <https://github.com/ArmandoAssuncao>
+//                 Ciaran Liedeman <https://github.com/cliedeman>
+//                 Edward Sammut Alessi <https://github.com/Slessi>
+//                 Jérémy Magrin <https://github.com/magrinj>
+//                 Luca Campana <https://github.com/TizioFittizio>
+//                 Ullrich Schaefer <https://github.com/stigi>
+//                 Linus Unnebäck <https://github.com/LinusU>
+//                 Yosuke Seki <https://github.com/jshosomichi>
+//                 Jake <https://github.com/jakebooyah>
+//                 Gustavo Brunoro <https://github.com/brunoro>
+//                 Denis Frezzato <https://github.com/DenisFrezzato>
+//                 Mickael Wegerich <https://github.com/mickaelw>
+//                 Max Davidson <https://github.com/maxdavidson>
+//                 Lachlan Young <https://github.com/builtbyproxy>
+//                 Jason Killian <https://github.com/jkillian>
+//                 Jan Hesters <https://github.com/janhesters>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+declare module 'react-navigation' {
+  import * as React from 'react';
+
+  import {
+    Animated,
+    Text,
+    TextInput,
+    StatusBar,
+    TextStyle,
+    ViewProps,
+    ViewStyle,
+    StyleProp,
+  } from 'react-native';
+
+  // re-export Scrollables
+  // @todo: should we re-export from RNGH? not currently exposed through it
+  export { FlatList, SectionList, ScrollView } from 'react-native';
+
+  // @todo - any..
+  export function getActiveChildNavigationOptions<S>(
+    navigation: NavigationProp<S>,
+    screenProps?: unknown,
+    theme?: SupportedThemes
+  ): NavigationParams;
+
+  // @todo when we split types into common, native and web,
+  // we can properly change Animated.Value to its real value
+  export type AnimatedValue = any;
+
+  /**
+   * NavigationState is a tree of routes for a single navigator, where each child
+   * route may either be a NavigationScreenRoute or a NavigationRouterRoute.
+   * NavigationScreenRoute represents a leaf screen, while the
+   * NavigationRouterRoute represents the state of a child navigator.
+   *
+   * NOTE: NavigationState is a state tree local to a single navigator and
+   * its child navigators (via the routes field).
+   * If we're in navigator nested deep inside the app, the state will only be the
+   * state for that navigator.
+   * The state for the root navigator of our app represents the whole navigation
+   * state for the whole app.
+   */
+  export interface NavigationState {
+    /**
+     * Index refers to the active child route in the routes array.
+     */
+    index: number;
+    routes: NavigationRoute[];
+    isTransitioning: boolean;
+    key: string;
+    params?: NavigationParams | undefined;
+  }
+
+  export interface DrawerNavigationState extends NavigationState {
+    isDrawerOpen: boolean;
+    isTransitioning: boolean;
+  }
+
+  export type NavigationRoute<Params = NavigationParams> =
+    | NavigationLeafRoute<Params>
+    | NavigationStateRoute<Params>;
+
+  export interface NavigationLeafRoute<Params = NavigationParams> {
+    /**
+     * React's key used by some navigators. No need to specify these manually,
+     * they will be defined by the router.
+     */
+    key: string;
+    /**
+     * Index that represents the depth of the stack
+     */
+    index: number;
+    /**
+     * For example 'Home'.
+     * This is used as a key in a route config when creating a navigator.
+     */
+    routeName: string;
+    /**
+     * Path is an advanced feature used for deep linking and on the web.
+     */
+    path?: string;
+    /**
+     * Params passed to this route when navigating to it,
+     * e.g. `{ car_id: 123 }` in a route that displays a car.
+     */
+    params?: Params;
+    /**
+     * Array containing the navigator's routes
+     */
+    routes: NavigationRoute[];
+    /**
+     * Flag that indicates the transition state of the route
+     */
+    isTransitioning: boolean;
+  }
+
+  export type NavigationStateRoute<
+    NavigationLeafRouteParams
+  > = NavigationLeafRoute<NavigationLeafRouteParams> & NavigationState;
+
+  export type NavigationScreenOptionsGetter<Options> = (
+    navigation: NavigationScreenProp<NavigationRoute<any>>,
+    screenProps: unknown | null,
+    theme: SupportedThemes
+  ) => Options;
+
+  export interface NavigationRouter<State = NavigationState, Options = {}> {
+    /**
+     * The reducer that outputs the new navigation state for a given action, with
+     * an optional previous state. When the action is considered handled but the
+     * state is unchanged, the output state is null.
+     */
+    getStateForAction: (
+      action: NavigationAction,
+      lastState?: State
+    ) => State | null;
+
+    /**
+     * Maps a URI-like string to an action. This can be mapped to a state
+     * using `getStateForAction`.
+     */
+    getActionForPathAndParams: (
+      path: string,
+      params?: NavigationParams
+    ) => NavigationAction | null;
+
+    getPathAndParamsForState: (
+      state: State
+    ) => {
+      path: string;
+      params?: NavigationParams;
+    };
+
+    getComponentForRouteName: (routeName: string) => NavigationComponent<{}, NavigationScreenProp<NavigationRoute>>;
+
+    getComponentForState: (state: State) => NavigationComponent<{}, NavigationScreenProp<NavigationRoute>>;
+
+    getActionCreators: (
+      route: NavigationRoute,
+      key: string
+    ) => {
+      [key: string]: () => NavigationAction;
+    };
+
+    /**
+     * Gets the screen navigation options for a given screen.
+     *
+     * For example, we could get the config for the 'Foo' screen when the
+     * `navigation.state` is:
+     *
+     *  {routeName: 'Foo', key: '123'}
+     */
+    getScreenOptions: NavigationScreenOptionsGetter<Options>;
+  }
+
+  export type NavigationScreenComponent<Options, NavigationScreenPropType> = React.ComponentType<any> & {
+    navigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
+  };
+
+  export interface NavigationScreenConfigProps<NavigationScreenPropType> {
+    navigation: NavigationScreenPropType;
+    screenProps: unknown;
+    theme: SupportedThemes;
+  }
+
+  export type NavigationScreenConfig<Options, NavigationScreenPropType> =
+    | Options
+    | ((
+        navigationOptionsContainer: NavigationScreenConfigProps<NavigationScreenPropType> & {
+          navigationOptions: NavigationScreenConfig<Options, NavigationScreenPropType>;
+        }
+      ) => Options);
+
+  export type NavigationComponent<Options, NavigationPropType> =
+    | NavigationScreenComponent<Options, NavigationPropType>
+    | NavigationNavigator<Options, NavigationPropType>;
+
+  export type NavigationNavigator<Options, NavigationPropType> = React.ComponentType<NavigationNavigatorProps<Options>> & {
+    router: NavigationRouter<Options>;
+    navigationOptions?: NavigationScreenConfig<Options, NavigationPropType>;
+  };
+
+  export interface NavigationParams {
+    [key: string]: any;
+  }
+
+  export interface NavigationNavigateActionPayload {
+    routeName: string;
+    params?: NavigationParams;
+
+    // The action to run inside the sub-router
+    action?: NavigationNavigateAction;
+
+    key?: string;
+  }
+
+  export interface NavigationNavigateAction
+    extends NavigationNavigateActionPayload {
+    type: 'Navigation/NAVIGATE';
+  }
+
+  export interface NavigationBackActionPayload {
+    key?: string | null;
+    immediate?: boolean;
+  }
+
+  export interface NavigationBackAction extends NavigationBackActionPayload {
+    type: 'Navigation/BACK';
+  }
+
+  export interface NavigationSetParamsActionPayload {
+    // The key of the route where the params should be set
+    key: string;
+
+    // The new params to merge into the existing route params
+    params?: NavigationParams;
+  }
+
+  export interface NavigationSetParamsAction
+    extends NavigationSetParamsActionPayload {
+    type: 'Navigation/SET_PARAMS';
+  }
+
+  export interface NavigationInitActionPayload {
+    params?: NavigationParams;
+  }
+
+  export interface NavigationInitAction extends NavigationInitActionPayload {
+    type: 'Navigation/INIT';
+    key?: string;
+  }
+
+  export interface NavigationReplaceActionPayload {
+    key?: string;
+    newKey?: string;
+    routeName: string;
+    params?: NavigationParams;
+    action?: NavigationNavigateAction;
+  }
+
+  export interface NavigationReplaceAction {
+    type: 'Navigation/REPLACE';
+    key: string;
+    routeName: string;
+    params?: NavigationParams;
+    action?: NavigationNavigateAction;
+  }
+
+  export interface NavigationCompleteTransitionActionPayload {
+    key?: string;
+    toChildKey?: string;
+  }
+
+  export interface NavigationCompleteTransitionAction {
+    type: 'Navigation/COMPLETE_TRANSITION';
+    key: string;
+  }
+
+  export interface NavigationResetActionPayload {
+    index: number;
+    key?: string | null;
+    actions: NavigationNavigateAction[];
+  }
+
+  export interface NavigationResetAction extends NavigationResetActionPayload {
+    type: 'Navigation/RESET';
+  }
+
+  export interface NavigationUriActionPayload {
+    uri: string;
+  }
+
+  export interface NavigationUriAction extends NavigationUriActionPayload {
+    type: 'Navigation/URI';
+  }
+
+  export interface NavigationPopActionPayload {
+    // n: the number of routes to pop of the stack
+    n?: number;
+    immediate?: boolean;
+  }
+
+  export interface NavigationPopAction extends NavigationPopActionPayload {
+    type: 'Navigation/POP';
+    key?: string;
+  }
+
+  export interface NavigationPopToTopActionPayload {
+    key?: string;
+    immediate?: boolean;
+  }
+
+  export interface NavigationPopToTopAction
+    extends NavigationPopToTopActionPayload {
+    type: 'Navigation/POP_TO_TOP';
+  }
+
+  export interface NavigationPushActionPayload {
+    routeName: string;
+    params?: NavigationParams;
+    action?: NavigationNavigateAction;
+    key?: string;
+  }
+
+  export interface NavigationPushAction {
+    type: 'Navigation/PUSH';
+    routeName: string;
+    params?: NavigationParams;
+    action?: NavigationNavigateAction;
+    key?: string;
+  }
+
+  export interface NavigationJumpToActionPayload {
+    routeName: string;
+    key: string;
+    params?: NavigationParams;
+  }
+
+  export interface NavigationJumpToAction {
+    type: 'Navigation/JUMP_TO';
+    preserveFocus: boolean;
+    routeName: string;
+    key: string;
+    params?: NavigationParams;
+  }
+
+  export interface NavigationDrawerOpenedAction {
+    key?: string;
+    type: 'Navigation/DRAWER_OPENED';
+  }
+
+  export interface NavigationDrawerClosedAction {
+    key?: string;
+    type: 'Navigation/DRAWER_CLOSED';
+  }
+
+  export interface NavigationOpenDrawerAction {
+    key?: string;
+    type: 'Navigation/OPEN_DRAWER';
+  }
+
+  export interface NavigationCloseDrawerAction {
+    key?: string;
+    type: 'Navigation/CLOSE_DRAWER';
+  }
+
+  export interface NavigationToggleDrawerAction {
+    key?: string;
+    type: 'Navigation/TOGGLE_DRAWER';
+  }
+
+  /**
+   * Switch Navigator
+   */
+  export interface NavigationSwitchRouterConfig {
+    initialRouteName?: string;
+    initialRouteParams?: NavigationParams;
+    paths?: NavigationPathsConfig;
+    order?: string[];
+    backBehavior?: 'none' | 'initialRoute' | 'history' | 'order'; // defaults to 'none'
+    resetOnBlur?: boolean; // defaults to `true`
+  }
+
+  export function SwitchRouter(
+    routeConfigs: NavigationRouteConfigMap<any, any>,
+    config?: NavigationSwitchRouterConfig
+  ): NavigationRouter<any, any>;
+
+  export type NavigationStackAction =
+    | NavigationInitAction
+    | NavigationNavigateAction
+    | NavigationBackAction
+    | NavigationSetParamsAction
+    | NavigationResetAction
+    | NavigationReplaceAction
+    | NavigationPopAction
+    | NavigationPushAction
+    | NavigationPopToTopAction
+    | NavigationCompleteTransitionAction;
+
+  export type NavigationTabAction =
+    | NavigationInitAction
+    | NavigationNavigateAction
+    | NavigationBackAction;
+
+  export type NavigationDrawerAction =
+    | NavigationDrawerOpenedAction
+    | NavigationDrawerClosedAction
+    | NavigationOpenDrawerAction
+    | NavigationCloseDrawerAction
+    | NavigationToggleDrawerAction;
+
+  export type NavigationSwitchAction = NavigationJumpToAction;
+
+  export type NavigationAction =
+    | NavigationInitAction
+    | NavigationStackAction
+    | NavigationTabAction
+    | NavigationDrawerAction
+    | NavigationSwitchAction
+    | { type: 'CHILD_ACTION'; key?: string };
+
+  export type NavigationRouteConfig<Options, NavigationScreenPropType> =
+    | NavigationComponent<Options, NavigationScreenPropType>
+    | (
+        | { screen: NavigationComponent<Options, NavigationScreenPropType> }
+        | { getScreen(): NavigationScreenComponent<Options, NavigationScreenPropType> }) & {
+        navigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
+        path?: string;
+      };
+
+  export interface NavigationPathsConfig {
+    [routeName: string]: string;
+  }
+
+  // tslint:disable-next-line:strict-export-declare-modifiers
+  export interface NavigationTabRouterConfig {
+    initialRouteName?: string;
+    initialRouteParams?: NavigationParams;
+    paths?: NavigationPathsConfig;
+    order?: string[]; // todo: type these as the real route names rather than 'string'
+    backBehavior?: 'none' | 'initialRoute' | 'history' | 'order'; // defaults to 'initialRoute'
+    resetOnBlur?: boolean;
+  }
+
+  export interface NavigationRouteConfigMap<Options, NavigationScreenPropType> {
+    [routeName: string]: NavigationRouteConfig<Options, NavigationScreenPropType>;
+  }
+
+  export type NavigationDispatch = (action: NavigationAction) => boolean;
+
+  export interface NavigationProp<S> {
+    state: S;
+    dispatch: NavigationDispatch;
+  }
+
+  export type EventType =
+    | 'willFocus'
+    | 'didFocus'
+    | 'willBlur'
+    | 'didBlur'
+    | 'action';
+
+  export interface NavigationEventPayload {
+    type: EventType;
+    action: NavigationAction;
+    state: NavigationState;
+    lastState: NavigationState | null | undefined;
+  }
+
+  export type NavigationEventCallback = (
+    payload: NavigationEventPayload
+  ) => void;
+
+  export interface NavigationEventSubscription {
+    remove: () => void;
+  }
+
+  export interface NavigationEventsProps extends ViewProps {
+    onWillFocus?: NavigationEventCallback;
+    onDidFocus?: NavigationEventCallback;
+    onWillBlur?: NavigationEventCallback;
+    onDidBlur?: NavigationEventCallback;
+  }
+
+  export const NavigationEvents: React.ComponentType<NavigationEventsProps>;
+
+  export interface NavigationScreenProp<S, P = NavigationParams> {
+    state: S & { params?: P };
+    dispatch: NavigationDispatch;
+    goBack: (routeKey?: string | null) => boolean;
+    dismiss: () => boolean;
+    navigate(options: {
+      routeName:
+        | string
+        | {
+            routeName: string;
+            params?: NavigationParams;
+            action?: NavigationNavigateAction;
+            key?: string;
+          };
+      params?: NavigationParams;
+      action?: NavigationAction;
+      key?: string;
+    }): boolean;
+    navigate(
+      routeNameOrOptions: string,
+      params?: NavigationParams,
+      action?: NavigationAction
+    ): boolean;
+    openDrawer: () => any;
+    closeDrawer: () => any;
+    toggleDrawer: () => any;
+    getParam<T extends keyof P>(
+      param: T,
+      fallback: NonNullable<P[T]>
+    ): NonNullable<P[T]>;
+    getParam<T extends keyof P>(param: T): P[T];
+    setParams: (newParams: Partial<P>) => boolean;
+    emit: (eventName: 'refocus') => void;
+    addListener: (
+      eventName: string,
+      callback: NavigationEventCallback
+    ) => NavigationEventSubscription;
+    isFocused: () => boolean;
+    isFirstRouteInParent: () => boolean;
+    router?: NavigationRouter;
+    dangerouslyGetParent: () => NavigationScreenProp<S> | undefined;
+  }
+
+  export interface NavigationNavigatorProps<O = {}, S = {}> {
+    theme?: SupportedThemes | 'no-preference';
+    detached?: boolean;
+    navigation?: NavigationProp<S>;
+    screenProps?: unknown;
+    navigationOptions?: O;
+  }
+
+  export type NavigatorType =
+    | 'react-navigation/STACK'
+    | 'react-navigation/TABS'
+    | 'react-navigation/DRAWER';
+
+  export interface NavigationContainerProps<S = {}, O = {}> {
+    uriPrefix?: string | RegExp;
+    /**
+     * Controls whether the navigation container handles URLs opened via 'Linking'
+     * @see https://facebook.github.io/react-native/docs/linking
+     * @see https://reactnavigation.org/docs/en/deep-linking.html
+     */
+    enableURLHandling?: boolean; // defaults to true
+    onNavigationStateChange?: (
+      prevNavigationState: NavigationState,
+      nextNavigationState: NavigationState,
+      action: NavigationAction
+    ) => void | null | undefined;
+    navigation?: NavigationScreenProp<S>;
+    /*
+     * This prop is no longer supported. Use `loadNavigationState` and
+     * `persistNavigationState` instead.
+     */
+    persistenceKey?: string | null;
+
+    loadNavigationState?: () => Promise<any>;
+    persistNavigationState?: (state: NavigationState) => Promise<any>;
+
+    renderLoadingExperimental?: React.ComponentType;
+    screenProps?: unknown;
+    navigationOptions?: O;
+    style?: StyleProp<ViewStyle>;
+  }
+
+  export interface NavigationContainerComponent
+    extends React.Component<
+      NavigationContainerProps & NavigationNavigatorProps<any>
+    > {
+    dispatch: NavigationDispatch;
+  }
+
+  export interface NavigationContainer
+    extends React.ComponentClass<
+      NavigationContainerProps & NavigationNavigatorProps<any>
+    > {
+    new (
+      props: NavigationContainerProps & NavigationNavigatorProps<any>,
+      context?: any
+    ): NavigationContainerComponent;
+
+    router: NavigationRouter<any, any>;
+    screenProps: unknown;
+    navigationOptions: any;
+    state: { nav: NavigationState | null };
+  }
+
+  export interface SwitchNavigatorConfig {
+    initialRouteName: string;
+    resetOnBlur?: boolean;
+    paths?: NavigationPathsConfig;
+    backBehavior?: 'none' | 'initialRoute';
+  }
+
+  // Return createNavigationContainer
+  export type _SwitchNavigatorConfig = NavigationSwitchRouterConfig;
+
+  export function createSwitchNavigator(
+    routeConfigMap: NavigationRouteConfigMap<SwitchNavigatorConfig, NavigationScreenProp<NavigationRoute>>,
+    switchConfig?: SwitchNavigatorConfig
+  ): NavigationContainer;
+
+  /**
+   * NavigationActions
+   */
+  export namespace NavigationActions {
+    const BACK: 'Navigation/BACK';
+    const INIT: 'Navigation/INIT';
+    const NAVIGATE: 'Navigation/NAVIGATE';
+    const SET_PARAMS: 'Navigation/SET_PARAMS';
+
+    function init(options?: NavigationInitActionPayload): NavigationInitAction;
+    function navigate(
+      options: NavigationNavigateActionPayload
+    ): NavigationNavigateAction;
+    function back(options?: NavigationBackActionPayload): NavigationBackAction;
+    function setParams(
+      options: NavigationSetParamsActionPayload
+    ): NavigationSetParamsAction;
+  }
+
+  /**
+   * DrawerActions
+   */
+  export namespace DrawerActions {
+    const OPEN_DRAWER: 'Navigation/OPEN_DRAWER';
+    const CLOSE_DRAWER: 'Navigation/CLOSE_DRAWER';
+    const TOGGLE_DRAWER: 'Navigation/TOGGLE_DRAWER';
+
+    function openDrawer(): NavigationOpenDrawerAction;
+    function closeDrawer(): NavigationCloseDrawerAction;
+    function toggleDrawer(): NavigationToggleDrawerAction;
+  }
+
+  /**
+   * StackActions
+   */
+  export namespace StackActions {
+    const POP: 'Navigation/POP';
+    const POP_TO_TOP: 'Navigation/POP_TO_TOP';
+    const PUSH: 'Navigation/PUSH';
+    const RESET: 'Navigation/RESET';
+    const REPLACE: 'Navigation/REPLACE';
+    const COMPLETE_TRANSITION: 'Navigation/COMPLETE_TRANSITION';
+
+    function pop(options: NavigationPopActionPayload): NavigationPopAction;
+    function popToTop(
+      options?: NavigationPopToTopActionPayload
+    ): NavigationPopToTopAction;
+
+    function push(options: NavigationPushActionPayload): NavigationPushAction;
+    function reset(
+      options: NavigationResetActionPayload
+    ): NavigationResetAction;
+
+    function replace(
+      options: NavigationReplaceActionPayload
+    ): NavigationReplaceAction;
+
+    function completeTransition(
+      payload?: NavigationCompleteTransitionActionPayload
+    ): NavigationCompleteTransitionAction;
+  }
+
+  /**
+   * SwitchActions
+   */
+  export namespace SwitchActions {
+    const JUMP_TO: 'Navigation/JUMP_TO';
+
+    function jumpTo(
+      options: NavigationJumpToActionPayload
+    ): NavigationJumpToAction;
+  }
+
+  /**
+   * Tab Router
+   *
+   * @desc from react-navigation/src/routers/TabRouter.js
+   */
+  export function TabRouter(
+    routeConfigs: NavigationRouteConfigMap<any, any>,
+    config: NavigationTabRouterConfig
+  ): NavigationRouter<any, any>;
+
+  /**
+   * Stack Router
+   *
+   * @desc from react-navigation/src/routers/StackRouter.js
+   */
+  export function StackRouter(
+    routeConfigs: NavigationRouteConfigMap<any, any>,
+    config?: NavigationTabRouterConfig
+  ): NavigationRouter<any, any>;
+
+  export interface NavigationStackRouterConfig {
+    initialRouteName?: string;
+    initialRouteParams?: NavigationParams;
+    paths?: NavigationPathsConfig;
+    initialRouteKey?: string;
+  }
+
+  /**
+   * Create Navigator
+   *
+   * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js
+   */
+  export interface NavigationDescriptor<
+    Params = NavigationParams,
+    Options = {},
+    NavigationScreenPropType = NavigationScreenProp<NavigationRoute>
+  > {
+    key: string;
+    state: NavigationLeafRoute<Params> | NavigationStateRoute<Params>;
+    navigation: NavigationScreenPropType;
+    options: Options;
+    getComponent: () => React.ComponentType;
+  }
+
+  export type NavigationView<O, S> = React.ComponentType<
+    {
+      descriptors: { [key: string]: NavigationDescriptor };
+      navigationConfig: O;
+      screenProps?: unknown;
+    } & NavigationInjectedProps
+  >;
+
+  export type CreateNavigatorConfig<NavigatorConfig, RouterConfig, Options> = NavigatorConfig & RouterConfig & {
+    defaultNavigationOptions?: Options;
+    navigationOptions?: { [key: string]: any };
+  }
+
+  export function createNavigator<S, Options>(
+    view: NavigationView<Options, S>,
+    router: NavigationRouter<S, Options>,
+    navigatorConfig?: {} | null,
+    navigatorType?: NavigatorType
+  ): any;
+
+  /**
+   * Create an HOC that injects the navigation and manages the navigation state
+   * in case it's not passed from above.
+   * This allows to use e.g. the StackNavigator and TabNavigator as root-level
+   * components.
+   *
+   * @see https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js
+   */
+  export function createNavigationContainer<Options, NavigationPropType>(
+    Component: NavigationNavigator<Options, NavigationPropType>
+  ): NavigationContainer;
+
+  /**
+   * Create an app container to wrap the root navigator
+   *
+   * @see https://github.com/react-navigation/react-navigation-native/blob/098e2e52b349d37357109d5aee545fa74699d3d4/src/createAppContainer.js#L64
+   */
+  export function createAppContainer<Options, NavigationPropType>(
+    Component: NavigationNavigator<Options, NavigationPropType>
+  ): NavigationContainer;
+
+  /**
+   * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS
+   */
+
+  /**
+   * BEGIN CUSTOM CONVENIENCE INTERFACES
+   */
+
+  export interface NavigationScreenProps<
+    Params = NavigationParams,
+    Options = {},
+    NavigationScreenPropType = NavigationScreenProp<NavigationRoute>
+  > {
+    navigation: NavigationScreenProp<NavigationRoute<Params>, Params>;
+    screenProps?: unknown;
+    navigationOptions?: NavigationScreenConfig<Options, NavigationScreenPropType>;
+  }
+
+  /**
+   * END CUSTOM CONVENIENCE INTERFACES
+   */
+
+  export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
+
+  export type InferProps<
+    T extends React.ComponentType<any>
+  > = T extends React.ComponentType<infer P> ? P : never;
+
+  export interface NavigationOrientationInjectedProps {
+    isLandscape: boolean;
+  }
+
+  export function createKeyboardAwareNavigator<Props>(
+    Comp: React.ComponentType<Props>,
+    stackConfig: object
+  ): React.ComponentType<Props>;
+
+  export function withOrientation<P extends NavigationOrientationInjectedProps>(
+    Component: React.ComponentType<P>
+  ): React.ComponentType<Omit<P, keyof NavigationOrientationInjectedProps>>;
+
+  export interface NavigationInjectedProps<P = NavigationParams> {
+    navigation: NavigationScreenProp<NavigationRoute<P>, P>;
+  }
+
+  // If the wrapped component is a class, we can get a ref to it
+  export function withNavigation<
+    P extends NavigationInjectedProps,
+    T extends React.ComponentClass<P>
+  >(
+    Component: T & React.ComponentClass<P>
+  ): React.ComponentType<
+    Omit<P, keyof NavigationInjectedProps> & {
+      onRef?: React.Ref<InstanceType<T>>;
+    }
+  >;
+
+  export function withNavigation<P extends NavigationInjectedProps>(
+    Component: React.ComponentType<P>
+  ): React.ComponentType<Omit<P, keyof NavigationInjectedProps>>;
+
+  // For backwards compatibility
+  export function withNavigation<T = {}, P = NavigationParams>(
+    Component: React.ComponentType<T & NavigationInjectedProps<P>>
+  ): React.ComponentType<
+    T & { onRef?: React.Ref<React.Component<T & NavigationInjectedProps<P>>> }
+  >;
+
+  export const NavigationProvider: React.ComponentType<{
+    value: NavigationProp<any>;
+  }>;
+
+  export interface NavigationFocusInjectedProps<P = NavigationParams>
+    extends NavigationInjectedProps<P> {
+    isFocused: boolean;
+  }
+
+  // If the wrapped component is a class, we can get a ref to it
+  export function withNavigationFocus<
+    P extends NavigationFocusInjectedProps,
+    T extends React.ComponentClass<P>
+  >(
+    Component: T & React.ComponentClass<P>
+  ): React.ComponentType<
+    Omit<P, keyof NavigationFocusInjectedProps> & {
+      onRef?: React.Ref<InstanceType<T>>;
+    }
+  >;
+
+  export function withNavigationFocus<P extends NavigationFocusInjectedProps>(
+    Component: React.ComponentType<P>
+  ): React.ComponentType<Omit<P, keyof NavigationFocusInjectedProps>>;
+
+  // For backwards compatibility
+  export function withNavigationFocus<T = {}, P = NavigationParams>(
+    Component: React.ComponentType<T & NavigationFocusInjectedProps<P>>
+  ): React.ComponentType<
+    T & {
+      onRef?: React.Ref<React.Component<T & NavigationFocusInjectedProps<P>>>;
+    }
+  >;
+
+  /**
+   * SafeAreaView Component
+   */
+  export type SafeAreaViewForceInsetValue = 'always' | 'never';
+  export interface SafeAreaViewProps extends ViewProps {
+    forceInset?: {
+      top?: SafeAreaViewForceInsetValue;
+      bottom?: SafeAreaViewForceInsetValue;
+      left?: SafeAreaViewForceInsetValue;
+      right?: SafeAreaViewForceInsetValue;
+      horizontal?: SafeAreaViewForceInsetValue;
+      vertical?: SafeAreaViewForceInsetValue;
+    };
+    children?: React.ReactNode;
+  }
+
+  export const SafeAreaView: React.ComponentClass<SafeAreaViewProps>;
+
+  export const NavigationContext: React.Context<
+    NavigationScreenProp<NavigationRoute>
+  >;
+
+  export function createKeyboardAwareNavigator<Props>(
+    Comp: React.ComponentType<Props>,
+    stackConfig: object
+  ): React.ComponentType<Props>;
+
+  /**
+   * SceneView
+   */
+
+  export interface SceneViewProps {
+    component: React.ComponentType;
+    screenProps: unknown;
+    navigation: NavigationProp<any>;
+  }
+
+  export const SceneView: React.ComponentType<SceneViewProps>;
+
+  /**
+   * Themes
+   */
+
+  // Context
+  export type SupportedThemes = 'light' | 'dark';
+  export const ThemeContext: React.Context<SupportedThemes>;
+
+  // Hooks
+  export function useTheme(): SupportedThemes;
+
+  // Colors
+  export interface Theme {
+    header: string;
+    headerBorder: string;
+    body: string;
+    bodyBorder: string;
+    bodyContent: string;
+    bodyContentBorder: string;
+    label: string;
+  }
+  export const ThemeColors: { [k in SupportedThemes]: Theme };
+
+  // Themed components
+  interface ThemedStatusBarProps
+    extends React.ComponentProps<typeof StatusBar> {}
+  interface ThemedTextProps extends React.ComponentProps<typeof Text> {}
+  interface ThemedTextInputProps
+    extends React.ComponentProps<typeof TextInput> {}
+
+  export namespace Themed {
+    export const StatusBar: React.ComponentType<ThemedStatusBarProps>;
+    export const Text: React.ComponentType<ThemedTextProps>;
+    export const TextInput: React.ComponentType<ThemedTextInputProps>;
+  }
+}

typings/react-navigation-tabs.d.ts

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