Release 3.4.0

This corresponds to three `flow-typed` PRs:

1. https://github.com/flow-typed/flow-typed/pull/3140 Get rid of deprecated Navigator exports in 3.0
2. https://github.com/flow-typed/flow-typed/pull/3147 Refine AnimatedValue type
3. https://github.com/flow-typed/flow-typed/pull/3148 Introduce SafeAreaViewInsets type

.circleci/config.yml

@@ -16,25 +16,24 @@ jobs:
       - 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}"
+      # - 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}"
       - 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
+# notify:
+#  webhooks:
+#    - url: https://react-navigation-ci.now.sh

.github/ISSUE_TEMPLATE.md

@@ -25,7 +25,7 @@ Bugs with react-navigation must be reproducible *without any external libraries
 
 ### How to reproduce
 
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repoistory as that is outside of the scope of React Navigation.
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
 - Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
 - Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
 

.release-it.json

@@ -0,0 +1,15 @@
+{
+  "increment": "conventional:angular",
+  "changelogCommand": "conventional-changelog -p angular | tail -n +3",
+  "safeBump": false,
+  "src": {
+    "commitMessage": "chore: release %s",
+    "tagName": "v%s"
+  },
+  "npm": {
+    "publish": true
+  },
+  "github": {
+    "release": true
+  }
+}

CHANGELOG.md

