Release 1.3.2

* SafeAreaView fix

* Updated to only allow modification of forceInset property of SafeAreaView

.circleci/config.yml

@@ -15,10 +15,26 @@ jobs:
             - v3-react-navigation-master
       - run: yarn # install root deps
       - run: ./scripts/test.sh # run tests
+      - setup_remote_docker
+      - deploy:
+          command: |
+            set -x
+              VER="17.03.0-ce"
+              curl -L -o /tmp/docker-$VER.tgz https://get.docker.com/builds/Linux/x86_64/docker-$VER.tgz
+              tar -xz -C /tmp -f /tmp/docker-$VER.tgz
+              mv /tmp/docker/* /usr/bin
+            
+            yarn global add exp
+            set +x
+            exp login -u "$EXPO_USERNAME" -p "$EXPO_PASSWORD"
+            set -x
+            cd examples/NavigationPlayground && yarn && exp publish --release-channel "${CIRCLE_SHA1}"
       - save_cache:
           key: v3-react-navigation-{{ .Branch }}-{{ checksum "package.json" }}
           paths:
             - ~/.cache/yarn
-            - ~/react-navigation/website/node_modules
             - ~/react-navigation/examples/NavigationPlayground/node_modules
             - ~/react-navigation/examples/ReduxExample/node_modules
+notify:
+  webhooks:
+    - url: https://react-navigation-ci.now.sh

.github/ISSUE_TEMPLATE.md

@@ -9,6 +9,8 @@ If you have a question, feature request, or an idea for improving the library or
 - [Get help on Discord chat (#react-navigation on Reactiflux)](https://discord.gg/4xEK3nD) or [on StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation)
 - Search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue.
 
+Bugs with react-navigation must be reproducible *without any external libraries that operate on it*. This means that if you are attempting to use Redux or MobX with it and you think you have found a bug, you must be able to reproduce it without Redux or MobX in this report. Redux related issues belong in [react-navigation-redux-helpers](https://github.com/react-navigation/react-navigation-redux-helpers), and we do not have any first-class integration with MobX at the moment.
+
 ---
 
 ### Current Behavior

COMMUNITY_RESOURCES.md

@@ -0,0 +1,43 @@
+## Community resources
+
+A lot of developers poured their knowledge in blog posts, and other repos - we will try to keep here a list of resources to help someone who wants to learn about React Navigation and techniques to handle navigation effectively.
+
+#### Introduction to the library
+
+* [Getting Started with React Navigation](https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4)
+
+#### Basic Tutorials
+
+* [Basic ReactNavigation Example App and Tutorial](http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html)
+* [Understanding Navigation in React Native](https://www.codementor.io/blessingoraz/understanding-navigation-in-react-native-a3wlcxmzu?published=1#.WXfDlvk_ooE.twitter)
+* [Comprehensive routing and navigation in React Native made easy](https://medium.com/@kevinle/comprehensive-routing-and-navigation-in-react-native-made-easy-6383e6cdc293)
+* [Replace a Screen Using React Navigation](https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb)
+
+#### Intermediate Concepts
+
+* [Integrating React-Navigation and Redux with authentication flow](https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf)
+* [Using React Navigation and Redux in your React Native Application](https://medium.com/modus-create-front-end-development/using-react-navigation-and-redux-in-your-react-native-application-efac33265138)
+* [React-Navigation, complete Redux state management, tab-bar, and multiple navigators](https://medium.com/@parkerdan/react-navigation-with-complete-redux-state-management-tab-bar-and-multiple-navigators-ed30a69d9a4d)
+* [Custom Drawer with React-Navigation in React-Native](http://www.skywardsoftwares.co.in/react-native/custom-drawer-with-react-navigation-in-react-native/)
+* [React Navigation Drawer - a tutorial series](https://shift.infinite.red/react-navigation-drawer-tutorial-a802fc3ee6dc)
+
+#### Advanced Topics
+
+* [Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation](https://medium.com/react-native-training/full-stack-react-native-development-using-graphcool-and-apollo-subscriptions-react-navigation-cdb3e1374c05)
+
+#### Comparisons and Discussion
+
+* [Migrate from ExNavigation to React Navigation](https://hackernoon.com/migrate-from-exnavigation-to-react-navigation-1af661ec5082)
+* [Playing with React Navigation and Airbnb's Native Navigation](https://medium.com/@ericvicenti/playing-with-react-navigation-and-airbnbs-native-navigation-4e49fc765489)
+* [How we restructured our app with React Navigation](https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26)
+* [What’s Happening with Navigation in React Native?](https://blog.revisify.com/whats-happening-with-navigation-in-react-native-c193535888c3)
+
+#### Example Projects
+
+* [Yaba-Social](https://github.com/allpwrfulroot/yaba-social)
+* [React Native Boilerplate with React Navigation and Redux integration](https://github.com/verybluebot/react-native-boilerplate)
+
+#### Libraries
+
+* [react-navigation-addons](https://github.com/satya164/react-navigation-addons)
+* [react-navigation-props-mapper](https://github.com/vonovak/react-navigation-props-mapper)

README.md

@@ -2,151 +2,62 @@
 
 [![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-community/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-community/react-navigation) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/guides/contributors)
 
-*Learn once, navigate anywhere.*
-
 React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
 
-React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components.
-
-* [Installation](#installation)
-* [Community contributions](#community-contributions)
-  * [Introduction to the library](#introduction-to-the-library)
-  * [Basic Tutorials](#basic-tutorials)
-  * [Intermediate Concepts](#intermediate-concepts)
-  * [Advanced Topics](#advanced-topics)
-  * [Comparisons and Discussion](#comparisons-and-discussion)
-  * [Example Projects](#example-projects)
-  * [Libraries](#libraries)
-* [FAQs](#faqs)
-  * [When is version 1.0.0 going to be released?](#when-is-version-100-going-to-be-released)
-  * [I'm having troubles using the library, what can I do?](#im-having-troubles-using-the-library-what-can-i-do)
-  * [My app is really slow!](#my-app-is-really-slow)
-  * [How can I help?](#how-can-i-help)
-  * [Is this the only library available for navigation?](#is-this-the-only-library-available-for-navigation)
-  * [Can I use this library for web?](#can-i-use-this-library-for-web)
-* [Code of conduct](#code-of-conduct)
-* [License](#license)
-
 ## 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
-  ```
+```bash
+yarn add react-navigation
+```
 
-  or
+or
 
-  ```bash
-  npm install --save react-navigation
-  ```
+```bash
+npm install --save react-navigation
+```
 
-## Get Started
+## Documentation
 
-To learn how the library work, head to the [introduction](https://reactnavigation.org/docs/intro/) on the website for a quick tutorial that will cover all the basics - or try it out [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
+* The best way to learn is to follow the [Getting started guide](https://reactnavigation.org/docs/getting-started.html). It guides you through the fundamentals of React Navigation.
+* The documentation includes solutions for common use cases in the "How do I do ...?" section, such as [tab navigation](https://reactnavigation.org/docs/tab-based-navigation.html) and [Redux integration](https://reactnavigation.org/docs/redux-integration.html).
+* If you need to build your own navigator, [there's a section for that](https://reactnavigation.org/docs/custom-navigator-overview.html) too.
+* The [API reference](https://reactnavigation.org/docs/api-reference.html) lists all public APIs.
+* The [Community Resources](https://github.com/react-navigation/react-navigation/blob/master/COMMUNITY_RESOURCES.md) document lists some other resources submitted to us by people who use React Navigation. Feel free to open a pull request to add your resource to the list.
+* You can contribute improvements to the documentation [in the website repository](https://github.com/react-navigation/react-navigation.github.io).
 
-#### Advanced guides
+## Try it out
 
-* [Redux integration](https://reactnavigation.org/docs/guides/redux)
-* [Deep linking](https://reactnavigation.org/docs/guides/linking)
-
-#### React Navigation API
-
-* [Navigators](https://reactnavigation.org/docs/navigators/)
-* [Routers](https://reactnavigation.org/docs/routers/)
-* [Views](https://reactnavigation.org/docs/views/)
-
-## Community contributions
-
-A lot of developers poured their knowledge in blog posts, and other repos - we will try to keep here a list of tutorials and resources to help someone who wants to learn about React Navigation and techniques to handle navigation effectively.
-
-#### Introduction to the library
-
-* [Getting Started with React Navigation](https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4)
-
-#### Basic Tutorials
-
-* [Basic ReactNavigation Example App and Tutorial](http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html)
-* [Understanding Navigation in React Native](https://www.codementor.io/blessingoraz/understanding-navigation-in-react-native-a3wlcxmzu?published=1#.WXfDlvk_ooE.twitter)
-* [Comprehensive routing and navigation in React Native made easy](https://medium.com/@kevinle/comprehensive-routing-and-navigation-in-react-native-made-easy-6383e6cdc293)
-* [Replace a Screen Using React Navigation](https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb)
-
-#### Intermediate Concepts
-
-* [Integrating React-Navigation and Redux with authentication flow](https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf)
-* [Using React Navigation and Redux in your React Native Application](https://medium.com/modus-create-front-end-development/using-react-navigation-and-redux-in-your-react-native-application-efac33265138)
-* [React-Navigation, complete Redux state management, tab-bar, and multiple navigators](https://medium.com/@parkerdan/react-navigation-with-complete-redux-state-management-tab-bar-and-multiple-navigators-ed30a69d9a4d)
-* [Custom Drawer with React-Navigation in React-Native](http://www.skywardsoftwares.co.in/react-native/custom-drawer-with-react-navigation-in-react-native/)
-* [React Navigation Drawer - a tutorial series](https://shift.infinite.red/react-navigation-drawer-tutorial-a802fc3ee6dc)
-
-#### Advanced Topics
-
-* [Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation](https://medium.com/react-native-training/full-stack-react-native-development-using-graphcool-and-apollo-subscriptions-react-navigation-cdb3e1374c05)
-
-#### Comparisons and Discussion
-
-* [Migrate from ExNavigation to React Navigation](https://hackernoon.com/migrate-from-exnavigation-to-react-navigation-1af661ec5082)
-* [Playing with React Navigation and Airbnb's Native Navigation](https://medium.com/@ericvicenti/playing-with-react-navigation-and-airbnbs-native-navigation-4e49fc765489)
-* [How we restructured our app with React Navigation](https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26)
-* [What’s Happening with Navigation in React Native?](https://blog.revisify.com/whats-happening-with-navigation-in-react-native-c193535888c3)
-
-#### Example Projects
-
-* [Yaba-Social](https://github.com/allpwrfulroot/yaba-social)
-* [React Native Boilerplate with React Navigation and Redux integration](https://github.com/verybluebot/react-native-boilerplate)
-
-#### Libraries
-
-* [react-navigation-addons](https://github.com/satya164/react-navigation-addons)
-* [react-navigation-props-mapper](https://github.com/vonovak/react-navigation-props-mapper)
+You can also try out the [Navigation Playground app](https://exp.host/@react-navigation/NavigationPlayground) to get a sense for some of the tools built in to React Navigation. The "Fundamentals" in the documentation also include examples you can play with.
 
 ## FAQs
 
-#### When is version 1.0.0 going to be released?
-
-As soon as all the tasks [here](https://github.com/react-community/react-navigation/issues/2585) have been completed. You can read more about it in the [blog](https://reactnavigation.org/blog/2017/9/Renewed-v1).
-
-(in the meantime, you can find the changelog for every release [here](https://github.com/react-community/react-navigation/releases))
-
 #### I'm having troubles using the library, what can I do?
 
-Head to the [issues](https://github.com/react-community/react-navigation/issues) and do a quick search: if you think you are experiencing a bug chances are somebody already opened an issue for it. If instead you are having more general problems, use [Stack Overflow](https://stackoverflow.com/search?q=react-navigation) - which is better suited and helps keeping the Issues section of the repo clean. Alternatively you could join the [Reactiflux](https://www.reactiflux.com/) community on Discord where there are React Native and React Navigation channels with helpful people who might be able to answer you.
-
-You should **only** open a new issue if you believe that you are experiencing a bug or have a feature request, and please **follow** the dedicated template - it will help everyone helping you (and may get closed if it doesn't).
-
-#### My app is really slow!
-
-We are aware that the performances can be improved - we will work on this (keep an eye on the roadmap linked above). In the meantime, please refer to these few issues for specific information regarding:
-
-* [Tab Navigators](https://github.com/react-community/react-navigation/issues/739)
-
-* [Stack Navigators](https://github.com/react-community/react-navigation/issues/608)
-
-In particular, refer to [this comment](https://github.com/react-community/react-navigation/issues/608#issuecomment-328635042) (and the [one after](https://github.com/react-community/react-navigation/issues/608#issuecomment-333386346) that) to learn more about how you can try improving the performance of your code.
+See [the help page](https://reactnavigation.org/en/help.html).
 
 #### How can I help?
 
-Glad you ask! This library is a community effort: it can only be great if we all help out in one way or another 😄 . If you feel like you aren't experienced enough using react navigation to contribute, you can still make an impact by:
+This library is a community effort: it can only be great if we all help out in one way or another! If you feel like you aren't experienced enough using React Navigation to contribute, you can still make an impact by:
 
-1. Responding to one of the open [issues](https://github.com/react-community/react-navigation/issues). Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue.
+* Responding to one of the open [issues](https://github.com/react-community/react-navigation/issues). Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue.
+* Creating public example repositories or [Snacks](https://snack.expo.io/) of navigation problems you have solved and sharing the links in [Community Resources](https://github.com/react-navigation/react-navigation/blob/master/COMMUNITY_RESOURCES.md).
+* Answering questions on [Stack Overflow](https://stackoverflow.com/search?q=react-navigation).
+* Answering questions in our [Reactiflux](https://www.reactiflux.com/) channel.
+* Providing feedback on the open [PRs](https://github.com/react-navigation/react-navigation/pulls).
+* Providing feedback on the open [RFCs](https://github.com/react-navigation/rfcs).
+* Improving the [website](https://github.com/react-navigation/react-navigation.github.io).
 
-1. Creating public example repos of navigation problems you have solved.
-
-1. Answering questions on [Stack Overflow](https://stackoverflow.com/search?q=react-navigation). Alternatively, asking questions on Stack Overflow instead of opening an issue.
-
-1. Answering questions in our [Reactiflux](https://www.reactiflux.com/) channel.
-
-1. Providing feedback on the open [PRs](https://github.com/react-community/react-navigation/pulls).
-
-If you feel brave enough you can submit a PR: follow the [Contributors guide](https://reactnavigation.org/docs/guides/contributors) to find out how. If you don't know where to start, check the ones with the label [`good first issue`](https://github.com/react-community/react-navigation/labels/good%20first%20issue) - even [fixing a typo in the documentation](https://github.com/react-community/react-navigation/pull/2727) is a worthy contribution!
+If you would like to submit a pull request, please follow the [Contributors guide](https://reactnavigation.org/docs/contributing.html) to find out how. If you don't know where to start, check the ones with the label [`good first issue`](https://github.com/react-community/react-navigation/labels/good%20first%20issue) - even [fixing a typo in the documentation](https://github.com/react-community/react-navigation/pull/2727) is a worthy contribution!
 
 #### Is this the only library available for navigation?
 
-No: there are some other libraries - which, depending on your project, can be better or worse suited for your project. They differ in the approach and implementation from `react-navigation`, but share the common goal of helping you create a good React Native application; you can find a general round up in the [React Native docs](http://facebook.github.io/react-native/docs/navigation.html).
+Certainly not! There other libraries - which, depending on your needs, can be better or worse suited for your project. Read more in the [alternative libraries](https://reactnavigation.org/docs/alternatives.html) documentation, and read React Navigation's [pitch & anti-pitch](https://reactnavigation.org/docs/pitch.html) to understand the tradeoffs.
 
 #### Can I use this library for web?
 
-This library originally planned to support web too - but at the moment [it is not a priority](https://github.com/react-community/react-navigation/issues/2585#issuecomment-330338793) for v1.0; a lot of work is necessary to reach it as-is and we had to freeze this support (consider it ["experimental"](https://reactnavigation.org/docs/guides/web)).
+Web support was [not a priority for the 1.0 release](https://github.com/react-community/react-navigation/issues/2585#issuecomment-330338793), but the architecture of this library allows for it (and it has worked in the past). If you would like to lead this charge, please reach out with your ideas for how to move forward on the [RFCs repository](https://github.com/react-navigation/rfcs) and we would be happy to discuss.
 
 ## Code of conduct
 

docs/CONTRIBUTING.md

@@ -1,181 +0,0 @@
-# React Navigation Contributor Guide
-
-Want to help improve React Navigation? Your help would be greatly appreciated!
-
-Here are some of some of the ways to contribute to the project:
-
-- [Reporting Bugs](#Reporting-Bugs)
-- [Improving the Documentation](#Improving-the-Documentation)
-- [Responding to Issues](#Responding-to-Issues)
-- [Bug Fixes](#Bug-Fixes)
-- [Suggesting a Feature](#Suggesting-a-Feature)
-- [Big Pull Requests](#Big-Pull-Requests)
-
-And here are a few helpful resources to aid in getting started:
-
-- [Issue Template](#Issue-Template)
-- [Pull Request Template](#Pull-Request-Template)
-- [Forking the Repository](#Forking-the-Repository)
-- [Code Review Guidelines](#Code-Review-Guidelines)
-- [Run the Example App](#Run-the-Example-App)
-- [Run the Website](#Run-the-Website)
-- [Run Tests and Type-Checking](#Run-Tests-and-Type-Checking)
-
-> Note that we used Yarn in the examples below but you're welcome to use NPM instead.
-
-## Contributing
-
-### Reporting Bugs
-
-You can't write code without writing the occasional bug. Especially as React Navigation is in beta and moving quickly, bugs happen. When you think you've found one here's what to do:
-
-1. Search the existing issues for one like what you're seeing. If you see one, add a 👍 reaction (please no +1 comments). Read through the comments and see if you can provide any more valuable information to the thread
-2. If there are no other issues like yours then create a new one. Be sure to follow the [issue template](https://github.com/react-community/react-navigation/blob/master/.github/ISSUE_TEMPLATE.md).
-
-Creating a high quality reproduction is critical. Without it we likely can't fix the bug and, in an ideal situation, you'll find out that it's not actually a bug of the library but simply done incorrectly in your project. Instant bug fix!
-
-### Improving the Documentation
-
-Any successful projects needs quality documentation and React Navigation is no different.
-
-The docs are currently organized as follows
-
-- __Getting Started__: Introduction and basics of React Navigation. Help people get up and running with the package quickly. Introduce and demonstrate core functionality.
-- __Navigators__: API documentation for the included navigators and supporting APIs
-- __Advanced Guides__: (Advanced) Beyond the basics, what can you do with React Navigation? Discuss and demonstrate that here.
-- __Routers__: (Advanced) API documentation for the included routers and how to use/customize them
-- __Views__: (Advanced) API documentation for the included views and how to use/customize them
-
-The documentation isn't fixed to what categories and documents currently exist. If your documentation contributation is appropriate for any existing document, add it there. If it makes sense to create a new document for your contribution please do so and add it to the docs index.
-
-The docs are indexed in [App.js](https://github.com/react-community/react-navigation/blob/master/website/src/App.js), where all the pages are declared alongside the titles. To test the docs, follow the instructions for running the website.
-
-The markdown from the `docs` folder gets generated and dumped into a json file as a part of the build step. To see updated docs appear in the website, re-run the build step by running `yarn run build-docs` from the `react-navigation` root folder.
-
-### Responding to Issues
-
-Another great way to contribute to React Navigation is by responding to issues. Maybe it's answering someone's question, pointing out a small typo in their code, or helping them put together a reproduction. If you're interested in a more active role in React Navigation start with responding to issues - not only is it helpful but it demonstrates your commitment and knowledge of the code!
-
-### Bug Fixes
-
-Find a bug, fix it up, all day long you'll have good luck! Like it was mentioned earlier, bugs happen. If you find a bug do the following:
-
-1. Check if a pull request already exists addressing that bug. If it does give it a review and leave your comments
-2. If there isn't already a pull request then figure out the fix! If it's relatively small go ahead and fix it and submit a pull request. If it's a decent number of changes file an issue first so we can discuss it (see the [Big Pull Requests](#big-pull-requests) section)
-3. If there is an issue related to that bug leave a comment on it, linking to your pull request, so others know it's been addressed.
-
-Check out the [help wanted](https://github.com/react-community/react-navigation/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) and [good first issue](https://github.com/react-community/react-navigation/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) tags to see where you can start helping out!
-
-### Suggesting a Feature
-
-Is there something you want to see from React Navigation? Go ahead and open and issue, describe what it is you want to accomplish and why you want to accomplish that. A few things to consider/add
-
-1. Is there already a way to do this and you want to simplify it?
-2. Do you have any thoughts on how to implement this feature? Have you done something similar already?
-
-Hold off on submitting feature pull requests until the feature has been discussed. Once the feature has been established and agreed upon, create the pull request (following the [big pull requests](#big-pull-requests) guide).
-
-### Big Pull Requests
-
-For any changes that will add/remove/modify multiple files in the project (new features or bug fixes) hold off on writing code right away. There's a few reasons for that
-
-1. Big pull requests take a lot of time to review and it's sometimes hard to pick up the context
-2. Often you may not have to make as big of a change as you expect
-
-With that in mind, here's the suggestion
-
-1. Open an issue and clearly define what it is you want to accomplish and how you intend to accomplish it
-2. Discuss that solution with the community and maintainers. Provide context, establish edge cases, and figure out the design
-3. Decide on a plan of action
-4. Write the code and submit the PR
-5. Review the PR. This can take some time but, if you followed the steps above, hopefully it won't take too much time.
-
-The reason we want to do this is to save everyone time. Maybe that feature already exists but isn't documented? Or maybe it doesn't fit with the library. Regardless, by discussing a major change up front you're saving your time and others time as well.
-
-## Information
-
-### Issue Template
-
-Before submitting and issue please take a look at the [issue template](https://github.com/react-community/react-navigation/blob/master/.github/ISSUE_TEMPLATE.md) and follow it. This is in place to help everyone better understand the issue you're having and reduce the back and forth to get the necessary information.
-
-Yes, it takes time and effort to complete the issue template. But that's the only way to ask high quality questions that actually get responses.
-
-Would you rather take 1 minute to create an incomplete issue report and wait months to get any sort of response? Or would you rather take 20 minutes to fill out a high quality issue report, with all the necessary elements, and get a response in days? It's also a respectful thing to do for anyone willing to take the time to review your issue.
-
-### Pull Request Template
-
-Much like the issue template, the [pull request template](https://github.com/react-community/react-navigation/blob/master/.github/PULL_REQUEST_TEMPLATE.md) lays out instructions to ensure your pull request gets reviewd in a timely manner and reduces the back and forth. Make sure to look it over before you start writing any code.
-
-### Forking the Repository
-
-- Fork [`react-navigation`](https://github.com/react-community/react-navigation) on GitHub
-- Run these commands in the terminal to download locally and install it:
-
-```bash
-git clone https://github.com/<USERNAME>/react-navigation.git
-cd react-navigation
-git remote add upstream https://github.com/react-community/react-navigation.git
-yarn install
-```
-
-### Code Review Guidelines
-
-Look around. Match the style of the reset of the codebase. This project uses ESLint to ensure consistency throughout the project. You can check your project by running
-
-```bash
-yarn run eslint
-```
-
-If any errors occur you'll either have to manually fix them or you can attempt to automatically fix them by running `yarn run format`.
-
-### Run the Example App
-
-```bash
-yarn install
-cd examples/NavigationPlayground
-yarn install
-yarn start
-```
-
-You will be show a QR code to scan in the Expo app. You can get Expo [here](https://docs.expo.io/versions/latest/index.html) if you don't have it yet.
-
-All examples:
-
-- [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground)
-- [ReduxExample](https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)
-- [SafeAreaExample](https://github.com/react-community/react-navigation/tree/master/examples/SafeAreaExample)
-
-Commands are the same as above for any of the example apps. If you run into any issues, please try the following to start fresh:
-
-```bash
-watchman watch-del-all
-yarn start -- --reset-cache
-```
-
-### Run the Website
-
-For development mode and live-reloading:
-
-```bash
-cd website
-yarn install
-yarn start
-```
-
-To run the website in production mode with server rendering:
-
-```bash
-yarn run prod
-```
-
-If you've made any changes to the `docs` directory you'll need to run `yarn run build-docs` from the root of the project before they're picked up by the website.
-
-### Run Tests and Type-Checking
-
-React Navigation has tests implemented in [Jest](https://facebook.github.io/jest/). To run either of these, from the React Navigation directory, run either of the following commands (after installing the `node_modules`) to run tests or type-checking.
-
-```bash
-yarn run jest
-```
-
-These commands will be run by our CI and are required to pass before any contributtions are merged.

docs/api/navigators/DrawerNavigator.md

@@ -1,191 +0,0 @@
-# DrawerNavigator
-
-Used to easily set up a screen with a drawer navigation. For a live example please see [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
-
-```js
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Home',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./chats-icon.png')}
-        style={[styles.icon, { tintColor }]}
-      />
-    ),
-  };
-
-  render() {
-    return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
-    );
-  }
-}
-
-class MyNotificationsScreen extends React.Component {
-  static navigationOptions = {
-    drawerLabel: 'Notifications',
-    drawerIcon: ({ tintColor }) => (
-      <Image
-        source={require('./notif-icon.png')}
-        style={[styles.icon, { tintColor }]}
-      />
-    ),
-  };
-
-  render() {
-    return (
-      <Button
-        onPress={() => this.props.navigation.goBack()}
-        title="Go back home"
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  icon: {
-    width: 24,
-    height: 24,
-  },
-});
-
-const MyApp = DrawerNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Notifications: {
-    screen: MyNotificationsScreen,
-  },
-});
-```
-
-To open and close drawer, navigate to `'DrawerOpen'` and `'DrawerClose'` respectively.
-
-```js
-this.props.navigation.navigate('DrawerOpen'); // open drawer
-this.props.navigation.navigate('DrawerClose'); // close drawer
-```
-If you would like to toggle the drawer you can navigate to `'DrawerToggle'`, and this will choose which navigation is appropriate for you given the drawers current state.
-
-```js
-// fires 'DrawerOpen'/'DrawerClose' accordingly
-this.props.navigation.navigate('DrawerToggle');
-```
-
-## API Definition
-
-```js
-DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
-```
-
-### RouteConfigs
-
-The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](/docs/api/navigators/StackNavigator.md#routeconfigs) from `StackNavigator`.
-
-
-### DrawerNavigatorConfig
-- `drawerWidth` - Width of the drawer or a function returning it.
-- `drawerPosition` - Options are `left` or `right`. Default is `left` position.
-- `contentComponent` - Component used to render the content of the drawer, for example, navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerItems`. For more information, see below.
-- `contentOptions` - Configure the drawer content, see below.
-- `useNativeAnimations` - Enable native animations. Default is `true`.
-- `drawerBackgroundColor` - Use the Drawer background for some color. The Default is `white`.
-
-Several options get passed to the underlying router to modify navigation logic:
-
-- `initialRouteName` - The routeName for the initial route.
-- `order` - Array of routeNames which defines the order of the drawer items.
-- `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
-- `backBehavior` - Should the back button cause switch to the initial route? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
-
-### Providing a custom `contentComponent`
-
-The default component for the drawer is scrollable and only contains links for the routes in the RouteConfig. You can easily override the default component to add a header, footer, or other content to the drawer. By default the drawer is scrollable and supports iPhone X safe area. If you customize the content, be sure to wrap the content in a SafeAreaView:
-
-```js
-import { DrawerItems, SafeAreaView } from 'react-navigation';
-
-const CustomDrawerContentComponent = (props) => (
-  <ScrollView>
-    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
-      <DrawerItems {...props} />
-    </SafeAreaView>
-  </ScrollView>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-```
-
-### `contentOptions` for `DrawerItems`
-
-- `items` - the array of routes, can be modified or overridden
-- `activeItemKey` - key identifying the active route
-- `activeTintColor` - label and icon color of the active label
-- `activeBackgroundColor` - background color of the active label
-- `inactiveTintColor` - label and icon color of the inactive label
-- `inactiveBackgroundColor` - background color of the inactive label
-- `onItemPress(route)` - function to be invoked when an item is pressed
-- `itemsContainerStyle` - style object for the content section
-- `itemStyle` - style object for the single item, which can contain an Icon and/or a Label
-- `labelStyle` - style object to overwrite `Text` style inside content section, when your label is a string
-- `iconContainerStyle` - style object to overwrite `View` icon container styles.
-
-#### Example:
-
-```js
-contentOptions: {
-  activeTintColor: '#e91e63',
-  itemsContainerStyle: {
-    marginVertical: 0,
-  },
-  iconContainerStyle: {
-    opacity: 1
-  }
-}
-```
-
-### Screen Navigation Options
-
-#### `title`
-
-Generic title that can be used as a fallback for `headerTitle` and `drawerLabel`
-
-#### `drawerLabel`
-
-String, React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Node, to display in drawer sidebar. When undefined, scene `title` is used
-
-#### `drawerIcon`
-
-React Element or a function, that given `{ focused: boolean, tintColor: string }` returns a React.Node, to display in drawer sidebar
-
-#### `drawerLockMode`
-
-Specifies the [lock mode](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#drawerlockmode) of the drawer. This can also update dynamically by using screenProps.drawerLockMode on your top level router.
-
-### Navigator Props
-
-The navigator component created by `DrawerNavigator(...)` takes the following props:
-
-- `screenProps` - Pass down extra options to child screens, for example:
-
-
- ```jsx
- const DrawerNav = DrawerNavigator({
-   // config
- });
-
- <DrawerNav
-   screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
- />
- ```
-
- ### Nesting `DrawerNavigation`
-
-Please bear in mind that if you nest the DrawerNavigation, the drawer will show below the parent navigation.

docs/api/navigators/Navigators.md

@@ -1,63 +0,0 @@
-# Navigators
-
-Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.
-
-Under the hood, navigators are plain React components.
-
-## Built-in Navigators
-
-`react-navigation` includes the following functions to help you create navigators:
-
-- [StackNavigator](/docs/navigators/stack) - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack.
-- [TabNavigator](/docs/navigators/tab) - Renders a tab bar that lets the user switch between several screens
-- [DrawerNavigator](/docs/navigators/drawer) - Provides a drawer that slides in from the left of the screen
-
-## Rendering screens with Navigators
-
-The navigators render application screens which are just React components.
-
-To learn how to create screens, read about:
-- [Screen `navigation` prop](/docs/navigators/navigation-prop) to allow the screen to dispatch navigation actions, such as opening another screen
-- [Screen `navigationOptions`](/docs/navigators/navigation-options) to customize how the screen gets presented by the navigator (e.g. header title, tab label)
-
-### Calling Navigate on Top Level Component
-
-In case you want to use Navigator from the same level you declare it you can use react's [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute) option:  
-```js
-import { NavigationActions } from 'react-navigation';
-
-const AppNavigator = StackNavigator(SomeAppRouteConfigs);
-
-class App extends React.Component {
-  someEvent() {
-    // call navigate for AppNavigator here:
-    this.navigator && this.navigator.dispatch(
-      NavigationActions.navigate({ routeName: someRouteName })
-    );
-  }
-  render() {
-    return (
-      <AppNavigator ref={nav => { this.navigator = nav; }} />
-    );
-  }
-}
-```
-Please notice that this solution should only be used on the top level navigator.  
-
-## Navigation Containers
-
-The built in navigators can automatically behave like top-level navigators when the navigation prop is missing. This functionality provides a transparent navigation container, which is where the top-level navigation prop comes from.
-
-When rendering one of the included navigators, the navigation prop is optional. When it is missing, the container steps in and manages its own navigation state. It also handles URLs, external linking, and Android back button integration.
-
-For the purpose of convenience, the built-in navigators have this ability because behind the scenes they use `createNavigationContainer`. Usually, navigators require a navigation prop in order to function.
-
-Top-level navigators accept the following props:  
-
-### `onNavigationStateChange(prevState, newState, action)`
-
-Function that gets called every time navigation state managed by the navigator changes. It receives the previous state, the new state of the navigation and the action that issued state change. By default it prints state changes to the console.
-
-### `uriPrefix`
-
-The prefix of the URIs that the app might handle. This will be used when handling a [deep link](/docs/guides/linking) to extract the path passed to the router.

docs/api/navigators/StackNavigator.md

@@ -1,230 +0,0 @@
-# StackNavigator
-
-Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
-
-By default the StackNavigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android. On iOS the StackNavigator can also be configured to a modal style where screens slide in from the bottom.
-
-```jsx
-
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Home',
-  }
-
-  render() {
-    return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}
-        title="Go to Lucy's profile"
-      />
-    );
-  }
-}
-
-const ModalStack = StackNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Profile: {
-    path: 'people/:name',
-    screen: MyProfileScreen,
-  },
-});
-```
-
-## API Definition
-
-```js
-StackNavigator(RouteConfigs, StackNavigatorConfig)
-```
-
-### RouteConfigs
-
-The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route.
-
-```js
-StackNavigator({
-
-  // For each screen that you can navigate to, create a new entry like this:
-  Profile: {
-
-    // `ProfileScreen` is a React component that will be the main content of the screen.
-    screen: ProfileScreen,
-    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.
-
-    // Optional: When deep linking or using react-navigation in a web app, this path is used:
-    path: 'people/:name',
-    // The action and route params are extracted from the path.
-
-    // Optional: Override the `navigationOptions` for the screen
-    navigationOptions: ({navigation}) => ({
-      title: `${navigation.state.params.name}'s Profile'`,
-    }),
-  },
-
-  ...MyOtherRoutes,
-});
-```
-
-### StackNavigatorConfig
-
-Options for the router:
-
-- `initialRouteName` - Sets the default screen of the stack. Must match one of the keys in route configs.
-- `initialRouteParams` - The params for the initial route
-- `navigationOptions` - Default navigation options to use for screens
-- `paths` - A mapping of overrides for the paths set in the route configs
-
-Visual options:
-
-- `mode` - Defines the style for rendering and transitions:
-  - `card` - Use the standard iOS and Android screen transitions. This is the default.
-  - `modal` - Make the screens slide in from the bottom which is a common iOS pattern. Only works on iOS, has no effect on Android.
-- `headerMode` - Specifies how the header should be rendered:
-  - `float` - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
-  - `screen` - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
-  - `none` - No header will be rendered.
-- `cardStyle` - Use this prop to override or extend the default style for an individual card in stack.
-- `transitionConfig` - Function to return an object that is merged with the default screen transitions (take a look at TransitionConfig in [type definitions](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js)). Provided function will be passed the following arguments:
-	- `transitionProps` - Transition props for the new screen.
-	- `prevTransitionProps` - Transitions props for the old screen.
-	- `isModal` - Boolean specifying if screen is modal.
-- `onTransitionStart` - Function to be invoked when the card transition animation is about to start.
-- `onTransitionEnd` - Function to be invoked once the card transition animation completes.
-
-
-### Screen Navigation Options
-
-#### `title`
-
-String that can be used as a fallback for `headerTitle`. Additionally, will be used as a fallback for `tabBarLabel` (if nested in a TabNavigator) or `drawerLabel` (if nested in a DrawerNavigator). 
-
-#### `header`
-
-React Element or a function that given `HeaderProps` returns a React Element, to display as a header. Setting to `null` hides header.
-
-#### `headerTitle`
-
-String, React Element or React Component used by the header. Defaults to scene `title`. When a component is used, it receives `allowFontScaling`, `style` and `children` props. The title string is passed in `children`.
-
-#### `headerTitleAllowFontScaling`
-
-Whether header title font should scale to respect Text Size accessibility settings. Defaults to true.
-
-#### `headerBackTitle`
-
-Title string used by the back button on iOS, or `null` to disable label. Defaults to the previous scene's `headerTitle`.
-
-#### `headerTruncatedBackTitle`
-
-Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
-
-#### `headerRight`
-
-React Element to display on the right side of the header.
-
-#### `headerLeft`
-
-React Element or Component to display on the left side of the header. When a component is used, it receives a number of props when rendered (`onPress`, `title`, `titleStyle` and more - check `Header.js` for the complete list).
-
-#### `headerStyle`
-
-Style object for the header
-
-#### `headerTitleStyle`
-
-Style object for the title component
-
-#### `headerBackTitleStyle`
-
-Style object for the back title
-
-#### `headerTintColor`
-
-Tint color for the header
-
-#### `headerPressColorAndroid`
-
-Color for material ripple (Android >= 5.0 only)
-
-#### `gesturesEnabled`
-
-Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android.
-
-#### `gestureResponseDistance`
-
-Object to override the distance of touch start from the edge of the screen to recognize gestures. It takes the following properties:
-
-- `horizontal` - *number* - Distance for horizontal direction. Defaults to 25.
-- `vertical` - *number* - Distance for vertical direction. Defaults to 135.
-
-#### `gestureDirection`
-
-String to override the direction for dismiss gesture. `default` for normal behaviour or `inverted` for right-to-left swipes.
-
-### Navigator Props
-
-The navigator component created by `StackNavigator(...)` takes the following props:
-
-- `screenProps` - Pass down extra options to child screens, for example:
-
-
- ```jsx
- const SomeStack = StackNavigator({
-   // config
- });
-
- <SomeStack
-   screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
- />
- ```
-
-### Examples
-
-See the examples [SimpleStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/SimpleStack.js) and [ModalStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/ModalStack.js) which you can run locally as part of the [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground) app.
-
-You can view these examples directly on your phone by visiting [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
-
-#### Modal StackNavigator with Custom Screen Transitions
-
- ```js
-const ModalNavigator = StackNavigator(
-  {
-    Main: { screen: Main },
-    Login: { screen: Login },
-  },
-  {
-    headerMode: 'none',
-    mode: 'modal',
-    navigationOptions: {
-      gesturesEnabled: false,
-    },
-    transitionConfig: () => ({
-      transitionSpec: {
-        duration: 300,
-        easing: Easing.out(Easing.poly(4)),
-        timing: Animated.timing,
-      },
-      screenInterpolator: sceneProps => {
-        const { layout, position, scene } = sceneProps;
-        const { index } = scene;
-
-        const height = layout.initHeight;
-        const translateY = position.interpolate({
-          inputRange: [index - 1, index, index + 1],
-          outputRange: [height, 0, 0],
-        });
-
-        const opacity = position.interpolate({
-          inputRange: [index - 1, index - 0.99, index],
-          outputRange: [0, 1, 1],
-        });
-
-        return { opacity, transform: [{ translateY }] };
-      },
-    }),
-  }
-);
- ```
-
-Header transitions can also be configured using `headerLeftInterpolator`, `headerTitleInterpolator` and `headerRightInterpolator` fields under `transitionConfig`.

docs/api/navigators/TabNavigator.md

@@ -1,207 +0,0 @@
-# TabNavigator
-
-Used to easily set up a screen with several tabs with a TabRouter. For a live example please see [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
-
-```js
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    tabBarLabel: 'Home',
-    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
-    tabBarIcon: ({ tintColor }) => (
-      <Image
-        source={require('./chats-icon.png')}
-        style={[styles.icon, { tintColor }]}
-      />
-    ),
-  };
-
-  render() {
-    return (
-      <Button
-        onPress={() => this.props.navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
-    );
-  }
-}
-
-class MyNotificationsScreen extends React.Component {
-  static navigationOptions = {
-    tabBarLabel: 'Notifications',
-    tabBarIcon: ({ tintColor }) => (
-      <Image
-        source={require('./notif-icon.png')}
-        style={[styles.icon, { tintColor }]}
-      />
-    ),
-  };
-
-  render() {
-    return (
-      <Button
-        onPress={() => this.props.navigation.goBack()}
-        title="Go back home"
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  icon: {
-    width: 26,
-    height: 26,
-  },
-});
-
-const MyApp = TabNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Notifications: {
-    screen: MyNotificationsScreen,
-  },
-}, {
-  tabBarPosition: 'top',
-  animationEnabled: true,
-  tabBarOptions: {
-    activeTintColor: '#e91e63',
-  },
-});
-```
-
-## API Definition
-
-```js
-TabNavigator(RouteConfigs, TabNavigatorConfig)
-```
-
-### RouteConfigs
-
-The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](/docs/api/navigators/StackNavigator.md#routeconfigs) from `StackNavigator`.
-
-### TabNavigatorConfig
-
-- `tabBarComponent` - Component to use as the tab bar, e.g. `TabBarBottom`
-(this is the default on iOS), `TabBarTop`
-(this is the default on Android).
-- `tabBarPosition` - Position of the tab bar, can be `'top'` or `'bottom'`.
-- `swipeEnabled` - Whether to allow swiping between tabs.
-- `animationEnabled` - Whether to animate when changing tabs.
-- `configureTransition` - a function that, given `currentTransitionProps` and `nextTransitionProps`, returns a configuration object that describes the animation between tabs.
-- `initialLayout` - Optional object containing the initial `height` and `width`, can be passed to prevent the one frame delay in [react-native-tab-view](https://github.com/react-native-community/react-native-tab-view#avoid-one-frame-delay) rendering.
-- `tabBarOptions` - Configure the tab bar, see below.
-
-Several options get passed to the underlying router to modify navigation logic:
-
-- `initialRouteName` - The routeName for the initial tab route when first loading.
-- `order` - Array of routeNames which defines the order of the tabs.
-- `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
-- `backBehavior` - Should the back button cause a tab switch to the initial tab? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
-
-### `tabBarOptions` for `TabBarBottom` (default tab bar on iOS)
-
-- `activeTintColor` - Label and icon color of the active tab.
-- `activeBackgroundColor` - Background color of the active tab.
-- `inactiveTintColor` - Label and icon color of the inactive tab.
-- `inactiveBackgroundColor` - Background color of the inactive tab.
-- `showLabel` - Whether to show label for tab, default is true.
-- `style` - Style object for the tab bar.
-- `labelStyle` - Style object for the tab label.
-- `tabStyle` - Style object for the tab.
-- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
-
-Example:
-
-```js
-tabBarOptions: {
-  activeTintColor: '#e91e63',
-  labelStyle: {
-    fontSize: 12,
-  },
-  style: {
-    backgroundColor: 'blue',
-  },
-}
-```
-
-### `tabBarOptions` for `TabBarTop` (default tab bar on Android)
-
-- `activeTintColor` - Label and icon color of the active tab.
-- `inactiveTintColor` - Label and icon color of the inactive tab.
-- `showIcon` - Whether to show icon for tab, default is false.
-- `showLabel` - Whether to show label for tab, default is true.
-- `upperCaseLabel` - Whether to make label uppercase, default is true.
-- `pressColor` - Color for material ripple (Android >= 5.0 only).
-- `pressOpacity` - Opacity for pressed tab (iOS and Android < 5.0 only).
-- `scrollEnabled` - Whether to enable scrollable tabs.
-- `tabStyle` - Style object for the tab.
-- `indicatorStyle` - Style object for the tab indicator (line at the bottom of the tab).
-- `labelStyle` - Style object for the tab label.
-- `iconStyle` - Style object for the tab icon.
-- `style` - Style object for the tab bar.
-- `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
-
-Example:
-
-```js
-tabBarOptions: {
-  labelStyle: {
-    fontSize: 12,
-  },
-  tabStyle: {
-    width: 100,    
-  },
-  style: {
-    backgroundColor: 'blue',
-  },
-}
-```
-
-### Screen Navigation Options
-
-#### `title`
-
-Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.
-
-#### `tabBarVisible`
-
-True or false to show or hide the tab bar, if not set then defaults to true.
-
-#### `swipeEnabled`
-
-True or false to enable or disable swiping between tabs, if not set then defaults to TabNavigatorConfig option swipeEnabled.
-
-#### `tabBarIcon`
-
-React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Node, to display in tab bar.
-
-#### `tabBarLabel`
-
-Title string of a tab displayed in the tab bar or React Element or a function that given `{ focused: boolean, tintColor: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarOptions.showLabel` in the previous section.
-
-#### `tabBarOnPress`
-
-Callback to handle tap events; the argument is an object containing:
-
-* the `previousScene: { route, index }` which is the scene we are leaving
-* the `scene: { route, index }` that was tapped
-* the `jumpToIndex` method that can perform the navigation for you
-
-Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.
-
-### Navigator Props
-
-The navigator component created by `TabNavigator(...)` takes the following props:
-
-- `screenProps` - Pass down extra options to child screens and navigation options, for example:
-
-
- ```jsx
- const TabNav = TabNavigator({
-   // config
- });
-
- <TabNav
-   screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
- />
- ```

docs/api/routers/Routers.md

@@ -1,131 +0,0 @@
-# Routers
-
-Routers define a component's navigation state, and they allow the developer to define paths and actions that can be handled.
-
-
-## Built-In Routers
-
-`react-navigation` ships with a few standard routers:
-
-- [StackRouter](/docs/routers/stack)
-- [TabRouter](/docs/routers/tab)
-
-
-## Using Routers
-
-To make a navigator manually, put a static `router` on a component. (To quickly make a navigator with a built-in component, it may be easier to use a [built-in navigator](/docs/navigators) instead)
-
-```js
-class MyNavigator extends React.Component {
-    static router = StackRouter(routes, config);
-    ...
-}
-```
-
-Now you can use this component as a `screen` in another navigator, and the navigation logic for `MyNavigator` will be defined by this `StackRouter`.
-
-
-## Customizing Routers
-
-See the [Custom Router API spec](/docs/routers/api) to learn about the API of `StackRouter` and `TabRouter`. You can override the router functions as you see fit:
-
-### Custom Navigation Actions
-
-To override navigation behavior, you can override the navigation state logic in `getStateForAction`, and manually manipulate the `routes` and `index`.
-
-```js
-const MyApp = StackNavigator({
-  Home: { screen: HomeScreen },
-  Profile: { screen: ProfileScreen },
-}, {
-  initialRouteName: 'Home',
-})
-
-const defaultGetStateForAction = MyApp.router.getStateForAction;
-
-MyApp.router.getStateForAction = (action, state) => {
-  if (state && action.type === 'PushTwoProfiles') {
-    const routes = [
-      ...state.routes,
-      {key: 'A', routeName: 'Profile', params: { name: action.name1 }},
-      {key: 'B', routeName: 'Profile', params: { name: action.name2 }},
-    ];
-    return {
-      ...state,
-      routes,
-      index: routes.length - 1,
-    };
-  }
-  return defaultGetStateForAction(action, state);
-};
-```
-
-### Blocking Navigation Actions
-
-Sometimes you may want to prevent some navigation activity, depending on your route.
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const MyStackRouter = StackRouter({
-  Home: { screen: HomeScreen },
-  Profile: { screen: ProfileScreen },
-}, {
-  initialRouteName: 'Home',
-})
-
-const defaultGetStateForAction = MyStackRouter.router.getStateForAction;
-
-MyStackRouter.router.getStateForAction = (action, state) => {
-  if (
-    state &&
-    action.type === NavigationActions.BACK &&
-    state.routes[state.index].params.isEditing
-  ) {
-    // Returning null from getStateForAction means that the action
-    // has been handled/blocked, but there is not a new state
-    return null;
-  }
-  
-  return defaultGetStateForAction(action, state);
-};
-```
-
-
-### Handling Custom URIs
-
-Perhaps your app has a unique URI which the built-in routers cannot handle. You can always extend the router `getActionForPathAndParams`.
-
-```js
-
-import { NavigationActions } from 'react-navigation'
-
-const MyApp = StackNavigator({
-  Home: { screen: HomeScreen },
-  Profile: { screen: ProfileScreen },
-}, {
-  initialRouteName: 'Home',
-})
-const previousGetActionForPathAndParams = MyApp.router.getActionForPathAndParams;
-
-Object.assign(MyApp.router, {
-  getActionForPathAndParams(path, params) {
-    if (
-      path === 'my/custom/path' &&
-      params.magic === 'yes'
-    ) {
-      // returns a profile navigate action for /my/custom/path?magic=yes
-      return NavigationActions.navigate({
-        routeName: 'Profile',
-        action: NavigationActions.navigate({
-          // This child action will get passed to the child router
-          // ProfileScreen.router.getStateForAction to get the child
-          // navigation state.
-          routeName: 'Friends',
-        }),
-      });
-    }
-    return previousGetActionForPathAndParams(path, params);
-  },
-});
-```

docs/api/routers/RoutersAPI.md

@@ -1,103 +0,0 @@
-## Custom Router API
-
-You can make your own router by building an object with the following functions:
-
-```js
-const MyRouter = {
-  getStateForAction: (action, state) => ({}),
-  getActionForPathAndParams: (path, params) => null,
-  getPathAndParamsForState: (state) => null,
-  getComponentForState: (state) => MyScreen,
-  getComponentForRouteName: (routeName) => MyScreen,
-};
-
-// Now, you can make a navigator by putting the router on it:
-class MyNavigator extends React.Component {
-  static router = MyRouter;
-  render() {
-    ...
-  }
-}
-```
-
-![Routers manage the relationship between URIs, actions, and navigation state](/assets/routers-concept-map.png)
-
-
-### `getStateForAction(action, state)`
-
-Defines the navigation state in response to a given action. This function will be run when an action gets passed into `props.navigation.dispatch(`, or when any of the helper functions are called, like `navigation.navigate(`.
-
-Typically this should return a navigation state, with the following form:
-
-```
-{
-  index: 1, // identifies which route in the routes array is active
-  routes: [
-    {
-      // Each route needs a name to identify the type.
-      routeName: 'MyRouteName',
-
-      // A unique identifier for this route in the routes array:
-      key: 'myroute-123',
-      // (used to specify the re-ordering of routes)
-
-      // Routes can have any data, as long as key and routeName are correct
-      ...randomRouteData,
-    },
-    ...moreRoutes,
-  ]
-}
-```
-
-If the router has handled the action externally, or wants to swallow it without changing the navigation state, this function will return `null`.
-
-### `getComponentForRouteName(routeName)`
-
-Returns the child component or navigator for the given route name.
-
-Say a router `getStateForAction` outputs a state like this:
-```js
-{
-  index: 1,
-  routes: [
-    { key: 'A', routeName: 'Foo' },
-    { key: 'B', routeName: 'Bar' },
-  ],
-}
-```
-
-Based on the routeNames in the state, the router is responsible for returning valid components when calling `router.getComponentForRouteName('Foo')` or `router.getComponentForRouteName('Bar')`.
-
-### `getComponentForState(state)`
-
-Returns the active component for a deep navigation state.
-
-### `getActionForPathAndParams(path, params)`
-
-Returns an optional navigation action that should be used when the user navigates to this path and provides optional query parameters.
-
-### `getPathAndParamsForState(state)`
-
-Returns the path and params that can be put into the URL to link the user back to the same spot in the app.
-
-The path/params that are output from this should form an action when passed back into the router's `getActionForPathAndParams`. That action should take you to a similar state once passed through `getStateForAction`.
-
-### `getScreenOptions(navigation, screenProps)`
-
-Used to retrieve the navigation options for a screen. Must provide the screen's current navigation prop and optionally, other props that your navigation options may need to consume.
-
-- `navigation` - This is the navigation prop that the screen will use, where the state refers to the screen's route/state. Dispatch will trigger actions in the context of that screen.
-- `screenProps` - Other props that your navigation options may need to consume
-- `navigationOptions` - The previous set of options that are default or provided by the previous configurer
-
-Inside an example view, perhaps you need to fetch the configured title:
-```js
-// First, prepare a navigation prop for your child, or re-use one if already available.
-const screenNavigation = addNavigationHelpers({
-  // In this case we use navigation.state.index because we want the title for the active route.
-  state: navigation.state.routes[navigation.state.index],
-  dispatch: navigation.dispatch,
-});
-const options = this.props.router.getScreenOptions(screenNavigation, {});
-const title = options.title;
-```

docs/api/routers/StackRouter.md

@@ -1,64 +0,0 @@
-# StackRouter
-
-Manage the logical navigation stack, including pushing, popping, and handling path parsing to create a deep stack.
-
-Let's take a look at a simple stack router:
-
-```js
-const MyApp = StackRouter({
-  Home: { screen: HomeScreen },
-  Profile: { screen: ProfileScreen },
-}, {
-  initialRouteName: 'Home',
-})
-```
-
-
-### RouteConfig
-
-A basic stack router expects a route config object. Here is an example configuration:
-
-```js
-const MyApp = StackRouter({ // This is the RouteConfig:
-  Home: {
-    screen: HomeScreen,
-    path: '',
-  },
-  Profile: {
-    screen: ProfileScreen,
-    path: 'profile/:name',
-  },
-  Settings: {
-    // This can be handy to lazily require a screen:
-    getScreen: () => require('Settings').default,
-    // Note: Child navigators cannot be configured using getScreen because
-    // the router will not be accessible. Navigators must be configured
-    // using `screen: MyNavigator`
-    path: 'settings',
-  },
-});
-```
-
-Each item in the config may have the following:
-
-- `path` - Specify the path and params to be parsed for item in the stack
-- `screen` - Specify the screen component or child navigator
-- `getScreen` - Set a lazy getter for a screen component (but not navigators)
-
-
-### StackConfig
-
-Config options that are also passed to the stack router.
-
-- `initialRouteName` - The routeName for the default route when the stack first loads
-- `initialRouteParams` - Default params of the initial route
-- `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
-
-### Supported Actions
-
-The stack router may respond to the following navigation actions. The router will generally delegate the action handling to a child router, if possible.
-
-- Navigate - Will push a new route on the stack if the routeName matches one of the router's routeConfigs
-- Back - Goes back (pops)
-- Reset - Clears the stack and provides new actions to create a fully new navigation state
-- SetParams - An action that a screen dispatches to change the params of the current route.

docs/api/routers/TabRouter.md

@@ -1,60 +0,0 @@
-# TabRouter
-
-Manage a set of tabs in the application, handle jumping to tabs, and handle the back button press to jump to the initial tab.
-
-Let's take a look at a simple tabs router:
-
-```js
-const MyApp = TabRouter({
-  Home: { screen: HomeScreen },
-  Settings: { screen: SettingsScreen },
-}, {
-  initialRouteName: 'Home',
-})
-```
-
-
-### RouteConfig
-
-A tabs router has a routeConfig for each possible tab:
-
-```js
-const MyApp = TabRouter({ // This is the RouteConfig:
-  Home: {
-    screen: HomeScreen,
-    path: 'main',
-  },
-  Settings: {
-    // This can be handy to lazily require a tab:
-    getScreen: () => require('./SettingsScreen').default,
-    // Note: Child navigators cannot be configured using getScreen because
-    // the router will not be accessible. Navigators must be configured
-    // using `screen: MyNavigator`
-    path: 'settings',
-  },
-});
-```
-
-Each item in the config may have the following:
-
-- `path` - Specify the path for each tab
-- `screen` - Specify the screen component or child navigator
-- `getScreen` - Set a lazy getter for a screen component (but not navigators)
-
-
-### Tab Router Config
-
-Config options that are also passed to the router.
-
-- `initialRouteName` - The routeName for the initial tab route when first loading
-- `order` - Array of routeNames which defines the order of the tabs
-- `paths` - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
-- `backBehavior` - Should the back button cause a tab switch to the initial tab? If yes, set to `initialRoute`, otherwise `none`. Defaults to `initialRoute` behavior.
-
-### Supported Actions
-
-The tabs router may respond to the following navigation actions. The router will generally delegate the action handling to a child router, if possible.
-
-- Navigate - Will jump to the routeName if it matches a tab
-- Back - Goes to the first tab, if not already selected
-- SetParams - An action that a screen dispatches to change the params of the current route.

docs/api/views/Transitioner.md

@@ -1,161 +0,0 @@
-# Transitioner
-
-`Transitioner` is a React component that helps manage transitions for complex animated components. It manages the timing of animations and keeps track of various screens as they enter and leave, but it doesn't know what anything looks like, because rendering is entirely deferred to the developer.
-
-Under the covers, `Transitioner` is used to implement `CardStack`, and hence the `StackNavigator`.
-
-The most useful thing `Transitioner` does is to take in a prop of the current navigation state. When routes are removed from that navigation state, `Transitioner` will coordinate the transition away from those routes, keeping them on screen even though they are gone from the navigation state.
-
-
-## Example
-
-```jsx
-class MyNavView extends Component {
-  ...
-  render() {
-    return (
-      <Transitioner
-        configureTransition={this._configureTransition}
-        navigation={this.props.navigation}
-        render={this._render}
-        onTransitionStart={this.onTransitionStart}
-        onTransitionEnd={this.onTransitionEnd}
-      />
-    );
-}
-```
-
-## Props
-
-### `configureTransition` function
-
-Invoked on `Transitioner.componentWillReceiveProps`, this function allows customization of animation parameters such as `duration`. The value returned from this function will be fed into a timing function, by default `Animated.timing()`, as its config.
-
-#### Examples
-
-```js
-_configureTransition(transitionProps, prevTransitionProps) {
-  return {
-    // duration in milliseconds, default: 250
-    duration: 500,
-    // An easing function from `Easing`, default: Easing.inOut(Easing.ease)
-    easing: Easing.bounce,
-  }
-}
-```
-
-Note: `duration` and `easing` are only applicable when the timing function is `Animated.timing`. We can also use a different timing function and its corresponding config parameters, like so:
-
-```js
-_configureTransition(transitionProps, prevTransitionProps) {
-  return {
-    // A timing function, default: Animated.timing.
-    timing: Animated.spring,
-    // Some parameters relevant to Animated.spring
-    friction: 1,
-    tension: 0.5,
-  }
-}
-```
-
-#### Parameters
-- `transitionProps`: the current [NavigationTransitionProps](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L273) created from the current navigation state and props
-- `prevTransitionProps`: the previous [NavigationTransitionProps](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L273) created from the previous navigation state and props
-
-#### Returns
-- An object of type [NavigationTransitionSpec](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L316) that will be fed into an Animated timing function as its config
-
-
-### `navigation` prop
-An object with `state` that represents the navigation state, with `routes` and an active route `index`. Also includes `dispatch` and other methods for requesting actions.
-
-#### Example value
-
-```js
-{
-   // Index refers to the active child route in the routes array.
-  index: 1,
-  routes: [
-    { key: 'DF2FGWGAS-12', routeName: 'ContactHome' },
-    { key: 'DF2FGWGAS-13', routeName: 'ContactDetail', params: { personId: 123 } }
-  ]
-}
-```
-
-### `render` function
-Invoked from `Transitioner.render()`. This function performs the actual rendering delegated from `Transitioner`. In this function, we can use the information included in the `transitionProps` and `prevTransitionProps` parameters to render scenes, create animations and handle gestures.
-
-There are a few important properties of the `transitionProps` and `prevTransitionProps` parameters that are useful for the tasks mentioned above:
-
-- `scenes: Array<NavigationScene>` - a list of all available scenes
-- `position: NavigationAnimatedValue` - the progressive index of the transitioner's navigation state
-- `progress: NavigationAnimatedValue` - the value that represents the progress of the transition when navigation state changes from one to another. Its numeric value will range from 0 to 1.
-
-#### Examples
-
-`transitionProps.scenes` is the list of all available scenes. It is up to the implementor to determine how to lay them out on the screen. For example, we can render the scenes as a stack of cards like so:
-
-```jsx
-_render(transitionProps, prevTransitionProps) {
-  const scenes = transitionProps.scenes.map(scene => this._renderScene(transitionProps, scene));
-  return (
-    <View style={styles.stack}>
-      {scenes}
-    </View>
-  );
-}
-```
-
-We can then use an `Animated.View` to animate the transition. To create necessary animated style properties, such as `opacity`, we can interpolate on `position` and `progress` values that come with `transitionProps`:
-
-```jsx
-_renderScene(transitionProps, scene) {
-  const { position } = transitionProps;
-  const { index } = scene;
-  const opacity = position.interpolate({
-    inputRange: [index-1, index, index+1],
-    outputRange: [0, 1, 0],
-  });
-  // The prop `router` is populated when we call `createNavigator`.
-  const Scene = this.props.router.getComponent(scene.route.routeName);
-  return (
-    <Animated.View style={{ opacity }}>
-      { Scene }
-    </Animated.View>
-  )
-}
-```
-
-The above code creates a cross fade animation during transition.
-
-For a comprehensive tutorial on how to create custom transitions, see this [blog post](http://www.reactnativediary.com/2016/12/20/navigation-experimental-custom-transition-1.html).
-
-#### Parameters
-- `transitionProps`: the current [NavigationTransitionProps](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L273) created from the current state and props
-- `prevTransitionProps`: the previous [NavigationTransitionProps](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L273) created from the previous state and props
-
-#### Returns
-- A ReactElement, which will be used to render the Transitioner component
-
-### `onTransitionStart` function
-Invoked when the transition animation is about to start.
-
-If you return a promise from `onTransitionStart`, the transition animation will begin after the promise is resolved.
-
-#### Parameters
-- `transitionProps`: the current [NavigationTransitionProps](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L273) created from the current state and props
-- `prevTransitionProps`: the previous [NavigationTransitionProps](https://github.com/react-community/react-navigation/blob/master/src/TypeDefinition.js#L273) created from the previous state and props
-
-#### Returns
-- `Promise` to delay the start of the transition animation, or none to begin the transition animation immediately.
-
-### `onTransitionEnd` function
-Invoked once the transition animation completes.
-
-If you return a promise from `onTransitionEnd`, any queued transition animations will begin after the promise is resolved.
-
-#### Parameters
-- none.
-
-#### Returns
-- none.

docs/api/views/Views.md

@@ -1,18 +0,0 @@
-# Views
-
-Navigation views are presentation components that take a [`router`](/docs/api/routers) and a [`navigation`](/docs/navigators/navigation-prop) prop, and can display several screens, as specified by the `navigation.state`.
-
-Navigation views are controlled React components that can present the current navigation state. They manage switching of screens, animations and gestures. They also present persistent navigation views such as tab bars and headers.
-
-## Built in Views
-
-- [CardStack](https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/CardStack.js) - Present a stack that looks suitable on any platform
-    + [Card](https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/Card.js) - Present one card from the card stack, with gestures
-    + [Header](https://github.com/react-community/react-navigation/blob/master/src/views/Header/Header.js) - The header view for the card stack
-- [Tabs](https://github.com/react-community/react-navigation/blob/master/src/views/TabView/TabView.js) - A configurable tab switcher / pager
-- [Drawer](https://github.com/react-community/react-navigation/blob/master/src/views/Drawer/DrawerView.js) - A view with a drawer that slides from the left
-
-
-## [Transitioner](/docs/views/transitioner)
-
-`Transitioner` manages the animations during the transition and can be used to build fully custom navigation views. It is used inside the `CardStack` view. [Learn more about Transitioner here.](/docs/views/transitioner)

docs/api/withNavigation.md

@@ -1,25 +0,0 @@
-
-# withNavigation
-
-[`withNavigation`](/src/views/withNavigation.js) is a Higher Order Component which passes the `navigation` prop into a wrapped Component. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
-
-## Example
-
-```js
-import { Button } 'react-native';
-import { withNavigation } from 'react-navigation';
-
-const MyComponent = ({ to, navigation }) => (
-    <Button title={`navigate to ${to}`} onPress={() => navigation.navigate(to)} />
-);
-
-const MyComponentWithNavigation = withNavigation(MyComponent);
-
-
-// or use decorators:
-
-@withNavigation
-export default class MainScreen extends Component {
-  ...
-}
-```

docs/blog/2017-01-Introducing-React-Navigation.md

@@ -1,62 +0,0 @@
-# Introducing React Navigation for React Native
-_January 26, 2017_
-
-Today we're excited to introduce React Navigation, a flexible navigation library for React Native and web, including customizable views for React Native, routers for any platform, and navigators that make it super easy to get started. We aim to provide a simple and extensible solution which enables developers to share one navigation paradigm for all of their React apps.
-
-
-## Start Quick with pre-built Navigators
-
-A navigator is a React component with a static `.router` declared on it. To make it super easy to get started, React Navigation ships with a few navigator factories, pairing common views with routers.
-
-For example, the provided `StackNavigator` makes it easy to use a `CardStack` view and a `StackRouter` together:
-
-```js
-const MyApp = StackNavigator({
-  Home: {screen: HomeScreen},
-  Profile: {screen: ProfileScreen},
-});
-```
-
-Each of these screens are just React components, and they can easily set their own title:
-
-```js
-class HomeScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Home',
-  };
-  render() {
-    const { navigate } = this.props.navigation;
-    return (
-      <Button
-        onPress={() => navigate('Profile', { name: 'A' })}
-        title="Go to A's profile"
-      />
-    );
-  }
-}
-```
-
-To learn more, [continue with the getting started guide](/docs/intro).
-
-
-## Performant Views on React Native
-
-Animations and gestures are critical for smooth navigation in a mobile app. React Navigation utilizes React Native's Animated library to provide 60fps animations that are driven from the native thread.
-
-The views are designed to be highly extensible. For your app, you may want to build a custom modal, fork the stack header, or even utilize the underlying `<Transitioner>` component to build an entirely custom navigation presentation.
-
-
-## Routers for Every Platform
-
-In React Navigation, routers manage the [relationship between actions, state, and URIs](/docs/routers/api). The routers are cross-platform, and there is example code for iOS, Android, and web. Several routers are included, including [`TabRouter`](/docs/routers/tab) and [`StackRouter`](/docs/routers/stack), and it is encouraged to [override their behavior as needed](/docs/routers).
-
-The routers are composable and can be useful for structuring your app. A common navigation structure in iOS is to have an independent navigation stack for each tab, where all tabs can be covered by a modal. This is three layers of router: a card stack, within tabs, all within a modal stack. So unlike our experience on web apps, the navigation state of mobile apps is too complex to encode into a single URI. Routers in `react-navigation` map from URIs to navigation actions, which are then used to compute navigation state.
-
-
-## Future
-
-React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution. It replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation and React Native's Navigator and NavigationExperimental components.
-
-Until the community lands on one navigation solution that works well on the web and React Native, we will forever be destined to re-invent navigation. We are extremely sensitive about the burden of change that accompanies a new navigation library, so we aim to provide a solution that will work long into the future. We are excited to support React Navigation for any platform, including cutting-edge frontiers like hybrid native apps, web server rendering, and ReactVR.
-
-The first beta of React Navigation is available today on npm and GitHub, and you can [get started here](/docs/intro). We're excited to hear feedback from the React community, and together we still have a long way to go before our dream is realized. We'd love to see the community flourish with beautiful navigation views, custom router integrations, and more easy-to-use navigators. All of these individual contributions can work together seamlessly. If you have improvements for the built-in components, please [follow the contributors guide](/docs/guides/contributors) and dive right in!

docs/blog/2017-04-On-the-path-to-v1.md

@@ -1,13 +0,0 @@
-# On the path to React Navigation v1
-
-*April 26, 2017*
-
-When we announced React Navigation earlier this year, the core team was blown away at the community's overwhelming excitement and support for the new project. Since the launch in late January, hundreds of contributors have sprung up, reported detailed issues, and committed important fixes to the library.
-
-With several community members preparing to put apps in production, the highest priority for the core team is to refine the final v1 API, and stabilize it to make sure your apps feel rock-soild.
-
-Today we're excited to announce the release of [beta 9](https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9), which iterates upon the initial API. Although you will need to modify your screen navigation options for this upgrade, we are very confident in the new API. Our goal for future v1 releases is to avoid making any breaking API changes - we are now focused on filling in essential missing features, and stabilization.
-
-The community has experienced some thrash by a few of our earlier beta releases. So, starting with [this release](https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9), we will include detailed [release notes](https://github.com/react-community/react-navigation/releases) about any API changes, new features, and bug fixes.
-
-After the stabilization and release of v1, we're excited to explore new ways of customizing transitions, and overriding navigation components. There are some [exciting proposals](https://github.com/react-community/react-navigation/issues/1263) about these new APIs, and we look forward to the community's feedback and involvement.

docs/blog/2017-09-Renewed-v1.md

@@ -1,71 +0,0 @@
-# A (Renewed) Path to React Navigation V1
-
-*September 12, 2017*
-
-It’s been awhile since the last post on this blog and I wanted to take a moment to bring everyone up to speed on what’s been going on with React Navigation.
-
-This project got big really fast: as the officially recommended navigation library for React Native, thousands of developers are using the project every day to build apps.
-
-Having such a broad usage, the repository has a lot of new questions, feature requests, and (as with any library) bugs. It’s gotten a bit out of hand (thus hard to manage) so I wanted to give you an overview of how we’re trying to get things moving forward again resulting in a stable V1 release.
-
-## Issues
-
-If you've looked at the project over the last few months you've probably seen that there are a lot of open issues. If you've looked closely over the last few weeks you may have noticed that it's a few hundred less - [progress](https://github.com/react-community/react-navigation/pulse/monthly)!
-
-I wanted to tell you about how we’re addressing the GitHub issues: in an effort to reduce the cognitive load associated with so many open issues we've set out to accomplish a few things:
-
-1. Label all issues
-2. Close any "question" type issues. The idea here is to keep GitHub issues focused on bugs & feature requests. [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) and [Reactiflux](https://www.reactiflux.com/) are better places for questions.
-3. Eliminate duplicate issues
-4. Of the remaining issues determine bugs & features necessary for V1
-
-Don't hesitate to open new issues but **please do follow** the issue template! 😄
-
-## Pull Requests
-
-We greatly appreciate all the time put into each and every one of them but, as with issues, there's a bit of a backlog to work through.
-
-We encourage PRs but we want you to know that we’re prioritizing bug fixes and feature requests that align with the new 1.0 roadmap (see next section). We want to focus on the highest impact features for the community as a whole.
-
-## A New Roadmap
-
-We’re happy to say we’ve put together a new roadmap to version 1.0 of this package! You can see what will be included by checking out [this issue](https://github.com/react-community/react-navigation/issues/2585).
-
-How do we decide on what to include in the revised V1.0?
-
-We had conversations with people using React Navigation in production, looked at issues with the most reactions, reviewed high quality pull requests, and talked with the community to see what was needed.
-
-Will V1.0 cover everyone’s uses? No. But it should cover most use cases and we hope to improve documentation enough that you’re comfortable and able to customize React Navigation to your needs.
-
-## Roles & Responsibilities
-
-Just like any other organization - no one person can do everything. It’s helpful to have defined roles & responsibilities so that others know who to ask and we can avoid becoming overwhelmed.
-
-This is something I want to adopt for the management of React Navigation. I hope it reduces the likelihood of burnout for those that have chosen to dedicate time to the project. With that in mind here are the roles a few primary contributors have chosen to take on:
-
-- [davepack](https://github.com/davepack) - Pull request review, development
-- [GantMan](https://github.com/GantMan) - Issue management, testing
-- [kelset](https://github.com/kelset) - Issue management, pull request review
-- [matthamil](https://github.com/matthamil) - Pull request review, issue management
-- [skevy](https://github.com/skevy) - Pull request review, release management
-- [spencercarli](https://github.com/spencercarli) - Documentation, issue management
-
-[Expo](https://expo.io/) has expressed that React Navigation V1.0 is a priority for them and has committed one of their engineers (Dave) to aid in that.
-
-## The Community Navigation Library
-
-React Navigation is the React Native community’s navigation library with that being said - you too can contribute!
-
-If you see someone's question - try to answer it!
-If you have thoughts on a potential API for a requested feature - share it!
-If you think you know the cause for a bug - explain it!
-
-Regardless of what you do though, be nice & remember that on the other side of the screen there is another developer, just like you…
-
-Personally, I [enjoy some shade](https://media.giphy.com/media/l4FGlDsvuUd2RkBYQ/giphy.gif) thrown my way, but I might be in the minority 😉.
-
-Thanks for reading and I look forward to working with you on React Navigation!
-
-Spencer Carli
-
-*Thanks to Matt Hamill & Lorenzo Sciandra for reviewing.*

docs/guides/Common-Navigation-Spec.md

@@ -1,229 +0,0 @@
-# Common Navigation Spec
-
-### Introduction
-
-It is useful to have “one standard way” to handle navigation in a React app. Unfortunately, we've learned that a single navigation library cannot be the right fit for every application. There is often a tradeoff between several useful features:
-
-* Simplicity
-* Supporting complex animations
-* Navigating between natively-implemented screens and JavaScript screens
-* Precise fidelity to the native UI controls
-* Default support for deep linking and the Android back button
-
-Although the React Native community will need more than one navigation library, we can make them work nicely together. The goal of this document is to specify a common API for navigation libraries. Consistency will make several things easier for React Native developers:
-
-* Combining multiple navigation libraries in one application
-* Switching out navigation libraries when requirements change
-* Learning navigation once, and applying that knowledge in different applications
-
-Navigation libraries don't have to implement all of this API - it's just a recommendation.
-
-(TODO: When we actually publish this spec, we should mention here what libraries are supporting it, what libraries will support it, and (link to?) how to migrate from other now-discouraged navigation libraries.)
-
-
-## Key Concepts
-
-#### Navigation Container
-
-The parent component which hosts a navigation-aware component. It must provide the `navigation` prop, and usually uses the child component's static `router` to determine navigation state.
-
-#### Navigation-Aware Component
-
-A React component which can observe and initiate navigation in an app. It uses the navigation prop to see navigation state and request actions. It may expose a router to define navigation state and URI handling.
-
-The card stack of your application may be a navigation-aware component. Also, one screen of your app that handles the Android back button is a navigation-aware component.
-
-#### Navigation State
-
-The object that defines the navigation state of your component, passed in as a prop. A router can define the state, which optionally specifies the title and URI of the component.
-
-#### Action
-
-A JSON object used to request changes in the app's navigation state.
-
-#### Router
-
-Defines the navigation behavior of a component by defining navigation state as a function of actions, and allows URIs to be optionally converted into an action that can be handled.
-
-#### Navigator
-
-A navigation-aware component that hosts other navigation-aware components. Most navigators are expected to delegate all router logic, manage child navigation state, and pass up actions as they are dispatched.
-
-## Specification
-
-### The `navigation` prop
-
-The navigation prop should be provided to components who need access to navigation. If provided, it must follow this interface:
-
-```javascript
-type BackAction = {type: 'Navigation/BACK'};
-type URIAction = {type: 'Navigation/URI', uri: string};
-
-interface Navigation<S, A> {
-  dispatch(action: (A | BackAction | URIAction)): boolean;
-  state: S;
-}
-```
-
-#### navigation.state
-
-The controlled navigation state prop, as requested by the parent.
-
-```javascript
-const MyView = ({ navigation }) => {
-  switch (navigation.state.myRequestedView) {
-    case 'ViewA': return <ViewA />;
-    case 'ViewB': return <ViewB />;
-    default: return <OtherView />;
-  }
-}
-```
-
-#### navigation.dispatch(action)
-
-The channel that a component can call to request navigation from its parent. When calling `dispatch`, you must provide an action object with a `type`. There are two special action types: 'Navigation/BACK' and 'Navigation/URI'.
-
-```javascript
-const MyLink = ({ navigation }) => (
-  <Button onPress={() => {
-    navigation.dispatch({
-      type: 'MyNavigationRequest',
-      myParam: 42,
-    });
-  }>
-    Press me to navigate
-  </Button>
-);
-```
-
-
-### The static `router`
-
-A router object may be statically defined on your component. If defined, it must follow this interface:
-
-```javascript
-type BackAction = {type: 'Navigation/BACK'};
-type URIAction = {type: 'Navigation/URI', uri: string};
-
-interface Router<S, A> {
-  getStateForAction(action: (A | BackAction | URIAction), lastState: ?S): ?S;
-  getActionForURI(uri: string): ?A;
-}
-```
-
-The state and action types of the static router must match the state and action types associated with the navigation prop passed into the component.
-
-#### router.getStateForAction(action, lastState)
-
-This function is defined on the static router and is used to define the expected navigation state.
-
-```javascript
-class ScreenWithEditMode extends React.Component {
-  static router = {
-    getStateForAction: (action, prevState) => {
-      return { isEditing: true };
-    },
-  };
-  render() {
-    // this.props.navigation.state.isEditing === true
-    ...
-  }
-}
-```
-
-`getStateForAction` must **always** return a navigation state that can be rendered by the component when passed in as the `navigation.state` prop.
-
-If null is returned, we are signaling that the previous navigation state has not changed, but the action is handled. This is usually used in cases where the action is being swallowed.
-
-
-#### router.getActionForURI(uri)
-
-Return an action if a URI can be handled, otherwise return `null`
-
-
-
-### Special Actions
-
-There are two special actions that can be fired into `navigation.dispatch` and can be handled by your `router.getStateForAction`.
-
-#### Back Action
-
-This action means the same thing as an Android back button press.
-
-```
-type BackAction = { type: 'Navigation/BACK' };
-```
-
-#### URI Open Action
-
-Used to request the enclosing app or OS to open a link at a particular URI. If it is a web URI like `http` or `https`, the app may open a WebView to present the page. Or the app may open the URI in a web browser. In some cases, an app may choose to block a URI action or handle it differently.
-
-```
-type URIAction = { type: 'Navigation/URI', uri: string };
-```
-
-
-### Special Navigation State
-
-The state defined by `router.getStateForAction` can contain special navigation properties that may be relevant to your app. The title and current URI of a component may change over time, and the parent often needs to observe the behavior.
-
-#### `state.title`
-
-If the navigation state contains 'title', it will be used as the title for the given component. This is relevant for top-level components on the web to update the browser title, and is relevant in mobile apps where a title is shown in the header.
-
-#### `state.uri`
-
-A URI can also be put in `state.uri`, which will signal to the parent how it may be possible to deep link into a similar navigation state. In web apps, this will be used to keep the URI bar in sync with the current navigation state of the app.
-
-
-## Use Cases
-
-### "Block the Android back button on one screen of my app"
-
-To block the Android back button:
-
-```
-class Foo extends React.Component {
-  static router = {
-    getStateForAction(action, prevState = {}) {
-      if (action.type === 'Navigation/BACK') return null;
-      else return prevState;
-    },
-  };
-  render() {
-    ...
-```
-
-Because we return null, we signal to our container that the action has been handled but the state does not change. The parent should not handle the back behavior at this point, and nothing should be re-rendered.
-
-### "Link deeply into one screen of my app"
-
-```
-class Foo extends React.Component {
-  static router = {
-    getStateForAction(action, prevState = {deep: false}) {
-      if (action.type === 'GoDeep') return { deep: true };
-      else return prevState;
-    },
-    getActionForURI(uri) {
-      if (uri === 'myapp://foo')
-        return {type: 'Go'};
-      else if (uri === 'myapp://foo_deep')
-        return {type: 'GoDeep'};
-      return null;
-    },
-  };
-  render() {
-    // this.props.navigation.state.deep may be true or false
-    ...
-```
-
-Based on the state URI we may decide to return an action. If an action is returned, `getStateForAction` is expected to output the correct state for a deep link.
-
-## Reference Implementations
-
-A library to that helps easily produce navigation-aware components: https://github.com/react-community/react-navigation . (Also uses a HOC to provide navigation containers when needed.)
-
-A simple navigation container: https://gist.github.com/ericvicenti/77d190e2ec408012255937400e34bdb1
-
-A web implementation of a navigation container: https://gist.github.com/ericvicenti/55bef95fcd8558029a3bae8483baea6c

docs/guides/Custom-Navigators.md

@@ -1,94 +0,0 @@
-# Custom Navigators
-
-A navigator is any React component that has a [router](/docs/routers/) on it. Here is a basic one, which uses the [router's API](/docs/routers/api) to get the active component to render:
-
-```js
-class MyNavigator extends React.Component {
-  static router = MyRouter;
-  render() {
-    const { state, dispatch } = this.props.navigation;
-    const { routes, index } = state;
-
-    // Figure out what to render based on the navigation state and the router:
-    const Component = MyRouter.getComponentForState(state);
-
-    // The state of the active child screen can be found at routes[index]
-    let childNavigation = { dispatch, state: routes[index] };
-    // If we want, we can also tinker with the dispatch function here, to limit
-    // or augment our children's actions
-
-    // Assuming our children want the convenience of calling .navigate() and so on,
-    // we should call addNavigationHelpers to augment our navigation prop:
-    childNavigation = addNavigationHelpers(childNavigation);
-
-    return <Component navigation={childNavigation} />;
-  }
-}
-```
-
-## Navigation Prop
-
-The navigation prop passed down to a navigator only includes `state` and `dispatch`. This is the current state of the navigator, and an event channel to send action requests.
-
-All navigators are controlled components: they always display what is coming in through `props.navigation.state`, and their only way to change the state is to send actions into `props.navigation.dispatch`.
-
-Navigators can specify custom behavior to parent navigators by [customizing their router](/docs/routers/). For example, a navigator is able to specify when actions should be blocked by returning null from `router.getStateForAction`. Or a navigator can specify custom URI handling by overriding `router.getActionForPathAndParams` to output a relevant navigation action, and handling that action in `router.getStateForAction`.
-
-### Navigation State
-
-The navigation state that is passed into a navigator's `props.navigation.state` has the following structure:
-
-```
-{
-  index: 1, // identifies which route in the routes array is active
-  routes: [
-    {
-      // Each route needs a name, which routers will use to associate each route
-      // with a react component
-      routeName: 'MyRouteName',
-
-      // A unique id for this route, used to keep order in the routes array:
-      key: 'myroute-123',
-
-      // Routes can have any additional data. The included routers have `params`
-      ...customRouteData,
-    },
-    ...moreRoutes,
-  ]
-}
-```
-
-### Navigation Dispatchers
-
-A navigator can dispatch navigation actions, such as 'Go to a URI', 'Go back'.
-
-The dispatcher will return `true` if the action was successfully handled, otherwise `false`.
-
-## API for building custom navigators
-
-To help developers implement custom navigators, the following utilities are provided with React Navigation:
-
-### `createNavigator`
-
-This utility combines a [router](/docs/routers/) and a [navigation view](/docs/views/) together in a standard way:
-
-```js
-const MyApp = createNavigator(MyRouter)(MyView);
-```
-
-All this does behind the scenes is:
-
-```js
-const MyApp = ({ navigation }) => (
-  <MyView router={MyRouter} navigation={navigation} />
-);
-MyApp.router = MyRouter;
-```
-
-### `addNavigationHelpers`
-
-Takes in a bare navigator navigation prop with `state` and `dispatch`, and augments it with all the various functions in a screen navigation prop, such as `navigation.navigate()` and `navigation.goBack()`. These functions are simply helpers to create the actions and send them into `dispatch`.
-
-### `createNavigationContainer`
-
-If you want your navigator to be usable as a top-level component, (without a navigation prop being passed in), you can use `createNavigationContainer`. This utility will make your navigator act like a top-level navigator when the navigation prop is missing. It will manage the app state, and integrate with app-level nav features, like handling incoming and outgoing links, and Android back button behavior.

docs/guides/Customizing-Navigation.md

@@ -1,53 +0,0 @@
-## Customizing Navigation Views
-
-Modify the presentation of navigation, including styles, animations and gestures.
-
-## Customizing Routers
-
-Building a custom router allows you to change the navigation logic of your component, manage navigation state, and define behavior for URIs.
-
-
-A router can be defined like this:
-
-```js
-class MyNavigationAwareComponent extends React.Component {
-
-    static router = {
-
-        // Defines the navigation state for a component:
-        getStateForAction: (action: {type: string}, lastState?: any) => {
-            const state = lastState = { myMode: 'default' };
-            if (action.type === 'MyAction') {
-                return { myMode: 'action' };
-            } else if (action.type === NavigationActions.BACK) {
-                return { myMode: 'blockBackButton' };
-            } else {
-                return state;
-            }
-        },
-
-        // Defines if a component can handle a particular URI.
-        // If it does, return an action to be passed to `getStateForAction`
-
-        getActionForURI: (uri: string) => {
-            if (uri === 'myapp://myAction') {
-                return { type: 'MyAction' };
-            }
-            return null;
-        },
-
-    };
-
-    render() {
-        // render something based on this.props.navigation.state
-        ...
-    }
-
-    onButtonPress = () => {
-        this.props.navigation.dispatch({ type: 'MyAction' });
-    };
-
-    ...
-
-}
-```

docs/guides/Deep-Linking.md

@@ -1,111 +0,0 @@
-# Deep Linking
-
-In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that [we created in the getting started guide](/docs/intro).
-
-In this example, we want a URI like `mychat://chat/Taylor` to open our app and link straight into Taylor's chat page.
-
-## Configuration
-
-Previously, we had defined a navigator like this:
-
-```js
-const SimpleApp = StackNavigator({
-  Home: { screen: HomeScreen },
-  Chat: { screen: ChatScreen },
-});
-```
-
-We want paths like `chat/Taylor` to link to a "Chat" screen with the `user` passed as a param. Let's re-configure our chat screen with a `path` that tells the router what relative path to match against, and what params to extract. This path spec would be `chat/:user`.
-
-```js
-const SimpleApp = StackNavigator({
-  Home: { screen: HomeScreen },
-  Chat: {
-    screen: ChatScreen,
-    path: 'chat/:user',
-  },
-});
-```
-
-
-### URI Prefix
-
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
-
-```js
-const SimpleApp = StackNavigator({...});
-
-// on Android, the URI prefix typically contains a host in addition to scheme
-const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
-
-const MainApp = () => <SimpleApp uriPrefix={prefix} />;
-```
-
-## iOS
-
-Let's configure the native iOS app to open based on the `mychat://` URI scheme.
-
-In `SimpleApp/ios/SimpleApp/AppDelegate.m`:
-
-```
-// Add the header at the top of the file:
-#import <React/RCTLinkingManager.h>
-
-// Add this above the `@end`:
-- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
-  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
-{
-  return [RCTLinkingManager application:application openURL:url
-                      sourceApplication:sourceApplication annotation:annotation];
-}
-```
-
-In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add one. In the new URL type, set the identifier and the url scheme to your desired url scheme.
-
-![Xcode project info URL types with mychat added](/assets/xcode-linking.png)
-
-Now you can press play in Xcode, or re-build on the command line:
-
-```sh
-react-native run-ios
-```
-
-To test the URI on the simulator, run the following:
-
-```
-xcrun simctl openurl booted mychat://chat/Taylor
-```
-
-To test the URI on a real device, open Safari and type `mychat://chat/Taylor`.
-
-## Android
-
-To configure the external linking in Android, you can create a new intent in the manifest.
-
-In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `VIEW` type `intent-filter` inside the `MainActivity` entry:
-
-```
-<intent-filter>
-    <action android:name="android.intent.action.VIEW" />
-    <category android:name="android.intent.category.DEFAULT" />
-    <category android:name="android.intent.category.BROWSABLE" />
-    <data android:scheme="mychat"
-          android:host="mychat" />
-</intent-filter>
-```
-
-Now, re-install the app:
-
-```sh
-react-native run-android
-```
-
-To test the intent handling in Android, run the following:
-
-```
-adb shell am start -W -a android.intent.action.VIEW -d "mychat://mychat/chat/Taylor" com.simpleapp
-```
-
-```phone-example
-linking
-```

docs/guides/Guide-Basic-Example.md

@@ -1,235 +0,0 @@
-# Hello Mobile Navigation
-
-Let's use React Navigation to build a simple chat-like application for Android and iOS.
-
-## Setup and Installation
-
-First, make sure you're [all set up to use React Native](http://facebook.github.io/react-native/docs/getting-started.html). Next, create a new project and add `react-navigation`:
-
-```sh
-# Create a new React Native App
-react-native init SimpleApp
-cd SimpleApp
-
-# Install the latest version of react-navigation from npm
-npm install --save react-navigation
-
-# Run the new app
-react-native run-android
-# or:
-react-native run-ios
-```
-
-If you are using `create-react-native-app` instead of `react-native init`, then:
-
-```sh
-# Create a new React Native App
-create-react-native-app SimpleApp
-cd SimpleApp
-
-# Install the latest version of react-navigation from npm
-npm install --save react-navigation
-
-# Run the new app
-npm start
-
-# This will start a development server for you and print a QR code in your terminal.
-```
-
-Verify that you can successfully see the bare sample app run on iOS and/or Android:
-
-```phone-example
-bare-project
-```
-
-We want to share code on iOS and Android, so let's delete the contents of `index.js` (or `index.ios.js` and `index.android.js` if using a React Native version before 0.49) and replace it with `import './App';` - after which, we need to create the new file for our app implementation, `App.js` (if you used `create-react-native-app` this has been already done)
-
-## Introducing Stack Navigator
-
-For our app, we want to use the `StackNavigator` because conceptually we want to obtain a 'card stack' effect of movement, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen:
-
-```js
-import React from 'react';
-import {
-  AppRegistry,
-  Text,
-} from 'react-native';
-import { StackNavigator } from 'react-navigation';
-
-class HomeScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Welcome',
-  };
-  render() {
-    return <Text>Hello, Navigation!</Text>;
-  }
-}
-
-export const SimpleApp = StackNavigator({
-  Home: { screen: HomeScreen },
-});
-
-AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
-```
-
-If you used `create-react-native-app` the already existing `App.js` will be modified to
-
-```js
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { StackNavigator } from 'react-navigation';
-
-class HomeScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Welcome'
-  };
-  render() {
-    return <Text>Hello, Navigation!</Text>;
-  }
-}
-
-const SimpleApp = StackNavigator({
-  Home: { screen: HomeScreen }
-});
-
-export default class App extends React.Component {
-  render() {
-    return <SimpleApp />;
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-
-```
-
-The `title` of the screen is configurable on the [static `navigationOptions`](/docs/navigators/navigation-options), where many options can be set to configure the presentation of the screen in the navigator.
-
-Now the same screen should appear on both iPhone and Android apps:
-
-```phone-example
-first-screen
-```
-
-## Adding a New Screen
-
-In our `App.js` file, let's add a new screen called `ChatScreen`, defining it under `HomeScreen`:
-
-```js
-// ...
-
-class HomeScreen extends React.Component {
-    //...
-}
-
-class ChatScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Chat with Lucy',
-  };
-  render() {
-    return (
-      <View>
-        <Text>Chat with Lucy</Text>
-      </View>
-    );
-  }
-}
-
-```
-
-We can then add a button to our `HomeScreen` component that links to `ChatScreen`: we need to use the provided method `navigate` (from the [screen navigation prop](/docs/navigators/navigation-prop)) by giving it the `routeName` of the screen we want to reach, in this case `Chat`.
-
-```js
-class HomeScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Welcome',
-  };
-  render() {
-    const { navigate } = this.props.navigation;
-    return (
-      <View>
-        <Text>Hello, Chat App!</Text>
-        <Button
-          onPress={() => navigate('Chat')}
-          title="Chat with Lucy"
-        />
-      </View>
-    );
-  }
-}
-```
-
-(*don't forget to import View and Button from react-native:* `import { AppRegistry, Text, View, Button } from 'react-native';`)
-
-But that won't work until we say to our `StackNavigator` of the existence of the `Chat` screen, like so:
-
-```js
-export const SimpleApp = StackNavigator({
-  Home: { screen: HomeScreen },
-  Chat: { screen: ChatScreen },
-});
-```
-
-Now you can navigate to your new screen, and go back:
-
-```phone-example
-first-navigation
-```
-
-## Passing params
-
-Hardcoding a name into the `ChatScreen` isn't ideal. It'd be more useful if we could pass a name to be rendered instead, so let's do that.
-
-In addition to specifying the target `routeName` in the navigate function, we can pass params that will be put into the new route. First, we'll edit our `HomeScreen` component to pass a `user` param into the route.
-
-```js
-class HomeScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Welcome',
-  };
-  render() {
-    const { navigate } = this.props.navigation;
-    return (
-      <View>
-        <Text>Hello, Chat App!</Text>
-        <Button
-          onPress={() => navigate('Chat', { user: 'Lucy' })}
-          title="Chat with Lucy"
-        />
-      </View>
-    );
-  }
-}
-```
-
-We can then edit our `ChatScreen` component to display the `user` param that was passed in through the route:
-
-```js
-class ChatScreen extends React.Component {
-  // Nav options can be defined as a function of the screen's props:
-  static navigationOptions = ({ navigation }) => ({
-    title: `Chat with ${navigation.state.params.user}`,
-  });
-  render() {
-    // The screen's current route is passed in to `props.navigation.state`:
-    const { params } = this.props.navigation.state;
-    return (
-      <View>
-        <Text>Chat with {params.user}</Text>
-      </View>
-    );
-  }
-}
-```
-
-Now you can see the name when you navigate to the Chat screen. Try changing the `user` param in `HomeScreen` and see what happens!
-
-```phone-example
-first-navigation
-```

docs/guides/Guide-Headers.md

@@ -1,140 +0,0 @@
-# Configuring the Header
-
-Header is only available for StackNavigator.
-
-In the previous example, we created a StackNavigator to display several screens in our app.
-
-
-When navigating to a chat screen, we can specify params for the new route by providing them to the navigate function. In this case, we want to provide the name of the person on the chat screen:
-
-```js
-this.props.navigation.navigate('Chat', { user:  'Lucy' });
-```
-
-The `user` param can be accessed from the chat screen:
-
-```js
-class ChatScreen extends React.Component {
-  render() {
-    const { params } = this.props.navigation.state;
-    return <Text>Chat with {params.user}</Text>;
-  }
-}
-```
-
-### Setting the Header Title
-
-Next, the header title can be configured to use the screen param:
-
-```js
-class ChatScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
-    title: `Chat with ${navigation.state.params.user}`,
-  });
-  ...
-}
-```
-
-```phone-example
-basic-header
-```
-
-
-### Adding a Right Button
-
-Then we can add a [`header` navigation option](/docs/navigators/navigation-options#Stack-Navigation-Options) that allows us to add a custom right button:
-
-```js
-static navigationOptions = {
-  headerRight: <Button title="Info" />,
-  ...
-```
-
-```phone-example
-header-button
-```
-
-The navigation options can be defined with a [navigation prop](/docs/navigators/navigation-prop). Let's render a different button based on the route params, and set up the button to call `navigation.setParams` when pressed.
-
-```js
-static navigationOptions = ({ navigation }) => {
-  const { state, setParams } = navigation;
-  const isInfo = state.params.mode === 'info';
-  const { user } = state.params;
-  return {
-    title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
-    headerRight: (
-      <Button
-        title={isInfo ? 'Done' : `${user}'s info`}
-        onPress={() => setParams({ mode: isInfo ? 'none' : 'info' })}
-      />
-    ),
-  };
-};
-```
-
-Now, the header can interact with the screen route/state:
-
-```phone-example
-header-interaction
-```
-
-### Header interaction with screen component
-
-Sometimes it is necessary for the header to access properties of the screen component such as functions or state.
-
-Let's say we want to create an 'edit contact info' screen with a save button in the header. We want the save button to be replaced by an `ActivityIndicator` while saving.
-
-```js
-class EditInfoScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => {
-    const { params = {} } = navigation.state;
-    let headerRight = (
-      <Button
-        title="Save"
-        onPress={params.handleSave ? params.handleSave : () => null}
-      />
-    );
-    if (params.isSaving) {
-      headerRight = <ActivityIndicator />;
-    }
-    return { headerRight };
-  };
-
-  state = {
-    nickname: 'Lucy jacuzzi'
-  }
-
-  _handleSave = () => {
-    // Update state, show ActivityIndicator
-    this.props.navigation.setParams({ isSaving: true });
-    
-    // Fictional function to save information in a store somewhere
-    saveInfo().then(() => {
-      this.props.navigation.setParams({ isSaving: false});
-    })
-  }
-
-  componentDidMount() {
-    // We can only set the function after the component has been initialized
-    this.props.navigation.setParams({ handleSave: this._handleSave });
-  }
-
-  render() {
-    return (
-      <TextInput
-        onChangeText={(nickname) => this.setState({ nickname })}
-        placeholder={'Nickname'}
-        value={this.state.nickname}
-      />
-    );
-  }
-}
-```
-
-**Note**: Since the `handleSave`-param is only set on component mount it is not immediately available in the `navigationOptions`-function. Before `handleSave` is set we pass down an empty function to the `Button`-component in order to make it render immediately and avoid flickering.
-
-
-To see the rest of the header options, see the [navigation options document](/docs/navigators/navigation-options#Stack-Navigation-Options).
-
-As an alternative to `setParams`, you may want to consider using a state management library such as [MobX](https://github.com/mobxjs/mobx) or [Redux](https://github.com/reactjs/redux), and when navigating to a screen, pass an object which contains the data necessary for the screen to render, as well as functions you may want to call that modify the data, make network requests and etc. That way, both your screen component and the static `navigationOptions` block will have access to the object. When following this approach, make sure to consider deep linking, which works best in cases where only javascript primitives are passed as navigation props to your screen. In case when deep linking is necessary, you may use a [higher order component (HOC)](https://reactjs.org/docs/higher-order-components.html) to transform the primitives to the object your screen components expects.

docs/guides/Guide-Intro.md

@@ -1,23 +0,0 @@
-# Introduction
-
-_Learn once, navigate anywhere._
-
-React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
-
-React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components.
-
-## Getting Started
-
-If you're already familiar with React Native then you'll be able to get moving with React Navigation in minimal time.
-
-1. [Quick Start](/docs/intro/quick-start)
-Quickly get a grasp on the React Navigation API with demonstrations of the StackNavigator, TabNavigator, and DrawerNavigator.
-
-2. [Simple App](/docs/intro/basic-app)
-Dive into the basics of React Navigation by creating a new React Native project, installing React Navigation, creating your first navigator, and learning how to interact with it.
-
-3. [Navigation Playground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground)
-Curious of the various capabilities of React Navigation? Browse the official example app, which will demonstrate various patterns with React Navigation.
-
-4. [Community Contributions](https://github.com/react-community/react-navigation#community-contributions)
-With the flexibility of React Navigation we won't be able to cover every possible situation, but another developer may have! Browse our list of community contributions to find topics that may answer your questions.

docs/guides/Guide-Nested.md

@@ -1,122 +0,0 @@
-# Nesting Navigators
-
-It is common in mobile apps to compose various forms of navigation. The routers and navigators in React Navigation are composable, which allows you to define a complicated navigation structure for your app.
-
-For our chat app, we want to put several tabs on the first screen, to view recent chat threads or all contacts.
-
-## Introducing Tab Navigator
-
-Lets create a new `TabNavigator` in our `App.js`:
-
-```js
-import { TabNavigator } from "react-navigation";
-
-class RecentChatsScreen extends React.Component {
-  render() {
-    return <Text>List of recent chats</Text>
-  }
-}
-
-class AllContactsScreen extends React.Component {
-  render() {
-    return <Text>List of all contacts</Text>
-  }
-}
-
-const MainScreenNavigator = TabNavigator({
-  Recent: { screen: RecentChatsScreen },
-  All: { screen: AllContactsScreen },
-});
-```
-
-If the `MainScreenNavigator` was rendered as the top-level navigator component, it would look like this:
-
-```phone-example
-simple-tabs
-```
-
-
-
-## Nesting a Navigator in a screen
-
-We want these tabs to be visible in the first screen of the app, but new screens in the stack should cover the tabs.
-
-Lets add our tabs navigator as a screen in our top-level `StackNavigator` that we set up in the [previous step](/docs/intro/).
-
-```js
-const SimpleApp = StackNavigator({
-  Home: { screen: MainScreenNavigator },
-  Chat: { screen: ChatScreen },
-});
-```
-
-Because `MainScreenNavigator` is being used as a screen, we can give it `navigationOptions`:
-
-```js
-const SimpleApp = StackNavigator({
-  Home: { 
-    screen: MainScreenNavigator,
-    navigationOptions: {
-      title: 'My Chats',
-    },
-  },
-  Chat: { screen: ChatScreen },
-})
-```
-
-Lets also add a button to each tab that links to a chat:
-
-```js
-<Button
-  onPress={() => this.props.navigation.navigate('Chat', { user: 'Lucy' })}
-  title="Chat with Lucy"
-/>
-```
-
-Now we have put one navigator inside another, and we can `navigate` between navigators:
-
-```phone-example
-nested
-```
-
-## Nesting a Navigator in a Component
-Sometimes it is desirable to nest a navigator that is wrapped in a component. This is useful in cases where the navigator only takes up part of the screen. For the child navigator to be wired into the navigation tree, it needs the `navigation` property from the parent navigator.
-
-```js
-const SimpleApp = StackNavigator({
-  Home: { screen: NavigatorWrappingScreen },
-  Chat: { screen: ChatScreen },
-});
-```
-In this case, the NavigatorWrappingScreen is not a navigator, but it renders a navigator as part of its output.
-
-If this navigator renders blank then change `<View>` to `<View style={{flex: 1}}>`.
-
-```js
-class NavigatorWrappingScreen extends React.Component {
-  render() {
-    return (
-      <View>
-        <SomeComponent/>
-        <MainScreenNavigator/>
-      </View>
-    );
-  }
-}
-```
-
-To wire `MainScreenNavigator` into the navigation tree, we assign its `router` to the wrapping component. This makes `NavigatorWrappingScreen` "navigation aware", which tells the parent navigator to pass the navigation object down. Since the `NavigatorWrappingScreen`'s `router` is overridden with the child navigator's `router`, the child navigator will receive the needed `navigation`.
-
-```js
-class NavigatorWrappingScreen extends React.Component {
-  render() {
-    return (
-      <View>
-        <SomeComponent/>
-        <MainScreenNavigator navigation={this.props.navigation}/>
-      </View>
-    );
-  }
-}
-NavigatorWrappingScreen.router = MainScreenNavigator.router;
-```

docs/guides/Guide-Quick-Start.md

@@ -1,316 +0,0 @@
-# Quick Start Guide
-
-To get started with React Navigation, all you have to do is install the `react-navigation` npm package.
-
-### Install with NPM
-
-```
-npm install --save react-navigation
-```
-
-### Install with Yarn
-
-```
-yarn add react-navigation
-```
-
-To start using React Navigation you'll have to create a navigator. React Navigation comes with three default navigators.
-
-- `StackNavigator` - Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
-- `TabNavigator` - Used to set up a screen with several tabs.
-- `DrawerNavigator` - Used to set up a screen with drawer navigation.
-
-## Creating a StackNavigator
-
-StackNavigator's are the most common form of navigator so we'll use it as a basic demonstration. To get started, create a `StackNavigator`.
-
-```javascript
-import { StackNavigator } from 'react-navigation';
-
-const RootNavigator = StackNavigator({
-
-});
-
-export default RootNavigator;
-```
-
-We can then add screens to this `StackNavigator`. Each key represents a screen.
-
-```javascript
-import React from 'react';
-import { View, Text } from 'react-native';
-import { StackNavigator } from 'react-navigation';
-
-const HomeScreen = () => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Home Screen</Text>
-  </View>
-);
-
-const DetailsScreen = () => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Details Screen</Text>
-  </View>
-);
-
-const RootNavigator = StackNavigator({
-  Home: {
-    screen: HomeScreen,
-  },
-  Details: {
-    screen: DetailsScreen,
-  },
-});
-
-export default RootNavigator;
-```
-
-Now let's add a title to the navigation bar.
-
-```javascript
-...
-
-const RootNavigator = StackNavigator({
-  Home: {
-    screen: HomeScreen,
-    navigationOptions: {
-      headerTitle: 'Home',
-    },
-  },
-  Details: {
-    screen: DetailsScreen,
-    navigationOptions: {
-      headerTitle: 'Details',
-    },
-  },
-});
-
-export default RootNavigator;
-```
-
-Finally, we should be able to navigate from the home screen to the details screen. When you register a component with a navigator that component will then have a `navigation` prop added to it. This `navigation` prop drives how we move between different screens.
-
-To move from the home screen to the details screen we'll want to use `navigation.navigate`, like so:
-
-```javascript
-...
-import { View, Text, Button } from 'react-native';
-
-const HomeScreen = ({ navigation }) => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Home Screen</Text>
-    <Button
-      onPress={() => navigation.navigate('Details')}
-      title="Go to details"
-    />
-  </View>
-);
-
-...
-```
-
-And there you have it! That's the basics of using the [StackNavigator](/docs/navigators/stack), and React Navigation as a whole. Here's the full code from this example:
-
-<div class="snack" data-snack-id="HJlnU0XTb" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
-
-## Creating a TabNavigator
-
-To get started with `TabNavigator` first import and create a new `RootTabs` component.
-
-```javascript
-import { TabNavigator } from 'react-navigation';
-
-const RootTabs = TabNavigator({
-
-});
-
-export default RootTabs;
-```
-
-We then need to create some screens and add them to our `TabNavigator`.
-
-```javascript
-import React from 'react';
-import { View, Text } from 'react-native';
-import { TabNavigator } from 'react-navigation';
-
-const HomeScreen = () => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Home Screen</Text>
-  </View>
-);
-
-const ProfileScreen = () => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Profile Screen</Text>
-  </View>
-);
-
-const RootTabs = TabNavigator({
-  Home: {
-    screen: HomeScreen,
-  },
-  Profile: {
-    screen: ProfileScreen,
-  },
-});
-
-export default RootTabs;
-```
-
-Getting there! Now let's explicity set a label and icon for the tab bar.
-
-> We'll be using [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) in the example. If you don't have it installed in your project already please do so.
-
-```javascript
-...
-import Ionicons from 'react-native-vector-icons/Ionicons';
-
-...
-
-const RootTabs = TabNavigator({
-  Home: {
-    screen: HomeScreen,
-    navigationOptions: {
-      tabBarLabel: 'Home',
-      tabBarIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-home' : 'ios-home-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  },
-  Profile: {
-    screen: ProfileScreen,
-    navigationOptions: {
-      tabBarLabel: 'Profile',
-      tabBarIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-person' : 'ios-person-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  },
-});
-
-export default RootTabs;
-```
-
-This will ensure the `tabBarLabel` is consistent (important when using nested navigators) and it will set a `tabBarIcon`. This icon will only be visible on iOS by default given the tab bar component used, which aligns with standard design patterns on Android.
-
-You can view the complete finished code below:
-
-<div class="snack" data-snack-id="BJZ2GVVpb" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
-
-## Creating a DrawerNavigator
-
-To get started with `DrawerNavigator` first import and create a new `RootDrawer` component.
-
-```javascript
-import { DrawerNavigator } from 'react-navigation';
-
-const RootDrawer = DrawerNavigator({
-
-});
-
-export default RootDrawer;
-```
-
-We then need to create some screens and add them to our `DrawerNavigator`.
-
-```javascript
-import React from 'react';
-import { View, Text } from 'react-native';
-import { DrawerNavigator } from 'react-navigation';
-
-const HomeScreen = () => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Home Screen</Text>
-  </View>
-);
-
-const ProfileScreen = () => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Profile Screen</Text>
-  </View>
-);
-
-const RootDrawer = DrawerNavigator({
-  Home: {
-    screen: HomeScreen,
-  },
-  Profile: {
-    screen: ProfileScreen,
-  },
-});
-
-export default RootDrawer;
-```
-
-Getting there! Now let's explicity set a label and icon for the drawer items.
-
-> We'll be using `react-native-vector-icons` in the example. If you don't have it installed in your project already please do so.
-
-```javascript
-...
-import Ionicons from 'react-native-vector-icons/Ionicons';
-
-...
-
-const RootDrawer = DrawerNavigator({
-  Home: {
-    screen: HomeScreen,
-    navigationOptions: {
-      drawerLabel: 'Home',
-      drawerIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-home' : 'ios-home-outline'}
-          size={20}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  },
-  Profile: {
-    screen: ProfileScreen,
-    navigationOptions: {
-      drawerLabel: 'Profile',
-      drawerIcon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-person' : 'ios-person-outline'}
-          size={20}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  },
-});
-
-export default RootDrawer;
-```
-
-To open the drawer you can swipe from the left edge of the screen to the right. You've also got the option to open the drawer view `navigation.navigate('DrawerToggle')`, which we'll add to the Home component now. Make sure you import the `Button` component from `react-native`.
-
-```javascript
-...
-
-const HomeScreen = ({ navigation }) => (
-  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-    <Text>Home Screen</Text>
-    <Button
-      onPress={() => navigation.navigate('DrawerToggle')}
-      title="Open Drawer"
-    />
-  </View>
-);
-
-...
-```
-
-You can view the finished code below.
-
-<div class="snack" data-snack-id="rk90N44a-" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>

docs/guides/Hybrid-Navigation.md

@@ -1,174 +0,0 @@
-## Common React Navigation API - Hybrid Integration
-
-This is a purely speculative API that demonstrates how it may be possible to integrate the [JS navigation API](./Common-Navigation-Spec.md) in a hybrid app.
-
-## Setting up a screen
-
-It should be possible to register new screens from JS into native. In your main bundle:
-
-```
-const HybridNavigationModule = require('NativeModules').HybridNavigation;
-
-HybridNavigationModule.registerScreens([
-  {
-    type: 'Marketplace',
-    screen: MarketplaceScreen,
-  },
-  {
-  	type: 'Product',
-  	screen: ProductScreen,
-  },
-]);
-```
-
-## Linking to JS
-
-Now, your native code can open a react screen by type name:
-
-```
-// please pretend this is Obj-C or Java syntax:
-CoreHybridNavigation.openReactScreen('Profile', {id: 123});
-```
-
-## Linking to Native
-
-If JS product code wants to request navigation to a screen that may *or may not* be in native, it can do this:
-
-```
-const MarketplaceScreen = ({ navigation }) => (
-  <View>
-    <Button onPress={() => navigation.dispatch({
-      type: 'Product',
-      id: 42,
-    })}>
-      See product 42
-    </Button>
-  </View>
-);
-```
-
-Inside the infra:
-
-```
-class InfraScreen extends React.Component {
-  constructor() {
-    const {initURI, type} = this.props;
-    const ScreenView = ScreenRegistry[type].screen;
-    const router = ScreenView.router;
-    const deepLinkAction = router.getActionForURI(initURI);
-    const initAction = deepLinkAction || {type: 'init'}
-    const nav = router.getStateForAction(initAction);
-    this.state = {
-      nav,
-    };
-    HybridNavigationModule.setNavOptions(this.state.nav);
-  }
-  componentWillUpdate() {
-    HybridNavigationModule.setNavOptions(this.state.nav);
-  }
-  dispatch = (action) => {
-    const {type} = this.props;
-    const ScreenView = ScreenRegistry[type].screen;
-    const {getStateForAction} = ScreenView.router;
-    const newNavState = getStateForAction(action, this.state.nav);
-    if (newNavState !== this.state.nav) {
-      this.setState({ nav: newNavState });
-      return true;
-    }
-    if (action.type === 'URI') {
-      HybridNavigationModule.openURI(action.uri);
-      return true;
-    }
-    if (action.type === NavigationActions.BACK) {
-      HybridNavigationModule.goBack();
-      return true;
-    }
-    HybridNavigationModule.openAction(action);
-    return true;
-  }
-  render() {
-    const {type} = this.props;
-    const ScreenView = ScreenRegistry[type].screen;
-    const navigation = {
-      dispatch: this.dispatch,
-      state: this.state.nav,
-    };
-    return <ScreenView navigation={navigation} />;
-  }
-}
-```
-
-## Setting title
-
-```
-MarketplaceScreen.router = {
-  getStateForAction(action, lastState) {
-    return lastState || {title: 'Marketplace Home'};
-  },
-};
-```
-A HOC could be used to make this feel more elegant.
-
-
-## Disabling/Enabling the right button
-
-```
-const TestScreen = ({ navigation }) => (
-  <View>
-    <Button onPress={() => navigation.dispatch({
-      type: 'ToggleMyButtonPressability',
-    })}>
-      {navigation.state.rightButtonEnabled ? 'Disable' : 'Enable'} right button
-    </Button>
-    <Text>Pressed {navigation.state} times</Text>
-  </View>
-);
-TestScreen.router = {
-  getStateForAction(action, lastState = {}) {
-    let state = lastState || {
-      rightButtonEnabled: true,
-      rightButtonTitle: 'Tap Me',
-      pressCount: 0,
-    };
-    if (action.type === 'ToggleMyButtonPressability') {
-      state = {
-        ...state,
-        rightButtonEnabled: !state.rightButtonEnabled,
-      };
-    } else if (action.type === 'RightButtonPress') {
-      state = {
-        ...state,
-        pressCount: state.pressCount + 1,
-      };
-    }
-    return state;
-  },
-};
-```
-
-
-## Before JS starts
-
-A JSON file could be defined for native to consume before JS spins up:
-
-```
-{
-  "screens": [
-    {
-      "type": "Profile",
-      "path": "/users/:id?name=:name",
-      "params": {
-        "name": "string",
-        "id": "number"
-      },
-      "title": "%name%' s Profile",
-      "rightButtonTitle": "Message %name%"
-    },
-    {
-      ...
-    }
-  ]
-}
-```
-
-This seems like a pain to set up, so we can statically analyze our JS and autogenerate this JSON! If the JS in an app changes, there could be a way for JS to report the new routing configuration to native for use on the next cold start.

docs/guides/Navigation-Actions.md

@@ -1,111 +0,0 @@
-# Navigation Actions
-
-All Navigation Actions return an object that can be sent to the router using `navigation.dispatch()` method.
-
-Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.
-
-The following actions are supported:
-* [Navigate](#Navigate) - Navigate to another route
-* [Reset](#Reset) - Replace current state with a new state
-* [Back](#Back) - Go back to previous state
-* [Set Params](#SetParams) - Set Params for given route
-* [Init](#Init) - Used to initialize first state if state is undefined
-
-The action creator functions define `toString()` to return the action type, which enables easy usage with third-party Redux libraries, including redux-actions and redux-saga.
-
-### Navigate
-The `Navigate` action will update the current state with the result of a `Navigate` action.
-
-- `routeName` - *String* - Required - A destination routeName that has been registered somewhere in the app's router
-- `params` - *Object* - Optional - Params to merge into the destination route
-- `action` - *Object* - Optional - (advanced) The sub-action to run in the child router, if the screen is a navigator. Any one of the actions described in this doc can be set as a sub-action.
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const navigateAction = NavigationActions.navigate({
-
-  routeName: 'Profile',
-
-  params: {},
-
-  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
-})
-
-this.props.navigation.dispatch(navigateAction)
-
-```
-
-
-### Reset
-
-The `Reset` action wipes the whole navigation state and replaces it with the result of several actions.
-
-- `index` - *number* - required - Index of the active route on `routes` array in navigation `state`.
-- `actions` - *array* - required - Array of Navigation Actions that will replace the navigation state.
-- `key` - *string or null* - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const resetAction = NavigationActions.reset({
-  index: 0,
-  actions: [
-    NavigationActions.navigate({ routeName: 'Profile'})
-  ]
-})
-this.props.navigation.dispatch(resetAction)
-
-```
-#### How to use the `index` parameter
-The `index` param is used to specify the current active route.
-
-eg: given a basic stack navigation with two routes `Profile` and `Settings`.
-To reset the state to a point where the active screen was `Settings` but have it stacked on top of a `Profile` screen, you would do the following:
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const resetAction = NavigationActions.reset({
-  index: 1,
-  actions: [
-    NavigationActions.navigate({ routeName: 'Profile'}),
-    NavigationActions.navigate({ routeName: 'Settings'})
-  ]
-})
-this.props.navigation.dispatch(resetAction)
-
-```
-
-### Back
-
-Go back to previous screen and close current screen. `back` action creator takes in one optional parameter:
-- `key` - *string or null* - optional - If set, navigation will go back from the given key. If null, navigation will go back from the currently active route.
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const backAction = NavigationActions.back({
-  key: 'Profile'
-})
-this.props.navigation.dispatch(backAction)
-
-```
-
-### SetParams
-
-When dispatching `SetParams`, the router will produce a new state that has changed the params of a particular route, as identified by the key
-
-- `params` - *object* - required - New params to be merged into existing route params
-- `key` - *string* - required - Route key that should get the new params
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const setParamsAction = NavigationActions.setParams({
-  params: { title: 'Hello' },
-  key: 'screen-123',
-})
-this.props.navigation.dispatch(setParamsAction)
-
-```

docs/guides/Redux-Integration.md

@@ -1,178 +0,0 @@
-# Redux Integration
-
-### Overview For Redux Integration
-1. To handle your app's navigation state in Redux, you can pass your own `navigation` prop to a navigator.
-
-2. Once you pass your own navigation prop to the navigator, the default [`navigation`](https://reactnavigation.org/docs/navigators/navigation-prop) prop gets destroyed. You must construct your own `navigation` prop with [`state`](https://reactnavigation.org/docs/navigators/navigation-prop#state-The-screen's-current-stateroute), [`dispatch`](https://reactnavigation.org/docs/navigators/navigation-prop#dispatch-Send-an-action-to-the-router), and `addListener` properties.
-
-3. The `state` will be fed from the reducer assigned to handle navigation state and the `dispatch` will be Redux's default `dispatch`. Thus you will be able to dispatch normal redux actions using `this.props.navigation.dispatch(ACTION)`, reducer will update the navigation state on the basis of dispatched action, the new navigation state will then be passed to the navigator.
-
-4. A middleware is needed so that any events that mutate the navigation state properly trigger the event listeners.
-
-### Details Regarding Redux Integration
-First, you need to add the `react-navigation-redux-helpers` package to your project.
-
-  ```bash
-  yarn add react-navigation-redux-helpers
-  ```
-
-  or
-
-  ```bash
-  npm install --save react-navigation-redux-helpers
-  ```
-
-With Redux, your app's state is defined by a reducer. Each navigation router effectively has a reducer, called `getStateForAction`. The following is a minimal example of how you might use navigators within a Redux application:
-
-```es6
-import {
-  StackNavigator,
-  addNavigationHelpers,
-} from 'react-navigation';
-import {
-  createStore,
-  applyMiddleware,
-  combineReducers,
-} from 'redux';
-import {
-  createReduxBoundAddListener,
-  createReactNavigationReduxMiddleware,
-} from 'react-navigation-redux-helpers';
-import { Provider, connect } from 'react-redux';
-import React from 'react';
-
-const AppNavigator = StackNavigator(AppRouteConfigs);
-
-const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Login'));
-
-const navReducer = (state = initialState, action) => {
-  const nextState = AppNavigator.router.getStateForAction(action, state);
-
-  // Simply return the original `state` if `nextState` is null or undefined.
-  return nextState || state;
-};
-
-const appReducer = combineReducers({
-  nav: navReducer,
-  ...
-});
-
-// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener
-const middleware = createReactNavigationReduxMiddleware(
-  "root",
-  state => state.nav,
-);
-const addListener = createReduxBoundAddListener("root");
-
-class App extends React.Component {
-  render() {
-    return (
-      <AppNavigator navigation={addNavigationHelpers({
-        dispatch: this.props.dispatch,
-        state: this.props.nav,
-        addListener,
-      })} />
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  nav: state.nav
-});
-
-const AppWithNavigationState = connect(mapStateToProps)(App);
-
-const store = createStore(
-  appReducer,
-  applyMiddleware(middleware),
-);
-
-class Root extends React.Component {
-  render() {
-    return (
-      <Provider store={store}>
-        <AppWithNavigationState />
-      </Provider>
-    );
-  }
-}
-```
-
-Once you do this, your navigation state is stored within your Redux store, at which point you can fire navigation actions using your Redux dispatch function.
-
-Keep in mind that when a navigator is given a `navigation` prop, it relinquishes control of its internal state. That means you are now responsible for persisting its state, handling any deep linking, [Handling the Hardware Back Button in Android](#Handling-the-Hardware-Back-Button-in-Android), etc.
-
-Navigation state is automatically passed down from one navigator to another when you nest them. Note that in order for a child navigator to receive the state from a parent navigator, it should be defined as a `screen`.
-
-Applying this to the example above, you could instead define `AppNavigator` to contain a nested `TabNavigator` as follows:
-
-```es6
-const AppNavigator = StackNavigator({
-  Home: { screen: MyTabNavigator },
-});
-```
-
-In this case, once you `connect` `AppNavigator` to Redux as is done in `AppWithNavigationState`, `MyTabNavigator` will automatically have access to navigation state as a `navigation` prop.
-
-## Full example
-
-There's a working example app with Redux [here](https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample) if you want to try it out yourself.
-
-## Mocking tests
-
-To make jest tests work with your react-navigation app, you need to change the jest preset in the `package.json`, see [here](https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization):
-
-
-```json
-"jest": {
-  "preset": "react-native",
-  "transformIgnorePatterns": [
-    "node_modules/(?!(jest-)?react-native|react-navigation)"
-  ]
-}
-```
-
-## Handling the Hardware Back Button in Android
-
-By using the following snippet, your nav component will be aware of the back button press actions and will correctly interact with your stack. This is really useful on Android.
-
-```es6
-import React from "react";
-import { BackHandler } from "react-native";
-import { addNavigationHelpers, NavigationActions } from "react-navigation";
-
-const AppNavigation = TabNavigator(
-  {
-    Home: { screen: HomeScreen },
-    Settings: { screen: SettingScreen }
-  }
-);
-
-class ReduxNavigation extends React.Component {
-  componentDidMount() {
-    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
-  }
-  componentWillUnmount() {
-    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
-  }
-  onBackPress = () => {
-    const { dispatch, nav } = this.props;
-    if (nav.index === 0) {
-      return false;
-    }
-    dispatch(NavigationActions.back());
-    return true;
-  };
-
-  render() {
-    const { dispatch, nav } = this.props;
-    const navigation = addNavigationHelpers({
-      dispatch,
-      state: nav,
-      addListener,
-    });
-
-    return <AppNavigation navigation={navigation} />;
-  }
-}
-```

docs/guides/Screen-Nav-Options.md

@@ -1,104 +0,0 @@
-
-# Screen Navigation Options
-
-Each screen can configure several aspects about how it gets presented in parent navigators.
-
-#### Two Ways to specify each option
-
-**Static configuration:** Each navigation option can either be directly assigned:
-
-```js
-class MyScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Great',
-  };
-  ...
-```
-
-**Dynamic Configuration**
-
-Or, the options can be a function that takes the following arguments, and returns an object of navigation options that will override the route-defined and navigator-defined navigationOptions.
-
-- `props` - The same props that are available to the screen component
-  - `navigation` - The [navigation prop](/docs/navigators/navigation-prop) for the screen, with the screen's route at `navigation.state`
-  - `screenProps` - The props passing from above the navigator component
-  - `navigationOptions` - The default or previous options that would be used if new values are not provided
-
-```js
-class ProfileScreen extends React.Component {
-  static navigationOptions = ({ navigation, screenProps }) => ({
-    title: navigation.state.params.name + "'s Profile!",
-    headerRight: <Button color={screenProps.tintColor} {...} />,
-  });
-  ...
-```
-
-The screenProps are passed in at render-time. If this screen was hosted in a SimpleApp navigator:
-
-```js
-<SimpleApp
-  screenProps={{tintColor: 'blue'}}
-  // navigation={{state, dispatch}} // optionally control the app
-/>
-```
-
-#### Generic Navigation Options
-
-The `title` navigation option is generic between every navigator. It is used to set the title string for a given screen.
-
-```js
-class MyScreen extends React.Component {
-  static navigationOptions = {
-    title: 'Great',
-  };
-  ...
-```
-
-Unlike the other nav options which are only utilized by the navigator view, the title option can be used by the environment to update the title in the browser window or app switcher.
-
-#### Default Navigation Options
-
-It's very common to define `navigationOptions` on a screen, but sometimes it is useful to define `navigationOptions` on a navigator too.
-
-Imagine the following scenario:
-Your `TabNavigator` represents one of the screens in the app, and is nested within a top-level `StackNavigator`:
-
-```
-StackNavigator({
-  route1: { screen: RouteOne },
-  route2: { screen: MyTabNavigator },
-});
-```
-
-Now, when `route2` is active, you would like to change the tint color of a header. It's easy to do it for `route1`, and it should also be easy to do it for `route2`. This is what Default Navigation Options are for - they are simply `navigationOptions` set on a navigator:
-
-```js
-const MyTabNavigator = TabNavigator({
-  profile: ProfileScreen,
-  ...
-}, {
-  navigationOptions: {
-    headerTintColor: 'blue',
-  },
-});
-```
-
-Note that you can still decide to **also** specify the `navigationOptions` on the screens at the leaf level - e.g.  the `ProfileScreen` above. The `navigationOptions` from the screen will be merged key-by-key with the default options coming from the navigator. Whenever both the navigator and screen define the same option (e.g. `headerTintColor`), the screen wins. Therefore, you could change the tint color when `ProfileScreen` is active by doing the following:
-
-```js
-class ProfileScreen extends React.Component {
-  static navigationOptions = {
-    headerTintColor: 'black',
-  };
-  ...
-}
-```
-
-## Navigation Option Reference
-
-List of available navigation options depends on the `navigator` the screen is added to.
-
-Check available options for:
-- [`drawer navigator`](/docs/navigators/drawer#Screen-Navigation-Options)
-- [`stack navigator`](/docs/navigators/stack#Screen-Navigation-Options)
-- [`tab navigator`](/docs/navigators/tab#Screen-Navigation-Options)

docs/guides/Screen-Navigation-Prop.md

@@ -1,162 +0,0 @@
-
-# Screen Navigation Prop
-
-Each *screen* in your app will receive a navigation prop which contain the following:
-* `navigate` - (helper) link to other screens
-* `state` - screen's current state/routes
-* `setParams` - (helper) make changes to route's params
-* `goBack` - (helper) close active screen and move back
-* `dispatch` - send an action to router
-
-*NOTE:* The `navigation` prop is passed down to every navigation-aware component including navigators. The big exception is that a navigator's `navigation` prop may not have the helper functions (`navigate`, `goBack`, etc); it may only have `state` and `dispatch`. In order to `navigate` using the navigator's `navigation` prop, you will have to `dispatch` using an [action creator](navigation-actions).
-
-*Notes regarding hooking things up with Redux*
-
-> People don't always hook things up to redux correctly, because they mis-understand the navigator's top-level API, where the navigation prop is optional. The navigator will maintain its own state if it doesn't get a navigation prop, but this is not a feature you generally want to use when hooking your app up with redux. For navigators that are nested inside of your main navigator, you always want to pass the screen's navigation prop down. This allows your top-level navigator to communicate and provide state for all the children navigators. Only your top-level router needs to be integrated with redux, because all the other routers are inside it.
-
-## `navigate` - Link to other screens
-
-Call this to link to another screen in your app. Takes the following arguments:
-
-`navigate(routeName, params, action)`
-
-- `routeName` - A destination routeName that has been registered somewhere in the app's router
-- `params` - Params to merge into the destination route
-- `action` - (advanced) The sub-action to run in the child router, if the screen is a navigator. See [Actions Doc](navigation-actions) for a full list of supported actions.
-
-```js
-class HomeScreen extends React.Component {
-  render() {
-    const {navigate} = this.props.navigation;
-
-    return (
-      <View>
-        <Text>This is the home screen of the app</Text>
-        <Button
-          onPress={() => navigate('Profile', {name: 'Brent'})}
-          title="Go to Brent's profile"
-        />
-      </View>
-     )
-   }
-}
-```
-
-## `state` - The screen's current state/route
-
-A screen has access to its route via `this.props.navigation.state`. Each will return an object with the following:
-
-```js
-{
-  // the name of the route config in the router
-  routeName: 'profile',
-  //a unique identifier used to sort routes
-  key: 'main0',
-  //an optional object of string options for this screen
-  params: { hello: 'world' }
-}
-```
-
-```js
-class ProfileScreen extends React.Component {
-  render() {
-    const {state} = this.props.navigation;
-    // state.routeName === 'Profile'
-    return (
-      <Text>Name: {state.params.name}</Text>
-    );
-  }
-}
-```
-
-
-## `setParams` - Make changes to route params
-
-Firing the `setParams` action allows a screen to change the params in the route, which is useful for updating the header buttons and title.
-
-```js
-class ProfileScreen extends React.Component {
-  render() {
-    const {setParams} = this.props.navigation;
-    return (
-      <Button
-        onPress={() => setParams({name: 'Lucy'})}
-        title="Set title name to 'Lucy'"
-      />
-     )
-   }
-}
-```
-
-## `goBack` - Close the active screen and move back
-
-Optionally provide a key, which specifies the route to go back from. By default, goBack will close the route that it is called from.
-
-*Going back from a specific screen*
-
-Consider the following navigation state:
-```
-{
-  routes: [
-    { routeName: 'HomeScreen', key: 'A' },
-    { routeName: 'DetailScreen', key: 'B' },
-    { routeName: 'DetailScreen', key: 'C' },
-  ],
-  index: 2
-}
-```
-
-Now you are on *screen C* and want to go back to the *HomeScreen (A)* (popping C and B).
-Then you need to supply a key to goBack *FROM*:
-
-```
-navigation.goBack("B") // will go to screen A FROM screen B
-```
-
-If the goal is to go back from the currently active route, call `.goBack(null);`
-
-```js
-class HomeScreen extends React.Component {
-  render() {
-    const {goBack} = this.props.navigation;
-    return (
-      <View>
-        <Button
-          onPress={() => goBack()}
-          title="Go back from this HomeScreen"
-        />
-        <Button
-          onPress={() => goBack(null)}
-          title="Go back from the currently active route"
-        />
-        <Button
-          onPress={() => goBack('screen-123')}
-          title="Go back from screen-123"
-        />
-      </View>
-     )
-   }
-}
-```
-
-## `dispatch` - Send an action to the router
-
-Use dispatch to send any navigation action to the router. The other navigation functions use dispatch behind the scenes.
-
-Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.
-
-See [Navigation Actions Docs](navigation-actions) for a full list of available actions.
-
-```js
-import { NavigationActions } from 'react-navigation'
-
-const navigateAction = NavigationActions.navigate({
-  routeName: 'Profile',
-  params: {},
-
-  // navigate can have a nested navigate action that will be run inside the child router
-  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
-})
-this.props.navigation.dispatch(navigateAction)
-
-```

docs/guides/Screen-Tracking.md

@@ -1,93 +0,0 @@
-## Screen tracking and analytics
-
-This example shows how to do screen tracking and send to Google Analytics. The approach can be adapted to any other mobile analytics SDK. 
-
-### Screen tracking
-
-When using built-in navigation container, we can use `onNavigationStateChange` to track the screen.
-
-```js
-import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
-
-const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
-
-// gets the current screen from navigation state
-function getCurrentRouteName(navigationState) {
-  if (!navigationState) {
-    return null;
-  }
-  const route = navigationState.routes[navigationState.index];
-  // dive into nested navigators
-  if (route.routes) {
-    return getCurrentRouteName(route);
-  }
-  return route.routeName;
-}
-
-const AppNavigator = StackNavigator(AppRouteConfigs);
-
-export default () => (
-  <AppNavigator
-    onNavigationStateChange={(prevState, currentState) => {
-      const currentScreen = getCurrentRouteName(currentState);
-      const prevScreen = getCurrentRouteName(prevState);
-
-      if (prevScreen !== currentScreen) {
-        // the line below uses the Google Analytics tracker
-        // change the tracker here to use other Mobile analytics SDK.
-        tracker.trackScreenView(currentScreen);
-      }
-    }}
-  />
-);
-```
-
-### Screen tracking with Redux
-
-When using Redux, we can write a Redux middleware to track the screen. For this purpose,
-we will reuse `getCurrentRouteName` from the previous section.
-
-```js
-import { NavigationActions } from 'react-navigation';
-import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
-
-const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);
-
-const screenTracking = ({ getState }) => next => (action) => {
-  if (
-    action.type !== NavigationActions.NAVIGATE
-    && action.type !== NavigationActions.BACK
-  ) {
-    return next(action);
-  }
-
-  const currentScreen = getCurrentRouteName(getState().navigation);
-  const result = next(action);
-  const nextScreen = getCurrentRouteName(getState().navigation);
-  if (nextScreen !== currentScreen) {
-    // the line below uses the Google Analytics tracker
-    // change the tracker here to use other Mobile analytics SDK.
-    tracker.trackScreenView(nextScreen);
-  }
-  return result;
-};
-
-export default screenTracking;
-```
-
-### Create Redux store and apply the above middleware
-
-The `screenTracking` middleware can be applied to the store during its creation. See [Redux Integration](Redux-Integration.md) for details.
-
-```js
-const store = createStore(
-  combineReducers({
-    navigation: navigationReducer,
-    ...
-  }),
-  applyMiddleware(
-    screenTracking,
-    ...
-    ),
-);
-```

docs/guides/Web-Integration.md

@@ -1,16 +0,0 @@
-# Web Integration
-
-React Navigation routers work on web and allow you to share navigation logic with native apps. The views currently bundled in `react-navigation` currently only work on React Native, but that may change with future-facing projects like [react-primitives](https://github.com/lelandrichardson/react-primitives).
-
-## Example App
-
-[This website](https://reactnavigation.org/) is [built with](https://github.com/react-community/react-navigation/blob/master/website/) React Navigation, specifically using `createNavigator` and `TabRouter`.
-
-See the source code of the site here: [App.js](https://github.com/react-community/react-navigation/blob/master/website/src/App.js).
-
-To see how the app gets rendered on the server, see [Server.js](https://github.com/react-community/react-navigation/blob/master/website/src/Server.js). On the browser, the App wakes up and gets rendered with [BrowserAppContainer.js](https://github.com/react-community/react-navigation/blob/master/website/src/BrowserAppContainer.js).
-
-
-## More Coming Soon
-
-Soon this guide will be replaced with a more thorough walkthrough of react-navigation usage on the web.

examples/NavigationPlayground/.babelrc

@@ -6,6 +6,11 @@
     "development": {
       "plugins": [
         "transform-react-jsx-source"
+      ],
+    },
+    "production": {
+      "plugins": [
+        "transform-remove-console"
       ]
     }
   }

examples/NavigationPlayground/.flowconfig

@@ -65,11 +65,13 @@ 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

examples/NavigationPlayground/js/App.js

@@ -1,11 +1,13 @@
 /* @flow */
 
 import React from 'react';