@@ -7,63 +7,190 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [2.6.0] - [2018-07-04](https://github.com/react-navigation/react-navigation/releases/tag/2.6.0)
-### Added
-- [NavigationEvents](https://github.com/react-navigation/react-navigation/pull/4188) component as a declarative interface for subscribing to navigation focus events.
+## [3.4.0] - [2019-03-15](https://github.com/react-navigation/react-navigation/releases/tag/3.4.0)
 
-### Fixed
-- Fix stack router child router delegation priority (https://github.com/react-navigation/react-navigation/commit/e8c1833053e37d28f0ce505ff323565abf23b6a2)
-- Avoid crash when calling isFocused on old route (https://github.com/react-navigation/react-navigation/commit/0921889f7a3acfc6d6bcc4909d209eeeee985ba7)
-- Stack router no longer attempts to parse query params within path handling
-- Switch router now has exact same param treatment for URLs as stack router does
+## Added
 
-### Changed
-- Internally we no longer need to special case PlatformHelpers by platform as react-native-web handles the APIs we mocked out with it now.
+- TypeScript type definition now included in the project.
+- Better support for react-native-web in core and stack.
 
-## [2.5.5] - [2018-06-27](https://github.com/react-navigation/react-navigation/releases/tag/2.5.5)
-### Added
-- Throw error in development mode when header navigation option is set to a string - a common mistake that would otherwise result in a cryptic error message.
-- Throw error in development mode when title is not a string.
+## Fixed
 
-### Fixed
-- Delegate to child routers for more than just the top screen in the stack.
-- Update react-navigation-drawer to 0.4.3 to fix `initialRouteParams` option
+- Default key to null in stack reset action (https://github.com/react-navigation/react-navigation-core/commit/59238160d86284a3353d53af10688fcf3f36004f)
+- Fix header back button label and title label scaling. Defaults to false. (https://github.com/react-navigation/react-navigation-stack/commit/c1f1dff465e9eebe274a08e274cf10570045fa23)
 
-## [2.5.4] - [2018-06-27](https://github.com/react-navigation/react-navigation/releases/tag/2.5.4)
-### Fixed
-- Header no longer sometimes flashes for 1 frame when using `header: null` on initial route of stack with floating header.
-- Export `createSwitchNavigator` in react-navigation.web.js
+## Changed
 
-## [2.5.3] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.3)
-### Fixed
-- `setParams` applies to the navigation object it is called on even if that is the navigation object for a navigation view (more details in https://github.com/react-navigation/react-navigation/issues/4497)
+- Remove react-lifecycles-compat from @react-navigation/core
+- NavigationPlayground uses TypeScript
 
-## [2.5.2] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.2)
-### Fixed
-- Update react-navigation-drawer to fix regression in toggleDrawer
+## [3.3.2] - [2019-02-25](https://github.com/react-navigation/react-navigation/releases/tag/3.3.2)
 
-## [2.5.1] - [2018-06-22](https://github.com/react-navigation/react-navigation/releases/tag/2.5.1)
-### Fixed
-- `transitionConfig` in stack navigator no longer passes incorrect `fromTransitionProps` when navigating back
+## Fixed
 
-## [2.5.0] - [2018-06-22](https://github.com/react-navigation/react-navigation/releases/tag/2.5.0)
-### Changed
-- Refactor internals to make it play more nicely with web
+- Updated Flow types (https://github.com/react-navigation/react-navigation/commit/d3040e52b39bc8e91ffc1354d9c5f8c096baf597)
 
-### Fixed
-- `const defaultGetStateForAction = SwitchBasedNavigator.router.getStateForAction` no longer throws error.
-- Updated react-navigation-drawer to 0.4.1 which should fix issues related to automatically closing drawer when changing routes.
+## [3.3.1] - [2019-02-25](https://github.com/react-navigation/react-navigation/releases/tag/3.3.1)
 
-## [2.4.1] - [2018-06-21](https://github.com/react-navigation/react-navigation/releases/tag/2.4.1)
-### Changed
-- Improved examples
+## Fixed
 
-[Unreleased]: https://github.com/react-navigation/react-navigation/compare/2.6.0...HEAD
-[2.6.0]: https://github.com/react-navigation/react-navigation/compare/2.5.5...2.6.0
-[2.5.5]: https://github.com/react-navigation/react-navigation/compare/2.5.4...2.5.5
-[2.5.4]: https://github.com/react-navigation/react-navigation/compare/2.5.3...2.5.4
-[2.5.3]: https://github.com/react-navigation/react-navigation/compare/2.5.2...2.5.3
-[2.5.2]: https://github.com/react-navigation/react-navigation/compare/2.5.1...2.5.2
-[2.5.1]: https://github.com/react-navigation/react-navigation/compare/2.5.0...2.5.1
-[2.5.0]: https://github.com/react-navigation/react-navigation/compare/2.4.1...2.5.0
-[2.4.1]: https://github.com/react-navigation/react-navigation/compare/2.4.0...2.4.1
+- 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.4.0...HEAD
+[3.4.0]: https://github.com/react-navigation/react-navigation/compare/3.3.2...3.4.0
+[3.3.2]: https://github.com/react-navigation/react-navigation/compare/3.3.1...3.3.2
+[3.3.1]: https://github.com/react-navigation/react-navigation/compare/3.3.0...3.3.1
+[3.3.0]: https://github.com/react-navigation/react-navigation/compare/3.2.3...3.3.0
+[3.2.3]: https://github.com/react-navigation/react-navigation/compare/3.2.1...3.2.3
+[3.2.1]: https://github.com/react-navigation/react-navigation/compare/3.2.0...3.2.1
+[3.2.0]: https://github.com/react-navigation/react-navigation/compare/3.1.5...3.2.0
+[3.1.5]: https://github.com/react-navigation/react-navigation/compare/3.1.4...3.1.5
+[3.1.4]: https://github.com/react-navigation/react-navigation/compare/3.1.3...3.1.4
+[3.1.3]: https://github.com/react-navigation/react-navigation/compare/3.1.2...3.1.3
+[3.1.2]: https://github.com/react-navigation/react-navigation/compare/3.0.9...3.1.2
+[3.0.9]: https://github.com/react-navigation/react-navigation/compare/3.0.8...3.0.9
+[3.0.8]: https://github.com/react-navigation/react-navigation/compare/3.0.7...3.0.8
+[3.0.7]: https://github.com/react-navigation/react-navigation/compare/3.0.6...3.0.7
+[3.0.6]: https://github.com/react-navigation/react-navigation/compare/3.0.5...3.0.6
+[3.0.5]: https://github.com/react-navigation/react-navigation/compare/3.0.4...3.0.5
+[3.0.4]: https://github.com/react-navigation/react-navigation/compare/3.0.3...3.0.4
+[3.0.3]: https://github.com/react-navigation/react-navigation/compare/3.0.2...3.0.3
+[3.0.2]: https://github.com/react-navigation/react-navigation/compare/3.0.1...3.0.2
+[3.0.1]: https://github.com/react-navigation/react-navigation/compare/3.0.0...3.0.1
+[3.0.0]: https://github.com/react-navigation/react-navigation/compare/2.x...3.0.0

NavigationTestUtils.js

@@ -0,0 +1,7 @@
+import { _TESTING_ONLY_reset_container_count } from '@react-navigation/native/src/createAppContainer';
+
+export default {
+  resetInternalState: () => {
+    _TESTING_ONLY_reset_container_count();
+  },
+};

README.md

@@ -1,22 +1,12 @@
 # React Navigation
 
-[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-navigation/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-navigation/react-navigation) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
+[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
 
 React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
 
 ## Installation
 
-Since the library is a JS-based solution, to install the latest version of react-navigation you only need to run:
-
-```bash
-yarn add react-navigation
-```
-
-or
-
-```bash
-npm install --save react-navigation
-```
+See: https://reactnavigation.org/docs/en/getting-started.html
 
 ## Documentation
 

examples/NavigationPlayground/.babelrc

@@ -1,17 +1,3 @@
 {
-  "presets": [
-    "babel-preset-expo"
-  ],
-  "env": {
-    "development": {
-      "plugins": [
-        "transform-react-jsx-source"
-      ],
-    },
-    "production": {
-      "plugins": [
-        "transform-remove-console"
-      ]
-    }
-  }
+  "presets": ["module:metro-react-native-babel-preset"]
 }

examples/NavigationPlayground/.buckconfig

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

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

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

examples/NavigationPlayground/.gitignore

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

examples/NavigationPlayground/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

examples/NavigationPlayground/App.js

@@ -1,2 +0,0 @@
-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,9 +1,14 @@
 # Navigation Playground Example
 
-A playground for experimenting with react-navigation in a pure-JS React Native app.
+The NavigationPlayground example app includes a variety of patterns and is used as a simple way for contributors to manually integration test changes.
 
 ## Usage
 
-Please see the [Contributors Guide](https://reactnavigation.org/docs/contributing.html#run-the-example-app) for instructions on running these example apps.
+```bash
+yarn # in the react-navigation root directory
+cd examples/NavigationPlayground
+yarn
+yarn start
+```
 
-You can view this example application directly on your phone by visiting [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
+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/android/.project

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>NavigationPlayground</name>
+	<comment>Project NavigationPlayground created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

examples/NavigationPlayground/android/.settings/org.eclipse.buildship.core.prefs

@@ -0,0 +1,2 @@
+connection.project.dir=
+eclipse.preferences.version=1

examples/NavigationPlayground/android/app/.classpath

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
+	<classpathentry kind="output" path="bin/default"/>
+</classpath>

examples/NavigationPlayground/android/app/.project

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

examples/NavigationPlayground/android/app/.settings/org.eclipse.buildship.core.prefs

@@ -0,0 +1,2 @@
+connection.project.dir=..
+eclipse.preferences.version=1

examples/NavigationPlayground/android/app/BUCK

@@ -0,0 +1,65 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+lib_deps = []
+
+for jarfile in glob(['libs/*.jar']):
+  name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
+  lib_deps.append(':' + name)
+  prebuilt_jar(
+    name = name,
+    binary_jar = jarfile,
+  )
+
+for aarfile in glob(['libs/*.aar']):
+  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
+  lib_deps.append(':' + name)
+  android_prebuilt_aar(
+    name = name,
+    aar = aarfile,
+  )
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.navigationplayground",
+)
+
+android_resource(
+    name = "res",
+    package = "com.navigationplayground",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)

examples/NavigationPlayground/android/app/build.gradle

@@ -0,0 +1,153 @@
+apply plugin: "com.android.application"
+
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * and bundleReleaseJsAndAssets).
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation
+ *   entryFile: "index.android.js",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // whether to bundle JS and assets in another build variant (if configured).
+ *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
+ *   // The configuration property can be in the following formats
+ *   //         'bundleIn${productFlavor}${buildType}'
+ *   //         'bundleIn${buildType}'
+ *   // bundleInFreeDebug: true,
+ *   // bundleInPaidRelease: true,
+ *   // bundleInBeta: true,
+ *
+ *   // whether to disable dev mode in custom build variants (by default only disabled in release)
+ *   // for example: to disable dev mode in the staging build type (if configured)
+ *   devDisabledInStaging: true,
+ *   // The configuration property can be in the following formats
+ *   //         'devDisabledIn${productFlavor}${buildType}'
+ *   //         'devDisabledIn${buildType}'
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"],
+ *
+ *   // override which node gets called and with what additional arguments
+ *   nodeExecutableAndArgs: ["node"],
+ *
+ *   // supply additional arguments to the packager
+ *   extraPackagerArgs: []
+ * ]
+ */
+
+project.ext.react = [
+    entryFile: "index.js"
+]
+
+apply from: "../../node_modules/react-native/react.gradle"
+
+/**
+ * Set this to true to create two separate APKs instead of one:
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+
+    defaultConfig {
+        applicationId "com.navigationplayground"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
+            def versionCodes = ["armeabi-v7a":1, "x86":2]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+        }
+    }
+}
+
+dependencies {
+    compile project(':react-native-blur')
+    compile project(':react-native-vector-icons')
+    compile project(':react-native-gesture-handler')
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+    implementation "com.facebook.react:react-native:+"  // From node_modules
+}
+
+// Run this once to be able to run the application with BUCK
+// puts all compile dependencies into folder libs for BUCK to use
+task copyDownloadableDepsToLibs(type: Copy) {
+    from configurations.compile
+    into 'libs'
+}

examples/NavigationPlayground/android/app/proguard-rules.pro

@@ -0,0 +1,17 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

examples/NavigationPlayground/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,26 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.navigationplayground">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:windowSoftInputMode="adjustResize">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+
+</manifest>

examples/NavigationPlayground/android/app/src/main/java/com/navigationplayground/MainActivity.java

@@ -0,0 +1,28 @@
+package com.navigationplayground;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
+
+public class MainActivity extends ReactActivity {
+
+    /**
+     * Returns the name of the main component registered from JavaScript. This is
+     * used to schedule rendering of the component.
+     */
+    @Override
+    protected String getMainComponentName() {
+        return "NavigationPlayground";
+    }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new ReactActivityDelegate(this, getMainComponentName()) {
+            @Override
+            protected ReactRootView createRootView() {
+                return new RNGestureHandlerEnabledRootView(MainActivity.this);
+            }
+        };
+    }
+}

examples/NavigationPlayground/android/app/src/main/java/com/navigationplayground/MainApplication.java

@@ -0,0 +1,51 @@
+package com.navigationplayground;
+
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.cmcewen.blurview.BlurViewPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+import com.facebook.soloader.SoLoader;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MainApplication extends Application implements ReactApplication {
+
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+    @Override
+    public boolean getUseDeveloperSupport() {
+      return BuildConfig.DEBUG;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+          new MainReactPackage(),
+            new BlurViewPackage(),
+            new VectorIconsPackage(),
+            new RNGestureHandlerPackage()
+      );
+    }
+
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
+  };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
+    SoLoader.init(this, /* native exopackage */ false);
+  }
+}

examples/NavigationPlayground/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">NavigationPlayground</string>
+</resources>

examples/NavigationPlayground/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+</resources>

examples/NavigationPlayground/android/build.gradle

@@ -0,0 +1,39 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext {
+        buildToolsVersion = "27.0.3"
+        minSdkVersion = 16
+        compileSdkVersion = 27
+        targetSdkVersion = 26
+        supportLibVersion = "27.1.1"
+    }
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.1.4'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        google()
+        jcenter()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
+    }
+}
+
+
+task wrapper(type: Wrapper) {
+    gradleVersion = '4.4'
+    distributionUrl = distributionUrl.replace("bin", "all")
+}

examples/NavigationPlayground/android/gradle.properties

@@ -0,0 +1,18 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true

examples/NavigationPlayground/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

examples/NavigationPlayground/android/gradlew

@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

examples/NavigationPlayground/android/gradlew.bat

@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

examples/NavigationPlayground/android/keystores/BUCK

@@ -0,0 +1,8 @@
+keystore(
+    name = "debug",
+    properties = "debug.keystore.properties",
+    store = "debug.keystore",
+    visibility = [
+        "PUBLIC",
+    ],
+)

examples/NavigationPlayground/android/keystores/debug.keystore.properties

@@ -0,0 +1,4 @@
+key.store=debug.keystore
+key.alias=androiddebugkey
+key.store.password=android
+key.alias.password=android

examples/NavigationPlayground/android/settings.gradle

@@ -0,0 +1,9 @@
+rootProject.name = 'NavigationPlayground'
+include ':react-native-blur'
+project(':react-native-blur').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-blur/android')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
+
+include ':app'

examples/NavigationPlayground/app.json

@@ -1,27 +1,4 @@
 {
-  "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": "27.0.0",
-    "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "bundleIdentifier": "com.reactnavigation.example",
-      "supportsTablet": true
-    },
-    "android": {
-      "package": "com.reactnavigation.example"
-    }
-  }
+  "name": "NavigationPlayground",
+  "displayName": "NavigationPlayground"
 }

examples/NavigationPlayground/app/App.test.tsx

@@ -5,5 +5,5 @@ import renderer from 'react-test-renderer';
 
 it('renders without crashing', () => {
   const rendered = renderer.create(<App />).toJSON();
-  expect(rendered).toBeTruthy();
+  expect(rendered).toBeDefined();
 });

examples/NavigationPlayground/app/App.tsx

@@ -1,168 +1,165 @@
-/* @flow */
-
 import React from 'react';
-import { Asset, Constants, ScreenOrientation } from 'expo';
-
-ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
-
 import {
   Animated,
   Image,
   Platform,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  Text,
   StatusBar,
+  StyleSheet,
+  Text,
   View,
 } from 'react-native';
-import { SafeAreaView, createStackNavigator } from 'react-navigation';
-
+import {
+  NativeViewGestureHandler,
+  RectButton,
+} from 'react-native-gesture-handler';
+import {
+  createAppContainer,
+  createStackNavigator,
+  SafeAreaView,
+} from 'react-navigation';
 import CustomTabs from './CustomTabs';
-import CustomTransitioner from './CustomTransitioner';
+import CustomTabUI from './CustomTabUI';
+// import CustomTransitioner from './CustomTransitioner';
 import Drawer from './Drawer';
-import MultipleDrawer from './MultipleDrawer';
-import TabsInDrawer from './TabsInDrawer';
 import ModalStack from './ModalStack';
+import SimpleStack from './SimpleStack';
+import SimpleTabs from './SimpleTabs';
 import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
 import StacksOverTopTabs from './StacksOverTopTabs';
-import StacksWithKeys from './StacksWithKeys';
-import InactiveStack from './InactiveStack';
+import StacksAndKeys from './StacksAndKeys';
 import StackWithCustomHeaderBackImage from './StackWithCustomHeaderBackImage';
-import SimpleStack from './SimpleStack';
 import StackWithHeaderPreset from './StackWithHeaderPreset';
 import StackWithTranslucentHeader from './StackWithTranslucentHeader';
-import SimpleTabs from './SimpleTabs';
 import SwitchWithStacks from './SwitchWithStacks';
-import TabsWithNavigationFocus from './TabsWithNavigationFocus';
-import TabsWithNavigationEvents from './TabsWithNavigationEvents';
-import KeyboardHandlingExample from './KeyboardHandlingExample';
+import TabsInDrawer from './TabsInDrawer';
 
-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',
+  TabsWithNavigationFocus: {
+    description: 'Receive the focus prop to know when a screen is focused',
+    name: 'withNavigationFocus',
   },
 };
 