-import { Constants, ScreenOrientation } from 'expo';
+import { Asset, Constants, ScreenOrientation } from 'expo';
 
 ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
 
 import {
+  Animated,
+  Image,
   Platform,
   ScrollView,
   StyleSheet,
@@ -16,7 +18,6 @@ import {
 } from 'react-native';
 import { SafeAreaView, StackNavigator } from 'react-navigation';
 
-import Banner from './Banner';
 import CustomTabs from './CustomTabs';
 import CustomTransitioner from './CustomTransitioner';
 import Drawer from './Drawer';
@@ -24,16 +25,25 @@ import MultipleDrawer from './MultipleDrawer';
 import TabsInDrawer from './TabsInDrawer';
 import ModalStack from './ModalStack';
 import StacksInTabs from './StacksInTabs';
+import SwitchWithStacks from './SwitchWithStacks';
 import StacksOverTabs from './StacksOverTabs';
+import StacksWithKeys from './StacksWithKeys';
 import SimpleStack from './SimpleStack';
+import StackWithHeaderPreset from './StackWithHeaderPreset';
+import StackWithTranslucentHeader from './StackWithTranslucentHeader';
 import SimpleTabs from './SimpleTabs';
 import TabAnimations from './TabAnimations';
+import TabsWithNavigationFocus from './TabsWithNavigationFocus';
 
 const ExampleInfo = {
   SimpleStack: {
     name: 'Stack Example',
     description: 'A card stack',
   },
+  SwitchWithStacks: {
+    name: 'Switch Example',
+    description: 'A switch with stacks inside',
+  },
   SimpleTabs: {
     name: 'Tabs Example',
     description: 'Tabs following platform conventions',
@@ -42,6 +52,18 @@ const ExampleInfo = {
     name: 'Drawer Example',
     description: 'Android-style drawer navigation',
   },
+  StackWithHeaderPreset: {
+    name: 'UIKit-style Header Transitions',
+    description: 'Masked back button and sliding header items. iOS only.',
+  },
+  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',
@@ -76,6 +98,10 @@ const ExampleInfo = {
     name: 'Stacks over Tabs',
     description: 'Nested stack navigation that pushes on top of tabs',
   },
+  StacksWithKeys: {
+    name: 'Link in Stack with keys',
+    description: 'Use keys to link between screens',
+  },
   LinkStack: {
     name: 'Link in Stack',
     description: 'Deep linking into a route in stack',
@@ -88,38 +114,29 @@ const ExampleInfo = {
     name: 'Animated Tabs Example',
     description: 'Tab transitions have custom animations',
   },
+  // TabsWithNavigationFocus: {
+  //   name: 'withNavigationFocus',
+  //   description: 'Receive the focus prop to know when a screen is focused',
+  // },
 };
+
 const ExampleRoutes = {
-  SimpleStack: {
-    screen: SimpleStack,
-  },
-  SimpleTabs: {
-    screen: SimpleTabs,
-  },
-  Drawer: {
-    screen: Drawer,
-  },
+  SimpleStack,
+  SwitchWithStacks,
+  SimpleTabs,
+  Drawer,
   // MultipleDrawer: {
   //   screen: MultipleDrawer,
   // },
-  TabsInDrawer: {
-    screen: TabsInDrawer,
-  },
-  CustomTabs: {
-    screen: CustomTabs,
-  },
-  CustomTransitioner: {
-    screen: CustomTransitioner,
-  },
-  ModalStack: {
-    screen: ModalStack,
-  },
-  StacksInTabs: {
-    screen: StacksInTabs,
-  },
-  StacksOverTabs: {
-    screen: StacksOverTabs,
-  },
+  StackWithHeaderPreset,
+  StackWithTranslucentHeader,
+  TabsInDrawer,
+  CustomTabs,
+  CustomTransitioner,
+  ModalStack,
+  StacksWithKeys,
+  StacksInTabs,
+  StacksOverTabs,
   LinkStack: {
     screen: SimpleStack,
     path: 'people/Jordan',
@@ -128,48 +145,148 @@ const ExampleRoutes = {
     screen: SimpleTabs,
     path: 'settings',
   },
-  TabAnimations: {
-    screen: TabAnimations,
-  },
+  TabAnimations,
+  // TabsWithNavigationFocus: TabsWithNavigationFocus,
 };
 
-class MainScreen extends React.Component<*> {
+type State = {
+  scrollY: Animated.Value,
+};
+class MainScreen extends React.Component<any, State> {
+  state = {
+    scrollY: new Animated.Value(0),
+  };
+
+  componentWillMount() {
+    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({
+      inputRange: [-450, 0, 100],
+      outputRange: [2, 1, 0.8],
+      extrapolate: 'clamp',
+    });
+
+    const translateY = this.state.scrollY.interpolate({
+      inputRange: [-450, 0, 100],
+      outputRange: [-150, 0, 40],
+    });
+
+    const opacity = this.state.scrollY.interpolate({
+      inputRange: [0, 50],
+      outputRange: [1, 0],
+      extrapolate: 'clamp',
+    });
+
+    const underlayOpacity = this.state.scrollY.interpolate({
+      inputRange: [0, 50],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    });
+
+    const backgroundScale = this.state.scrollY.interpolate({
+      inputRange: [-450, 0],
+      outputRange: [3, 1],
+      extrapolate: 'clamp',
+    });
+
+    const backgroundTranslateY = this.state.scrollY.interpolate({
+      inputRange: [-450, 0],
+      outputRange: [0, 0],
+    });
+
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView style={{ flex: 1 }}>
-          <Banner />
-          {Object.keys(ExampleRoutes).map((routeName: string) => (
-            <TouchableOpacity
-              key={routeName}
-              onPress={() => {
-                const { path, params, screen } = ExampleRoutes[routeName];
-                const { router } = screen;
-                const action =
-                  path && router.getActionForPathAndParams(path, params);
-                navigation.navigate(routeName, {}, action);
-              }}
+        <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 }] }}
+          >
+            <SafeAreaView
+              style={styles.bannerContainer}
+              forceInset={{ top: 'always', bottom: 'never' }}
             >
-              <SafeAreaView
-                style={styles.itemContainer}
-                forceInset={{ vertical: 'never' }}
-              >
-                <View style={styles.item}>
-                  <Text style={styles.title}>
-                    {ExampleInfo[routeName].name}
-                  </Text>
-                  <Text style={styles.description}>
-                    {ExampleInfo[routeName].description}
-                  </Text>
-                </View>
-              </SafeAreaView>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
+              <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' }}
+                  >
+                    <View style={styles.item}>
+                      <Text style={styles.title}>
+                        {ExampleInfo[routeName].name}
+                      </Text>
+                      <Text style={styles.description}>
+                        {ExampleInfo[routeName].description}
+                      </Text>
+                    </View>
+                  </SafeAreaView>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </SafeAreaView>
+        </Animated.ScrollView>
         <StatusBar barStyle="light-content" />
-        <View style={styles.statusBarUnderlay} />
+        <Animated.View
+          style={[styles.statusBarUnderlay, { opacity: underlayOpacity }]}
+        />
       </View>
     );
   }
@@ -230,4 +347,35 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: '#999',
   },
+  backgroundUnderlay: {
+    backgroundColor: '#673ab7',
+    position: 'absolute',
+    top: -100,
+    height: 300,
+    left: 0,
+    right: 0,
+  },
+  bannerContainer: {
+    // backgroundColor: '#673ab7',
+    alignItems: 'center',
+  },
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  bannerImage: {
+    width: 36,
+    height: 36,
+    resizeMode: 'contain',
+    tintColor: '#fff',
+    margin: 8,
+  },
+  bannerTitle: {
+    fontSize: 18,
+    fontWeight: '200',
+    color: '#fff',
+    marginVertical: 8,
+    marginRight: 5,
+  },
 });

examples/NavigationPlayground/js/Drawer.js

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Button, Platform, ScrollView, StatusBar } from 'react-native';
-import { DrawerNavigator, SafeAreaView } from 'react-navigation';
+import { StackNavigator, DrawerNavigator, SafeAreaView } from 'react-navigation';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import SampleText from './SampleText';
 