-const ExampleRoutes = {
+const ExampleRoutes: any = {
+  CustomTabUI,
+  CustomTabs,
+  // CustomTransitioner,
+  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,
-  StacksOverTabs: StacksOverTabs,
-  StacksOverTopTabs: StacksOverTopTabs,
+  TabsInDrawer,
   LinkStack: {
     screen: SimpleStack,
     path: 'people/Jordan',
@@ -171,37 +168,24 @@ 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> {
   state = {
     scrollY: new Animated.Value(0),
   };
 
-  componentDidMount() {
-    Asset.fromModule(
-      require('react-navigation/src/views/assets/back-icon-mask.png')
-    ).downloadAsync();
-    Asset.fromModule(
-      require('react-navigation/src/views/assets/back-icon.png')
-    ).downloadAsync();
-  }
-
   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({
@@ -210,21 +194,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({
@@ -234,69 +218,72 @@ class MainScreen extends React.Component<any, State> {
 
     return (
       <View style={{ flex: 1 }}>
-        <Animated.ScrollView
-          style={{ flex: 1 }}
-          scrollEventThrottle={1}
-          onScroll={Animated.event(
-            [
-              {
-                nativeEvent: { contentOffset: { y: this.state.scrollY } },
-              },
-            ],
-            { useNativeDriver: true }
-          )}
-        >
-          <Animated.View
-            style={[
-              styles.backgroundUnderlay,
-              {
-                transform: [
-                  { scale: backgroundScale },
-                  { translateY: backgroundTranslateY },
-                ],
-              },
-            ]}
-          />
-          <Animated.View
-            style={{ opacity, transform: [{ scale }, { translateY }] }}
+        <NativeViewGestureHandler>
+          <Animated.ScrollView
+            style={{ flex: 1, backgroundColor: '#eee' }}
+            scrollEventThrottle={1}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: { contentOffset: { y: this.state.scrollY } },
+                },
+              ],
+              { useNativeDriver: true }
+            )}
           >
-            <SafeAreaView
-              style={styles.bannerContainer}
-              forceInset={{ top: 'always', bottom: 'never' }}
+            <Animated.View
+              style={[
+                styles.backgroundUnderlay,
+                {
+                  transform: [
+                    { scale: backgroundScale },
+                    { translateY: backgroundTranslateY },
+                  ],
+                },
+              ]}
+            />
+            <Animated.View
+              style={{ opacity, transform: [{ scale }, { translateY }] }}
             >
-              <View style={styles.banner}>
-                <Image
-                  source={require('./assets/NavLogo.png')}
-                  style={styles.bannerImage}
-                />
-                <Text style={styles.bannerTitle}>
-                  React Navigation Examples
-                </Text>
-              </View>
-            </SafeAreaView>
-          </Animated.View>
+              <SafeAreaView
+                style={styles.bannerContainer}
+                forceInset={{ top: 'always', bottom: 'never' }}
+              >
+                <View style={styles.banner}>
+                  <Image
+                    source={require('./assets/NavLogo.png')}
+                    style={styles.bannerImage}
+                  />
+                  <Text style={styles.bannerTitle}>
+                    React Navigation Examples
+                  </Text>
+                </View>
+              </SafeAreaView>
+            </Animated.View>
 
-          <SafeAreaView forceInset={{ bottom: 'always', horizontal: 'never' }}>
-            <View style={{ backgroundColor: '#fff' }}>
-              {Object.keys(ExampleRoutes).map((routeName: string) => (
-                <TouchableOpacity
-                  key={routeName}
-                  onPress={() => {
-                    let route = ExampleRoutes[routeName];
-                    if (route.screen || route.path || route.params) {
-                      const { path, params, screen } = route;
-                      const { router } = screen;
-                      const action =
-                        path && router.getActionForPathAndParams(path, params);
-                      navigation.navigate(routeName, {}, action);
-                    } else {
-                      navigation.navigate(routeName);
-                    }
-                  }}
-                >
-                  <SafeAreaView
-                    style={styles.itemContainer}
-                    forceInset={{ veritcal: 'never', bottom: 'never' }}
+            <SafeAreaView
+              forceInset={{ top: 'never', bottom: 'always' }}
+              style={{ backgroundColor: '#eee' }}
+            >
+              <View style={{ backgroundColor: '#fff' }}>
+                {Object.keys(ExampleRoutes).map((routeName: string) => (
+                  <RectButton
+                    key={routeName}
+                    underlayColor="#ccc"
+                    activeOpacity={0.3}
+                    onPress={() => {
+                      const route = ExampleRoutes[routeName];
+                      if (route.screen || route.path || route.params) {
+                        const { path, params, screen } = route;
+                        const { router } = screen;
+                        const action =
+                          path &&
+                          router.getActionForPathAndParams(path, params);
+                        navigation.navigate(routeName, {}, action);
+                      } else {
+                        navigation.navigate(routeName);
+                      }
+                    }}
                   >
                     <View style={styles.item}>
                       <Text style={styles.title}>
@@ -306,12 +293,12 @@ class MainScreen extends React.Component<any, State> {
                         {ExampleInfo[routeName].description}
                       </Text>
                     </View>
-                  </SafeAreaView>
-                </TouchableOpacity>
-              ))}
-            </View>
-          </SafeAreaView>
-        </Animated.ScrollView>
+                  </RectButton>
+                ))}
+              </View>
+            </SafeAreaView>
+          </Animated.ScrollView>
+        </NativeViewGestureHandler>
         <StatusBar barStyle="light-content" />
         <Animated.View
           style={[styles.statusBarUnderlay, { opacity: underlayOpacity }]}
@@ -321,90 +308,93 @@ class MainScreen extends React.Component<any, State> {
   }
 }
 
-const AppNavigator = createStackNavigator(
-  {
-    ...ExampleRoutes,
-    Index: {
-      screen: MainScreen,
+const AppNavigator = createAppContainer(
+  createStackNavigator(
+    {
+      ...ExampleRoutes,
+      Index: {
+        screen: MainScreen,
+      },
     },
-  },
-  {
-    initialRouteName: 'Index',
-    headerMode: 'none',
+    {
+      headerMode: 'none',
+      initialRouteName: 'Index',
 
-    /*
-   * 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',
-  }
+      /*
+       * 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 AppNavigator;
+export default class App extends React.Component {
+  render() {
+    return <AppNavigator /* persistenceKey="if-you-want-it" */ />;
+  }
+}
 
 const styles = StyleSheet.create({
-  item: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  itemContainer: {
-    backgroundColor: '#fff',
-    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,
+  },
+  image: {
+    alignSelf: 'center',
+    height: 120,
+    marginBottom: 20,
+    resizeMode: 'contain',
+    width: 120,
+  },
+  item: {
+    borderBottomColor: '#ddd',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  statusBarUnderlay: {
+    backgroundColor: '#673ab7',
+    height: 20,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  title: {
+    color: '#444',
+    fontSize: 16,
+    fontWeight: 'bold',
   },
 });

examples/NavigationPlayground/app/CustomTabUI.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import {
+  LayoutAnimation,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  createMaterialTopTabNavigator,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
+} from 'react-navigation';
+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' }}>
+        <Text>Home Screen</Text>
+        <Button
+          onPress={() => navigation.navigate('Home')}
+          title="Go to home tab"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class RecommendedScreen extends React.Component<Props> {
+  static navigationOptions = {
+    tabBarLabel: 'Recommended',
+    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' }}>
+        <Text>Recommended 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<Props> {
+  static navigationOptions = ({
+    navigation,
+  }: {
+    navigation: NavigationScreenProp<NavigationState>;
+  }) => ({
+    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' }}>
+        <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,
+  Recommended: RecommendedScreen,
+  Featured: FeaturedScreen,
+});
+
+class TabNavigator extends React.Component<Props> {
+  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/app/CustomTabs.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { ScrollView, StatusBar, StyleSheet, Text } from 'react-native';
+import { BorderlessButton } from 'react-native-gesture-handler';
+import {
+  createNavigator,
+  NavigationState,
+  SafeAreaView,
+  TabRouter,
+} from 'react-navigation';
+import { createAppContainer } from 'react-navigation';
+import { 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>
+    <StatusBar barStyle="default" />
+  </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}
+        >
+          <Text>{route.routeName}</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 CustomTabs;

examples/NavigationPlayground/app/Drawer.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { ScrollView, StatusBar, StyleProp, TextStyle } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import {
+  createDrawerNavigator,
+  createStackNavigator,
+  SafeAreaView,
+} from 'react-navigation';
+import { NavigationScreenProp, NavigationState } from 'react-navigation';
+import { Button } from './commonComponents/ButtonWithMargin';
+import SampleText from './SampleText';
+
+const MyNavScreen = ({
+  navigation,
+  banner,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}) => (
+  <ScrollView>
+    <SafeAreaView forceInset={{ top: 'always' }}>
+      <SampleText>{banner}</SampleText>
+      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button
+        onPress={() => navigation.navigate('Email')}
+        title="Open other screen"
+      />
+      <Button onPress={() => navigation.navigate('Index')} title="Go back" />
+    </SafeAreaView>
+    <StatusBar barStyle="default" />
+  </ScrollView>
+);
+
+const InboxScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />;
+InboxScreen.navigationOptions = {
+  headerTitle: 'Inbox',
+};
+
+const EmailScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner={'Email Screen'} navigation={navigation} />;
+
+const DraftsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />;
+DraftsScreen.navigationOptions = {
+  headerTitle: 'Drafts',
+};
+
+const InboxStack = createStackNavigator(
+  {
+    Email: { screen: EmailScreen },
+    Inbox: { screen: InboxScreen },
+  },
+  {
+    navigationOptions: {
+      drawerIcon: ({ tintColor }) => (
+        <MaterialIcons
+          name="move-to-inbox"
+          size={24}
+          style={{ color: tintColor } as StyleProp<TextStyle>}
+        />
+      ),
+      drawerLabel: 'Inbox',
+    },
+  }
+);
+
+const DraftsStack = createStackNavigator(
+  {
+    Drafts: { screen: DraftsScreen },
+    Email: { screen: EmailScreen },
+  },
+  {
+    navigationOptions: {
+      drawerIcon: ({ tintColor }) => (
+        <MaterialIcons
+          name="drafts"
+          size={24}
+          style={{ color: tintColor } as StyleProp<TextStyle>}
+        />
+      ),
+      drawerLabel: 'Drafts',
+    },
+  }
+);
+
+const DrawerExample = createDrawerNavigator(
+  {
+    Drafts: {
+      path: '/sent',
+      screen: DraftsStack,
+    },
+    Inbox: {
+      path: '/',
+      screen: InboxStack,
+    },
+  },
+
+  {
+    contentOptions: {
+      activeTintColor: '#e91e63',
+    },
+    initialRouteName: 'Drafts',
+  }
+);
+
+export default DrawerExample;

examples/NavigationPlayground/app/ModalStack.tsx

@@ -1,14 +1,21 @@
-/**
- * @flow
- */
-
 import React from 'react';
 import { ScrollView, StatusBar, Text } from 'react-native';
-import { SafeAreaView, createStackNavigator } from 'react-navigation';
-import SampleText from './SampleText';
+import {
+  createStackNavigator,
+  NavigationScreenProp,
+  SafeAreaView,
+} from 'react-navigation';
+import { NavigationState } from 'react-navigation';
 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={{
@@ -42,21 +49,31 @@ 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} />;
 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(
@@ -70,17 +87,23 @@ const ProfileNavigator = createStackNavigator(
     },
   },
   {
-    navigationOptions: {
+    defaultNavigationOptions: {
       headerLeft: null,
     },
     mode: 'modal',
   }
 );
 
-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,13 +114,13 @@ MyHeaderTestScreen.navigationOptions = ({ navigation }) => {
 
 const ModalStack = createStackNavigator(
   {
+    HeaderTest: { screen: MyHeaderTestScreen },
     ProfileNavigator: {
       screen: ProfileNavigator,
     },
-    HeaderTest: { screen: MyHeaderTestScreen },
   },
   {
-    navigationOptions: {
+    defaultNavigationOptions: {
       header: null,
     },
     mode: 'modal',

examples/NavigationPlayground/app/SampleText.tsx

@@ -1,15 +1,11 @@
-/* @flow */
-
-import React from 'react';
-
+import React, { ReactNode } 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<*> }) => (
+const SampleText = ({ children }: { children?: ReactNode }) => (
   <Text style={styles.sampleText}>{children}</Text>
 );
 

examples/NavigationPlayground/app/SimpleStack.tsx

@@ -1,64 +1,56 @@
-/**
- * @flow
- */
+// tslint:disable no-unused-expression
 
-import type {
+import * as React from 'react';
+import { StatusBar } from 'react-native';
+import {
+  createStackNavigator,
+  NavigationActions,
+  NavigationEventPayload,
+  NavigationEventSubscription,
   NavigationScreenProp,
   NavigationState,
   NavigationStateRoute,
-  NavigationEventSubscription,
-} from 'react-navigation';
-
-import * as React from 'react';
-import { ScrollView, StatusBar } from 'react-native';
-import {
-  createStackNavigator,
   SafeAreaView,
-  withNavigation,
-  NavigationActions,
   StackActions,
+  withNavigation,
 } from 'react-navigation';
-import invariant from 'invariant';
-
-import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
+import SampleText from './SampleText';
 
-type MyNavScreenProps = {
-  navigation: NavigationScreenProp<NavigationState>,
-  banner: React.Node,
-};
+const DEBUG = false;
 
-type BackButtonProps = {
-  navigation: NavigationScreenProp<NavigationStateRoute>,
-};
+interface MyNavScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: React.ReactNode;
+}
+
+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>
+      <SafeAreaView forceInset={{ top: 'never' }}>
         <SampleText>{banner}</SampleText>
         <Button
           onPress={() => push('Profile', { name: 'Jane' })}
@@ -68,13 +60,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,
               })
             )
           }
@@ -107,42 +99,42 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
   }
 }
 
-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 => {
-    console.log('_willFocus HomeScreen', a);
+  onWF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willFocus HomeScreen', a);
   };
-  _onDF = a => {
-    console.log('_didFocus HomeScreen', a);
+  onDF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didFocus HomeScreen', a);
   };
-  _onWB = a => {
-    console.log('_willBlur HomeScreen', a);
+  onWB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willBlur HomeScreen', a);
   };
-  _onDB = a => {
-    console.log('_didBlur HomeScreen', a);
+  onDB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didBlur HomeScreen', a);
   };
 
   render() {
@@ -151,42 +143,42 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
   }
 }
 
-type MyPhotosScreenProps = {
-  navigation: NavigationScreenProp<NavigationState>,
-};
+interface MyPhotosScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
-    title: 'Photos',
     headerLeft: <MyBackButtonWithNavigation />,
+    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) => {
+    DEBUG && console.log('willFocus PhotosScreen', a);
   };
-  _onDF = a => {
-    console.log('_didFocus PhotosScreen', a);
+  onDF = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didFocus PhotosScreen', a);
   };
-  _onWB = a => {
-    console.log('_willBlur PhotosScreen', a);
+  onWB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('willBlur PhotosScreen', a);
   };
-  _onDB = a => {
-    console.log('_didBlur PhotosScreen', a);
+  onDB = (a: NavigationEventPayload) => {
+    DEBUG && console.log('didBlur PhotosScreen', a);
   };
 
   render() {
@@ -200,7 +192,11 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   }
 }
 
-const MyProfileScreen = ({ navigation }) => (
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
     banner={`${
       navigation.getParam('mode') === 'edit' ? 'Now Editing ' : ''
@@ -209,40 +205,45 @@ 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!`,
   };
 };
 
-const SimpleStack = createStackNavigator({
-  Home: {
-    screen: MyHomeScreen,
+const SimpleStack = createStackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Photos: {
+      path: 'photos/:name',
+      screen: MyPhotosScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
   },
-  Profile: {
-    path: 'people/:name',
-    screen: MyProfileScreen,
-  },
-  Photos: {
-    path: 'photos/:name',
-    screen: MyPhotosScreen,
-  },
-});
+  {
+    // headerLayoutPreset: 'center',
+  }
+);
 
 export default SimpleStack;

examples/NavigationPlayground/app/SimpleTabs.tsx

@@ -0,0 +1,273 @@
+import React from 'react';
+import { Animated, Platform, StatusBar, Text, View } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  createBottomTabNavigator,
+  FlatList,
+  NavigationEventSubscription,
+  NavigationScreenProp,
+  SafeAreaView,
+  ScrollView,
+} from 'react-navigation';
+import { NavigationEventPayload, NavigationState } from 'react-navigation';
+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,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}) => (
+  <ScrollView style={{ flex: 1 }}>
+    <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
+      <SampleText>{banner}</SampleText>
+      <Button
+        onPress={() => navigation.navigate('Home')}
+        title="Go to home tab"
+      />
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Go to settings tab"
+      />
+      <Button onPress={() => navigation.goBack(null)} title="Go back" />
+      {TEXT.split('\n').map((p, n) => (
+        <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
+          {p}
+        </Text>
+      ))}
+      <StatusBar barStyle="default" />
+    </SafeAreaView>
+  </ScrollView>
+);
+
+const MyListScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
+  <FlatList
+    data={TEXT.split('\n')}
+    style={{ paddingTop: 10 }}
+    keyExtractor={(item, index) => index.toString()}
+    renderItem={({ item }) => (
+      <Text style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}>
+        {item}
+      </Text>
+    )}
+  />
+);
+
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Home Tab" navigation={navigation} />;
+
+MyHomeScreen.navigationOptions = {
+  tabBarIcon: ({
+    tintColor,
+    focused,
+    horizontal,
+  }: {
+    tintColor: string;
+    focused: boolean;
+    horizontal: boolean;
+  }) => (
+    <Ionicons
+      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;
+
+interface MyPeopleScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
+class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
+  static navigationOptions = {
+    tabBarIcon: ({
+      tintColor,
+      focused,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
+      <Ionicons
+        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);
+  }
+  componentWillUnmount() {
+    // this.s0!.remove();
+    // this.s1!.remove();
+    // this.s2!.remove();
+    // this.s3!.remove();
+  }
+  onEvent = (a: NavigationEventPayload) => {
+    console.log('EVENT ON PEOPLE TAB', a.type, a);
+  };
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="People Tab" navigation={navigation} />;
+  }
+}
+
+interface MyChatScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
+class MyChatScreen extends React.Component<MyChatScreenProps> {
+  static navigationOptions = {
+    tabBarIcon: ({
+      tintColor,
+      focused,
+      horizontal,
+    }: {
+      tintColor: string;
+      focused: boolean;
+      horizontal: boolean;
+    }) => (
+      <Ionicons
+        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);
+  }
+  componentWillUnmount() {
+    // this.s0!.remove();
+    // this.s1!.remove();
+    // this.s2!.remove();
+    // this.s3!.remove();
+  }
+  onEvent = (a: NavigationEventPayload) => {
+    console.log('EVENT ON CHAT TAB', a.type, a);
+  };
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="Chat Tab" navigation={navigation} />;
+  }
+}
+
+const MySettingsScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => <MyNavScreen banner="Settings Tab" navigation={navigation} />;
+
+MySettingsScreen.navigationOptions = {
+  tabBarIcon: ({
+    tintColor,
+    focused,
+    horizontal,
+  }: {
+    tintColor: string;
+    focused: boolean;
+    horizontal: boolean;
+  }) => (
+    <Ionicons
+      name={'ios-settings'}
+      size={horizontal ? 20 : 26}
+      style={{ color: tintColor }}
+    />
+  ),
+  tabBarLabel: 'Settings',
+};
+
+const SimpleTabs = createBottomTabNavigator(
+  {
+    Chat: {
+      path: 'chat',
+      screen: MyChatScreen,
+    },
+    Home: {
+      path: '',
+      screen: MyListScreen,
+    },
+    People: {
+      path: 'cart',
+      screen: MyPeopleScreen,
+    },
+    Settings: {
+      path: 'settings',
+      screen: MySettingsScreen,
+    },
+  },
+  {
+    backBehavior: 'history',
+    tabBarOptions: {
+      activeTintColor: '#e91e63',
+    },
+  }
+);
+
+interface SimpleTabsContainerProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
+
+class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
+  static router = SimpleTabs.router;
+  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);
+  }
+  componentWillUnmount() {
+    // this.s0!.remove();
+    // this.s1!.remove();
+    // this.s2!.remove();
+    // this.s3!.remove();
+  }
+  onAction = (a: NavigationEventPayload) => {
+    console.log('TABS EVENT', a.type, a);
+  };
+  render() {
+    return <SimpleTabs navigation={this.props.navigation} />;
+  }
+}
+
+export default SimpleTabsContainer;

examples/NavigationPlayground/app/StackWithCustomHeaderBackImage.tsx

@@ -1,18 +1,17 @@
-/**
- * @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, StatusBar, StyleSheet } from 'react-native';
+import {
+  createStackNavigator,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
+} from 'react-navigation';
 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() {
@@ -43,14 +42,14 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
   }
 }
 
-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,20 +58,24 @@ 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"
@@ -84,22 +87,22 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   }
 }
 
-type MyProfileScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface MyProfileScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 class MyProfileScreen extends React.Component<MyProfileScreenProps> {
-  static navigationOptions = ({ navigation }) => ({
-    title: 'Profile',
+  static navigationOptions = () => ({
     headerBackImage: (
       <MyCustomHeaderBackImage style={styles.myCustomHeaderBackImageAlt} />
     ),
+    title: 'Profile',
   });
 
   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" />
       </SafeAreaView>
@@ -122,8 +125,8 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    navigationOptions: {
-      headerBackImage: MyCustomHeaderBackImage,
+    defaultNavigationOptions: {
+      headerBackImage: MyCustomHeaderBackImage as any,
     },
   }
 );
@@ -133,11 +136,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',

examples/NavigationPlayground/app/StackWithHeaderPreset.tsx

@@ -1,18 +1,17 @@
-/**
- * @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 { StatusBar } from 'react-native';
+import {
+  createStackNavigator,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
+} from 'react-navigation';
 
 import { Button } from './commonComponents/ButtonWithMargin';
 
-type NavScreenProps = {
-  navigation: NavigationScreenProp<*>,
-};
+interface NavScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+}
 
 class HomeScreen extends React.Component<NavScreenProps> {
   static navigationOptions = {
@@ -22,7 +21,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 }}>
@@ -46,7 +44,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 }}>
@@ -74,7 +71,6 @@ 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 }}>
@@ -95,7 +91,6 @@ 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 }}>
@@ -112,8 +107,8 @@ const StackWithHeaderPreset = createStackNavigator(
   {
     Home: HomeScreen,
     Other: OtherScreen,
-    ScreenWithNoHeader: ScreenWithNoHeader,
-    ScreenWithLongTitle: ScreenWithLongTitle,
+    ScreenWithLongTitle,
+    ScreenWithNoHeader,
   },
   {
     headerTransitionPreset: 'uikit',

examples/NavigationPlayground/app/StackWithTranslucentHeader.tsx

@@ -1,43 +1,36 @@
-/**
- * @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 {
-  Dimensions,
   Platform,
   ScrollView,
   StatusBar,
+  StyleSheet,
   View,
 } from 'react-native';
-import { Header, createStackNavigator } from 'react-navigation';
-import invariant from 'invariant';
-
-import SampleText from './SampleText';
+import { BlurView } from 'react-native-blur';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+import {
+  createStackNavigator,
+  Header,
+  HeaderStyleInterpolator,
+  NavigationEventPayload,
+  NavigationEventSubscription,
+  NavigationScreenProp,
+  NavigationState,
+  TransitionConfig,
+} from 'react-navigation';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
+import SampleText from './SampleText';
 
-type MyNavScreenProps = {
-  navigation: NavigationScreenProp<*>,
-  banner: React.Node,
-};
+interface MyNavScreenProps {
+  navigation: NavigationScreenProp<NavigationState>;
+  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>
@@ -65,7 +58,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
@@ -74,58 +67,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() {
@@ -134,82 +127,88 @@ 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 => {
+MyProfileScreen.navigationOptions = (props: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => {
   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!`,
   };
 };
 
@@ -218,26 +217,37 @@ const StackWithTranslucentHeader = createStackNavigator(
     Home: {
       screen: MyHomeScreen,
     },
-    Profile: {
-      path: 'people/:name',
-      screen: MyProfileScreen,
-    },
     Photos: {
       path: 'photos/:name',
       screen: MyPhotosScreen,
     },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
   },
   {
-    headerTransitionPreset: 'uikit',
-    navigationOptions: {
-      headerTransparent: true,
+    defaultNavigationOptions: {
       headerBackground: Platform.select({
-        ios: <BlurView style={{ flex: 1 }} intensity={98} />,
         android: (
           <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
         ),
+        ios: <BlurView style={{ flex: 1 }} blurType="light" />,
       }),
+      headerStyle: {
+        borderBottomColor: '#A7A7AA',
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+      headerTransparent: true,
     },
+    headerTransitionPreset: 'uikit',
+    // You can leave this out if you don't want the card shadow to
+    // be visible through the header
+    transitionConfig: () =>
+      ({
+        headerBackgroundInterpolator:
+          HeaderStyleInterpolator.forBackgroundWithTranslation,
+      } as TransitionConfig),
   }
 );
 

examples/NavigationPlayground/app/StacksAndKeys.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import { StatusBar, Text, View } from 'react-native';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator, NavigationScreenProp } from 'react-navigation';
+import { NavigationState } from 'react-navigation';
 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 +17,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',
             })
           }
         />
@@ -38,9 +43,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 +60,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 +77,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',
             })
           }
         />

examples/NavigationPlayground/app/StacksInTabs.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { StatusBar, Text } from 'react-native';
+import {
+  createBottomTabNavigator,
+  createStackNavigator,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
+  ScrollView,
+} from 'react-navigation';
+
+import Ionicons from 'react-native-vector-icons/Ionicons';
+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.`;
+
+interface Props {
+  navigation: NavigationScreenProp<NavigationState>;
+  banner: string;
+}
+
+class MyNavScreen extends React.Component<Props> {
+  render() {
+    const { navigation } = this.props;
+    const banner = navigation.getParam('banner');
+
+    return (
+      <ScrollView style={{ flex: 1 }}>
+        <SafeAreaView forceInset={{ horizontal: 'always' }}>
+          <SampleText>{banner}</SampleText>
+          <Button
+            onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
+            title="Open profile screen"
+          />
+          <Button
+            onPress={() => navigation.navigate('NotifSettings')}
+            title="Open notifications screen"
+          />
+          <Button
+            onPress={() => navigation.navigate('SettingsTab')}
+            title="Go to settings tab"
+          />
+          <Button onPress={() => navigation.goBack(null)} title="Go back" />
+
+          {TEXT.split('\n').map((p, n) => (
+            <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
+              {p}
+            </Text>
+          ))}
+        </SafeAreaView>
+
+        <StatusBar barStyle="default" />
+      </ScrollView>
+    );
+  }
+}
+
+const MyProfileScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
+  <MyNavScreen
+    banner={`${navigation.state.params!.name}s Profile`}
+    navigation={navigation}
+  />
+);
+
+const MainTab = createStackNavigator({
+  Home: {
+    navigationOptions: {
+      title: 'Welcome',
+    },
+    params: { banner: 'Home Screen' },
+    path: '/',
+    screen: MyNavScreen,
+  },
+  Profile: {
+    navigationOptions: ({
+      navigation,
+    }: {
+      navigation: NavigationScreenProp<NavigationState>;
+    }) => ({
+      title: `${navigation.state.params!.name}'s Profile!`,
+    }),
+    path: '/people/:name',
+    screen: MyProfileScreen,
+  },
+});
+
+const SettingsTab = createStackNavigator({
+  NotifSettings: {
+    navigationOptions: {
+      title: 'Notifications',
+    },
+    params: { banner: 'Notifications Screen' },
+    screen: MyNavScreen,
+  },
+  Settings: {
+    navigationOptions: () => ({
+      title: 'Settings',
+    }),
+    params: { banner: 'Settings Screen' },
+    path: '/',
+    screen: MyNavScreen,
+  },
+});
+
+const StacksInTabs = createBottomTabNavigator(
+  {
+    MainTab: {
+      navigationOptions: {
+        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,
+        }: {
+          tintColor: string;
+          focused: boolean;
+        }) => (
+          <Ionicons
+            name={focused ? 'ios-settings' : 'ios-settings'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        ),
+      },
+    },
+  },
+  {
+    tabBarOptions: {
+      showLabel: false,
+    },
+  }
+);
+
+export default StacksInTabs;

examples/NavigationPlayground/app/StacksOverTabs.tsx

@@ -1,22 +1,26 @@
-/**
- * @flow
- */
-
 import React from 'react';
 import { ScrollView, StatusBar } from 'react-native';
-import {
-  SafeAreaView,
-  createStackNavigator,
-  createBottomTabNavigator,
-} from 'react-navigation';
-
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import SampleText from './SampleText';
+import {
+  createBottomTabNavigator,
+  createStackNavigator,
+  getActiveChildNavigationOptions,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
+} from 'react-navigation';
 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' }}>
+    <SafeAreaView forceInset={{ horizontal: 'always', vertical: 'never' }}>
       <SampleText>{banner}</SampleText>
       <Button
         onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
@@ -36,93 +40,119 @@ 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-outline'}
+            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-outline'}
+            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 }) => {
-  let { routeName } = navigation.state.routes[navigation.state.index];
-  let title;
-  if (routeName === 'SettingsTab') {
-    title = 'Settings';
-  } else if (routeName === 'MainTab') {
-    title = 'Home';
-  }
+TabNav.navigationOptions = ({
+  navigation,
+  screenProps,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+  screenProps: { [key: string]: any };
+}) => {
+  const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
   return {
-    title,
+    title: childOptions.title,
   };
 };
 
 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,
   },
 });
 

examples/NavigationPlayground/app/StacksOverTopTabs.tsx

@@ -1,23 +1,34 @@
-/**
- * @flow
- */
-
 import React from 'react';
-import { View, ScrollView, StatusBar, StyleSheet } from 'react-native';
 import {
-  SafeAreaView,
-  createStackNavigator,
+  ScrollView,
+  StatusBar,
+  StatusBarStyle,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
   createMaterialTopTabNavigator,
+  createStackNavigator,
+  NavigationScreenProp,
+  NavigationState,
+  SafeAreaView,
 } from 'react-navigation';
-import { Constants } from 'expo';
 import { 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 +50,11 @@ const MyNavScreen = ({ navigation, banner, statusBarStyle }) => (
   </ScrollView>
 );
 
-const MyHomeScreen = ({ navigation }) => (
+const MyHomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationScreenProp<NavigationState>;
+}) => (
   <MyNavScreen
     banner="Home Screen"
     navigation={navigation}
@@ -47,18 +62,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 +100,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,13 +157,17 @@ 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!`,
       }),
     },
   },
   {
-    navigationOptions: {
+    defaultNavigationOptions: {
       headerStyle: styles.stackHeader,
     },
   }

examples/NavigationPlayground/app/SwitchWithStacks.tsx

@@ -1,7 +1,3 @@
-/**
- * @flow
- */
-
 import React from 'react';
 import {
   ActivityIndicator,
@@ -21,7 +17,7 @@ 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)}
@@ -31,7 +27,7 @@ class SignInScreen extends React.Component<any, any> {
     );
   }
 
-  _signInAsync = async () => {
+  signInAsync = async () => {
     await AsyncStorage.setItem('userToken', 'abc');
     this.props.navigation.navigate('Home');
   };
@@ -45,18 +41,18 @@ 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} />
+        <Button title="Show me more of the app" onPress={this.showMoreApp} />
+        <Button title="Actually, sign me out :)" onPress={this.signOutAsync} />
         <StatusBar barStyle="default" />
       </View>
     );
   }
 
-  _showMoreApp = () => {
+  showMoreApp = () => {
     this.props.navigation.navigate('Other');
   };
 
-  _signOutAsync = async () => {
+  signOutAsync = async () => {
     await AsyncStorage.clear();
     this.props.navigation.navigate('Auth');
   };
@@ -70,13 +66,13 @@ class OtherScreen extends React.Component<any, any> {
   render() {
     return (
       <View style={styles.container}>
-        <Button title="I'm done, sign me out" onPress={this._signOutAsync} />
+        <Button title="I'm done, sign me out" onPress={this.signOutAsync} />
         <StatusBar barStyle="default" />
       </View>
     );
   }
 
-  _signOutAsync = async () => {
+  signOutAsync = async () => {
     await AsyncStorage.clear();
     this.props.navigation.navigate('Auth');
   };
@@ -84,12 +80,12 @@ class OtherScreen extends React.Component<any, any> {
 
 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);
   };
 
@@ -105,8 +101,8 @@ class LoadingScreen extends React.Component<any, any> {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: 'center',
+    flex: 1,
     justifyContent: 'center',
   },
 });
@@ -115,7 +111,7 @@ const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
 const AuthStack = createStackNavigator({ SignIn: SignInScreen });
 
 export default createSwitchNavigator({
-  Loading: LoadingScreen,
   App: AppStack,
   Auth: AuthStack,
+  Loading: LoadingScreen,
 });

examples/NavigationPlayground/app/TabsInDrawer.tsx

@@ -1,44 +1,28 @@
-/**
- * @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 { createDrawerNavigator } from 'react-navigation';
 import SimpleTabs from './SimpleTabs';
 import StacksOverTabs from './StacksOverTabs';
 
 const TabsInDrawer = createDrawerNavigator({
   SimpleTabs: {
-    screen: SimpleTabs,
     navigationOptions: {
-      drawer: () => ({
-        label: 'Simple Tabs',
-        icon: ({ tintColor }) => (
-          <MaterialIcons
-            name="filter-1"
-            size={24}
-            style={{ color: tintColor }}
-          />
-        ),
-      }),
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
+        <MaterialIcons name="filter-1" size={24} style={{ color: tintColor }} />
+      ),
+      drawerLabel: 'Simple tabs',
     },
+    screen: SimpleTabs,
   },
   StacksOverTabs: {
-    screen: StacksOverTabs,
     navigationOptions: {
-      drawer: () => ({
-        label: 'Stacks Over Tabs',
-        icon: ({ tintColor }) => (
-          <MaterialIcons
-            name="filter-2"
-            size={24}
-            style={{ color: tintColor }}
-          />
-        ),
-      }),
+      drawerIcon: ({ tintColor }: { tintColor: string }) => (
+        <MaterialIcons name="filter-2" size={24} style={{ color: tintColor }} />
+      ),
+      drawerLabel: 'Stacks Over Tabs',
     },
+    screen: StacksOverTabs,
   },
 });
 

examples/NavigationPlayground/app/commonComponents/Button.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { AccessibilityState, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export interface ButtonProps {
+  /**
+   * Text to display inside the button
+   */
+  title: string,
+
+  /**
+   * Handler to be called when the user taps the button
+   */
+  onPress: (event?: any) => void,
+
+  /**
+   * Color of the text (iOS), or background color of the button (Android)
+   */
+  color?: string,
+
+  /**
+   * TV preferred focus (see documentation for the View component).
+   */
+  hasTVPreferredFocus?: boolean,
+
+  /**
+   * Text to display for blindness accessibility features
+   */
+  accessibilityLabel?: string,
+
+  /**
+   * If true, disable all interactions for this component.
+   */
+  disabled?: boolean,
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string,
+};
+
+/**
+ * A basic button component that should render nicely on any platform. Supports
+ * a minimal level of customization.
+ *
+ * <center><img src="img/buttonExample.png"></img></center>
+ *
+ * This button is built using TouchableOpacity
+ *
+ * Example usage:
+ *
+ * ```
+ * import { Button } from 'react-native';
+ * ...
+ *
+ * <Button
+ *   onPress={onPressLearnMore}
+ *   title="Learn More"
+ *   color="#841584"
+ *   accessibilityLabel="Learn more about this purple button"
+ * />
+ * ```
+ *
+ */
+
+export default class Button extends React.Component<ButtonProps> {
+  render() {
+    const {
+      accessibilityLabel,
+      color,
+      onPress,
+      title,
+      disabled,
+      testID,
+    } = this.props;
+    const buttonStyles: any = [styles.button];
+    const textStyles: any = [styles.text];
+    if (color) {
+      if (Platform.OS === 'ios') {
+        textStyles.push({ color });
+      } else {
+        buttonStyles.push({ backgroundColor: color });
+      }
+    }
+    const accessibilityStates: AccessibilityState[] = [];
+    if (disabled) {
+      buttonStyles.push(styles.buttonDisabled);
+      textStyles.push(styles.textDisabled);
+      accessibilityStates.push('disabled');
+    }
+    const formattedTitle =
+      Platform.OS === 'android' ? title.toUpperCase() : title;
+    return (
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityStates={accessibilityStates}
+        testID={testID}
+        disabled={disabled}
+        onPress={onPress}
+      >
+        <View style={buttonStyles}>
+          <Text style={textStyles}>
+            {formattedTitle}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: Platform.select({
+    android: {
+      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: {
+    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,
+      },
+    }),
+  },
+  textDisabled: Platform.select({
+    android: {
+      color: '#a1a1a1',
+    },
+    ios: {
+      color: '#cdcdcd',
+    },
+  }),
+});

examples/NavigationPlayground/app/commonComponents/ButtonWithMargin.tsx

@@ -1,9 +1,10 @@
-import { Button as RNButton, StyleSheet, View, Platform } from 'react-native';
 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}>
-    <RNButton {...props} />
+    <BaseButton {...props} />
   </View>
 );
 

examples/NavigationPlayground/app/commonComponents/HeaderButtons.tsx

@@ -8,7 +8,7 @@ export class HeaderButtons extends React.PureComponent {
   render() {
     return (
       <DefaultHeaderButtons
-        color={Platform.OS === 'ios' ? '#037aff' : 'black'}
+        // color={Platform.OS === 'ios' ? '#037aff' : 'black'}
         {...this.props}
       />
     );

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'>;
-}