@@ -16,6 +16,10 @@ const MyNavScreen = ({ navigation, banner }) => (
         onPress={() => navigation.navigate('DrawerOpen')}
         title="Open drawer"
       />
+      <Button
+        onPress={() => navigation.navigate('Email')}
+        title="Open other screen"
+      />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
     <StatusBar barStyle="default" />
@@ -36,6 +40,10 @@ InboxScreen.navigationOptions = {
   ),
 };
 
+const EmailScreen = ({ navigation }) => (
+  <MyNavScreen banner={'Email Screen'} navigation={navigation} />
+);
+
 const DraftsScreen = ({ navigation }) => (
   <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
 );
@@ -46,15 +54,25 @@ DraftsScreen.navigationOptions = {
   ),
 };
 
+const InboxStack = StackNavigator({
+  Inbox: { screen: InboxScreen },
+  Email: { screen: EmailScreen },
+});
+
+const DraftsStack = StackNavigator({
+  Drafts: { screen: DraftsScreen },
+  Email: { screen: EmailScreen },
+});
+
 const DrawerExample = DrawerNavigator(
   {
     Inbox: {
       path: '/',
-      screen: InboxScreen,
+      screen: InboxStack,
     },
     Drafts: {
       path: '/sent',
-      screen: DraftsScreen,
+      screen: DraftsStack,
     },
   },
   {

examples/NavigationPlayground/js/ModalStack.js

@@ -8,7 +8,7 @@ import { SafeAreaView, StackNavigator } from 'react-navigation';
 import SampleText from './SampleText';
 
 const MyNavScreen = ({ navigation, banner }) => (
-  <ScrollView contentInsetAdjustmentBehavior="automatic">
+  <ScrollView>
     <SafeAreaView
       forceInset={{
         top: navigation.state.routeName === 'HeaderTest' ? 'always' : 'never',

examples/NavigationPlayground/js/SimpleStack.js

@@ -9,7 +9,7 @@ import type {
 
 import * as React from 'react';
 import { Button, ScrollView, StatusBar } from 'react-native';
-import { StackNavigator, SafeAreaView } from 'react-navigation';
+import { StackNavigator, SafeAreaView, withNavigation } from 'react-navigation';
 import SampleText from './SampleText';
 
 type MyNavScreenProps = {
@@ -17,6 +17,18 @@ type MyNavScreenProps = {
   banner: React.Node,
 };
 
+class MyBackButton extends React.Component<any, any> {
+  render() {
+    return <Button onPress={this._navigateBack} title="Custom Back" />;
+  }
+
+  _navigateBack = () => {
+    this.props.navigation.goBack(null);
+  };
+}
+
+const MyBackButtonWithNavigation = withNavigation(MyBackButton);
+
 class MyNavScreen extends React.Component<MyNavScreenProps> {
   render() {
     const { navigation, banner } = this.props;
@@ -24,22 +36,19 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
       <SafeAreaView>
         <SampleText>{banner}</SampleText>
         <Button
-          onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
-          title="Go to a profile screen"
+          onPress={() => navigation.push('Profile', { name: 'Jane' })}
+          title="Push a profile screen"
         />
         <Button
           onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
-          title="Go to a photos screen"
+          title="Navigate to a photos screen"
         />
         <Button
-          onPress={() =>
-            navigation.navigate('Profile', {
-              name: 'Dog',
-              headerBackImage: require('./assets/dog-back.png'),
-            })
-          }
-          title="Custom back button"
+          onPress={() => navigation.replace('Profile', { name: 'Lucy' })}
+          title="Replace with profile"
         />
+        <Button onPress={() => navigation.popToTop()} title="Pop to top" />
+        <Button onPress={() => navigation.pop()} title="Pop" />
         <Button onPress={() => navigation.goBack(null)} title="Go back" />
         <StatusBar barStyle="default" />
       </SafeAreaView>
@@ -97,6 +106,7 @@ type MyPhotosScreenProps = {
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
     title: 'Photos',
+    headerLeft: <MyBackButtonWithNavigation />,
   };
   _s0: NavigationEventSubscription;
   _s1: NavigationEventSubscription;

examples/NavigationPlayground/js/SimpleTabs.js

@@ -163,6 +163,8 @@ const SimpleTabs = TabNavigator(
     },
   },
   {
+    lazy: true,
+    removeClippedSubviews: true,
     tabBarOptions: {
       activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
     },

examples/NavigationPlayground/js/StackWithHeaderPreset.js

@@ -0,0 +1,68 @@
+/**
+ * @flow
+ */
+import type { NavigationScreenProp } from 'react-navigation';
+
+import * as React from 'react';
+import { Button, ScrollView, StatusBar } from 'react-native';
+import { StackNavigator, SafeAreaView } from 'react-navigation';
+
+type NavScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class HomeScreen extends React.Component<NavScreenProps> {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button
+          onPress={() => navigation.push('Other')}
+          title="Push another screen"
+        />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class OtherScreen extends React.Component<NavScreenProps> {
+  static navigationOptions = {
+    title: 'Your title here',
+  };
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <SafeAreaView style={{ paddingTop: 30 }}>
+        <Button
+          onPress={() => navigation.push('Other')}
+          title="Push another screen"
+        />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+const StackWithHeaderPreset = StackNavigator(
+  {
+    Home: HomeScreen,
+    Other: OtherScreen,
+  },
+  {
+    headerTransitionPreset: 'uikit',
+  }
+);
+
+export default StackWithHeaderPreset;

examples/NavigationPlayground/js/StackWithTranslucentHeader.js

@@ -0,0 +1,234 @@
+/**
+ * @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 {
+  Button,
+  Dimensions,
+  Platform,
+  ScrollView,
+  StatusBar,
+  View,
+} from 'react-native';
+import { Header, StackNavigator } from 'react-navigation';
+import SampleText from './SampleText';
+
+type MyNavScreenProps = {
+  navigation: NavigationScreenProp<*>,
+  banner: React.Node,
+};
+
+class MyNavScreen extends React.Component<MyNavScreenProps> {
+  render() {
+    const { navigation, banner } = this.props;
+    return (
+      <ScrollView style={{ flex: 1 }} {...this.getHeaderInset()}>
+        <SampleText>{banner}</SampleText>
+        <Button
+          onPress={() => navigation.push('Profile', { name: 'Jane' })}
+          title="Push a profile screen"
+        />
+        <Button
+          onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
+          title="Navigate to a photos screen"
+        />
+        <Button
+          onPress={() => navigation.replace('Profile', { name: 'Lucy' })}
+          title="Replace with profile"
+        />
+        <Button onPress={() => navigation.popToTop()} title="Pop to top" />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </ScrollView>
+    );
+  }
+
+  // Inset to compensate for navigation bar being transparent.
+  // And improved abstraction for this will be built in to react-navigation
+  // at some point.
+
+  getHeaderInset() {
+    const NOTCH_HEIGHT = isIphoneX() ? 25 : 0;
+
+    // $FlowIgnore: we will remove the HEIGHT static soon enough
+    const BASE_HEADER_HEIGHT = Header.HEIGHT;
+
+    const HEADER_HEIGHT =
+      Platform.OS === 'ios'
+        ? BASE_HEADER_HEIGHT + NOTCH_HEIGHT
+        : BASE_HEADER_HEIGHT + Constants.statusBarHeight;
+
+    return Platform.select({
+      ios: {
+        contentInset: { top: HEADER_HEIGHT },
+        contentOffset: { y: -HEADER_HEIGHT },
+      },
+      android: {
+        contentContainerStyle: {
+          paddingTop: HEADER_HEIGHT,
+        },
+      },
+    });
+  }
+}
+
+type MyHomeScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class MyHomeScreen extends React.Component<MyHomeScreenProps> {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+  _s0: NavigationEventSubscription;
+  _s1: NavigationEventSubscription;
+  _s2: NavigationEventSubscription;
+  _s3: NavigationEventSubscription;
+
+  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);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_willFocus HomeScreen', a);
+  };
+  _onDF = a => {
+    console.log('_didFocus HomeScreen', a);
+  };
+  _onWB = a => {
+    console.log('_willBlur HomeScreen', a);
+  };
+  _onDB = a => {
+    console.log('_didBlur HomeScreen', a);
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="Home Screen" navigation={navigation} />;
+  }
+}
+
+type MyPhotosScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
+  static navigationOptions = {
+    title: 'Photos',
+  };
+  _s0: NavigationEventSubscription;
+  _s1: NavigationEventSubscription;
+  _s2: NavigationEventSubscription;
+  _s3: NavigationEventSubscription;
+
+  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);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_willFocus PhotosScreen', a);
+  };
+  _onDF = a => {
+    console.log('_didFocus PhotosScreen', a);
+  };
+  _onWB = a => {
+    console.log('_willBlur PhotosScreen', a);
+  };
+  _onDB = a => {
+    console.log('_didBlur PhotosScreen', a);
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <MyNavScreen
+        banner={`${navigation.state.params.name}'s Photos`}
+        navigation={navigation}
+      />
+    );
+  }
+}
+
+const MyProfileScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${
+      navigation.state.params.name
+    }'s Profile`}
+    navigation={navigation}
+  />
+);
+
+MyProfileScreen.navigationOptions = props => {
+  const { navigation } = props;
+  const { state, setParams } = navigation;
+  const { params } = state;
+  return {
+    headerBackImage: params.headerBackImage,
+    headerTitle: `${params.name}'s Profile!`,
+    // Render a button on the right side of the header.
+    // When pressed switches the screen to edit mode.
+    headerRight: (
+      <Button
+        title={params.mode === 'edit' ? 'Done' : 'Edit'}
+        onPress={() =>
+          setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
+        }
+      />
+    ),
+  };
+};
+
+const StackWithTranslucentHeader = StackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
+    Photos: {
+      path: 'photos/:name',
+      screen: MyPhotosScreen,
+    },
+  },
+  {
+    headerTransitionPreset: 'uikit',
+    navigationOptions: {
+      headerTransparent: true,
+      headerBackground: Platform.select({
+        ios: <BlurView style={{ flex: 1 }} intensity={98} />,
+        android: (
+          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
+        ),
+      }),
+    },
+  }
+);
+
+export default StackWithTranslucentHeader;

examples/NavigationPlayground/js/StacksWithKeys.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Button, StatusBar, Text, View } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+class HomeScreen extends React.Component<any, any> {
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Home</Text>
+        <Button
+          title="Navigate to 'Profile' with key 'A'"
+          onPress={() =>
+            this.props.navigation.navigate({
+              routeName: 'Profile',
+              key: 'A',
+              params: { homeKey: this.props.navigation.state.key },
+            })
+          }
+        />
+        <Button
+          title="Go back to other examples"
+          onPress={() => this.props.navigation.goBack(null)}
+        />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+}
+
+class ProfileScreen extends React.Component<any, any> {
+  render() {
+    const { homeKey } = this.props.navigation.state.params;
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Profile</Text>
+        <Button
+          title="Navigate to 'Settings' with key 'B'"
+          onPress={() =>
+            this.props.navigation.navigate({
+              routeName: 'Settings',
+              key: 'B',
+              params: { homeKey },
+            })
+          }
+        />
+        <Button
+          title={`Navigate back to 'Home' with key ${homeKey}`}
+          onPress={() =>
+            this.props.navigation.navigate({ routeName: 'Home', key: homeKey })
+          }
+        />
+      </View>
+    );
+  }
+}
+
+class SettingsScreen extends React.Component<any, any> {
+  render() {
+    const { homeKey } = this.props.navigation.state.params;
+
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Settings</Text>
+        <Button
+          title={`Navigate back to 'Home' with key ${homeKey}`}
+          onPress={() =>
+            this.props.navigation.navigate({ routeName: 'Home', key: homeKey })
+          }
+        />
+        <Button
+          title="Navigate back to 'Profile' with key 'A'"
+          onPress={() =>
+            this.props.navigation.navigate({
+              routeName: 'Profile',
+              key: 'A',
+            })
+          }
+        />
+      </View>
+    );
+  }
+}
+
+const Stack = StackNavigator(
+  {
+    Home: {
+      screen: HomeScreen,
+    },
+    Profile: {
+      screen: ProfileScreen,
+    },
+    Settings: {
+      screen: SettingsScreen,
+    },
+  },
+  {
+    headerMode: 'none',
+  }
+);
+
+export default Stack;

examples/NavigationPlayground/js/SwitchWithStacks.js

@@ -0,0 +1,121 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import {
+  ActivityIndicator,
+  AsyncStorage,
+  Button,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { StackNavigator, SwitchNavigator } from 'react-navigation';
+
+class SignInScreen extends React.Component<any, any> {
+  static navigationOptions = {
+    title: 'Please sign in',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="Sign in!" onPress={this._signInAsync} />
+        <Button
+          title="Go back to other examples"
+          onPress={() => this.props.navigation.goBack(null)}
+        />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+
+  _signInAsync = async () => {
+    await AsyncStorage.setItem('userToken', 'abc');
+    this.props.navigation.navigate('App');
+  };
+}
+
+class HomeScreen extends React.Component<any, any> {
+  static navigationOptions = {
+    title: 'Welcome to the app!',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="Show me more of the app" onPress={this._showMoreApp} />
+        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+
+  _showMoreApp = () => {
+    this.props.navigation.navigate('Other');
+  };
+
+  _signOutAsync = async () => {
+    await AsyncStorage.clear();
+    this.props.navigation.navigate('Auth');
+  };
+}
+
+class OtherScreen extends React.Component<any, any> {
+  static navigationOptions = {
+    title: 'Lots of features here',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button title="I'm done, sign me out" onPress={this._signOutAsync} />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+
+  _signOutAsync = async () => {
+    await AsyncStorage.clear();
+    this.props.navigation.navigate('Auth');
+  };
+}
+
+class LoadingScreen extends React.Component<any, any> {
+  componentDidMount() {
+    this._bootstrapAsync();
+  }
+
+  _bootstrapAsync = async () => {
+    const userToken = await AsyncStorage.getItem('userToken');
+    let initialRouteName = userToken ? 'App' : 'Auth';
+    this.props.navigation.navigate(initialRouteName);
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
+const AuthStack = StackNavigator({ SignIn: SignInScreen });
+
+export default SwitchNavigator({
+  Loading: LoadingScreen,
+  App: AppStack,
+  Auth: AuthStack,
+});

examples/NavigationPlayground/js/TabsWithNavigationFocus.js

@@ -0,0 +1,66 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { SafeAreaView, Text } from 'react-native';
+import { TabNavigator, withNavigationFocus } from 'react-navigation';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import SampleText from './SampleText';
+
+const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
+  const TabScreen = ({ isFocused }) => (
+    <SafeAreaView
+      forceInset={{ horizontal: 'always', top: 'always' }}
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text style={{ fontWeight: '700', fontSize: 16, marginBottom: 5 }}>
+        {'Tab ' + name.toLowerCase()}
+      </Text>
+      <Text>{'props.isFocused: ' + (isFocused ? ' true' : 'false')}</Text>
+    </SafeAreaView>
+  );
+
+  TabScreen.navigationOptions = {
+    tabBarLabel: name,
+    tabBarIcon: ({ tintColor, focused }) => (
+      <MaterialCommunityIcons
+        name={focused ? focusedIcon : icon}
+        size={26}
+        style={{ color: focused ? tintColor : '#ccc' }}
+      />
+    ),
+  };
+
+  return withNavigationFocus(TabScreen);
+};
+
+const TabsWithNavigationFocus = TabNavigator(
+  {
+    One: {
+      screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
+    },
+    Two: {
+      screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
+    },
+    Three: {
+      screen: createTabScreen(
+        'Three',
+        'numeric-3-box-outline',
+        'numeric-3-box'
+      ),
+    },
+  },
+  {
+    tabBarPosition: 'bottom',
+    animationEnabled: true,
+    swipeEnabled: true,
+  }
+);
+
+export default TabsWithNavigationFocus;

examples/NavigationPlayground/package.json

@@ -14,10 +14,12 @@
     "expo": "^25.0.0",
     "react": "16.2.0",
     "react-native": "^0.52.0",
+    "react-native-iphone-x-helper": "^1.0.2",
     "react-navigation": "link:../.."
   },
   "devDependencies": {
     "babel-jest": "^21.0.0",
+    "babel-plugin-transform-remove-console": "^6.9.0",
     "flow-bin": "^0.61.0",
     "jest": "^21.0.1",
     "jest-expo": "^25.1.0",

examples/README.md

@@ -2,4 +2,4 @@
 
 ## Usage
 
-Please see the [Contributors Guide](https://reactnavigation.org/docs/guides/contributors#Run-the-Example-App) for instructions on running these example apps.
+Please see the [Contributors Guide](https://reactnavigation.org/docs/contributing.html#run-the-example-app) for instructions on running these example apps.

flow/react-navigation.js

@@ -1,7 +1,6 @@
 // @flow
 
 declare module 'react-navigation' {
-
   /**
    * First, a bunch of things we would love to import but instead must
    * reconstruct (mostly copy-pasted).
@@ -49,6 +48,15 @@ declare module 'react-navigation' {
   // react-native/Libraries/Animated/src/nodes/AnimatedValue.js
   declare type AnimatedValue = Object;
 
+  declare type HeaderForceInset = {
+    horizontal?: string,
+    vertical?: string,
+    left?: string,
+    right?: string,
+    top?: string,
+    bottom?: string,
+  };
+
   /**
    * Next, all the type declarations
    */
@@ -68,15 +76,8 @@ declare module 'react-navigation' {
 
     // The action to run inside the sub-router
     action?: NavigationNavigateAction,
-  |};
 
-  declare type DeprecatedNavigationNavigateAction = {|
-    type: 'Navigate',
-    routeName: string,
-    params?: NavigationParams,
-
-    // The action to run inside the sub-router
-    action?: NavigationNavigateAction | DeprecatedNavigationNavigateAction,
+    key?: string,
   |};
 
   declare export type NavigationBackAction = {|
@@ -84,11 +85,6 @@ declare module 'react-navigation' {
     key?: ?string,
   |};
 
-  declare type DeprecatedNavigationBackAction = {|
-    type: 'Back',
-    key?: ?string,
-  |};
-
   declare export type NavigationSetParamsAction = {|
     type: 'Navigation/SET_PARAMS',
 
@@ -99,26 +95,11 @@ declare module 'react-navigation' {
     params: NavigationParams,
   |};
 
-  declare type DeprecatedNavigationSetParamsAction = {|
-    type: 'SetParams',
-
-    // The key of the route where the params should be set
-    key: string,
-
-    // The new params to merge into the existing route params
-    params: NavigationParams,
-  |};
-
   declare export type NavigationInitAction = {|
     type: 'Navigation/INIT',
     params?: NavigationParams,
   |};
 
-  declare type DeprecatedNavigationInitAction = {|
-    type: 'Init',
-    params?: NavigationParams,
-  |};
-
   declare export type NavigationResetAction = {|
     type: 'Navigation/RESET',
     index: number,
@@ -126,42 +107,46 @@ declare module 'react-navigation' {
     actions: Array<NavigationNavigateAction>,
   |};
 
-  declare type DeprecatedNavigationResetAction = {|
-    type: 'Reset',
-    index: number,
-    key?: ?string,
-    actions:
-      Array<NavigationNavigateAction | DeprecatedNavigationNavigateAction>,
-  |};
-
   declare export type NavigationUriAction = {|
     type: 'Navigation/URI',
     uri: string,
   |};
 
-  declare type DeprecatedNavigationUriAction = {|
-    type: 'Uri',
-    uri: string,
+  declare export type NavigationReplaceAction = {|
+    +type: 'Navigation/REPLACE',
+    +key: string,
+    +routeName: string,
+    +params?: NavigationParams,
+    +action?: NavigationNavigateAction,
+  |};
+  declare export type NavigationPopAction = {|
+    +type: 'Navigation/POP',
+    +n?: number,
+    +immediate?: boolean,
+  |};
+  declare export type NavigationPopToTopAction = {|
+    +type: 'Navigation/POP_TO_TOP',
+    +immediate?: boolean,
+  |};
+  declare export type NavigationPushAction = {|
+    +type: 'Navigation/PUSH',
+    +routeName: string,
+    +params?: NavigationParams,
+    +action?: NavigationNavigateAction,
+    +key?: string,
   |};
 
   declare export type NavigationAction =
     | NavigationInitAction
     | NavigationNavigateAction
+    | NavigationReplaceAction
+    | NavigationPopAction
+    | NavigationPopToTopAction
+    | NavigationPushAction
     | NavigationBackAction
     | NavigationSetParamsAction
     | NavigationResetAction;
 
-  declare type DeprecatedNavigationAction =
-    | DeprecatedNavigationInitAction
-    | DeprecatedNavigationNavigateAction
-    | DeprecatedNavigationBackAction
-    | DeprecatedNavigationSetParamsAction
-    | DeprecatedNavigationResetAction;
-
-  declare export type PossiblyDeprecatedNavigationAction =
-    | NavigationAction
-    | DeprecatedNavigationAction;
-
   /**
    * NavigationState is a tree of routes for a single navigator, where each
    * child route may either be a NavigationScreenRoute or a
@@ -209,9 +194,8 @@ declare module 'react-navigation' {
     params?: NavigationParams,
   };
 
-  declare export type NavigationStateRoute =
-    & NavigationLeafRoute
-    & NavigationState;
+  declare export type NavigationStateRoute = NavigationLeafRoute &
+    NavigationState;
 
   /**
    * Router
@@ -291,12 +275,8 @@ declare module 'react-navigation' {
     Route: NavigationRoute,
     Options: {},
     Props: {}
-  > =
-    & React$ComponentType<NavigationNavigatorProps<Options, Route> & Props>
-    & (
-        | {}
-        | { navigationOptions: NavigationScreenConfig<Options> }
-      );
+  > = React$ComponentType<NavigationNavigatorProps<Options, Route> & Props> &
+    ({} | { navigationOptions: NavigationScreenConfig<Options> });
 
   declare export type NavigationNavigator<
     State: NavigationState,
@@ -307,12 +287,15 @@ declare module 'react-navigation' {
     navigationOptions?: ?NavigationScreenConfig<Options>,
   };
 
-  declare export type NavigationRouteConfig = {
-    navigationOptions?: NavigationScreenConfig<*>,
-    path?: string,
-  } & NavigationScreenRouteConfig;
+  declare export type NavigationRouteConfig =
+    | NavigationComponent
+    | ({
+        navigationOptions?: NavigationScreenConfig<*>,
+        path?: string,
+      } & NavigationScreenRouteConfig);
 
   declare export type NavigationScreenRouteConfig =
+    | NavigationComponent
     | {
         screen: NavigationComponent,
       }
@@ -334,16 +317,18 @@ declare module 'react-navigation' {
 
   declare export type HeaderMode = 'float' | 'screen' | 'none';
 
-  declare export type HeaderProps = $Shape<NavigationSceneRendererProps & {
-    mode: HeaderMode,
-    router: NavigationRouter<NavigationState, NavigationStackScreenOptions>,
-    getScreenDetails: NavigationScene => NavigationScreenDetails<
-      NavigationStackScreenOptions
-    >,
-    leftInterpolator: (props: NavigationSceneRendererProps) => {},
-    titleInterpolator: (props: NavigationSceneRendererProps) => {},
-    rightInterpolator: (props: NavigationSceneRendererProps) => {},
-  }>;
+  declare export type HeaderProps = $Shape<
+    NavigationSceneRendererProps & {
+      mode: HeaderMode,
+      router: NavigationRouter<NavigationState, NavigationStackScreenOptions>,
+      getScreenDetails: NavigationScene => NavigationScreenDetails<
+        NavigationStackScreenOptions
+      >,
+      leftInterpolator: (props: NavigationSceneRendererProps) => {},
+      titleInterpolator: (props: NavigationSceneRendererProps) => {},
+      rightInterpolator: (props: NavigationSceneRendererProps) => {},
+    }
+  >;
 
   /**
    * Stack Navigator
@@ -351,6 +336,7 @@ declare module 'react-navigation' {
 
   declare export type NavigationStackScreenOptions = NavigationScreenOptions & {
     header?: ?(React$Node | (HeaderProps => React$Node)),
+    headerTransparent?: boolean,
     headerTitle?: string | React$Node | React$ElementType,
     headerTitleStyle?: AnimatedTextStyleProp,
     headerTitleAllowFontScaling?: boolean,
@@ -363,6 +349,8 @@ declare module 'react-navigation' {
     headerPressColorAndroid?: string,
     headerRight?: React$Node,
     headerStyle?: ViewStyleProp,
+    headerForceInset?: HeaderForceInset,
+    headerBackground?: React$Node | React$ElementType,
     gesturesEnabled?: boolean,
     gestureResponseDistance?: { vertical?: number, horizontal?: number },
     gestureDirection?: 'default' | 'inverted',
@@ -378,6 +366,7 @@ declare module 'react-navigation' {
   declare export type NavigationStackViewConfig = {|
     mode?: 'card' | 'modal',
     headerMode?: HeaderMode,
+    headerTransitionPreset?: 'fade-in-place' | 'uikit',
     cardStyle?: ViewStyleProp,
     transitionConfig?: () => TransitionConfig,
     onTransitionStart?: () => void,
@@ -389,6 +378,20 @@ declare module 'react-navigation' {
     ...NavigationStackRouterConfig,
   |};
 
+  /**
+   * Switch Navigator
+   */
+
+  declare export type NavigationSwitchRouterConfig = {|
+    initialRouteName?: string,
+    initialRouteParams?: NavigationParams,
+    paths?: NavigationPathsConfig,
+    navigationOptions?: NavigationScreenConfig<*>,
+    order?: Array<string>,
+    backBehavior?: 'none' | 'initialRoute', // defaults to `'none'`
+    resetOnBlur?: boolean, // defaults to `true`
+  |};
+
   /**
    * Tab Navigator
    */
@@ -400,7 +403,6 @@ declare module 'react-navigation' {
     navigationOptions?: NavigationScreenConfig<*>,
     // todo: type these as the real route names rather than 'string'
     order?: Array<string>,
-
     // Does the back button cause the router to switch to the initial tab
     backBehavior?: 'none' | 'initialRoute', // defaults `initialRoute`
   |};
@@ -449,7 +451,7 @@ declare module 'react-navigation' {
    */
 
   declare export type NavigationDispatch = (
-    action: PossiblyDeprecatedNavigationAction
+    action: NavigationAction
   ) => boolean;
 
   declare export type NavigationProp<S> = {
@@ -493,6 +495,18 @@ declare module 'react-navigation' {
       eventName: string,
       callback: NavigationEventCallback
     ) => NavigationEventSubscription,
+    push: (
+      routeName: string,
+      params?: NavigationParams,
+      action?: NavigationNavigateAction
+    ) => boolean,
+    replace: (
+      routeName: string,
+      params?: NavigationParams,
+      action?: NavigationNavigateAction
+    ) => boolean,
+    pop: (n?: number, params?: { immediate?: boolean }) => boolean,
+    popToTop: (params?: { immediate?: boolean }) => boolean,
   };
 
   declare export type NavigationNavigatorProps<O: {}, S: {}> = $Shape<{
@@ -714,7 +728,7 @@ declare module 'react-navigation' {
       toString: () => string,
     },
     init: {
-      (payload: { params?: NavigationParams }): NavigationInitAction,
+      (payload?: { params?: NavigationParams }): NavigationInitAction,
       toString: () => string,
     },
     navigate: {
@@ -744,9 +758,6 @@ declare module 'react-navigation' {
       (payload: { uri: string }): NavigationUriAction,
       toString: () => string,
     },
-    mapDeprecatedActionAndWarn: (
-      action: PossiblyDeprecatedNavigationAction
-    ) => NavigationAction,
   };
 
   declare type _RouterProp<S: NavigationState, O: {}> = {
@@ -767,7 +778,7 @@ declare module 'react-navigation' {
   >(
     router: NavigationRouter<S, O>,
     routeConfigs?: NavigationRouteConfigMap,
-    navigatorConfig?: NavigatorConfig,
+    navigatorConfig?: NavigatorConfig
   ): _NavigatorCreator<NavigationViewProps, S, O>;
 
   declare export function StackNavigator(
@@ -790,12 +801,21 @@ declare module 'react-navigation' {
   declare type _TabNavigatorConfig = {|
     ...NavigationTabRouterConfig,
     ..._TabViewConfig,
+    lazy?: boolean,
+    removeClippedSubviews?: boolean,
     containerOptions?: void,
   |};
   declare export function TabNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _TabNavigatorConfig
   ): NavigationContainer<*, *, *>;
+  declare type _SwitchNavigatorConfig = {|
+    ...NavigationSwitchRouterConfig,
+  |};
+  declare export function SwitchNavigator(
+    routeConfigs: NavigationRouteConfigMap,
+    config?: _SwitchNavigatorConfig
+  ): NavigationContainer<*, *, *>;
 
   declare type _DrawerViewConfig = {|
     drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
@@ -1026,6 +1046,7 @@ declare module 'react-navigation' {
   declare type _TabBarBottomProps = {
     activeTintColor: string,
     activeBackgroundColor: string,
+    adaptive?: boolean,
     inactiveTintColor: string,
     inactiveBackgroundColor: string,
     showLabel: boolean,
@@ -1059,4 +1080,7 @@ declare module 'react-navigation' {
   declare export function withNavigation<T: {}>(
     Component: React$ComponentType<T & _NavigationInjectedProps>
   ): React$ComponentType<T>;
+  declare export function withNavigationFocus<T: {}>(
+    Component: React$ComponentType<T & _NavigationInjectedProps>
+  ): React$ComponentType<T>;
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-navigation",
-  "version": "1.0.0-beta.28",
-  "description": "React Navigation",
+  "version": "1.3.2",
+  "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
     "url": "git@github.com:react-navigation/react-navigation.git",
@@ -33,6 +33,7 @@
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
     "react-native-drawer-layout-polyfill": "^1.3.2",
+    "react-native-safe-area-view": "^0.7.0",
     "react-native-tab-view": "^0.0.74"
   },
   "devDependencies": {
@@ -71,6 +72,10 @@
     "modulePathIgnorePatterns": ["examples"]
   },
   "lint-staged": {
-    "*.js": ["eslint --fix", "git add"]
+    "*.js": [
+      "eslint --fix",
+      "prettier --write flow/react-navigation.js",
+      "git add"
+    ]
   }
 }

scripts/compile-docs.js

@@ -1,36 +0,0 @@
-const path = require('path');
-var fs = require('fs');
-var join = require('path').join;
-
-var files = [];
-function crawl(location) {
-  var dir = fs.readdirSync(location);
-  dir.map(function(name, index) {
-    var stat = fs.statSync(join(location, name));
-    if (stat.isDirectory()) {
-      crawl(join(location, name));
-    } else if (name[0] !== '.') {
-      files.push(join(location, name));
-    }
-  });
-}
-crawl('docs');
-
-var names = files.map(function(file) {
-  const nameWithExt = file.split('docs' + path.sep)[1];
-  const name = nameWithExt.split('.md')[0];
-  return name;
-});
-
-var mdData = {};
-
-names.map(function(name) {
-  mdData[name] = fs.readFileSync('docs' + path.sep + name + '.md', {
-    encoding: 'utf8',
-  });
-});
-
-fs.writeFileSync(
-  'website' + path.sep + 'docs-dist.json',
-  JSON.stringify(mdData)
-);

scripts/deploy-website.sh

@@ -1,17 +0,0 @@
-#!/bin/sh
-
-# abort the script if there is a non-zero error
-set -e
-
-# show where we are on the machine
-pwd
-
-cd website
-
-npm run build
-
-cd build
-
-docker login -e $HEROKU_LOGIN -u $HEROKU_LOGIN -p $HEROKU_API_KEY registry.heroku.com
-docker build . -t registry.heroku.com/react-navigation/web
-docker push registry.heroku.com/react-navigation/web

src/NavigationActions.js

@@ -5,6 +5,7 @@ const POP = 'Navigation/POP';
 const POP_TO_TOP = 'Navigation/POP_TO_TOP';
 const PUSH = 'Navigation/PUSH';
 const RESET = 'Navigation/RESET';
+const REPLACE = 'Navigation/REPLACE';
 const SET_PARAMS = 'Navigation/SET_PARAMS';
 const URI = 'Navigation/URI';
 const COMPLETE_TRANSITION = 'Navigation/COMPLETE_TRANSITION';
@@ -17,6 +18,7 @@ const createAction = (type, fn) => {
 const back = createAction(BACK, (payload = {}) => ({
   type: BACK,
   key: payload.key,
+  immediate: payload.immediate,
 }));
 
 const init = createAction(INIT, (payload = {}) => {
@@ -55,6 +57,7 @@ const pop = createAction(POP, payload => ({
 const popToTop = createAction(POP_TO_TOP, payload => ({
   type: POP_TO_TOP,
   immediate: payload && payload.immediate,
+  key: payload && payload.key,
 }));
 
 const push = createAction(PUSH, payload => {
@@ -78,6 +81,16 @@ const reset = createAction(RESET, payload => ({
   actions: payload.actions,
 }));
 
+const replace = createAction(REPLACE, payload => ({
+  type: REPLACE,
+  key: payload.key,
+  newKey: payload.newKey,
+  params: payload.params,
+  action: payload.action,
+  routeName: payload.routeName,
+  immediate: payload.immediate,
+}));
+
 const setParams = createAction(SET_PARAMS, payload => ({
   type: SET_PARAMS,
   key: payload.key,
@@ -91,61 +104,9 @@ const uri = createAction(URI, payload => ({
 
 const completeTransition = createAction(COMPLETE_TRANSITION, payload => ({
   type: COMPLETE_TRANSITION,
+  key: payload && payload.key,
 }));
 
-const mapDeprecatedNavigateAction = action => {
-  if (action.type === 'Navigate') {
-    const payload = {
-      routeName: action.routeName,
-      params: action.params,
-    };
-    if (action.action) {
-      payload.action = mapDeprecatedNavigateAction(action.action);
-    }
-    return navigate(payload);
-  }
-  return action;
-};
-
-const mapDeprecatedAction = action => {
-  if (action.type === 'Back') {
-    return back(action);
-  } else if (action.type === 'Init') {
-    return init(action);
-  } else if (action.type === 'Navigate') {
-    return mapDeprecatedNavigateAction(action);
-  } else if (action.type === 'Reset') {
-    return reset({
-      index: action.index,
-      key: action.key,
-      actions: action.actions.map(mapDeprecatedNavigateAction),
-    });
-  } else if (action.type === 'SetParams') {
-    return setParams(action);
-  }
-  return action;
-};
-
-const mapDeprecatedActionAndWarn = action => {
-  const newAction = mapDeprecatedAction(action);
-  if (newAction !== action) {
-    const oldType = action.type;
-    const newType = newAction.type;
-    console.warn(
-      [
-        `The action type '${oldType}' has been renamed to '${newType}'.`,
-        `'${oldType}' will continue to work while in beta but will be removed`,
-        'in the first major release. Moving forward, you should use the',
-        'action constants and action creators exported by this library in',
-        "the 'actions' object.",
-        'See https://github.com/react-community/react-navigation/pull/120 for',
-        'more details.',
-      ].join(' ')
-    );
-  }
-  return newAction;
-};
-
 export default {
   // Action constants
   BACK,
@@ -155,6 +116,7 @@ export default {
   POP_TO_TOP,
   PUSH,
   RESET,
+  REPLACE,
   SET_PARAMS,
   URI,
   COMPLETE_TRANSITION,
@@ -167,10 +129,8 @@ export default {
   popToTop,
   push,
   reset,
+  replace,
   setParams,
   uri,
   completeTransition,
-
-  // TODO: Remove once old actions are deprecated
-  mapDeprecatedActionAndWarn,
 };

src/PlatformHelpers.native.js

@@ -1,9 +1,9 @@
 import {
   BackAndroid as DeprecatedBackAndroid,
   BackHandler as ModernBackHandler,
-  Linking,
+  MaskedViewIOS,
 } from 'react-native';
 
 const BackHandler = ModernBackHandler || DeprecatedBackAndroid;
 
-export { BackHandler, Linking };
+export { BackHandler, MaskedViewIOS };

src/PlatformHelpers.web.js

@@ -1,9 +1,6 @@
-export const Linking = {
-  addEventListener: () => {},
-  removeEventListener: () => {},
-  getInitialURL: () => Promise.reject('Unsupported platform'),
-};
+import React from 'react';
+import { BackHandler, View } from 'react-native';
 
-export const BackHandler = {
-  addEventListener: () => {},
-};
+const MaskedViewIOS = () => <View>{this.props.children}</View>;
+
+export { BackHandler, MaskedViewIOS };

src/__tests__/addNavigationHelpers-test.js

@@ -76,4 +76,43 @@ describe('addNavigationHelpers', () => {
     });
     expect(mockedDispatch.mock.calls.length).toBe(1);
   });
+
+  it('handles GetParams action', () => {
+    const mockedDispatch = jest
+      .fn(() => false)
+      .mockImplementationOnce(() => true);
+    expect(
+      addNavigationHelpers({
+        state: { key: 'B', routeName: 'Settings', params: { name: 'Peter' } },
+        dispatch: mockedDispatch,
+        addListener: dummyEventSubscriber,
+      }).getParam('name', 'Brent')
+    ).toEqual('Peter');
+  });
+
+  it('handles GetParams action with default param', () => {
+    const mockedDispatch = jest
+      .fn(() => false)
+      .mockImplementationOnce(() => true);
+    expect(
+      addNavigationHelpers({
+        state: { key: 'B', routeName: 'Settings' },
+        dispatch: mockedDispatch,
+        addListener: dummyEventSubscriber,
+      }).getParam('name', 'Brent')
+    ).toEqual('Brent');
+  });
+
+  it('handles GetParams action with param value as null', () => {
+    const mockedDispatch = jest
+      .fn(() => false)
+      .mockImplementationOnce(() => true);
+    expect(
+      addNavigationHelpers({
+        state: { key: 'B', routeName: 'Settings', params: { name: null } },
+        dispatch: mockedDispatch,
+        addListener: dummyEventSubscriber,
+      }).getParam('name')
+    ).toEqual(null);
+  });
 });

src/addNavigationHelpers.js

@@ -61,9 +61,29 @@ export default function(navigation) {
       return navigation.dispatch(NavigationActions.setParams({ params, key }));
     },
 
+    getParam: (paramName, defaultValue) => {
+      const params = navigation.state.params;
+
+      if (params && paramName in params) {
+        return params[paramName];
+      }
+
+      return defaultValue;
+    },
+
     push: (routeName, params, action) =>
       navigation.dispatch(
         NavigationActions.push({ routeName, params, action })
       ),
+
+    replace: (routeName, params, action) =>
+      navigation.dispatch(
+        NavigationActions.replace({
+          routeName,
+          params,
+          action,
+          key: navigation.state.key,
+        })
+      ),
   };
 }

src/createNavigationContainer.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { BackHandler, Linking } from './PlatformHelpers';
+import { Linking } from 'react-native';
+import { BackHandler } from './PlatformHelpers';
 import NavigationActions from './NavigationActions';
 import addNavigationHelpers from './addNavigationHelpers';
 import invariant from './utils/invariant';
@@ -24,9 +25,24 @@ export default function createNavigationContainer(Component) {
 
       this._validateProps(props);
 
+      this._initialAction = NavigationActions.init();
+
+      if (this._isStateful()) {
+        this.subs = BackHandler.addEventListener('hardwareBackPress', () => {
+          if (!this._isMounted) {
+            this.subs && this.subs.remove();
+          } else {
+            // dispatch returns true if the action results in a state change,
+            // and false otherwise. This maps well to what BackHandler expects
+            // from a callback -- true if handled, false if not handled
+            return this.dispatch(NavigationActions.back());
+          }
+        });
+      }
+
       this.state = {
         nav: this._isStateful()
-          ? Component.router.getStateForAction(NavigationActions.init())
+          ? Component.router.getStateForAction(this._initialAction)
           : null,
       };
     }
@@ -123,28 +139,34 @@ export default function createNavigationContainer(Component) {
     }
 
     componentDidMount() {
+      this._isMounted = true;
       if (!this._isStateful()) {
         return;
       }
 
-      this.subs = BackHandler.addEventListener('hardwareBackPress', () =>
-        this.dispatch(NavigationActions.back())
-      );
-
       Linking.addEventListener('url', this._handleOpenURL);
 
       Linking.getInitialURL().then(url => url && this._handleOpenURL({ url }));
+
+      this._actionEventSubscribers.forEach(subscriber =>
+        subscriber({
+          type: 'action',
+          action: this._initialAction,
+          state: this.state.nav,
+          lastState: null,
+        })
+      );
     }
 
     componentWillUnmount() {
+      this._isMounted = false;
       Linking.removeEventListener('url', this._handleOpenURL);
       this.subs && this.subs.remove();
     }
 
     // Per-tick temporary storage for state.nav
 
-    dispatch = inputAction => {
-      const action = NavigationActions.mapDeprecatedActionAndWarn(inputAction);
+    dispatch = action => {
       if (!this._isStateful()) {
         return false;
       }
@@ -154,7 +176,6 @@ export default function createNavigationContainer(Component) {
       const nav = Component.router.getStateForAction(action, oldNav);
       const dispatchActionEvents = () => {
         this._actionEventSubscribers.forEach(subscriber =>
-          // $FlowFixMe - Payload should probably understand generic state type
           subscriber({
             type: 'action',
             action,

src/navigators/DrawerNavigator.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Dimensions, Platform, ScrollView } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import createNavigator from './createNavigator';
 import createNavigationContainer from '../createNavigationContainer';
@@ -7,7 +8,6 @@ import TabRouter from '../routers/TabRouter';
 import DrawerScreen from '../views/Drawer/DrawerScreen';
 import DrawerView from '../views/Drawer/DrawerView';
 import DrawerItems from '../views/Drawer/DrawerNavigatorItems';
-import SafeAreaView from '../views/SafeAreaView';
 
 // A stack navigators props are the intersection between
 // the base navigator props (navgiation, screenProps, etc)

src/navigators/StackNavigator.js

@@ -15,6 +15,7 @@ export default (routeConfigMap, stackConfig = {}) => {
     initialRouteParams,
     paths,
     headerMode,
+    headerTransitionPreset,
     mode,
     cardStyle,
     transitionConfig,
@@ -38,13 +39,14 @@ export default (routeConfigMap, stackConfig = {}) => {
       <CardStackTransitioner
         {...props}
         headerMode={headerMode}
+        headerTransitionPreset={headerTransitionPreset}
         mode={mode}
         cardStyle={cardStyle}
         transitionConfig={transitionConfig}
         onTransitionStart={onTransitionStart}
         onTransitionEnd={(lastTransition, transition) => {
           const { state, dispatch } = props.navigation;
-          dispatch(NavigationActions.completeTransition());
+          dispatch(NavigationActions.completeTransition({ key: state.key }));
           onTransitionEnd && onTransitionEnd();
         }}
       />

src/navigators/SwitchNavigator.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import SwitchRouter from '../routers/SwitchRouter';
+import SwitchView from '../views/SwitchView/SwitchView';
+import createNavigationContainer from '../createNavigationContainer';
+import createNavigator from '../navigators/createNavigator';
+
+export default (routeConfigMap, switchConfig = {}) => {
+  const router = SwitchRouter(routeConfigMap, switchConfig);
+
+  const navigator = createNavigator(router, routeConfigMap, switchConfig)(
+    props => <SwitchView {...props} />
+  );
+
+  return createNavigationContainer(navigator);
+};

src/navigators/TabNavigator.js

@@ -19,6 +19,8 @@ const TabNavigator = (routeConfigs, config = {}) => {
     tabBarComponent,
     tabBarPosition,
     tabBarOptions,
+    lazy,
+    removeClippedSubviews,
     swipeEnabled,
     animationEnabled,
     configureTransition,
@@ -31,6 +33,8 @@ const TabNavigator = (routeConfigs, config = {}) => {
   const navigator = createNavigator(router, routeConfigs, config)(props => (
     <TabView
       {...props}
+      lazy={lazy}
+      removeClippedSubviews={removeClippedSubviews}
       tabBarComponent={tabBarComponent}
       tabBarPosition={tabBarPosition}
       tabBarOptions={tabBarOptions}

src/navigators/__tests__/StackNavigator-test.js

@@ -1,15 +1,22 @@
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import renderer from 'react-test-renderer';
 
 import StackNavigator from '../StackNavigator';
 
+const styles = StyleSheet.create({
+  header: {
+    opacity: 0.5,
+  },
+});
+
 class HomeScreen extends Component {
   static navigationOptions = ({ navigation }) => ({
     title: `Welcome ${
       navigation.state.params ? navigation.state.params.user : 'anonymous'
     }`,
     gesturesEnabled: true,
+    headerStyle: [{ backgroundColor: 'red' }, styles.header],
   });
 
   render() {

src/navigators/__tests__/SwitchNavigator-test.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import renderer from 'react-test-renderer';
+
+import SwitchNavigator from '../SwitchNavigator';
+
+const A = () => <View />;
+const B = () => <View />;
+const routeConfig = { A, B };
+
+describe('SwitchNavigator', () => {
+  it('renders successfully', () => {
+    const MySwitchNavigator = SwitchNavigator(routeConfig);
+    const rendered = renderer.create(<MySwitchNavigator />).toJSON();
+
+    expect(rendered).toMatchSnapshot();
+  });
+});

src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap

@@ -140,6 +140,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
           <View
             collapsable={undefined}
             onLayout={[Function]}
+            pointerEvents="box-none"
             style={
               Object {
                 "paddingBottom": 0,
@@ -187,6 +188,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                 <View
                   collapsable={undefined}
                   onLayout={[Function]}
+                  pointerEvents="box-none"
                   style={
                     Object {
                       "backgroundColor": "rgba(0, 0, 0, .04)",

src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -48,7 +48,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
         pointerEvents="auto"
         style={
           Object {
-            "backgroundColor": "#E9E9EF",
+            "backgroundColor": "#EFEFF4",
             "bottom": 0,
             "left": 0,
             "opacity": 1,
@@ -75,159 +75,109 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       />
     </View>
     <View
-      cardStyle={undefined}
       collapsable={undefined}
-      getScreenDetails={[Function]}
-      headerMode={undefined}
-      index={0}
-      layout={
+      onLayout={[Function]}
+      pointerEvents="box-none"
+      style={
         Object {
-          "height": 0,
-          "initHeight": 0,
-          "initWidth": 0,
-          "isMeasured": false,
-          "width": 0,
+          "backgroundColor": "red",
+          "borderBottomColor": "#A7A7AA",
+          "borderBottomWidth": 0.5,
+          "height": 64,
+          "opacity": 0.5,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 20,
         }
       }
-      leftInterpolator={[Function]}
-      mode="float"
-      navigation={
-        Object {
-          "addListener": [Function],
-          "dispatch": [Function],
-          "goBack": [Function],
-          "navigate": [Function],
-          "pop": [Function],
-          "popToTop": [Function],
-          "push": [Function],
-          "setParams": [Function],
-          "state": Object {
-            "index": 0,
-            "isTransitioning": false,
-            "routes": Array [
-              Object {
-                "key": "Init-id-0-1",
-                "routeName": "Home",
-              },
-            ],
-          },
-        }
-      }
-      rightInterpolator={[Function]}
-      router={
-        Object {
-          "getActionForPathAndParams": [Function],
-          "getComponentForRouteName": [Function],
-          "getComponentForState": [Function],
-          "getPathAndParamsForState": [Function],
-          "getScreenConfig": [Function],
-          "getScreenOptions": [Function],
-          "getStateForAction": [Function],
-        }
-      }
-      titleInterpolator={[Function]}
-      transitionConfig={undefined}
     >
       <View
-        collapsable={undefined}
-        onLayout={[Function]}
         style={
           Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "rgba(0, 0, 0, .3)",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
           }
         }
       >
         <View
           style={
             Object {
-              "flex": 1,
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
+            collapsable={undefined}
+            pointerEvents="box-none"
             style={
-              Array [
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                Object {
-                  "flexDirection": "row",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 70,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 70,
+                "top": 0,
+              }
             }
           >
-            <View
+            <Text
+              accessibilityTraits="header"
+              accessible={true}
+              allowFontScaling={true}
               collapsable={undefined}
-              pointerEvents="box-none"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              onLayout={[Function]}
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 70,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 70,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
+                  "color": "rgba(0, 0, 0, .9)",
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "marginHorizontal": 16,
+                  "textAlign": "center",
                 }
               }
             >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
-                collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  }
-                }
-              >
-                Welcome anonymous
-              </Text>
-            </View>
-            <View
-              collapsable={undefined}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
+              Welcome anonymous
+            </Text>
+          </View>
+          <View
+            collapsable={undefined}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "flexDirection": "row",
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
               }
-            >
-              <View />
-            </View>
+            }
+          >
+            <View />
           </View>
         </View>
       </View>
@@ -284,7 +234,7 @@ exports[`StackNavigator renders successfully 1`] = `
         pointerEvents="auto"
         style={
           Object {
-            "backgroundColor": "#E9E9EF",
+            "backgroundColor": "#EFEFF4",
             "bottom": 0,
             "left": 0,
             "opacity": 1,
@@ -311,141 +261,91 @@ exports[`StackNavigator renders successfully 1`] = `
       />
     </View>
     <View
-      cardStyle={undefined}
       collapsable={undefined}
-      getScreenDetails={[Function]}
-      headerMode={undefined}
-      index={0}
-      layout={
+      onLayout={[Function]}
+      pointerEvents="box-none"
+      style={
         Object {
-          "height": 0,
-          "initHeight": 0,
-          "initWidth": 0,
-          "isMeasured": false,
-          "width": 0,
+          "backgroundColor": "red",
+          "borderBottomColor": "#A7A7AA",
+          "borderBottomWidth": 0.5,
+          "height": 64,
+          "opacity": 0.5,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 20,
         }
       }
-      leftInterpolator={[Function]}
-      mode="float"
-      navigation={
-        Object {
-          "addListener": [Function],
-          "dispatch": [Function],
-          "goBack": [Function],
-          "navigate": [Function],
-          "pop": [Function],
-          "popToTop": [Function],
-          "push": [Function],
-          "setParams": [Function],
-          "state": Object {
-            "index": 0,
-            "isTransitioning": false,
-            "routes": Array [
-              Object {
-                "key": "Init-id-0-0",
-                "routeName": "Home",
-              },
-            ],
-          },
-        }
-      }
-      rightInterpolator={[Function]}
-      router={
-        Object {
-          "getActionForPathAndParams": [Function],
-          "getComponentForRouteName": [Function],
-          "getComponentForState": [Function],
-          "getPathAndParamsForState": [Function],
-          "getScreenConfig": [Function],
-          "getScreenOptions": [Function],
-          "getStateForAction": [Function],
-        }
-      }
-      titleInterpolator={[Function]}
-      transitionConfig={undefined}
     >
       <View
-        collapsable={undefined}
-        onLayout={[Function]}
         style={
           Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "rgba(0, 0, 0, .3)",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
           }
         }
       >
         <View
           style={
             Object {
-              "flex": 1,
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
+            collapsable={undefined}
+            pointerEvents="box-none"
             style={
-              Array [
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                Object {
-                  "flexDirection": "row",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
             }
           >
-            <View
+            <Text
+              accessibilityTraits="header"
+              accessible={true}
+              allowFontScaling={true}
               collapsable={undefined}
-              pointerEvents="box-none"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              onLayout={[Function]}
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
+                  "color": "rgba(0, 0, 0, .9)",
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "marginHorizontal": 16,
+                  "textAlign": "center",
                 }
               }
             >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
-                collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  }
-                }
-              >
-                Welcome anonymous
-              </Text>
-            </View>
+              Welcome anonymous
+            </Text>
           </View>
         </View>
       </View>

src/navigators/__tests__/__snapshots__/SwitchNavigator-test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwitchNavigator renders successfully 1`] = `<View />`;

src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap

@@ -55,13 +55,23 @@ exports[`TabNavigator renders successfully 1`] = `
       testID={undefined}
     >
       <View
+        collapsable={false}
+        removeClippedSubviews={false}
         style={
           Object {
             "flex": 1,
             "overflow": "hidden",
           }
         }
-      />
+      >
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
     </View>
   </View>
   <View
@@ -71,6 +81,7 @@ exports[`TabNavigator renders successfully 1`] = `
     <View
       collapsable={undefined}
       onLayout={[Function]}
+      pointerEvents="box-none"
       style={
         Object {
           "backgroundColor": "#F7F7F7",
@@ -105,68 +116,82 @@ exports[`TabNavigator renders successfully 1`] = `
             "alignItems": "center",
             "backgroundColor": "rgba(0, 0, 0, 0)",
             "flex": 1,
-            "justifyContent": "flex-end",
           }
         }
         testID={undefined}
       >
         <View
           style={
-            Object {
-              "flexGrow": 1,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+              },
+              Object {
+                "flexDirection": "column",
+                "justifyContent": "flex-end",
+              },
+              undefined,
+            ]
           }
         >
           <View
-            collapsable={undefined}
             style={
               Object {
-                "alignItems": "center",
-                "bottom": 0,
-                "justifyContent": "center",
-                "left": 0,
-                "opacity": 1,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "flexGrow": 1,
               }
             }
-          />
-          <View
+          >
+            <View
+              collapsable={undefined}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            />
+            <View
+              collapsable={undefined}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "bottom": 0,
+                  "justifyContent": "center",
+                  "left": 0,
+                  "opacity": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            />
+          </View>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
             collapsable={undefined}
+            ellipsizeMode="tail"
+            numberOfLines={1}
             style={
               Object {
-                "alignItems": "center",
-                "bottom": 0,
-                "justifyContent": "center",
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "backgroundColor": "transparent",
+                "color": "rgba(52, 120, 246, 1)",
+                "fontSize": 10,
+                "marginBottom": 1.5,
+                "textAlign": "center",
               }
             }
-          />
+          >
+            Welcome anonymous
+          </Text>
         </View>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          collapsable={undefined}
-          ellipsizeMode="tail"
-          style={
-            Object {
-              "backgroundColor": "transparent",
-              "color": "rgba(52, 120, 246, 1)",
-              "fontSize": 10,
-              "marginBottom": 1.5,
-              "marginLeft": 0,
-              "marginTop": 0,
-              "textAlign": "center",
-            }
-          }
-        >
-          Welcome anonymous
-        </Text>
       </View>
     </View>
   </View>

src/react-navigation.js

@@ -22,6 +22,9 @@ module.exports = {
   get StackNavigator() {
     return require('./navigators/StackNavigator').default;
   },
+  get SwitchNavigator() {
+    return require('./navigators/SwitchNavigator').default;
+  },
   get TabNavigator() {
     return require('./navigators/TabNavigator').default;
   },
@@ -36,6 +39,9 @@ module.exports = {
   get TabRouter() {
     return require('./routers/TabRouter').default;
   },
+  get SwitchRouter() {
+    return require('./routers/SwitchRouter').default;
+  },
 
   // Views
   get Transitioner() {
@@ -51,7 +57,7 @@ module.exports = {
     return require('./views/CardStack/Card').default;
   },
   get SafeAreaView() {
-    return require('./views/SafeAreaView').default;
+    return require('react-native-safe-area-view').default;
   },
 
   // Header
@@ -84,8 +90,16 @@ module.exports = {
     return require('./views/TabView/TabBarBottom').default;
   },
 
+  // SwitchView
+  get SwitchView() {
+    return require('./views/SwitchView/SwitchView').default;
+  },
+
   // HOCs
   get withNavigation() {
     return require('./views/withNavigation').default;
   },
+  get withNavigationFocus() {
+    return require('./views/withNavigationFocus').default;
+  },
 };

src/react-navigation.web.js

@@ -32,4 +32,7 @@ module.exports = {
   get withNavigation() {
     return require('./views/withNavigation').default;
   },
+  get withNavigationFocus() {
+    return require('./views/withNavigationFocus').default;
+  },
 };

src/routers/StackRouter.js

@@ -51,6 +51,61 @@ export default (routeConfigs, stackConfig = {}) => {
   const pathsByRouteNames = { ...stackConfig.paths } || {};
   let paths = [];
 
+  function getInitialState(action) {
+    let route = {};
+    const childRouter = childRouters[action.routeName];
+
+    // This is a push-like action, and childRouter will be a router or null if we are responsible for this routeName
+    if (behavesLikePushAction(action) && childRouter !== undefined) {
+      let childState = {};
+      // The router is null for normal leaf routes
+      if (childRouter !== null) {
+        const childAction =
+          action.action || NavigationActions.init({ params: action.params });
+        childState = childRouter.getStateForAction(childAction);
+      }
+      return {
+        key: 'StackRouterRoot',
+        isTransitioning: false,
+        index: 0,
+        routes: [
+          {
+            params: action.params,
+            ...childState,
+            key: action.key || generateKey(),
+            routeName: action.routeName,
+          },
+        ],
+      };
+    }
+
+    if (initialChildRouter) {
+      route = initialChildRouter.getStateForAction(
+        NavigationActions.navigate({
+          routeName: initialRouteName,
+          params: initialRouteParams,
+        })
+      );
+    }
+    const params = (route.params || action.params || initialRouteParams) && {
+      ...(route.params || {}),
+      ...(action.params || {}),
+      ...(initialRouteParams || {}),
+    };
+    route = {
+      ...route,
+      ...(params ? { params } : {}),
+      routeName: initialRouteName,
+      key: action.key || generateKey(),
+    };
+    return {
+      key: 'StackRouterRoot',
+      isTransitioning: false,
+      index: 0,
+      routes: [route],
+    };
+  }
+
   // Build paths for each route
   routeNames.forEach(routeName => {
     let pathPattern =
@@ -81,7 +136,6 @@ export default (routeConfigs, stackConfig = {}) => {
   });
 
   paths = Object.entries(pathsByRouteNames);
-  /* $FlowFixMe */
   paths.sort((a: [string, *], b: [string, *]) => b[1].priority - a[1].priority);
 
   return {
@@ -101,54 +155,11 @@ export default (routeConfigs, stackConfig = {}) => {
     getStateForAction(action, state) {
       // Set up the initial state if needed
       if (!state) {
-        let route = {};
-        if (
-          behavesLikePushAction(action) &&
-          childRouters[action.routeName] !== undefined
-        ) {
-          return {
-            isTransitioning: false,
-            index: 0,
-            routes: [
-              {
-                routeName: action.routeName,
-                params: action.params,
-                type: undefined,
-                key: `Init-${generateKey()}`,
-              },
-            ],
-          };
-        }
-        if (initialChildRouter) {
-          route = initialChildRouter.getStateForAction(
-            NavigationActions.navigate({
-              routeName: initialRouteName,
-              params: initialRouteParams,
-            })
-          );
-        }
-        const params = (route.params ||
-          action.params ||
-          initialRouteParams) && {
-          ...(route.params || {}),
-          ...(action.params || {}),
-          ...(initialRouteParams || {}),
-        };
-        route = {
-          ...route,
-          routeName: initialRouteName,
-          key: `Init-${generateKey()}`,
-          ...(params ? { params } : {}),
-        };
-        // eslint-disable-next-line no-param-reassign
-        state = {
-          isTransitioning: false,
-          index: 0,
-          routes: [route],
-        };
+        return getInitialState(action);
       }
 
-      // Check if a child scene wants to handle the action as long as it is not a reset to the root stack
+      // Check if the focused child scene wants to handle the action, as long as
+      // it is not a reset to the root stack
       if (action.type !== NavigationActions.RESET || action.key !== null) {
         const keyIndex = action.key
           ? StateUtils.indexOf(state, action.key)
@@ -171,19 +182,8 @@ export default (routeConfigs, stackConfig = {}) => {
         }
       }
 
-      //Handle pop-to-top behavior. Make sure this happens after children have had a chance to handle the action, so that the inner stack pops to top first.
-      if (action.type === NavigationActions.POP_TO_TOP) {
-        if (state.index !== 0) {
-          return {
-            isTransitioning: action.immediate !== true,
-            index: 0,
-            routes: [state.routes[0]],
-          };
-        }
-        return state;
-      }
-
-      // Handle explicit push navigation action. Make sure this happens after children have had a chance to handle the action
+      // Handle explicit push navigation action. This must happen after the
+      // focused child router has had a chance to handle the action.
       if (
         behavesLikePushAction(action) &&
         childRouters[action.routeName] !== undefined
@@ -195,6 +195,7 @@ export default (routeConfigs, stackConfig = {}) => {
           action.type !== NavigationActions.PUSH || action.key == null,
           'StackRouter does not support key on the push action'
         );
+
         // With the navigate action, the key may be provided for pushing, or to navigate back to the key
         if (action.key) {
           const lastRouteIndex = state.routes.findIndex(
@@ -205,7 +206,10 @@ export default (routeConfigs, stackConfig = {}) => {
             if (state.index === lastRouteIndex && !action.params) {
               return state;
             }
-            const routes = [...state.routes];
+
+            // Remove the now unused routes at the tail of the routes array
+            const routes = state.routes.slice(0, lastRouteIndex + 1);
+
             // Apply params if provided, otherwise leave route identity intact
             if (action.params) {
               const route = state.routes.find(r => r.key === action.key);
@@ -229,36 +233,37 @@ export default (routeConfigs, stackConfig = {}) => {
             };
           }
         }
-        const key = action.key || generateKey();
+
         if (childRouter) {
           const childAction =
             action.action || NavigationActions.init({ params: action.params });
           route = {
             params: action.params,
+            // merge the child state in this order to allow params override
             ...childRouter.getStateForAction(childAction),
-            key,
             routeName: action.routeName,
+            key: action.key || generateKey(),
           };
         } else {
           route = {
             params: action.params,
-            key,
             routeName: action.routeName,
+            key: action.key || generateKey(),
           };
         }
         return {
           ...StateUtils.push(state, route),
           isTransitioning: action.immediate !== true,
         };
-      }
-
-      if (
-        action.type === NavigationActions.COMPLETE_TRANSITION &&
-        state.isTransitioning
+      } else if (
+        action.type === NavigationActions.PUSH &&
+        childRouters[action.routeName] === undefined
       ) {
+        // If we've made it this far with a push action, we return the
+        // state with a new identity to prevent the action from bubbling
+        // back up.
         return {
           ...state,
-          isTransitioning: false,
         };
       }
 
@@ -287,16 +292,79 @@ export default (routeConfigs, stackConfig = {}) => {
               routeToPush = navigatedChildRoute;
             }
             if (routeToPush) {
-              return StateUtils.push(state, {
+              const route = {
                 ...routeToPush,
-                key: generateKey(),
                 routeName: childRouterName,
-              });
+                key: action.key || generateKey(),
+              };
+              return StateUtils.push(state, route);
             }
           }
         }
       }
 
+      // Handle pop-to-top behavior. Make sure this happens after children have had a chance to handle the action, so that the inner stack pops to top first.
+      if (action.type === NavigationActions.POP_TO_TOP) {
+        // Refuse to handle pop to top if a key is given that doesn't correspond
+        // to this router
+        if (action.key && state.key !== action.key) {
+          return state;
+        }
+
+        // If we're already at the top, then we return the state with a new
+        // identity so that the action is handled by this router.
+        if (state.index === 0) {
+          return {
+            ...state,
+          };
+        } else {
+          return {
+            ...state,
+            isTransitioning: action.immediate !== true,
+            index: 0,
+            routes: [state.routes[0]],
+          };
+        }
+        return state;
+      }
+
+      // Handle replace action
+      if (action.type === NavigationActions.REPLACE) {
+        const routeIndex = state.routes.findIndex(r => r.key === action.key);
+        // Only replace if the key matches one of our routes
+        if (routeIndex !== -1) {
+          const childRouter = childRouters[action.routeName];
+          let childState = {};
+          if (childRouter) {
+            const childAction =
+              action.action ||
+              NavigationActions.init({ params: action.params });
+            childState = childRouter.getStateForAction(childAction);
+          }
+          const routes = [...state.routes];
+          routes[routeIndex] = {
+            params: action.params,
+            // merge the child state in this order to allow params override
+            ...childState,
+            routeName: action.routeName,
+            key: action.newKey || generateKey(),
+          };
+          return { ...state, routes };
+        }
+      }
+
+      // Update transitioning state
+      if (
+        action.type === NavigationActions.COMPLETE_TRANSITION &&
+        (action.key == null || action.key === state.key) &&
+        state.isTransitioning
+      ) {
+        return {
+          ...state,
+          isTransitioning: false,
+        };
+      }
+
       if (action.type === NavigationActions.SET_PARAMS) {
         const key = action.key;
         const lastRoute = state.routes.find(route => route.key === key);
@@ -324,26 +392,29 @@ export default (routeConfigs, stackConfig = {}) => {
           // undefined on either the state or the action
           return state;
         }
-        const resetAction = action;
+        const newStackActions = action.actions;
 
         return {
           ...state,
-          routes: resetAction.actions.map(childAction => {
-            const router = childRouters[childAction.routeName];
+          routes: newStackActions.map(newStackAction => {
+            const router = childRouters[newStackAction.routeName];
+
+            let childState = {};
+
             if (router) {
-              return {
-                ...childAction,
-                ...router.getStateForAction(childAction),
-                routeName: childAction.routeName,
-                key: generateKey(),
-              };
+              const childAction =
+                newStackAction.action ||
+                NavigationActions.init({ params: newStackAction.params });
+
+              childState = router.getStateForAction(childAction);
             }
-            const route = {
-              ...childAction,
-              key: generateKey(),
+
+            return {
+              params: newStackAction.params,
+              ...childState,
+              routeName: newStackAction.routeName,
+              key: newStackAction.key || generateKey(),
             };
-            delete route.type;
-            return route;
           }),
           index: action.index,
         };
@@ -363,6 +434,7 @@ export default (routeConfigs, stackConfig = {}) => {
           const backRoute = state.routes.find(route => route.key === key);
           backRouteIndex = state.routes.indexOf(backRoute);
         }
+
         if (backRouteIndex > 0) {
           return {
             ...state,
@@ -370,6 +442,13 @@ export default (routeConfigs, stackConfig = {}) => {
             index: backRouteIndex - 1,
             isTransitioning: immediate !== true,
           };
+        } else if (
+          backRouteIndex === 0 &&
+          action.type === NavigationActions.POP
+        ) {
+          return {
+            ...state,
+          };
         }
       }
       return state;
@@ -474,7 +553,15 @@ export default (routeConfigs, stackConfig = {}) => {
         }
         const nextResult = result || {};
         const paramName = key.name;
-        nextResult[paramName] = matchResult;
+
+        let decodedMatchResult;
+        try {
+          decodedMatchResult = decodeURIComponent(matchResult);
+        } catch (e) {
+          // ignore `URIError: malformed URI`
+        }
+
+        nextResult[paramName] = decodedMatchResult || matchResult;
         return nextResult;
       }, queryParams);
 

src/routers/SwitchRouter.js

@@ -0,0 +1,360 @@
+import invariant from '../utils/invariant';
+import getScreenForRouteName from './getScreenForRouteName';
+import createConfigGetter from './createConfigGetter';
+
+import NavigationActions from '../NavigationActions';
+import validateRouteConfigMap from './validateRouteConfigMap';
+import getScreenConfigDeprecated from './getScreenConfigDeprecated';
+
+function childrenUpdateWithoutSwitchingIndex(actionType) {
+  return [
+    NavigationActions.SET_PARAMS,
+    NavigationActions.COMPLETE_TRANSITION,
+  ].includes(actionType);
+}
+
+export default (routeConfigs, config = {}) => {
+  // Fail fast on invalid route definitions
+  validateRouteConfigMap(routeConfigs);
+
+  const order = config.order || Object.keys(routeConfigs);
+  const paths = config.paths || {};
+  const initialRouteParams = config.initialRouteParams;
+  const initialRouteName = config.initialRouteName || order[0];
+  const backBehavior = config.backBehavior || 'none';
+  const shouldBackNavigateToInitialRoute = backBehavior === 'initialRoute';
+  const resetOnBlur = config.hasOwnProperty('resetOnBlur')
+    ? config.resetOnBlur
+    : true;
+  const initialRouteIndex = order.indexOf(initialRouteName);
+  const childRouters = {};
+
+  order.forEach(routeName => {
+    const routeConfig = routeConfigs[routeName];
+    paths[routeName] =
+      typeof routeConfig.path === 'string' ? routeConfig.path : routeName;
+    childRouters[routeName] = null;
+    const screen = getScreenForRouteName(routeConfigs, routeName);
+    if (screen.router) {
+      childRouters[routeName] = screen.router;
+    }
+  });
+  if (initialRouteIndex === -1) {
+    throw new Error(
+      `Invalid initialRouteName '${initialRouteName}'.` +
+        `Should be one of ${order.map(n => `"${n}"`).join(', ')}`
+    );
+  }
+
+  function resetChildRoute(routeName) {
+    const params =
+      routeName === initialRouteName ? initialRouteParams : undefined;
+    const childRouter = childRouters[routeName];
+    if (childRouter) {
+      const childAction = NavigationActions.init();
+      return {
+        ...childRouter.getStateForAction(childAction),
+        key: routeName,
+        routeName,
+        params,
+      };
+    }
+    return {
+      key: routeName,
+      routeName,
+      params,
+    };
+  }
+
+  return {
+    getInitialState() {
+      const routes = order.map(resetChildRoute);
+      return {
+        routes,
+        index: initialRouteIndex,
+        isTransitioning: false,
+      };
+    },
+
+    getNextState(prevState, possibleNextState) {
+      let nextState;
+      if (prevState.index !== possibleNextState.index && resetOnBlur) {
+        const prevRouteName = prevState.routes[prevState.index].routeName;
+        const nextRoutes = [...possibleNextState.routes];
+        nextRoutes[prevState.index] = resetChildRoute(prevRouteName);
+
+        return {
+          ...possibleNextState,
+          routes: nextRoutes,
+        };
+      } else {
+        nextState = possibleNextState;
+      }
+
+      return nextState;
+    },
+
+    getStateForAction(action, inputState) {
+      let prevState = inputState ? { ...inputState } : inputState;
+      let state = inputState || this.getInitialState();
+      let activeChildIndex = state.index;
+
+      if (action.type === NavigationActions.INIT) {
+        // NOTE(brentvatne): this seems weird... why are we merging these
+        // params into child routes?
+        // ---------------------------------------------------------------
+        // Merge any params from the action into all the child routes
+        const { params } = action;
+        if (params) {
+          state.routes = state.routes.map(route => ({
+            ...route,
+            params: {
+              ...route.params,
+              ...params,
+              ...(route.routeName === initialRouteName
+                ? initialRouteParams
+                : null),
+            },
+          }));
+        }
+      }
+
+      // Let the current child handle it
+      const activeChildLastState = state.routes[state.index];
+      const activeChildRouter = childRouters[order[state.index]];
+      if (activeChildRouter) {
+        const activeChildState = activeChildRouter.getStateForAction(
+          action,
+          activeChildLastState
+        );
+        if (!activeChildState && inputState) {
+          return null;
+        }
+        if (activeChildState && activeChildState !== activeChildLastState) {
+          const routes = [...state.routes];
+          routes[state.index] = activeChildState;
+          return this.getNextState(prevState, {
+            ...state,
+            routes,
+          });
+        }
+      }
+
+      // Handle tab changing. Do this after letting the current tab try to
+      // handle the action, to allow inner children to change first
+      if (backBehavior !== 'none') {
+        const isBackEligible =
+          action.key == null || action.key === activeChildLastState.key;
+        if (action.type === NavigationActions.BACK) {
+          if (isBackEligible && shouldBackNavigateToInitialRoute) {
+            activeChildIndex = initialRouteIndex;
+          } else {
+            return state;
+          }
+        }
+      }
+
+      let didNavigate = false;
+      if (action.type === NavigationActions.NAVIGATE) {
+        const navigateAction = action;
+        didNavigate = !!order.find((childId, i) => {
+          if (childId === navigateAction.routeName) {
+            activeChildIndex = i;
+            return true;
+          }
+          return false;
+        });
+        if (didNavigate) {
+          const childState = state.routes[activeChildIndex];
+          let newChildState;
+
+          const childRouter = childRouters[action.routeName];
+
+          if (action.action) {
+            newChildState = childRouter
+              ? childRouter.getStateForAction(action.action, childState)
+              : null;
+          } else if (!childRouter && action.params) {
+            newChildState = {
+              ...childState,
+              params: {
+                ...(childState.params || {}),
+                ...action.params,
+              },
+            };
+          }
+
+          if (newChildState && newChildState !== childState) {
+            const routes = [...state.routes];
+            routes[activeChildIndex] = newChildState;
+            return this.getNextState(prevState, {
+              ...state,
+              routes,
+              index: activeChildIndex,
+            });
+          }
+        }
+      }
+
+      if (action.type === NavigationActions.SET_PARAMS) {
+        const key = action.key;
+        const lastRoute = state.routes.find(route => route.key === key);
+        if (lastRoute) {
+          const params = {
+            ...lastRoute.params,
+            ...action.params,
+          };
+          const routes = [...state.routes];
+          routes[state.routes.indexOf(lastRoute)] = {
+            ...lastRoute,
+            params,
+          };
+          return this.getNextState(prevState, {
+            ...state,
+            routes,
+          });
+        }
+      }
+
+      if (activeChildIndex !== state.index) {
+        return this.getNextState(prevState, {
+          ...state,
+          index: activeChildIndex,
+        });
+      } else if (didNavigate && !inputState) {
+        return state;
+      } else if (didNavigate) {
+        return null;
+      }
+
+      // Let other children handle it and switch to the first child that returns a new state
+      let index = state.index;
+      let routes = state.routes;
+      order.find((childId, i) => {
+        const childRouter = childRouters[childId];
+        if (i === index) {
+          return false;
+        }
+        let childState = routes[i];
+        if (childRouter) {
+          childState = childRouter.getStateForAction(action, childState);
+        }
+        if (!childState) {
+          index = i;
+          return true;
+        }
+        if (childState !== routes[i]) {
+          routes = [...routes];
+          routes[i] = childState;
+          index = i;
+          return true;
+        }
+        return false;
+      });
+
+      // Nested routers can be updated after switching children with actions such as SET_PARAMS
+      // and COMPLETE_TRANSITION.
+      // NOTE: This may be problematic with custom routers because we whitelist the actions
+      // that can be handled by child routers without automatically changing index.
+      if (childrenUpdateWithoutSwitchingIndex(action.type)) {
+        index = state.index;
+      }
+
+      if (index !== state.index || routes !== state.routes) {
+        return this.getNextState(prevState, {
+          ...state,
+          index,
+          routes,
+        });
+      }
+      return state;
+    },
+
+    getComponentForState(state) {
+      const routeName = state.routes[state.index].routeName;
+      invariant(
+        routeName,
+        `There is no route defined for index ${state.index}. Check that
+        that you passed in a navigation state with a valid tab/screen index.`
+      );
+      const childRouter = childRouters[routeName];
+      if (childRouter) {
+        return childRouter.getComponentForState(state.routes[state.index]);
+      }
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getComponentForRouteName(routeName) {
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getPathAndParamsForState(state) {
+      const route = state.routes[state.index];
+      const routeName = order[state.index];
+      const subPath = paths[routeName];
+      const screen = getScreenForRouteName(routeConfigs, routeName);
+      let path = subPath;
+      let params = route.params;
+      if (screen && screen.router) {
+        const stateRoute = route;
+        // If it has a router it's a navigator.
+        // If it doesn't have router it's an ordinary React component.
+        const child = screen.router.getPathAndParamsForState(stateRoute);
+        path = subPath ? `${subPath}/${child.path}` : child.path;
+        params = child.params ? { ...params, ...child.params } : params;
+      }
+      return {
+        path,
+        params,
+      };
+    },
+
+    /**
+     * Gets an optional action, based on a relative path and query params.
+     *
+     * This will return null if there is no action matched
+     */
+    getActionForPathAndParams(path, params) {
+      return (
+        order
+          .map(childId => {
+            const parts = path.split('/');
+            const pathToTest = paths[childId];
+            if (parts[0] === pathToTest) {
+              const childRouter = childRouters[childId];
+              const action = NavigationActions.navigate({
+                routeName: childId,
+              });
+              if (childRouter && childRouter.getActionForPathAndParams) {
+                action.action = childRouter.getActionForPathAndParams(
+                  parts.slice(1).join('/'),
+                  params
+                );
+              } else if (params) {
+                action.params = params;
+              }
+              return action;
+            }
+            return null;
+          })
+          .find(action => !!action) ||
+        order
+          .map(childId => {
+            const childRouter = childRouters[childId];
+            return (
+              childRouter && childRouter.getActionForPathAndParams(path, params)
+            );
+          })
+          .find(action => !!action) ||
+        null
+      );
+    },
+
+    getScreenOptions: createConfigGetter(
+      routeConfigs,
+      config.navigationOptions
+    ),
+
+    getScreenConfig: getScreenConfigDeprecated,
+  };
+};

src/routers/TabRouter.js

@@ -6,6 +6,13 @@ import NavigationActions from '../NavigationActions';
 import validateRouteConfigMap from './validateRouteConfigMap';
 import getScreenConfigDeprecated from './getScreenConfigDeprecated';
 
+function childrenUpdateWithoutSwitchingIndex(actionType) {
+  return [
+    NavigationActions.SET_PARAMS,
+    NavigationActions.COMPLETE_TRANSITION,
+  ].includes(actionType);
+}
+
 export default (routeConfigs, config = {}) => {
   // Fail fast on invalid route definitions
   validateRouteConfigMap(routeConfigs);
@@ -23,8 +30,9 @@ export default (routeConfigs, config = {}) => {
     paths[routeName] =
       typeof routeConfig.path === 'string' ? routeConfig.path : routeName;
     tabRouters[routeName] = null;
-    if (routeConfig.screen && routeConfig.screen.router) {
-      tabRouters[routeName] = routeConfig.screen.router;
+    const screen = getScreenForRouteName(routeConfigs, routeName);
+    if (screen.router) {
+      tabRouters[routeName] = screen.router;
     }
   });
   if (initialRouteIndex === -1) {
@@ -213,9 +221,13 @@ export default (routeConfigs, config = {}) => {
       });
       // console.log(`${order.join('-')}: Processed other tabs:`, {lastIndex: state.index, index});
 
-      // keep active tab index if action type is SET_PARAMS
-      index =
-        action.type === NavigationActions.SET_PARAMS ? state.index : index;
+      // Nested routers can be updated after switching tabs with actions such as SET_PARAMS
+      // and COMPLETE_TRANSITION.
+      // NOTE: This may be problematic with custom routers because we whitelist the actions
+      // that can be handled by child routers without automatically changing index.
+      if (childrenUpdateWithoutSwitchingIndex(action.type)) {
+        index = state.index;
+      }
 
       if (index !== state.index || routes !== state.routes) {
         return {
@@ -228,7 +240,7 @@ export default (routeConfigs, config = {}) => {
     },
 
     getComponentForState(state) {
-      const routeName = order[state.index];
+      const routeName = state.routes[state.index].routeName;
       invariant(
         routeName,
         `There is no route defined for index ${state.index}. Check that

src/routers/__tests__/Routers-test.js

@@ -7,13 +7,18 @@ import TabRouter from '../TabRouter';
 
 import NavigationActions from '../../NavigationActions';
 import addNavigationHelpers from '../../addNavigationHelpers';
+import { _TESTING_ONLY_normalize_keys } from '../KeyGenerator';
+
+beforeEach(() => {
+  _TESTING_ONLY_normalize_keys();
+});
 
 const ROUTERS = {
   TabRouter,
   StackRouter,
 };
 
-const dummyEventSubscriber = (name: string, handler: (*) => void) => ({
+const dummyEventSubscriber = (name, handler) => ({
   remove: () => {},
 });
 
@@ -105,8 +110,8 @@ test('Handles no-op actions with tabs within stack router', () => {
     type: NavigationActions.NAVIGATE,
     routeName: 'Qux',
   });
-  expect(state1.routes[0].key).toEqual('Init-id-0-0');
-  expect(state2.routes[0].key).toEqual('Init-id-0-1');
+  expect(state1.routes[0].key).toEqual('id-0');
+  expect(state2.routes[0].key).toEqual('id-1');
   state1.routes[0].key = state2.routes[0].key;
   expect(state1).toEqual(state2);
   const state3 = TestRouter.getStateForAction(
@@ -131,9 +136,10 @@ test('Handles deep action', () => {
   const expectedState = {
     index: 0,
     isTransitioning: false,
+    key: 'StackRouterRoot',
     routes: [
       {
-        key: 'Init-id-0-2',
+        key: 'id-0',
         routeName: 'Bar',
       },
     ],
@@ -173,8 +179,8 @@ test('Supports lazily-evaluated getScreen', () => {
     immediate: true,
     routeName: 'Qux',
   });
-  expect(state1.routes[0].key).toEqual('Init-id-0-4');
-  expect(state2.routes[0].key).toEqual('Init-id-0-5');
+  expect(state1.routes[0].key).toEqual('id-0');
+  expect(state2.routes[0].key).toEqual('id-1');
   state1.routes[0].key = state2.routes[0].key;
   expect(state1).toEqual(state2);
   const state3 = TestRouter.getStateForAction(
@@ -187,3 +193,60 @@ test('Supports lazily-evaluated getScreen', () => {
   );
   expect(state2).toEqual(state3);
 });
+
+test('Does not switch tab index when TabRouter child handles COMPLETE_NAVIGATION or SET_PARAMS', () => {
+  const FooStackNavigator = () => <div />;
+  const BarView = () => <div />;
+  FooStackNavigator.router = StackRouter({
+    Foo: {
+      screen: BarView,
+    },
+    Bar: {
+      screen: BarView,
+    },
+  });
+
+  const TestRouter = TabRouter({
+    Zap: { screen: FooStackNavigator },
+    Zoo: { screen: FooStackNavigator },
+  });
+
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+
+  // Navigate to the second screen in the first tab
+  const state2 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+    },
+    state1
+  );
+
+  // Switch tabs
+  const state3 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Zoo',
+    },
+    state2
+  );
+
+  const stateAfterCompleteTransition = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.COMPLETE_TRANSITION,
+      key: state2.routes[0].key,
+    },
+    state3
+  );
+  const stateAfterSetParams = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.SET_PARAMS,
+      key: state1.routes[0].routes[0].key,
+      params: { key: 'value' },
+    },
+    state3
+  );
+
+  expect(stateAfterCompleteTransition.index).toEqual(1);
+  expect(stateAfterSetParams.index).toEqual(1);
+});

src/routers/__tests__/StackRouter-test.js

@@ -354,7 +354,8 @@ describe('StackRouter', () => {
     expect(initState).toEqual({
       index: 0,
       isTransitioning: false,
-      routes: [{ key: 'Init-id-0', routeName: 'foo' }],
+      key: 'StackRouterRoot',
+      routes: [{ key: 'id-0', routeName: 'foo' }],
     });
     const pushedState = TestRouter.getStateForAction(
       NavigationActions.navigate({ routeName: 'qux' }),
@@ -365,6 +366,126 @@ describe('StackRouter', () => {
     expect(pushedState.routes[1].routes[1].routeName).toEqual('qux');
   });
 
+  test('pop does not bubble up', () => {
+    const ChildNavigator = () => <div />;
+    ChildNavigator.router = StackRouter({
+      Baz: { screen: () => <div /> },
+      Qux: { screen: () => <div /> },
+    });
+    const router = StackRouter({
+      Foo: { screen: () => <div /> },
+      Bar: { screen: ChildNavigator },
+    });
+
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+        key: 'StackRouterRoot',
+      },
+      state
+    );
+    const barKey = state2.routes[1].routes[0].key;
+    const state3 = router.getStateForAction(
+      {
+        type: NavigationActions.POP,
+      },
+      state2
+    );
+    expect(state3 && state3.index).toEqual(1);
+    expect(state3 && state3.routes[1].index).toEqual(0);
+  });
+
+  test('push does not bubble up', () => {
+    const ChildNavigator = () => <div />;
+    ChildNavigator.router = StackRouter({
+      Baz: { screen: () => <div /> },
+      Qux: { screen: () => <div /> },
+    });
+    const router = StackRouter({
+      Foo: { screen: () => <div /> },
+      Bar: { screen: ChildNavigator },
+      Bad: { screen: () => <div /> },
+    });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+      },
+      state
+    );
+    const barKey = state2.routes[1].routes[0].key;
+    const state3 = router.getStateForAction(
+      {
+        type: NavigationActions.PUSH,
+        routeName: 'Bad',
+      },
+      state2
+    );
+    expect(state3 && state3.index).toEqual(1);
+    expect(state3 && state3.routes.length).toEqual(2);
+  });
+
+  test('popToTop does not bubble up', () => {
+    const ChildNavigator = () => <div />;
+    ChildNavigator.router = StackRouter({
+      Baz: { screen: () => <div /> },
+      Qux: { screen: () => <div /> },
+    });
+    const router = StackRouter({
+      Foo: { screen: () => <div /> },
+      Bar: { screen: ChildNavigator },
+    });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+      },
+      state
+    );
+    const barKey = state2.routes[1].routes[0].key;
+    const state3 = router.getStateForAction(
+      {
+        type: NavigationActions.POP_TO_TOP,
+      },
+      state2
+    );
+    expect(state3 && state3.index).toEqual(1);
+    expect(state3 && state3.routes[1].index).toEqual(0);
+  });
+
+  test('popToTop targets StackRouter by key if specified', () => {
+    const ChildNavigator = () => <div />;
+    ChildNavigator.router = StackRouter({
+      Baz: { screen: () => <div /> },
+      Qux: { screen: () => <div /> },
+    });
+    const router = StackRouter({
+      Foo: { screen: () => <div /> },
+      Bar: { screen: ChildNavigator },
+    });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+      },
+      state
+    );
+    const barKey = state2.routes[1].routes[0].key;
+    const state3 = router.getStateForAction(
+      {
+        type: NavigationActions.POP_TO_TOP,
+        key: state2.key,
+      },
+      state2
+    );
+    expect(state3 && state3.index).toEqual(0);
+  });
+
   test('popToTop works as expected', () => {
     const TestRouter = StackRouter({
       foo: { screen: () => <div /> },
@@ -421,6 +542,40 @@ describe('StackRouter', () => {
     expect(pushedTwiceState.routes[2].routeName).toEqual('bar');
   });
 
+  test('Navigate from top propagates to any arbitary depth of stacks', () => {
+    const GrandChildNavigator = () => <div />;
+    GrandChildNavigator.router = StackRouter({
+      Quux: { screen: () => <div /> },
+      Corge: { screen: () => <div /> },
+    });
+
+    const ChildNavigator = () => <div />;
+    ChildNavigator.router = StackRouter({
+      Baz: { screen: () => <div /> },
+      Woo: { screen: () => <div /> },
+      Qux: { screen: GrandChildNavigator },
+    });
+
+    const Parent = StackRouter({
+      Foo: { screen: () => <div /> },
+      Bar: { screen: ChildNavigator },
+    });
+
+    const state = Parent.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = Parent.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Corge',
+      },
+      state
+    );
+
+    expect(state2.index).toEqual(1);
+    expect(state2.routes[1].index).toEqual(1);
+    expect(state2.routes[1].routes[1].index).toEqual(1);
+    expect(state2.routes[1].routes[1].routes[1].routeName).toEqual('Corge');
+  });
+
   test('Navigate with key is idempotent', () => {
     const TestRouter = StackRouter({
       foo: { screen: () => <div /> },
@@ -461,6 +616,37 @@ describe('StackRouter', () => {
     }).toThrow();
   });
 
+  test('Navigate backwards with key removes leading routes', () => {
+    const TestRouter = StackRouter({
+      foo: { screen: () => <div /> },
+      bar: { screen: () => <div /> },
+    });
+    const initState = TestRouter.getStateForAction(NavigationActions.init());
+    const pushedState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'bar', key: 'a' }),
+      initState
+    );
+    const pushedTwiceState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'bar', key: 'b`' }),
+      pushedState
+    );
+    const pushedThriceState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'foo', key: 'c`' }),
+      pushedTwiceState
+    );
+    expect(pushedThriceState.routes.length).toEqual(4);
+
+    const navigatedBackToFirstRouteState = TestRouter.getStateForAction(
+      NavigationActions.navigate({
+        routeName: 'foo',
+        key: pushedThriceState.routes[0].key,
+      }),
+      pushedThriceState
+    );
+    expect(navigatedBackToFirstRouteState.index).toEqual(0);
+    expect(navigatedBackToFirstRouteState.routes.length).toEqual(1);
+  });
+
   test('Handle basic stack logic for plain components', () => {
     const FooScreen = () => <div />;
     const BarScreen = () => <div />;
@@ -476,9 +662,10 @@ describe('StackRouter', () => {
     expect(state).toEqual({
       index: 0,
       isTransitioning: false,
+      key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -503,15 +690,51 @@ describe('StackRouter', () => {
     expect(state3).toEqual({
       index: 0,
       isTransitioning: false,
+      key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
     });
   });
 
+  test('Replace action works', () => {
+    const TestRouter = StackRouter({
+      foo: { screen: () => <div /> },
+      bar: { screen: () => <div /> },
+    });
+    const initState = TestRouter.getStateForAction(
+      NavigationActions.navigate({ routeName: 'foo' })
+    );
+    const replacedState = TestRouter.getStateForAction(
+      NavigationActions.replace({
+        routeName: 'bar',
+        params: { meaning: 42 },
+        key: initState.routes[0].key,
+      }),
+      initState
+    );
+    expect(replacedState.index).toEqual(0);
+    expect(replacedState.routes.length).toEqual(1);
+    expect(replacedState.routes[0].key).not.toEqual(initState.routes[0].key);
+    expect(replacedState.routes[0].routeName).toEqual('bar');
+    expect(replacedState.routes[0].params.meaning).toEqual(42);
+    const replacedState2 = TestRouter.getStateForAction(
+      NavigationActions.replace({
+        routeName: 'bar',
+        key: initState.routes[0].key,
+        newKey: 'wow',
+      }),
+      initState
+    );
+    expect(replacedState2.index).toEqual(0);
+    expect(replacedState2.routes.length).toEqual(1);
+    expect(replacedState2.routes[0].key).toEqual('wow');
+    expect(replacedState2.routes[0].routeName).toEqual('bar');
+  });
+
   test('Handles push transition logic with completion action', () => {
     const FooScreen = () => <div />;
     const BarScreen = () => <div />;
@@ -564,9 +787,10 @@ describe('StackRouter', () => {
     expect(state).toEqual({
       index: 0,
       isTransitioning: false,
+      key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -591,9 +815,10 @@ describe('StackRouter', () => {
     expect(state3).toEqual({
       index: 0,
       isTransitioning: false,
+      key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Foo',
         },
       ],
@@ -664,9 +889,10 @@ describe('StackRouter', () => {
     expect(state).toEqual({
       index: 0,
       isTransitioning: false,
+      key: 'StackRouterRoot',
       routes: [
         {
-          key: 'Init-id-0',
+          key: 'id-0',
           routeName: 'Bar',
         },
       ],
@@ -687,6 +913,7 @@ describe('StackRouter', () => {
     expect(state).toEqual({
       index: 0,
       isTransitioning: false,
+      key: 'StackRouterRoot',
       routes: [
         {
           key: state && state.routes[0].key,
@@ -774,14 +1001,14 @@ describe('StackRouter', () => {
       {
         type: NavigationActions.SET_PARAMS,
         params: { name: 'foobar' },
-        key: 'Init-id-0',
+        key: 'id-0',
       },
       state
     );
     expect(state2 && state2.index).toEqual(0);
     expect(state2 && state2.routes[0].routes[0].routes).toEqual([
       {
-        key: 'Init-id-0',
+        key: 'id-0',
         routeName: 'Quux',
         params: { name: 'foobar' },
       },
@@ -1000,6 +1227,126 @@ describe('StackRouter', () => {
     ]);
   });
 
+  test('Handles the navigate action with params and nested StackRouter as a first action', () => {
+    const state = TestStackRouter.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'main',
+      params: {
+        code: 'test',
+        foo: 'bar',
+      },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'profile',
+        params: {
+          id: '4',
+          code: 'test',
+          foo: 'bar',
+        },
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'list',
+          params: {
+            id: '10259959195',
+            code: 'test',
+            foo: 'bar',
+          },
+        },
+      },
+    });
+
+    expect(state).toEqual({
+      index: 0,
+      isTransitioning: false,
+      key: 'StackRouterRoot',
+      routes: [
+        {
+          index: 0,
+          isTransitioning: false,
+          key: 'id-2',
+          params: { code: 'test', foo: 'bar' },
+          routeName: 'main',
+          routes: [
+            {
+              index: 0,
+              isTransitioning: false,
+              key: 'id-1',
+              params: { code: 'test', foo: 'bar', id: '4' },
+              routeName: 'profile',
+              routes: [
+                {
+                  key: 'id-0',
+                  params: { code: 'test', foo: 'bar', id: '10259959195' },
+                  routeName: 'list',
+                  type: undefined,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    const state2 = TestStackRouter.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'main',
+      params: {
+        code: '',
+        foo: 'bar',
+      },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'profile',
+        params: {
+          id: '4',
+          code: '',
+          foo: 'bar',
+        },
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'list',
+          params: {
+            id: '10259959195',
+            code: '',
+            foo: 'bar',
+          },
+        },
+      },
+    });
+
+    expect(state2).toEqual({
+      index: 0,
+      isTransitioning: false,
+      key: 'StackRouterRoot',
+      routes: [
+        {
+          index: 0,
+          isTransitioning: false,
+          key: 'id-5',
+          params: { code: '', foo: 'bar' },
+          routeName: 'main',
+          routes: [
+            {
+              index: 0,
+              isTransitioning: false,
+              key: 'id-4',
+              params: { code: '', foo: 'bar', id: '4' },
+              routeName: 'profile',
+              routes: [
+                {
+                  key: 'id-3',
+                  params: { code: '', foo: 'bar', id: '10259959195' },
+                  routeName: 'list',
+                  type: undefined,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  });
+
   test('Handles the navigate action with params and nested TabRouter', () => {
     const ChildNavigator = () => <div />;
     ChildNavigator.router = TabRouter({
@@ -1061,7 +1408,6 @@ describe('StackRouter', () => {
     expect(state && state.routes[0]).toEqual(
       expect.objectContaining({
         routeName: 'Bar',
-        type: undefined,
       })
     );
   });
@@ -1155,9 +1501,7 @@ describe('StackRouter', () => {
       };
       const { path, params } = router.getPathAndParamsForState(state);
       expect(path).toEqual('baz/321');
-      /* $FlowFixMe: params.id has to exist */
       expect(params.id).toEqual('123');
-      /* $FlowFixMe: params.bazId has to exist */
       expect(params.bazId).toEqual('321');
     }
 
@@ -1191,38 +1535,26 @@ describe('StackRouter', () => {
     }
   });
 
-  test('Maps old actions (uses "Handles the reset action" test)', () => {
-    global.console.warn = jest.fn();
-    const router = StackRouter({
-      Foo: {
-        screen: () => <div />,
+  test('URI encoded string get passed to deep link', () => {
+    const uri = 'people/2018%2F02%2F07';
+    const action = TestStackRouter.getActionForPathAndParams(uri);
+    expect(action).toEqual({
+      routeName: 'person',
+      params: {
+        id: '2018/02/07',
       },
-      Bar: {
-        screen: () => <div />,
+      type: NavigationActions.NAVIGATE,
+    });
+
+    const malformedUri = 'people/%E0%A4%A';
+    const action2 = TestStackRouter.getActionForPathAndParams(malformedUri);
+    expect(action2).toEqual({
+      routeName: 'person',
+      params: {
+        id: '%E0%A4%A',
       },
+      type: NavigationActions.NAVIGATE,
     });
-    const initAction = NavigationActions.mapDeprecatedActionAndWarn({
-      type: 'Init',
-    });
-    const state = router.getStateForAction(initAction);
-    const resetAction = NavigationActions.mapDeprecatedActionAndWarn({
-      type: 'Reset',
-      actions: [
-        { type: 'Navigate', routeName: 'Foo', params: { bar: '42' } },
-        { type: 'Navigate', routeName: 'Bar' },
-      ],
-      index: 1,
-    });
-    const state2 = router.getStateForAction(resetAction, state);
-    expect(state2 && state2.index).toEqual(1);
-    expect(state2 && state2.routes[0].params).toEqual({ bar: '42' });
-    expect(state2 && state2.routes[0].routeName).toEqual('Foo');
-    expect(state2 && state2.routes[1].routeName).toEqual('Bar');
-    expect(console.warn).toBeCalledWith(
-      expect.stringContaining(
-        "The action type 'Init' has been renamed to 'Navigation/INIT'"
-      )
-    );
   });
 
   test('Querystring params get passed to nested deep link', () => {
@@ -1317,9 +1649,7 @@ test('Handles deep navigate completion action', () => {
   );
   expect(state2 && state2.index).toEqual(0);
   expect(state2 && state2.isTransitioning).toEqual(false);
-  /* $FlowFixMe */
   expect(state2 && state2.routes[0].index).toEqual(1);
-  /* $FlowFixMe */
   expect(state2 && state2.routes[0].isTransitioning).toEqual(true);
   expect(!!key).toEqual(true);
   const state3 = router.getStateForAction(
@@ -1330,8 +1660,6 @@ test('Handles deep navigate completion action', () => {
   );
   expect(state3 && state3.index).toEqual(0);
   expect(state3 && state3.isTransitioning).toEqual(false);
-  /* $FlowFixMe */
   expect(state3 && state3.routes[0].index).toEqual(1);
-  /* $FlowFixMe */
   expect(state3 && state3.routes[0].isTransitioning).toEqual(false);
 });

src/routers/__tests__/SwitchRouter-test.js

@@ -0,0 +1,109 @@
+/* eslint react/display-name:0 */
+
+import React from 'react';
+import SwitchRouter from '../SwitchRouter';
+import StackRouter from '../StackRouter';
+import NavigationActions from '../../NavigationActions';
+
+describe('SwitchRouter', () => {
+  test('resets the route when unfocusing a tab by default', () => {
+    const router = getExampleRouter();
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'A2' },
+      state
+    );
+    expect(state2.routes[0].index).toEqual(1);
+    expect(state2.routes[0].routes.length).toEqual(2);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state2
+    );
+
+    expect(state3.routes[0].index).toEqual(0);
+    expect(state3.routes[0].routes.length).toEqual(1);
+  });
+
+  test('does not reset the route on unfocus if resetOnBlur is false', () => {
+    const router = getExampleRouter({ resetOnBlur: false });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'A2' },
+      state
+    );
+    expect(state2.routes[0].index).toEqual(1);
+    expect(state2.routes[0].routes.length).toEqual(2);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state2
+    );
+
+    expect(state3.routes[0].index).toEqual(1);
+    expect(state3.routes[0].routes.length).toEqual(2);
+  });
+
+  test('ignores back by default', () => {
+    const router = getExampleRouter();
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state
+    );
+    expect(state2.index).toEqual(1);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3.index).toEqual(1);
+  });
+
+  test('handles back if given a backBehavior', () => {
+    const router = getExampleRouter({ backBehavior: 'initialRoute' });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state
+    );
+    expect(state2.index).toEqual(1);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3.index).toEqual(0);
+  });
+});
+
+const getExampleRouter = (config = {}) => {
+  const PlainScreen = () => <div />;
+  const StackA = () => <div />;
+  const StackB = () => <div />;
+
+  StackA.router = StackRouter({
+    A1: PlainScreen,
+    A2: PlainScreen,
+  });
+
+  StackB.router = StackRouter({
+    B1: PlainScreen,
+    B2: PlainScreen,
+  });
+
+  const router = SwitchRouter(
+    {
+      A: StackA,
+      B: StackB,
+    },
+    {
+      initialRouteName: 'A',
+      ...config,
+    }
+  );
+
+  return router;
+};

src/routers/__tests__/TabRouter-test.js

@@ -593,29 +593,6 @@ describe('TabRouter', () => {
     expect(path).toEqual('f/Baz');
   });
 
-  test('Maps old actions (uses "getStateForAction returns null when navigating to same tab" test)', () => {
-    global.console.warn = jest.fn();
-    const router = TabRouter(
-      { Foo: BareLeafRouteConfig, Bar: BareLeafRouteConfig },
-      { initialRouteName: 'Bar' }
-    );
-    const initAction = NavigationActions.mapDeprecatedActionAndWarn({
-      type: 'Init',
-    });
-    const state = router.getStateForAction(initAction);
-    const navigateAction = NavigationActions.mapDeprecatedActionAndWarn({
-      type: 'Navigate',
-      routeName: 'Bar',
-    });
-    const state2 = router.getStateForAction(navigateAction, state);
-    expect(state2).toEqual(null);
-    expect(console.warn).toBeCalledWith(
-      expect.stringContaining(
-        "The action type 'Init' has been renamed to 'Navigation/INIT'"
-      )
-    );
-  });
-
   test('Can navigate to other tab (no router) with params', () => {
     const ScreenA = () => <div />;
     const ScreenB = () => <div />;

src/routers/__tests__/__snapshots__/validateRouteConfigMap-test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validateRouteConfigMap Fails if both screen and getScreen are defined 1`] = `"Route 'Home' should declare a screen or a getScreen, not both."`;
+
+exports[`validateRouteConfigMap Fails on bad object 1`] = `
+"The component for route 'Home' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+Home: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+Home: MyNavigator,
+}"
+`;
+
+exports[`validateRouteConfigMap Fails on empty bare screen 1`] = `
+"The component for route 'Home' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+Home: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+Home: MyNavigator,
+}"
+`;
+
+exports[`validateRouteConfigMap Fails on empty config 1`] = `"Please specify at least one route when configuring a navigator."`;

src/routers/__tests__/createConfigGetter-test.js

@@ -175,23 +175,3 @@ test('should throw if the route does not exist', () => {
     "There is no route defined for key Settings.\nMust be one of: 'Home'"
   );
 });
-
-test('should throw if the screen is not defined under the route config', () => {
-  /* eslint-disable react/no-multi-comp */
-
-  const getScreenOptions = createConfigGetter({
-    Home: {},
-  });
-
-  const routes = [{ key: 'B', routeName: 'Home' }];
-
-  expect(() =>
-    getScreenOptions(
-      addNavigationHelpers({
-        state: routes[0],
-        dispatch: () => false,
-        addListener: dummyEventSubscriber,
-      })
-    )
-  ).toThrowError('Route Home must define a screen or a getScreen.');
-});

src/routers/__tests__/validateRouteConfigMap-test.js

@@ -13,9 +13,19 @@ ProfileNavigator.router = StackRouter({
 });
 
 describe('validateRouteConfigMap', () => {
+  test('Fails on empty bare screen', () => {
+    const invalidMap = {
+      Home: undefined,
+    };
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
+  });
   test('Fails on empty config', () => {
     const invalidMap = {};
-    expect(() => validateRouteConfigMap(invalidMap)).toThrow();
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
   });
   test('Fails on bad object', () => {
     const invalidMap = {
@@ -23,7 +33,9 @@ describe('validateRouteConfigMap', () => {
         foo: 'bar',
       },
     };
-    expect(() => validateRouteConfigMap(invalidMap)).toThrow();
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
   });
   test('Fails if both screen and getScreen are defined', () => {
     const invalidMap = {
@@ -32,17 +44,17 @@ describe('validateRouteConfigMap', () => {
         getScreen: () => ListScreen,
       },
     };
-    expect(() => validateRouteConfigMap(invalidMap)).toThrow();
+    expect(() =>
+      validateRouteConfigMap(invalidMap)
+    ).toThrowErrorMatchingSnapshot();
   });
   test('Succeeds on a valid config', () => {
-    const invalidMap = {
+    const validMap = {
       Home: {
         screen: ProfileNavigator,
       },
-      Chat: {
-        screen: ListScreen,
-      },
+      Chat: ListScreen,
     };
-    validateRouteConfigMap(invalidMap);
+    validateRouteConfigMap(validMap);
   });
 });

src/routers/getScreenForRouteName.js

@@ -32,5 +32,5 @@ export default function getScreenForRouteName(routeConfigs, routeName) {
     return screen;
   }
 
-  throw new Error(`Route ${routeName} must define a screen or a getScreen.`);
+  return routeConfig;
 }

src/routers/validateRouteConfigMap.js

@@ -13,46 +13,44 @@ function validateRouteConfigMap(routeConfigs) {
 
   routeNames.forEach(routeName => {
     const routeConfig = routeConfigs[routeName];
-
-    if (!routeConfig.screen && !routeConfig.getScreen) {
-      throw new Error(
-        `Route '${routeName}' should declare a screen. ` +
-          'For example:\n\n' +
-          "import MyScreen from './MyScreen';\n" +
-          '...\n' +
-          `${routeName}: {\n` +
-          '  screen: MyScreen,\n' +
-          '}'
-      );
-    } else if (routeConfig.screen && routeConfig.getScreen) {
-      throw new Error(
-        `Route '${routeName}' should declare a screen or ` +
-          'a getScreen, not both.'
-      );
-    }
+    const screenComponent = getScreenComponent(routeConfig);
 
     if (
-      routeConfig.screen &&
-      typeof routeConfig.screen !== 'function' &&
-      typeof routeConfig.screen !== 'string'
+      !screenComponent ||
+      (typeof screenComponent !== 'function' &&
+        typeof screenComponent !== 'string' &&
+        !routeConfig.getScreen)
     ) {
       throw new Error(
         `The component for route '${routeName}' must be a ` +
           'React component. For example:\n\n' +
           "import MyScreen from './MyScreen';\n" +
           '...\n' +
-          `${routeName}: {\n` +
-          '  screen: MyScreen,\n' +
+          `${routeName}: MyScreen,\n` +
           '}\n\n' +
           'You can also use a navigator:\n\n' +
           "import MyNavigator from './MyNavigator';\n" +
           '...\n' +
-          `${routeName}: {\n` +
-          '  screen: MyNavigator,\n' +
+          `${routeName}: MyNavigator,\n` +
           '}'
       );
     }
+
+    if (routeConfig.screen && routeConfig.getScreen) {
+      throw new Error(
+        `Route '${routeName}' should declare a screen or ` +
+          'a getScreen, not both.'
+      );
+    }
   });
 }
 
+function getScreenComponent(routeConfig) {
+  if (!routeConfig) {
+    return null;
+  }
+
+  return routeConfig.screen ? routeConfig.screen : routeConfig;
+}
+
 export default validateRouteConfigMap;

src/views/CardStack/Card.js

@@ -22,7 +22,7 @@ class Card extends React.Component {
 
 const styles = StyleSheet.create({
   main: {
-    backgroundColor: '#E9E9EF',
+    backgroundColor: '#EFEFF4',
     bottom: 0,
     left: 0,
     position: 'absolute',

src/views/CardStack/CardStack.js

@@ -19,9 +19,12 @@ import getChildEventSubscriber from '../../getChildEventSubscriber';
 import SceneView from '../SceneView';
 
 import TransitionConfigs from './TransitionConfigs';
+import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
 
 const emptyFunction = () => {};
 
+const EaseInOut = Easing.inOut(Easing.ease);
+
 /**
  * The max duration of the card animation in milliseconds after released gesture.
  * The actual duration should be always less then that because the rest distance
@@ -83,7 +86,7 @@ class CardStack extends React.Component {
     if (props.screenProps !== this.props.screenProps) {
       this._screenDetails = {};
     }
-    props.scenes.forEach(newScene => {
+    props.transitionProps.scenes.forEach(newScene => {
       if (
         this._screenDetails[newScene.key] &&
         this._screenDetails[newScene.key].state !== newScene.route
@@ -94,7 +97,7 @@ class CardStack extends React.Component {
   }
 
   _getScreenDetails = scene => {
-    const { screenProps, navigation, router } = this.props;
+    const { screenProps, transitionProps: { navigation }, router } = this.props;
     let screenDetails = this._screenDetails[scene.key];
     if (!screenDetails || screenDetails.state !== scene.route) {
       const screenNavigation = addNavigationHelpers({
@@ -129,12 +132,19 @@ class CardStack extends React.Component {
       headerRightInterpolator,
     } = this._getTransitionConfig();
 
-    const { mode, ...passProps } = this.props;
+    const {
+      mode,
+      transitionProps,
+      prevTransitionProps,
+      ...passProps
+    } = this.props;
 
     return renderHeader({
       ...passProps,
+      ...transitionProps,
       scene,
       mode: headerMode,
+      transitionPreset: this._getHeaderTransitionPreset(),
       getScreenDetails: this._getScreenDetails,
       leftInterpolator: headerLeftInterpolator,
       titleInterpolator: headerTitleInterpolator,
@@ -151,182 +161,224 @@ class CardStack extends React.Component {
     // when we'd do that with the current structure we have. `stopAnimation` callback
     // is also broken with native animated values that have no listeners so if we
     // want to remove this we have to fix this too.
-    animatedSubscribeValue(props.layout.width);
-    animatedSubscribeValue(props.layout.height);
-    animatedSubscribeValue(props.position);
+    animatedSubscribeValue(props.transitionProps.layout.width);
+    animatedSubscribeValue(props.transitionProps.layout.height);
+    animatedSubscribeValue(props.transitionProps.position);
   }
 
   _reset(resetToIndex, duration) {
-    Animated.timing(this.props.position, {
-      toValue: resetToIndex,
-      duration,
-      easing: Easing.linear(),
-      useNativeDriver: this.props.position.__isNative,
-    }).start();
+    if (
+      Platform.OS === 'ios' &&
+      ReactNativeFeatures.supportsImprovedSpringAnimation()
+    ) {
+      Animated.spring(this.props.transitionProps.position, {
+        toValue: resetToIndex,
+        stiffness: 5000,
+        damping: 600,
+        mass: 3,
+        useNativeDriver: this.props.transitionProps.position.__isNative,
+      }).start();
+    } else {
+      Animated.timing(this.props.transitionProps.position, {
+        toValue: resetToIndex,
+        duration,
+        easing: EaseInOut,
+        useNativeDriver: this.props.transitionProps.position.__isNative,
+      }).start();
+    }
   }
 
   _goBack(backFromIndex, duration) {
-    const { navigation, position, scenes } = this.props;
+    const { navigation, position, scenes } = this.props.transitionProps;
     const toValue = Math.max(backFromIndex - 1, 0);
 
     // set temporary index for gesture handler to respect until the action is
     // dispatched at the end of the transition.
     this._immediateIndex = toValue;
 
-    Animated.timing(position, {
-      toValue,
-      duration,
-      easing: Easing.linear(),
-      useNativeDriver: position.__isNative,
-    }).start(() => {
+    const onCompleteAnimation = () => {
       this._immediateIndex = null;
       const backFromScene = scenes.find(s => s.index === toValue + 1);
       if (!this._isResponding && backFromScene) {
         navigation.dispatch(
-          NavigationActions.back({ key: backFromScene.route.key })
+          NavigationActions.back({
+            key: backFromScene.route.key,
+            immediate: true,
+          })
         );
       }
-    });
+    };
+
+    if (
+      Platform.OS === 'ios' &&
+      ReactNativeFeatures.supportsImprovedSpringAnimation()
+    ) {
+      Animated.spring(position, {
+        toValue,
+        stiffness: 5000,
+        damping: 600,
+        mass: 3,
+        useNativeDriver: position.__isNative,
+      }).start(onCompleteAnimation);
+    } else {
+      Animated.timing(position, {
+        toValue,
+        duration,
+        easing: EaseInOut,
+        useNativeDriver: position.__isNative,
+      }).start(onCompleteAnimation);
+    }
   }
 
   render() {
     let floatingHeader = null;
     const headerMode = this._getHeaderMode();
     if (headerMode === 'float') {
-      floatingHeader = this._renderHeader(this.props.scene, headerMode);
+      floatingHeader = this._renderHeader(
+        this.props.transitionProps.scene,
+        headerMode
+      );
     }
-    const { navigation, position, layout, scene, scenes, mode } = this.props;
+    const {
+      transitionProps: { navigation, position, layout, scene, scenes },
+      mode,
+    } = this.props;
     const { index } = navigation.state;
     const isVertical = mode === 'modal';
     const { options } = this._getScreenDetails(scene);
     const gestureDirectionInverted = options.gestureDirection === 'inverted';
 
-    const responder = PanResponder.create({
-      onPanResponderTerminate: () => {
-        this._isResponding = false;
-        this._reset(index, 0);
-      },
-      onPanResponderGrant: () => {
-        position.stopAnimation(value => {
-          this._isResponding = true;
-          this._gestureStartValue = value;
-        });
-      },
-      onMoveShouldSetPanResponder: (event, gesture) => {
-        if (index !== scene.index) {
-          return false;
-        }
-        const immediateIndex =
-          this._immediateIndex == null ? index : this._immediateIndex;
-        const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
-        const currentDragPosition =
-          event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
-        const axisLength = isVertical
-          ? layout.height.__getValue()
-          : layout.width.__getValue();
-        const axisHasBeenMeasured = !!axisLength;
-
-        // Measure the distance from the touch to the edge of the screen
-        const screenEdgeDistance = gestureDirectionInverted
-          ? axisLength - (currentDragPosition - currentDragDistance)
-          : currentDragPosition - currentDragDistance;
-        // Compare to the gesture distance relavant to card or modal
-        const {
-          gestureResponseDistance: userGestureResponseDistance = {},
-        } = this._getScreenDetails(scene).options;
-        const gestureResponseDistance = isVertical
-          ? userGestureResponseDistance.vertical ||
-            GESTURE_RESPONSE_DISTANCE_VERTICAL
-          : userGestureResponseDistance.horizontal ||
-            GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-        // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
-        if (screenEdgeDistance > gestureResponseDistance) {
-          // Reject touches that started in the middle of the screen
-          return false;
-        }
-
-        const hasDraggedEnough =
-          Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
-
-        const isOnFirstCard = immediateIndex === 0;
-        const shouldSetResponder =
-          hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
-        return shouldSetResponder;
-      },
-      onPanResponderMove: (event, gesture) => {
-        // Handle the moving touches for our granted responder
-        const startValue = this._gestureStartValue;
-        const axis = isVertical ? 'dy' : 'dx';
-        const axisDistance = isVertical
-          ? layout.height.__getValue()
-          : layout.width.__getValue();
-        const currentValue =
-          (I18nManager.isRTL && axis === 'dx') !== gestureDirectionInverted
-            ? startValue + gesture[axis] / axisDistance
-            : startValue - gesture[axis] / axisDistance;
-        const value = clamp(index - 1, currentValue, index);
-        position.setValue(value);
-      },
-      onPanResponderTerminationRequest: () =>
-        // Returning false will prevent other views from becoming responder while
-        // the navigation view is the responder (mid-gesture)
-        false,
-      onPanResponderRelease: (event, gesture) => {
-        if (!this._isResponding) {
-          return;
-        }
-        this._isResponding = false;
-
-        const immediateIndex =
-          this._immediateIndex == null ? index : this._immediateIndex;
-
-        // Calculate animate duration according to gesture speed and moved distance
-        const axisDistance = isVertical
-          ? layout.height.__getValue()
-          : layout.width.__getValue();
-        const movementDirection = gestureDirectionInverted ? -1 : 1;
-        const movedDistance =
-          movementDirection * gesture[isVertical ? 'dy' : 'dx'];
-        const gestureVelocity =
-          movementDirection * gesture[isVertical ? 'vy' : 'vx'];
-        const defaultVelocity = axisDistance / ANIMATION_DURATION;
-        const velocity = Math.max(Math.abs(gestureVelocity), defaultVelocity);
-        const resetDuration = gestureDirectionInverted
-          ? (axisDistance - movedDistance) / velocity
-          : movedDistance / velocity;
-        const goBackDuration = gestureDirectionInverted
-          ? movedDistance / velocity
-          : (axisDistance - movedDistance) / velocity;
-
-        // To asyncronously get the current animated value, we need to run stopAnimation:
-        position.stopAnimation(value => {
-          // If the speed of the gesture release is significant, use that as the indication
-          // of intent
-          if (gestureVelocity < -0.5) {
-            this._reset(immediateIndex, resetDuration);
-            return;
-          }
-          if (gestureVelocity > 0.5) {
-            this._goBack(immediateIndex, goBackDuration);
-            return;
-          }
-
-          // Then filter based on the distance the screen was moved. Over a third of the way swiped,
-          // and the back will happen.
-          if (value <= index - POSITION_THRESHOLD) {
-            this._goBack(immediateIndex, goBackDuration);
-          } else {
-            this._reset(immediateIndex, resetDuration);
-          }
-        });
-      },
-    });
-
     const gesturesEnabled =
       typeof options.gesturesEnabled === 'boolean'
         ? options.gesturesEnabled
         : Platform.OS === 'ios';
 
+    const responder = !gesturesEnabled
+      ? null
+      : PanResponder.create({
+          onPanResponderTerminate: () => {
+            this._isResponding = false;
+            this._reset(index, 0);
+          },
+          onPanResponderGrant: () => {
+            position.stopAnimation(value => {
+              this._isResponding = true;
+              this._gestureStartValue = value;
+            });
+          },
+          onMoveShouldSetPanResponder: (event, gesture) => {
+            if (index !== scene.index) {
+              return false;
+            }
+            const immediateIndex =
+              this._immediateIndex == null ? index : this._immediateIndex;
+            const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
+            const currentDragPosition =
+              event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
+            const axisLength = isVertical
+              ? layout.height.__getValue()
+              : layout.width.__getValue();
+            const axisHasBeenMeasured = !!axisLength;
+
+            // Measure the distance from the touch to the edge of the screen
+            const screenEdgeDistance = gestureDirectionInverted
+              ? axisLength - (currentDragPosition - currentDragDistance)
+              : currentDragPosition - currentDragDistance;
+            // Compare to the gesture distance relavant to card or modal
+            const {
+              gestureResponseDistance: userGestureResponseDistance = {},
+            } = this._getScreenDetails(scene).options;
+            const gestureResponseDistance = isVertical
+              ? userGestureResponseDistance.vertical ||
+                GESTURE_RESPONSE_DISTANCE_VERTICAL
+              : userGestureResponseDistance.horizontal ||
+                GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+            // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
+            if (screenEdgeDistance > gestureResponseDistance) {
+              // Reject touches that started in the middle of the screen
+              return false;
+            }
+
+            const hasDraggedEnough =
+              Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
+
+            const isOnFirstCard = immediateIndex === 0;
+            const shouldSetResponder =
+              hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
+            return shouldSetResponder;
+          },
+          onPanResponderMove: (event, gesture) => {
+            // Handle the moving touches for our granted responder
+            const startValue = this._gestureStartValue;
+            const axis = isVertical ? 'dy' : 'dx';
+            const axisDistance = isVertical
+              ? layout.height.__getValue()
+              : layout.width.__getValue();
+            const currentValue =
+              (I18nManager.isRTL && axis === 'dx') !== gestureDirectionInverted
+                ? startValue + gesture[axis] / axisDistance
+                : startValue - gesture[axis] / axisDistance;
+            const value = clamp(index - 1, currentValue, index);
+            position.setValue(value);
+          },
+          onPanResponderTerminationRequest: () =>
+            // Returning false will prevent other views from becoming responder while
+            // the navigation view is the responder (mid-gesture)
+            false,
+          onPanResponderRelease: (event, gesture) => {
+            if (!this._isResponding) {
+              return;
+            }
+            this._isResponding = false;
+
+            const immediateIndex =
+              this._immediateIndex == null ? index : this._immediateIndex;
+
+            // Calculate animate duration according to gesture speed and moved distance
+            const axisDistance = isVertical
+              ? layout.height.__getValue()
+              : layout.width.__getValue();
+            const movementDirection = gestureDirectionInverted ? -1 : 1;
+            const movedDistance =
+              movementDirection * gesture[isVertical ? 'dy' : 'dx'];
+            const gestureVelocity =
+              movementDirection * gesture[isVertical ? 'vy' : 'vx'];
+            const defaultVelocity = axisDistance / ANIMATION_DURATION;
+            const velocity = Math.max(
+              Math.abs(gestureVelocity),
+              defaultVelocity
+            );
+            const resetDuration = gestureDirectionInverted
+              ? (axisDistance - movedDistance) / velocity
+              : movedDistance / velocity;
+            const goBackDuration = gestureDirectionInverted
+              ? movedDistance / velocity
+              : (axisDistance - movedDistance) / velocity;
+
+            // To asyncronously get the current animated value, we need to run stopAnimation:
+            position.stopAnimation(value => {
+              // If the speed of the gesture release is significant, use that as the indication
+              // of intent
+              if (gestureVelocity < -0.5) {
+                this._reset(immediateIndex, resetDuration);
+                return;
+              }
+              if (gestureVelocity > 0.5) {
+                this._goBack(immediateIndex, goBackDuration);
+                return;
+              }
+
+              // Then filter based on the distance the screen was moved. Over a third of the way swiped,
+              // and the back will happen.
+              if (value <= index - POSITION_THRESHOLD) {
+                this._goBack(immediateIndex, goBackDuration);
+              } else {
+                this._reset(immediateIndex, resetDuration);
+              }
+            });
+          },
+        });
+
     const handlers = gesturesEnabled ? responder.panHandlers : {};
     const containerStyle = [
       styles.container,
@@ -353,6 +405,21 @@ class CardStack extends React.Component {
     return 'float';
   }
 
+  _getHeaderTransitionPreset() {
+    // On Android or with header mode screen, we always just use in-place,
+    // we ignore the option entirely (at least until we have other presets)
+    if (Platform.OS === 'android' || this._getHeaderMode() === 'screen') {
+      return 'fade-in-place';
+    }
+
+    // TODO: validations: 'fade-in-place' or 'uikit' are valid
+    if (this.props.headerTransitionPreset) {
+      return this.props.headerTransitionPreset;
+    } else {
+      return 'fade-in-place';
+    }
+  }
+
   _renderInnerScene(SceneComponent, scene) {
     const { navigation } = this._getScreenDetails(scene);
     const { screenProps } = this.props;
@@ -385,8 +452,8 @@ class CardStack extends React.Component {
 
     return TransitionConfigs.getTransitionConfig(
       this.props.transitionConfig,
-      {},
-      {},
+      this.props.transitionProps,
+      this.props.prevTransitionProps,
       isModal
     );
   };
@@ -394,15 +461,19 @@ class CardStack extends React.Component {
   _renderCard = scene => {
     const { screenInterpolator } = this._getTransitionConfig();
     const style =
-      screenInterpolator && screenInterpolator({ ...this.props, scene });
+      screenInterpolator &&
+      screenInterpolator({ ...this.props.transitionProps, scene });
 
     const SceneComponent = this.props.router.getComponentForRouteName(
       scene.route.routeName
     );
 
+    const { transitionProps, ...props } = this.props;
+
     return (
       <Card
-        {...this.props}
+        {...props}
+        {...transitionProps}
         key={`card_${scene.key}`}
         style={[style, this.props.cardStyle]}
         scene={scene}

src/views/CardStack/CardStackTransitioner.js

@@ -53,10 +53,11 @@ class CardStackTransitioner extends React.Component {
     return transitionSpec;
   };
 
-  _render = props => {
+  _render = (props, prevProps) => {
     const {
       screenProps,
       headerMode,
+      headerTransitionPreset,
       mode,
       router,
       cardStyle,
@@ -66,11 +67,13 @@ class CardStackTransitioner extends React.Component {
       <CardStack
         screenProps={screenProps}
         headerMode={headerMode}
+        headerTransitionPreset={headerTransitionPreset}
         mode={mode}
         router={router}
         cardStyle={cardStyle}
         transitionConfig={transitionConfig}
-        {...props}
+        transitionProps={props}
+        prevTransitionProps={prevProps}
       />
     );
   };

src/views/Drawer/DrawerNavigatorItems.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, Platform, StyleSheet } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
-import SafeAreaView from '../SafeAreaView';
 import TouchableItem from '../TouchableItem';
 
 /**

src/views/Drawer/DrawerSidebar.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import withCachedChildNavigation from '../../withCachedChildNavigation';
 import NavigationActions from '../../NavigationActions';
 import invariant from '../../utils/invariant';
 
-import SafeAreaView from '../SafeAreaView';
-
 /**
  * Component that renders the sidebar screen of the drawer.
  */

src/views/Header/Header.js

@@ -3,33 +3,42 @@ import React from 'react';
 import {
   Animated,
   Dimensions,
+  Image,
   Platform,
   StyleSheet,
   View,
   ViewPropTypes,
 } from 'react-native';
+import { MaskedViewIOS } from '../../PlatformHelpers';
+import SafeAreaView from 'react-native-safe-area-view';
 
 import HeaderTitle from './HeaderTitle';
 import HeaderBackButton from './HeaderBackButton';
+import ModularHeaderBackButton from './ModularHeaderBackButton';
 import HeaderStyleInterpolator from './HeaderStyleInterpolator';
-import SafeAreaView from '../SafeAreaView';
 import withOrientation from '../withOrientation';
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
+const getAppBarHeight = isLandscape => {
+  return Platform.OS === 'ios'
+    ? isLandscape && !Platform.isPad ? 32 : 44
+    : 56;
+};
+
 class Header extends React.PureComponent {
   static defaultProps = {
     leftInterpolator: HeaderStyleInterpolator.forLeft,
+    leftButtonInterpolator: HeaderStyleInterpolator.forLeftButton,
+    leftLabelInterpolator: HeaderStyleInterpolator.forLeftLabel,
+    titleFromLeftInterpolator: HeaderStyleInterpolator.forCenterFromLeft,
     titleInterpolator: HeaderStyleInterpolator.forCenter,
     rightInterpolator: HeaderStyleInterpolator.forRight,
   };
 
   static get HEIGHT() {
-    console.warn(
-      'Header.HEIGHT is deprecated and will be removed before react-navigation comes out of beta.'
-    );
     return APPBAR_HEIGHT + STATUSBAR_HEIGHT;
   }
 
@@ -119,15 +128,18 @@ class Header extends React.PureComponent {
 
   _renderLeftComponent = props => {
     const { options } = this.props.getScreenDetails(props.scene);
+
     if (
       React.isValidElement(options.headerLeft) ||
       options.headerLeft === null
     ) {
       return options.headerLeft;
     }
+
     if (props.scene.index === 0) {
-      return null;
+      return;
     }
+
     const backButtonTitle = this._getBackButtonTitleString(props.scene);
     const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle(
       props.scene
@@ -150,6 +162,36 @@ class Header extends React.PureComponent {
     );
   };
 
+  _renderModularLeftComponent = (
+    props,
+    ButtonContainerComponent,
+    LabelContainerComponent
+  ) => {
+    const { options } = this.props.getScreenDetails(props.scene);
+    const backButtonTitle = this._getBackButtonTitleString(props.scene);
+    const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle(
+      props.scene
+    );
+    const width = this.state.widths[props.scene.key]
+      ? (this.props.layout.initWidth - this.state.widths[props.scene.key]) / 2
+      : undefined;
+
+    return (
+      <ModularHeaderBackButton
+        onPress={this._navigateBack}
+        ButtonContainerComponent={ButtonContainerComponent}
+        LabelContainerComponent={LabelContainerComponent}
+        pressColorAndroid={options.headerPressColorAndroid}
+        tintColor={options.headerTintColor}
+        buttonImage={options.headerBackImage}
+        title={backButtonTitle}
+        truncatedTitle={truncatedBackButtonTitle}
+        titleStyle={options.headerBackTitleStyle}
+        width={width}
+      />
+    );
+  };
+
   _renderRightComponent = props => {
     const details = this.props.getScreenDetails(props.scene);
     const { headerRight } = details.options;
@@ -157,16 +199,38 @@ class Header extends React.PureComponent {
   };
 
   _renderLeft(props) {
-    return this._renderSubView(
-      props,
-      'left',
-      this._renderLeftComponent,
-      this.props.leftInterpolator
-    );
+    const { options } = this.props.getScreenDetails(props.scene);
+
+    const { transitionPreset } = this.props;
+
+    // On Android, or if we have a custom header left, or if we have a custom back image, we
+    // do not use the modular header (which is the one that imitates UINavigationController)
+    if (
+      transitionPreset !== 'uikit' ||
+      options.headerBackImage ||
+      options.headerLeft ||
+      options.headerLeft === null
+    ) {
+      return this._renderSubView(
+        props,
+        'left',
+        this._renderLeftComponent,
+        this.props.leftInterpolator
+      );
+    } else {
+      return this._renderModularSubView(
+        props,
+        'left',
+        this._renderModularLeftComponent,
+        this.props.leftLabelInterpolator,
+        this.props.leftButtonInterpolator
+      );
+    }
   }
 
   _renderTitle(props, options) {
     const style = {};
+    const { transitionPreset } = this.props;
 
     if (Platform.OS === 'android') {
       if (!options.hasLeftComponent) {
@@ -188,7 +252,9 @@ class Header extends React.PureComponent {
       { ...props, style },
       'title',
       this._renderTitleComponent,
-      this.props.titleInterpolator
+      transitionPreset === 'uikit'
+        ? this.props.titleFromLeftInterpolator
+        : this.props.titleInterpolator
     );
   }
 
@@ -201,6 +267,64 @@ class Header extends React.PureComponent {
     );
   }
 
+  _renderModularSubView(
+    props,
+    name,
+    renderer,
+    labelStyleInterpolator,
+    buttonStyleInterpolator
+  ) {
+    const { scene } = props;
+    const { index, isStale, key } = scene;
+
+    // Never render a modular back button on the first screen in a stack.
+    if (index === 0) {
+      return;
+    }
+
+    const offset = this.props.navigation.state.index - index;
+
+    if (Math.abs(offset) > 2) {
+      // Scene is far away from the active scene. Hides it to avoid unnecessary
+      // rendering.
+      return null;
+    }
+
+    const ButtonContainer = ({ children }) => (
+      <Animated.View
+        style={[buttonStyleInterpolator({ ...this.props, ...props })]}
+      >
+        {children}
+      </Animated.View>
+    );
+
+    const LabelContainer = ({ children }) => (
+      <Animated.View
+        style={[labelStyleInterpolator({ ...this.props, ...props })]}
+      >
+        {children}
+      </Animated.View>
+    );
+
+    const subView = renderer(props, ButtonContainer, LabelContainer);
+
+    if (subView === null) {
+      return subView;
+    }
+
+    const pointerEvents = offset !== 0 || isStale ? 'none' : 'box-none';
+
+    return (
+      <View
+        key={`${name}_${key}`}
+        pointerEvents={pointerEvents}
+        style={[styles.item, styles[name], props.style]}
+      >
+        {subView}
+      </View>
+    );
+  }
+
   _renderSubView(props, name, renderer, styleInterpolator) {
     const { scene } = props;
     const { index, isStale, key } = scene;
@@ -249,23 +373,59 @@ class Header extends React.PureComponent {
       hasRightComponent: !!right,
     });
 
-    return (
-      <View
-        style={[StyleSheet.absoluteFill, styles.header]}
-        key={`scene_${props.scene.key}`}
-      >
-        {title}
-        {left}
-        {right}
-      </View>
-    );
+    const { isLandscape, transitionPreset } = this.props;
+    const { options } = this.props.getScreenDetails(props.scene);
+
+    const wrapperProps = {
+      style: styles.header,
+      key: `scene_${props.scene.key}`,
+    };
+
+    if (
+      options.headerLeft ||
+      options.headerBackImage ||
+      Platform.OS !== 'ios' ||
+      transitionPreset !== 'uikit'
+    ) {
+      return (
+        <View {...wrapperProps}>
+          {title}
+          {left}
+          {right}
+        </View>
+      );
+    } else {
+      return (
+        <MaskedViewIOS
+          {...wrapperProps}
+          maskElement={
+            <View style={styles.iconMaskContainer}>
+              <Image
+                source={require('../assets/back-icon-mask.png')}
+                style={styles.iconMask}
+              />
+              <View style={styles.iconMaskFillerRect} />
+            </View>
+          }
+        >
+          {title}
+          {left}
+          {right}
+        </MaskedViewIOS>
+      );
+    }
   }
 
   render() {
     let appBar;
+    const { mode, scene, isLandscape } = this.props;
 
-    if (this.props.mode === 'float') {
-      const scenesProps = this.props.scenes.map(scene => ({
+    if (mode === 'float') {
+      const scenesByIndex = {};
+      this.props.scenes.forEach(scene => {
+        scenesByIndex[scene.index] = scene;
+      });
+      const scenesProps = Object.values(scenesByIndex).map(scene => ({
         position: this.props.position,
         progress: this.props.progress,
         scene,
@@ -279,37 +439,59 @@ class Header extends React.PureComponent {
       });
     }
 
-    // eslint-disable-next-line no-unused-vars
-    const {
-      scenes,
-      scene,
-      position,
-      screenProps,
-      progress,
-      isLandscape,
-      ...rest
-    } = this.props;
-
     const { options } = this.props.getScreenDetails(scene);
-    const { headerStyle } = options;
-    const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
+    const { headerStyle = {} } = options;
+    const headerStyleObj = StyleSheet.flatten(headerStyle);
+    const appBarHeight = getAppBarHeight(isLandscape);
+
+    const {
+      alignItems,
+      justifyContent,
+      flex,
+      flexDirection,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      flexWrap,
+      ...safeHeaderStyle
+    } = headerStyleObj;
+
+    if (__DEV__) {
+      warnIfHeaderStyleDefined(alignItems, 'alignItems');
+      warnIfHeaderStyleDefined(justifyContent, 'justifyContent');
+      warnIfHeaderStyleDefined(flex, 'flex');
+      warnIfHeaderStyleDefined(flexDirection, 'flexDirection');
+      warnIfHeaderStyleDefined(flexGrow, 'flexGrow');
+      warnIfHeaderStyleDefined(flexShrink, 'flexShrink');
+      warnIfHeaderStyleDefined(flexBasis, 'flexBasis');
+      warnIfHeaderStyleDefined(flexWrap, 'flexWrap');
+    }
+
+    // TODO: warn if any unsafe styles are provided
     const containerStyles = [
-      styles.container,
-      {
-        height: appBarHeight,
-      },
-      headerStyle,
+      options.headerTransparent
+        ? styles.transparentContainer
+        : styles.container,
+      { height: appBarHeight },
+      safeHeaderStyle,
     ];
 
+    const { headerForceInset } = options;
+    const forceInset = headerForceInset || { top: 'always', bottom: 'never' };
+
     return (
-      <Animated.View {...rest}>
-        <SafeAreaView
-          style={containerStyles}
-          forceInset={{ top: 'always', bottom: 'never' }}
-        >
-          <View style={styles.appBar}>{appBar}</View>
-        </SafeAreaView>
-      </Animated.View>
+      <SafeAreaView forceInset={forceInset} style={containerStyles}>
+        <View style={StyleSheet.absoluteFill}>{options.headerBackground}</View>
+        <View style={{ flex: 1 }}>{appBar}</View>
+      </SafeAreaView>
+    );
+  }
+}
+
+function warnIfHeaderStyleDefined(value, styleProp) {
+  if (value !== undefined) {
+    console.warn(
+      `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
     );
   }
 }
@@ -318,7 +500,7 @@ let platformContainerStyles;
 if (Platform.OS === 'ios') {
   platformContainerStyles = {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0, 0, 0, .3)',
+    borderBottomColor: '#A7A7AA',
   };
 } else {
   platformContainerStyles = {
@@ -337,36 +519,64 @@ const styles = StyleSheet.create({
     backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
     ...platformContainerStyles,
   },
-  appBar: {
-    flex: 1,
+  transparentContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    ...platformContainerStyles,
   },
   header: {
+    ...StyleSheet.absoluteFillObject,
     flexDirection: 'row',
   },
   item: {
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: 'transparent',
   },
+  iconMaskContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMaskFillerRect: {
+    flex: 1,
+    backgroundColor: '#d8d8d8',
+    marginLeft: -3,
+  },
+  iconMask: {
+    // These are mostly the same as the icon in ModularHeaderBackButton
+    height: 21,
+    width: 12,
+    marginLeft: 9,
+    marginTop: -0.5, // resizes down to 20.5
+    alignSelf: 'center',
+    resizeMode: 'contain',
+  },
   title: {
     bottom: 0,
+    top: 0,
     left: TITLE_OFFSET,
     right: TITLE_OFFSET,
-    top: 0,
     position: 'absolute',
-    alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
   },
   left: {
     left: 0,
     bottom: 0,
     top: 0,
     position: 'absolute',
+    alignItems: 'center',
+    flexDirection: 'row',
   },
   right: {
     right: 0,
     bottom: 0,
     top: 0,
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
   },
 });
 

src/views/Header/HeaderBackButton.js

@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
       ? {
           height: 21,
           width: 13,
-          marginLeft: 10,
+          marginLeft: 9,
           marginRight: 22,
           marginVertical: 12,
           resizeMode: 'contain',
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
   iconWithTitle:
     Platform.OS === 'ios'
       ? {
-          marginRight: 5,
+          marginRight: 6,
         }
       : {},
 });

src/views/Header/HeaderStyleInterpolator.js

@@ -1,7 +1,11 @@
-import { I18nManager } from 'react-native';
-
+import { Dimensions, I18nManager } from 'react-native';
 import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';
 
+const crossFadeInterpolation = (first, index, last) => ({
+  inputRange: [first, index - 0.9, index - 0.2, index, last],
+  outputRange: [0, 0, 0.3, 1, 0],
+});
+
 /**
  * Utility that builds the style for the navigation header.
  *
@@ -23,16 +27,7 @@ function forLeft(props) {
   const index = scene.index;
 
   return {
-    opacity: position.interpolate({
-      inputRange: [
-        first,
-        first + Math.abs(index - first) / 2,
-        index,
-        last - Math.abs(last - index) / 2,
-        last,
-      ],
-      outputRange: [0, 0, 1, 0, 0],
-    }),
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
   };
 }
 
@@ -44,21 +39,9 @@ function forCenter(props) {
 
   const { first, last } = interpolate;
   const index = scene.index;
-  const inputRange = [first, index, last];
 
   return {
-    opacity: position.interpolate({
-      inputRange,
-      outputRange: [0, 1, 0],
-    }),
-    transform: [
-      {
-        translateX: position.interpolate({
-          inputRange,
-          outputRange: I18nManager.isRTL ? [-200, 0, 200] : [200, 0, -200],
-        }),
-      },
-    ],
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
   };
 }
 
@@ -70,16 +53,125 @@ function forRight(props) {
   const { first, last } = interpolate;
   const index = scene.index;
 
+  return {
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
+  };
+}
+
+/**
+ * iOS UINavigationController style interpolators
+ */
+
+function forLeftButton(props) {
+  const { position, scene, scenes } = props;
+  const interpolate = getSceneIndicesForInterpolationInputRange(props);
+
+  if (!interpolate) return { opacity: 0 };
+
+  const { first, last } = interpolate;
+  const index = scene.index;
+
   return {
     opacity: position.interpolate({
-      inputRange: [first, index, last],
-      outputRange: [0, 1, 0],
+      inputRange: [
+        first,
+        first + Math.abs(index - first) / 2,
+        index,
+        last - Math.abs(last - index) / 2,
+        last,
+      ],
+      outputRange: [0, 0.5, 1, 0.5, 0],
     }),
   };
 }
 
+/* 
+ * NOTE: this offset calculation is a an approximation that gives us
+ * decent results in many cases, but it is ultimately a poor substitute
+ * for text measurement. See the comment on title for more information.
+ * 
+ * - 70 is the width of the left button area.
+ * - 25 is the width of the left button icon (to account for label offset)
+ */
+const LEFT_LABEL_OFFSET = Dimensions.get('window').width / 2 - 70 - 25;
+function forLeftLabel(props) {
+  const { position, scene, scenes } = props;
+  const interpolate = getSceneIndicesForInterpolationInputRange(props);
+
+  if (!interpolate) return { opacity: 0 };
+
+  const { first, last } = interpolate;
+  const index = scene.index;
+
+  const offset = LEFT_LABEL_OFFSET;
+
+  return {
+    // For now we fade out the label before fading in the title, so the
+    // differences between the label and title position can be hopefully not so
+    // noticable to the user
+    opacity: position.interpolate({
+      inputRange: [first, index - 0.35, index, index + 0.5, last],
+      outputRange: [0, 0, 1, 0.5, 0],
+    }),
+    transform: [
+      {
+        translateX: position.interpolate({
+          inputRange: [first, index, last],
+          outputRange: I18nManager.isRTL
+            ? [-offset, 0, offset]
+            : [offset, 0, -offset * 1.5],
+        }),
+      },
+    ],
+  };
+}
+
+/* 
+ * NOTE: this offset calculation is a an approximation that gives us
+ * decent results in many cases, but it is ultimately a poor substitute
+ * for text measurement. We want the back button label to transition
+ * smoothly into the title text and to do this we need to understand
+ * where the title is positioned within the title container (since it is
+ * centered).
+ * 
+ * - 70 is the width of the left button area.
+ * - 25 is the width of the left button icon (to account for label offset)
+ */
+const TITLE_OFFSET_IOS = Dimensions.get('window').width / 2 - 70 + 25;
+function forCenterFromLeft(props) {
+  const { position, scene } = props;
+  const interpolate = getSceneIndicesForInterpolationInputRange(props);
+
+  if (!interpolate) return { opacity: 0 };
+
+  const { first, last } = interpolate;
+  const index = scene.index;
+  const inputRange = [first, index - 0.5, index, index + 0.5, last];
+  const offset = TITLE_OFFSET_IOS;
+
+  return {
+    opacity: position.interpolate({
+      inputRange: [first, index - 0.5, index, index + 0.7, last],
+      outputRange: [0, 0, 1, 0, 0],
+    }),
+    transform: [
+      {
+        translateX: position.interpolate({
+          inputRange: [first, index, last],
+          outputRange: I18nManager.isRTL
+            ? [-offset, 0, offset]
+            : [offset, 0, -offset],
+        }),
+      },
+    ],
+  };
+}
+
 export default {
   forLeft,
+  forLeftButton,
+  forLeftLabel,
+  forCenterFromLeft,
   forCenter,
   forRight,
 };

src/views/Header/HeaderTitle.js

@@ -15,7 +15,7 @@ const HeaderTitle = ({ style, ...rest }) => (
 const styles = StyleSheet.create({
   title: {
     fontSize: Platform.OS === 'ios' ? 17 : 20,
-    fontWeight: Platform.OS === 'ios' ? '600' : '500',
+    fontWeight: Platform.OS === 'ios' ? '700' : '500',
     color: 'rgba(0, 0, 0, .9)',
     textAlign: Platform.OS === 'ios' ? 'center' : 'left',
     marginHorizontal: 16,

src/views/Header/ModularHeaderBackButton.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { I18nManager, Image, Text, View, StyleSheet } from 'react-native';
+
+import TouchableItem from '../TouchableItem';
+
+class ModularHeaderBackButton extends React.PureComponent {
+  static defaultProps = {
+    tintColor: '#037aff',
+    truncatedTitle: 'Back',
+    // eslint-disable-next-line global-require
+    buttonImage: require('../assets/back-icon.png'),
+  };
+
+  state = {};
+
+  _onTextLayout = e => {
+    if (this.state.initialTextWidth) {
+      return;
+    }
+    this.setState({
+      initialTextWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
+    });
+  };
+
+  render() {
+    const {
+      buttonImage,
+      onPress,
+      width,
+      title,
+      titleStyle,
+      tintColor,
+      truncatedTitle,
+    } = this.props;
+
+    const renderTruncated =
+      this.state.initialTextWidth && width
+        ? this.state.initialTextWidth > width
+        : false;
+
+    let backButtonTitle = renderTruncated ? truncatedTitle : title;
+
+    // TODO: When we've sorted out measuring in the header, let's revisit this.
+    // This is clearly a bad workaround.
+    if (backButtonTitle && backButtonTitle.length > 8) {
+      backButtonTitle = truncatedTitle;
+    }
+
+    const { ButtonContainerComponent, LabelContainerComponent } = this.props;
+
+    return (
+      <TouchableItem
+        accessibilityComponentType="button"
+        accessibilityLabel={backButtonTitle}
+        accessibilityTraits="button"
+        testID="header-back"
+        delayPressIn={0}
+        onPress={onPress}
+        style={styles.container}
+        borderless
+      >
+        <View style={styles.container}>
+          <ButtonContainerComponent>
+            <Image
+              style={[
+                styles.icon,
+                !!title && styles.iconWithTitle,
+                !!tintColor && { tintColor },
+              ]}
+              source={buttonImage}
+            />
+          </ButtonContainerComponent>
+          {typeof backButtonTitle === 'string' && (
+            <LabelContainerComponent>
+              <Text
+                onLayout={this._onTextLayout}
+                style={[
+                  styles.title,
+                  !!tintColor && { color: tintColor },
+                  titleStyle,
+                ]}
+                numberOfLines={1}
+              >
+                {backButtonTitle}
+              </Text>
+            </LabelContainerComponent>
+          )}
+        </View>
+      </TouchableItem>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: 'transparent',
+  },
+  title: {
+    fontSize: 17,
+    paddingRight: 10,
+  },
+  icon: {
+    height: 21,
+    width: 12,
+    marginLeft: 9,
+    marginRight: 22,
+    marginVertical: 12,
+    resizeMode: 'contain',
+    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+  },
+  iconWithTitle: {
+    marginRight: 3,
+  },
+});
+
+export default ModularHeaderBackButton;

src/views/ResourceSavingSceneView.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import SceneView from './SceneView';
+
+const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
+
+export default class ResourceSavingSceneView extends React.PureComponent {
+  constructor(props) {
+    super();
+
+    const key = props.childNavigation.state.key;
+    const focusedIndex = props.navigation.state.index;
+    const focusedKey = props.navigation.state.routes[focusedIndex].key;
+    const isFocused = key === focusedKey;
+
+    this.state = {
+      awake: props.lazy ? isFocused : true,
+      visible: isFocused,
+    };
+  }
+
+  componentWillMount() {
+    this._actionListener = this.props.navigation.addListener(
+      'action',
+      this._onAction
+    );
+  }
+
+  componentWillUnmount() {
+    this._actionListener.remove();
+  }
+
+  render() {
+    const { awake, visible } = this.state;
+    const {
+      childNavigation,
+      navigation,
+      removeClippedSubviews,
+      lazy,
+      ...rest
+    } = this.props;
+
+    return (
+      <View
+        style={styles.container}
+        collapsable={false}
+        removeClippedSubviews={
+          Platform.OS === 'android'
+            ? removeClippedSubviews
+            : !visible && removeClippedSubviews
+        }
+      >
+        <View
+          style={
+            this._mustAlwaysBeVisible() || visible
+              ? styles.innerAttached
+              : styles.innerDetached
+          }
+        >
+          {awake ? <SceneView {...rest} navigation={childNavigation} /> : null}
+        </View>
+      </View>
+    );
+  }
+
+  _mustAlwaysBeVisible = () => {
+    return this.props.animationEnabled || this.props.swipeEnabled;
+  };
+
+  _onAction = payload => {
+    // We do not care about transition complete events, they won't actually change the state
+    if (
+      payload.action.type == 'Navigation/COMPLETE_TRANSITION' ||
+      !payload.state
+    ) {
+      return;
+    }
+
+    const { routes, index } = payload.state;
+    const key = this.props.childNavigation.state.key;
+
+    if (routes[index].key === key) {
+      if (!this.state.visible) {
+        let nextState = { visible: true };
+        if (!this.state.awake) {
+          nextState.awake = true;
+        }
+        this.setState(nextState);
+      }
+    } else {
+      if (this.state.visible) {
+        this.setState({ visible: false });
+      }
+    }
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  innerAttached: {
+    flex: 1,
+  },
+  innerDetached: {
+    flex: 1,
+    top: FAR_FAR_AWAY,
+  },
+});

src/views/SafeAreaView.js

@@ -1,317 +0,0 @@
-import React, { Component } from 'react';
-import {
-  DeviceInfo,
-  Dimensions,
-  InteractionManager,
-  NativeModules,
-  Platform,
-  SafeAreaView,
-  StyleSheet,
-  Animated,
-} from 'react-native';
-import withOrientation from './withOrientation';
-
-// See https://mydevice.io/devices/ for device dimensions
-const X_WIDTH = 375;
-const X_HEIGHT = 812;
-const PAD_WIDTH = 768;
-const PAD_HEIGHT = 1024;
-
-const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');
-
-const { PlatformConstants = {} } = NativeModules;
-const { minor = 0 } = PlatformConstants.reactNativeVersion || {};
-
-const isIPhoneX = (() => {
-  if (Platform.OS === 'web') return false;
-
-  if (minor >= 50) {
-    return DeviceInfo.isIPhoneX_deprecated;
-  }
-
-  return (
-    Platform.OS === 'ios' &&
-    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
-      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))
-  );
-})();
-
-const isIPad = (() => {
-  if (Platform.OS !== 'ios' || isIPhoneX) return false;
-
-  // if portrait and width is smaller than iPad width
-  if (D_HEIGHT > D_WIDTH && D_WIDTH < PAD_WIDTH) {
-    return false;
-  }
-
-  // if landscape and height is smaller that iPad height
-  if (D_WIDTH > D_HEIGHT && D_HEIGHT < PAD_WIDTH) {
-    return false;
-  }
-
-  return true;
-})();
-
-let _customStatusBarHeight = null;
-const statusBarHeight = isLandscape => {
-  if (_customStatusBarHeight !== null) {
-    return _customStatusBarHeight;
-  }
-
-  /**
-   * This is a temporary workaround because we don't have a way to detect
-   * if the status bar is translucent or opaque. If opaque, we don't need to
-   * factor in the height here; if translucent (content renders under it) then
-   * we do.
-   */
-  if (Platform.OS === 'android') {
-    if (global.Expo) {
-      return global.Expo.Constants.statusBarHeight;
-    } else {
-      return 0;
-    }
-  }
-
-  if (isIPhoneX) {
-    return isLandscape ? 0 : 44;
-  }
-
-  if (isIPad) {
-    return 20;
-  }
-
-  return isLandscape ? 0 : 20;
-};
-
-const doubleFromPercentString = percent => {
-  if (!percent.includes('%')) {
-    return 0;
-  }
-
-  const dbl = parseFloat(percent) / 100;
-
-  if (isNaN(dbl)) return 0;
-
-  return dbl;
-};
-
-class SafeView extends Component {
-  static setStatusBarHeight = height => {
-    _customStatusBarHeight = height;
-  };
-
-  state = {
-    touchesTop: true,
-    touchesBottom: true,
-    touchesLeft: true,
-    touchesRight: true,
-    orientation: null,
-    viewWidth: 0,
-    viewHeight: 0,
-  };
-
-  componentDidMount() {
-    InteractionManager.runAfterInteractions(() => {
-      this._onLayout();
-    });
-  }
-
-  componentWillReceiveProps() {
-    this._onLayout();
-  }
-
-  render() {
-    const { forceInset = false, isLandscape, children, style } = this.props;
-
-    const safeAreaStyle = this._getSafeAreaStyle();
-
-    return (
-      <Animated.View
-        ref={c => (this.view = c)}
-        onLayout={this._onLayout}
-        style={safeAreaStyle}
-      >
-        {this.props.children}
-      </Animated.View>
-    );
-  }
-
-  _onLayout = () => {
-    if (!this.view) return;
-
-    const { isLandscape } = this.props;
-    const { orientation } = this.state;
-    const newOrientation = isLandscape ? 'landscape' : 'portrait';
-    if (orientation && orientation === newOrientation) {
-      return;
-    }
-
-    const WIDTH = isLandscape ? X_HEIGHT : X_WIDTH;
-    const HEIGHT = isLandscape ? X_WIDTH : X_HEIGHT;
-
-    this.view._component.measureInWindow((winX, winY, winWidth, winHeight) => {
-      let realY = winY;
-      let realX = winX;
-
-      if (realY >= HEIGHT) {
-        realY = realY % HEIGHT;
-      } else if (realY < 0) {
-        realY = realY % HEIGHT + HEIGHT;
-      }
-
-      if (realX >= WIDTH) {
-        realX = realX % WIDTH;
-      } else if (realX < 0) {
-        realX = realX % WIDTH + WIDTH;
-      }
-
-      const touchesTop = realY === 0;
-      const touchesBottom = realY + winHeight >= HEIGHT;
-      const touchesLeft = realX === 0;
-      const touchesRight = realX + winWidth >= WIDTH;
-
-      this.setState({
-        touchesTop,
-        touchesBottom,
-        touchesLeft,
-        touchesRight,
-        orientation: newOrientation,
-        viewWidth: winWidth,
-        viewHeight: winHeight,
-      });
-    });
-  };
-
-  _getSafeAreaStyle = () => {
-    const { touchesTop, touchesBottom, touchesLeft, touchesRight } = this.state;
-    const { forceInset, isLandscape } = this.props;
-
-    const {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      viewStyle,
-    } = this._getViewStyles();
-
-    const style = {
-      ...viewStyle,
-      paddingTop: touchesTop ? this._getInset('top') : 0,
-      paddingBottom: touchesBottom ? this._getInset('bottom') : 0,
-      paddingLeft: touchesLeft ? this._getInset('left') : 0,
-      paddingRight: touchesRight ? this._getInset('right') : 0,
-    };
-
-    if (forceInset) {
-      Object.keys(forceInset).forEach(key => {
-        let inset = forceInset[key];
-
-        if (inset === 'always') {
-          inset = this._getInset(key);
-        }
-
-        if (inset === 'never') {
-          inset = 0;
-        }
-
-        switch (key) {
-          case 'horizontal': {
-            style.paddingLeft = inset;
-            style.paddingRight = inset;
-            break;
-          }
-          case 'vertical': {
-            style.paddingTop = inset;
-            style.paddingBottom = inset;
-            break;
-          }
-          case 'left':
-          case 'right':
-          case 'top':
-          case 'bottom': {
-            const padding = `padding${key[0].toUpperCase()}${key.slice(1)}`;
-            style[padding] = inset;
-            break;
-          }
-        }
-      });
-    }
-
-    // new height/width should only include padding from insets
-    // height/width should not be affected by padding from style obj
-    if (style.height && typeof style.height === 'number') {
-      style.height += style.paddingTop + style.paddingBottom;
-    }
-
-    if (style.width && typeof style.width === 'number') {
-      style.width += style.paddingLeft + style.paddingRight;
-    }
-
-    style.paddingTop = Math.max(style.paddingTop, paddingTop);
-    style.paddingBottom = Math.max(style.paddingBottom, paddingBottom);
-    style.paddingLeft = Math.max(style.paddingLeft, paddingLeft);
-    style.paddingRight = Math.max(style.paddingRight, paddingRight);
-
-    return style;
-  };
-
-  _getViewStyles = () => {
-    const { viewWidth } = this.state;
-    // get padding values from style to add back in after insets are determined
-    // default precedence: padding[Side] -> vertical | horizontal -> padding -> 0
-    let {
-      padding = 0,
-      paddingVertical = padding,
-      paddingHorizontal = padding,
-      paddingTop = paddingVertical,
-      paddingBottom = paddingVertical,
-      paddingLeft = paddingHorizontal,
-      paddingRight = paddingHorizontal,
-      ...viewStyle
-    } = StyleSheet.flatten(this.props.style || {});
-
-    if (typeof paddingTop !== 'number') {
-      paddingTop = doubleFromPercentString(paddingTop) * viewWidth;
-    }
-
-    if (typeof paddingBottom !== 'number') {
-      paddingBottom = doubleFromPercentString(paddingBottom) * viewWidth;
-    }
-
-    if (typeof paddingLeft !== 'number') {
-      paddingLeft = doubleFromPercentString(paddingLeft) * viewWidth;
-    }
-
-    if (typeof paddingRight !== 'number') {
-      paddingRight = doubleFromPercentString(paddingRight) * viewWidth;
-    }
-
-    return {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      viewStyle,
-    };
-  };
-
-  _getInset = key => {
-    const { isLandscape } = this.props;
-    switch (key) {
-      case 'horizontal':
-      case 'right':
-      case 'left': {
-        return isLandscape ? (isIPhoneX ? 44 : 0) : 0;
-      }
-      case 'vertical':
-      case 'top': {
-        return statusBarHeight(isLandscape);
-      }
-      case 'bottom': {
-        return isIPhoneX ? (isLandscape ? 24 : 34) : 0;
-      }
-    }
-  };
-}
-
-export default withOrientation(SafeView);

src/views/SwitchView/SwitchView.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import SceneView from '../SceneView';
+import withCachedChildNavigation from '../../withCachedChildNavigation';
+
+class SwitchContainer extends React.Component {
+  render() {
+    const { screenProps } = this.props;
+
+    const route = this.props.navigation.state.routes[
+      this.props.navigation.state.index
+    ];
+    const childNavigation = this.props.childNavigationProps[route.key];
+    const ChildComponent = this.props.router.getComponentForRouteName(
+      route.routeName
+    );
+
+    return (
+      <SceneView
+        component={ChildComponent}
+        navigation={childNavigation}
+        screenProps={screenProps}
+      />
+    );
+  }
+}
+
+export default withCachedChildNavigation(SwitchContainer);

src/views/TabView/TabBarBottom.js

@@ -7,13 +7,16 @@ import {
   Platform,
   Keyboard,
 } from 'react-native';
+import SafeAreaView from 'react-native-safe-area-view';
+
 import TabBarIcon from './TabBarIcon';
-import SafeAreaView from '../SafeAreaView';
+import NavigationActions from '../../NavigationActions';
 import withOrientation from '../withOrientation';
 
 const majorVersion = parseInt(Platform.Version, 10);
 const isIos = Platform.OS === 'ios';
-const useHorizontalTabs = majorVersion >= 11 && isIos;
+const isIOS11 = majorVersion >= 11 && isIos;
+const defaultMaxTabBarItemWidth = 125;
 
 class TabBarBottom extends React.PureComponent {
   // See https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html
@@ -25,6 +28,7 @@ class TabBarBottom extends React.PureComponent {
     showLabel: true,
     showIcon: true,
     allowFontScaling: true,
+    adaptive: isIOS11,
   };
 
   _renderLabel = scene => {
@@ -56,19 +60,19 @@ class TabBarBottom extends React.PureComponent {
 
     const tintColor = scene.focused ? activeTintColor : inactiveTintColor;
     const label = this.props.getLabel({ ...scene, tintColor });
-    let marginLeft = 0;
-    if (isLandscape && showIcon && useHorizontalTabs) {
-      marginLeft = LABEL_LEFT_MARGIN;
-    }
-    let marginTop = 0;
-    if (!isLandscape && showIcon && useHorizontalTabs) {
-      marginTop = LABEL_TOP_MARGIN;
-    }
 
     if (typeof label === 'string') {
       return (
         <Animated.Text
-          style={[styles.label, { color, marginLeft, marginTop }, labelStyle]}
+          numberOfLines={1}
+          style={[
+            styles.label,
+            { color },
+            showIcon && this._shouldUseHorizontalTabs()
+              ? styles.labelBeside
+              : styles.labelBeneath,
+            labelStyle,
+          ]}
           allowFontScaling={allowFontScaling}
         >
           {label}
@@ -104,7 +108,7 @@ class TabBarBottom extends React.PureComponent {
         inactiveTintColor={inactiveTintColor}
         renderIcon={renderIcon}
         scene={scene}
-        style={showLabel && useHorizontalTabs ? {} : styles.icon}
+        style={showLabel && this._shouldUseHorizontalTabs() ? {} : styles.icon}
       />
     );
   };
@@ -115,6 +119,82 @@ class TabBarBottom extends React.PureComponent {
     return testIDProps;
   };
 
+  _tabItemMaxWidth() {
+    const { tabStyle, layout } = this.props;
+    let maxTabBarItemWidth;
+
+    const flattenedTabStyle = StyleSheet.flatten(tabStyle);
+
+    if (flattenedTabStyle) {
+      if (typeof flattenedTabStyle.width === 'number') {
+        maxTabBarItemWidth = flattenedTabStyle.width;
+      } else if (
+        typeof flattenedTabStyle.width === 'string' &&
+        flattenedTabStyle.endsWith('%')
+      ) {
+        const width = parseFloat(flattenedTabStyle.width);
+        if (Number.isFinite(width)) {
+          maxTabBarItemWidth = layout.width * (width / 100);
+        }
+      } else if (typeof flattenedTabStyle.maxWidth === 'number') {
+        maxTabBarItemWidth = flattenedTabStyle.maxWidth;
+      } else if (
+        typeof flattenedTabStyle.maxWidth === 'string' &&
+        flattenedTabStyle.endsWith('%')
+      ) {
+        const width = parseFloat(flattenedTabStyle.maxWidth);
+        if (Number.isFinite(width)) {
+          maxTabBarItemWidth = layout.width * (width / 100);
+        }
+      }
+    }
+
+    if (!maxTabBarItemWidth) {
+      maxTabBarItemWidth = defaultMaxTabBarItemWidth;
+    }
+
+    return maxTabBarItemWidth;
+  }
+
+  _shouldUseHorizontalTabs() {
+    const { routes } = this.props.navigation.state;
+    const { isLandscape, layout, adaptive, tabStyle } = this.props;
+
+    if (!adaptive) {
+      return false;
+    }
+
+    let tabBarWidth = layout.width;
+    if (tabBarWidth === 0) {
+      return Platform.isPad;
+    }
+
+    if (!Platform.isPad) {
+      return isLandscape;
+    } else {
+      const maxTabBarItemWidth = this._tabItemMaxWidth();
+      return routes.length * maxTabBarItemWidth <= tabBarWidth;
+    }
+  }
+
+  _handleTabPress = index => {
+    const { jumpToIndex, navigation } = this.props;
+    const currentIndex = navigation.state.index;
+
+    if (currentIndex === index) {
+      let childRoute = navigation.state.routes[index];
+      if (childRoute.hasOwnProperty('index') && childRoute.index > 0) {
+        navigation.dispatch(
+          NavigationActions.popToTop({ key: childRoute.key })
+        );
+      } else {
+        // TODO: do something to scroll to top
+      }
+    } else {
+      jumpToIndex(index);
+    }
+  };
+
   render() {
     const {
       position,
@@ -136,9 +216,9 @@ class TabBarBottom extends React.PureComponent {
 
     const tabBarStyle = [
       styles.tabBar,
-      isLandscape && useHorizontalTabs
-        ? styles.tabBarLandscape
-        : styles.tabBarPortrait,
+      this._shouldUseHorizontalTabs() && !Platform.isPad
+        ? styles.tabBarCompact
+        : styles.tabBarRegular,
       style,
     ];
 
@@ -174,21 +254,28 @@ class TabBarBottom extends React.PureComponent {
                 accessibilityLabel={accessibilityLabel}
                 onPress={() =>
                   onPress
-                    ? onPress({ previousScene, scene, jumpToIndex })
-                    : jumpToIndex(index)
+                    ? onPress({
+                        previousScene,
+                        scene,
+                        jumpToIndex,
+                        defaultHandler: this._handleTabPress,
+                      })
+                    : this._handleTabPress(index)
                 }
               >
-                <Animated.View
-                  style={[
-                    styles.tab,
-                    isLandscape && useHorizontalTabs && styles.tabLandscape,
-                    !isLandscape && useHorizontalTabs && styles.tabPortrait,
-                    { backgroundColor },
-                    tabStyle,
-                  ]}
-                >
-                  {this._renderIcon(scene)}
-                  {this._renderLabel(scene)}
+                <Animated.View style={[styles.tab, { backgroundColor }]}>
+                  <View
+                    style={[
+                      styles.tab,
+                      this._shouldUseHorizontalTabs()
+                        ? styles.tabLandscape
+                        : styles.tabPortrait,
+                      tabStyle,
+                    ]}
+                  >
+                    {this._renderIcon(scene)}
+                    {this._renderLabel(scene)}
+                  </View>
                 </Animated.View>
               </TouchableWithoutFeedback>
             );
@@ -199,8 +286,6 @@ class TabBarBottom extends React.PureComponent {
   }
 }
 
-const LABEL_LEFT_MARGIN = 20;
-const LABEL_TOP_MARGIN = 15;
 const styles = StyleSheet.create({
   tabBar: {
     backgroundColor: '#F7F7F7', // Default background color in iOS 10
@@ -208,16 +293,15 @@ const styles = StyleSheet.create({
     borderTopColor: 'rgba(0, 0, 0, .3)',
     flexDirection: 'row',
   },
-  tabBarLandscape: {
+  tabBarCompact: {
     height: 29,
   },
-  tabBarPortrait: {
+  tabBarRegular: {
     height: 49,
   },
   tab: {
     flex: 1,
     alignItems: isIos ? 'center' : 'stretch',
-    justifyContent: 'flex-end',
   },
   tabPortrait: {
     justifyContent: 'flex-end',
@@ -232,9 +316,15 @@ const styles = StyleSheet.create({
   },
   label: {
     textAlign: 'center',
+    backgroundColor: 'transparent',
+  },
+  labelBeneath: {
     fontSize: 10,
     marginBottom: 1.5,
-    backgroundColor: 'transparent',
+  },
+  labelBeside: {
+    fontSize: 13,
+    marginLeft: 20,
   },
 });
 

src/views/TabView/TabBarTop.js

@@ -91,7 +91,15 @@ export default class TabBarTop extends React.PureComponent {
     const onPress = getOnPress(previousScene, scene);
 
     if (onPress) {
-      onPress({ previousScene, scene, jumpToIndex });
+      // To maintain the same API as `TabbarBottom`, we pass in a `defaultHandler`
+      // even though I don't believe in this case it should be any different
+      // than `jumpToIndex`.
+      onPress({
+        previousScene,
+        scene,
+        jumpToIndex,
+        defaultHandler: jumpToIndex,
+      });
     } else {
       jumpToIndex(scene.index);
     }

src/views/TabView/TabView.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
+import SafeAreaView from 'react-native-safe-area-view';
 
-import SceneView from '../SceneView';
+import ResourceSavingSceneView from '../ResourceSavingSceneView';
 import withCachedChildNavigation from '../../withCachedChildNavigation';
-import SafeAreaView from '../SafeAreaView';
 
 class TabView extends React.PureComponent {
   static defaultProps = {
+    lazy: true,
+    removedClippedSubviews: true,
     // fix for https://github.com/react-native-community/react-native-tab-view/issues/312
     initialLayout: Platform.select({
       android: { width: 1, height: 0 },
@@ -25,14 +27,18 @@ class TabView extends React.PureComponent {
     const TabComponent = this.props.router.getComponentForRouteName(
       route.routeName
     );
+
     return (
-      <View style={styles.page}>
-        <SceneView
-          screenProps={screenProps}
-          component={TabComponent}
-          navigation={childNavigation}
-        />
-      </View>
+      <ResourceSavingSceneView
+        lazy={this.props.lazy}
+        removeClippedSubViews={this.props.removeClippedSubviews}
+        animationEnabled={this.props.animationEnabled}
+        swipeEnabled={this.props.swipeEnabled}
+        screenProps={screenProps}
+        component={TabComponent}
+        navigation={this.props.navigation}
+        childNavigation={childNavigation}
+      />
     );
   };
 
@@ -140,11 +146,15 @@ class TabView extends React.PureComponent {
     const tabBarVisible =
       options.tabBarVisible == null ? true : options.tabBarVisible;
 
-    const swipeEnabled =
+    let swipeEnabled =
       options.swipeEnabled == null
         ? this.props.swipeEnabled
         : options.swipeEnabled;
 
+    if (typeof swipeEnabled === 'function') {
+      swipeEnabled = swipeEnabled(state);
+    }
+
     if (tabBarComponent !== undefined && tabBarVisible) {
       if (tabBarPosition === 'bottom') {
         renderFooter = this._renderTabBar;
@@ -185,9 +195,4 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-
-  page: {
-    flex: 1,
-    overflow: 'hidden',
-  },
 });