chore: publish

- @react-navigation/bottom-tabs@5.0.5 - @react-navigation/compat@5.0.5 - @react-navigation/core@5.1.4 - @react-navigation/drawer@5.0.5 - @react-navigation/material-bottom-tabs@5.0.5 - @react-navigation/material-top-tabs@5.0.5 - @react-navigation/native-stack@5.0.5 - @react-navigation/native@5.0.5 - @react-navigation/stack@5.0.5
chore: tweak versions for peer dependencies
2026-01-13 22:42:25 +08:00 · 2020-02-15 00:18:52 +01:00 · 2020-02-15 00:15:01 +01:00 · 2020-02-14 23:17:29 +01:00 · 2020-02-14 23:04:09 +01:00 · 2020-02-14 22:48:04 +01:00
292 changed files with 160923 additions and 6250 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -31,7 +31,7 @@ jobs:
        - run: |
            yarn lint
            yarn typescript
-  unit-test:
+  unit-tests:
      <<: *defaults
      steps:
        - attach_workspace:
@@ -49,6 +49,7 @@ jobs:
            at: ~/project
        - run: |
            yarn lerna run prepare
+            node scripts/check-types-path.js

 workflows:
  version: 2
@@ -58,7 +59,7 @@ workflows:
      - lint-and-typecheck:
          requires:
            - install-dependencies
-      - unit-test:
+      - unit-tests:
          requires:
            - install-dependencies
      - build-packages:
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,3 +4,7 @@ dist/
 lib/
 web-build/
 web-report/
+
+.expo/
+.yarn/
+.vscode/
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,40 +0,0 @@
-## The issue tracker is reserved for bug reports only.
-
-If you have a question, feature request, or an idea for improving the library or its related tools, please try one of the following resources:
-
- [Read the documentation](https://reactnavigation.org/)
- [Post an issue to the website repository if you'd like to see a documentation change](http://github.com/react-navigation/website)
- [Post a feature request to Canny](https://react-navigation.canny.io/feature-requests)
- [Write a RFC if you have ideas for how to implement a feature request](https://github.com/react-navigation/rfcs)
- [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.
-
---
-
-### Current Behavior
-
- What code are you running and what is happening?
- Include a screenshot if it makes sense.
-
-### Expected Behavior
-
- What do you expect should be happening?
- Include a screenshot if it makes sense.
-
-### How to reproduce
-
- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-
-### Your Environment
-
-| software         | version
-| ---------------- | -------
-| react-navigation |
-| react-native     |
-| expo             |
-| node             |
-| npm or yarn      |
--- a/.github/ISSUE_TEMPLATE/bug-report-bottom-tabs.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-bottom-tabs.md
@@ -0,0 +1,38 @@
+---
+name: Bottom Tab Navigator
+about: Report an issue with Bottom Tab Navigator (@react-navigation/bottom-tabs)
+title: ''
+labels: bug, package:bottom-tabs
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                      | version |
+| ----------------------------- | ------- |
+| iOS or Android                |
+| @react-navigation/native      |
+| @react-navigation/bottom-tabs |
+| react-native-screens          |
+| react-native                  |
+| expo                          |
+| node                          |
+| npm or yarn                   |
--- a/.github/ISSUE_TEMPLATE/bug-report-drawer.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-drawer.md
@@ -0,0 +1,41 @@
+---
+name: Drawer Navigator
+about: Report an issue with Drawer Navigator (@react-navigation/drawer)
+title: ''
+labels: bug, package:drawer
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| @react-navigation/drawer       |
+| react-native-reanimated        |
+| react-native-gesture-handler   |
+| react-native-safe-area-context |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |
--- a/.github/ISSUE_TEMPLATE/bug-report-material-bottom-tabs.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-material-bottom-tabs.md
@@ -0,0 +1,38 @@
+---
+name: Material Bottom Tab Navigator
+about: Report an issue with Material Bottom Tab Navigator (@react-navigation/material-bottom-tabs)
+title: ''
+labels: bug, package:material-bottom-tabs
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                               | version |
+| -------------------------------------- | ------- |
+| iOS or Android                         |
+| @react-navigation/native               |
+| @react-navigation/material-bottom-tabs |
+| react-native-paper                     |
+| react-native                           |
+| expo                                   |
+| node                                   |
+| npm or yarn                            |
--- a/.github/ISSUE_TEMPLATE/bug-report-material-top-tabs.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-material-top-tabs.md
@@ -0,0 +1,38 @@
+---
+name: Material Top Tab Navigator
+about: Report an issue with Material Top Tab Navigator (@react-navigation/material-top-tabs)
+title: ''
+labels: bug, package:material-top-tabs
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                            | version |
+| ----------------------------------- | ------- |
+| iOS or Android                      |
+| @react-navigation/native            |
+| @react-navigation/material-top-tabs |
+| react-native-tab-view               |
+| react-native                        |
+| expo                                |
+| node                                |
+| npm or yarn                         |
--- a/.github/ISSUE_TEMPLATE/bug-report-native-stack.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-native-stack.md
@@ -0,0 +1,38 @@
+---
+name: Native Stack Navigator
+about: Report an issue with Native Stack Navigator (@react-navigation/native-stack)
+title: ''
+labels: bug, package:native-stack
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| @react-navigation/native-stack |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |
--- a/.github/ISSUE_TEMPLATE/bug-report-stack.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-stack.md
@@ -0,0 +1,40 @@
+---
+name: Stack Navigator
+about: Report an issue with Stack Navigator (@react-navigation/stack)
+title: ''
+labels: bug, package:stack
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| @react-navigation/stack        |
+| react-native-gesture-handler   |
+| react-native-safe-area-context |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |
--- a/.github/ISSUE_TEMPLATE/bug-report-version-4.md
+++ b/.github/ISSUE_TEMPLATE/bug-report-version-4.md
@@ -0,0 +1,43 @@
+---
+name: React Navigation 4
+about: Report an issue with React Navigation 4
+title: ''
+labels: bug, version-4
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| react-navigation               |
+| react-navigation-stack         |
+| react-navigation-tabs          |
+| react-navigation-drawer        |
+| react-native-reanimated        |
+| react-native-gesture-handler   |
+| react-native-safe-area-context |
+| react-native-screens           |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -0,0 +1,36 @@
+---
+name: Other bugs
+about: Report an issue which is not about a specific navigator.
+title: ''
+labels: bug
+assignees: ''
+---
+
+**Current Behavior**
+
+- What code are you running and what is happening?
+- Include a screenshot or video if it makes sense.
+
+**Expected Behavior**
+
+- What do you expect should be happening?
+- Include a screenshot or video if it makes sense.
+
+**How to reproduce**
+
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
+- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
+- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
+- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
+- Before reporting an issue, make sure you are on latest version of the package.
+
+**Your Environment**
+
+| software                       | version |
+| ------------------------------ | ------- |
+| iOS or Android                 |
+| @react-navigation/native       |
+| react-native                   |
+| expo                           |
+| node                           |
+| npm or yarn                    |
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,20 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Troubleshooting
+    url: https://reactnavigation.org/docs/troubleshooting.html
+    about: Read how to troubleshoot and fix common issues and mistakes.
+  - name: Documentation
+    url: https://reactnavigation.org
+    about: Read the official documentation.
+  - name: Feature requests
+    url: https://react-navigation.canny.io/feature-requests
+    about: Post a feature request on Canny.
+  - name: StackOverflow
+    url: https://stackoverflow.com/questions/tagged/react-navigation
+    about: Ask and answer questions using the react-navigation label.
+  - name: Reactiflux
+    url: https://www.reactiflux.com/
+    about: Chat with other community members in the react-navigation channel.
+  - name: Write an RFC
+    url: https://github.com/react-navigation/rfcs
+    about: Write a RFC if you have ideas for how to implement a feature request.
--- a/.github/PULL_REQUEST.md
+++ b/.github/PULL_REQUEST.md
@@ -1,10 +1,10 @@
 Please provide enough information so that others can review your pull request:

-## Motivation
+**Motivation**

 Explain the **motivation** for making this change. What existing problem does the pull request solve?

-## Test plan
+**Test plan**

 Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.

@@ -12,6 +12,6 @@ Make sure you test on both platforms if your change affects both platforms.

 The code must pass tests.

-## Code formatting
+**Code formatting**

 Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing.
--- a/.github/workflows/expo-preview.yml
+++ b/.github/workflows/expo-preview.yml
@@ -0,0 +1,54 @@
+name: Expo Preview
+on: [pull_request]
+
+jobs:
+  publish:
+    name: Install and publish
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.head.repo.owner.login == 'react-navigation'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+
+      - name: Setup Expo
+        uses: expo/expo-github-action@v5
+        with:
+          expo-version: 3.x
+          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
+          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
+          expo-cache: true
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Check yarn cache
+        uses: actions/cache@v1
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Publish Expo app
+        working-directory: ./example
+        run: expo publish --release-channel=pr-${{ github.event.number }}
+
+      - name: Get expo link
+        id: expo
+        run: echo "::set-output name=path::@react-navigation/react-react-navigationample?release-channel=pr-${{ github.event.number }}"
+
+      - name: Comment on PR
+        uses: unsplash/comment-on-pr@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          msg: The Expo app for the example from this branch is ready!<br><br>[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})<br><br><a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>.
--- a/.github/workflows/expo.yml
+++ b/.github/workflows/expo.yml
@@ -0,0 +1,44 @@
+name: Expo Publish
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    name: Install and publish
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+
+      - name: Setup Expo
+        uses: expo/expo-github-action@v5
+        with:
+          expo-version: 3.x
+          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
+          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
+          expo-cache: true
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Publish Expo app
+        working-directory: ./example
+        run: expo publish
--- a/.github/workflows/rebase.yml
+++ b/.github/workflows/rebase.yml
@@ -0,0 +1,27 @@
+name: Automatic Rebase
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  rebase:
+    name: Rebase
+    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+        with:
+          fetch-depth: 0
+
+      - name: Automatic Rebase
+        uses: cirrus-actions/rebase@1.2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    # https://github.community/t5/GitHub-Actions/Workflow-is-failing-if-no-job-can-be-ran-due-to-condition/m-p/38186#M3250
+  always_job:
+    name: Always run job
+    runs-on: ubuntu-latest
+    steps:
+      - name: Always run
+        run: echo "This job is used to prevent the workflow to fail when all other jobs are skipped."
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -0,0 +1,20 @@
+name: "Close stale issues and pull requests"
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/stale@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'Hello 👋, this issue has been open for more than 3 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.'
+        stale-pr-message: 'Hello 👋, this pull request has been open for more than 3 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.'
+        days-before-stale: 90
+        days-before-close: 7
+        stale-issue-label: 'stale'
+        stale-pr-label: 'stale'
+        exempt-issue-label: 'keep open'
+        exempt-pr-label: 'keep open'
--- a/.github/workflows/triage.yml
+++ b/.github/workflows/triage.yml
@@ -0,0 +1,38 @@
+name: Triage
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  needs-more-info:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'needs more info'
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/github@v1.0.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: comment "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.)."
+
+  needs-repro:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'needs repro'
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/github@v1.0.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: comment "Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then you can also provide the repro in a GitHub repository."
+
+  question:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'question'
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/github@v1.0.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: comment "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel."
--- a/.yarn/releases/yarn-1.18.0.js
+++ b/.yarn/releases/yarn-1.18.0.js
--- a/.yarnrc
+++ b/.yarnrc
@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.18.0.js"
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,204 @@
+# Contributing
+
+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:
+
+- Responding to one of the open [issues](https://github.com/react-navigation/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.
+- 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).
+
+If you don't know where to start, check the ones with the label [`good first issue`](https://github.com/react-navigation/react-navigation/labels/good%20first%20issue) - even fixing a typo in the documentation is a worthy contribution!
+
+## Development workflow
+
+The project uses a monorepo structure for the packages managed by [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) and [lerna](https://lerna.js.org). To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
+
+```sh
+yarn
+```
+
+While developing, you can run the [example app](/example/) with [Expo](https://expo.io/) to test your changes:
+
+```sh
+yarn example start
+```
+
+Make sure your code passes TypeScript and ESLint. Run the following to verify:
+
+```sh
+yarn typescript
+yarn lint
+```
+
+To fix formatting errors, run the following:
+
+```sh
+yarn lint --fix
+```
+
+Remember to add tests for your change if possible. Run the unit tests by:
+
+```sh
+yarn test
+```
+
+Running the e2e tests with Detox (on iOS) requires the following:
+
+- Mac with macOS (at least macOS High Sierra 10.13.6)
+- Xcode 10.1+ with Xcode command line tools
+
+First you need to install `applesimutils` and `detox-cli`:
+
+```sh
+brew tap wix/brew
+brew install applesimutils
+yarn global add detox-cli
+```
+
+Then you can build and run the tests:
+
+```sh
+detox build -c ios.sim.debug
+detox test -c ios.sim.debug
+```
+
+### Commit message convention
+
+We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
+
+- `fix`: bug fixes, e.g. fix crash due to deprecated method.
+- `feat`: new features, e.g. add new method to the module.
+- `refactor`: code refactor, e.g. migrate from class components to hooks.
+- `docs`: changes into documentation, e.g. add usage example for the module..
+- `test`: adding or updating tests, eg add integration tests using detox.
+- `chore`: tooling changes, e.g. change CI config.
+
+Our pre-commit hooks verify that your commit message matches this format when committing.
+
+### Linting and tests
+
+[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
+
+We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
+
+Our pre-commit hooks verify that the linter and tests pass when committing.
+
+### Scripts
+
+The `package.json` file contains various scripts for common tasks:
+
+- `yarn install`: setup project by installing all dependencies and pods.
+- `yarn typescript`: type-check files with TypeScript.
+- `yarn lint`: lint files with ESLint.
+- `yarn test`: run unit tests with Jest.
+- `yarn example start`: run the example app with Expo.
+
+### Sending a pull request
+
+> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+
+When you're sending a pull request:
+
+- Prefer small pull requests focused on one change.
+- Verify that linters and tests are passing.
+- Review the documentation to make sure it looks good.
+- Follow the pull request template when opening a pull request.
+- For pull requests that change the API or implementation, discuss with maintainers first by opening an issue.
+
+## Publishing
+
+Maintainers with write access to the GitHub repo and the npm organization can publish new versions. To publish a new version, first, you need to export a `GH_TOKEN` environment variable as mentioned [here](https://github.com/lerna/lerna/tree/master/commands/version#--create-release-type). Then run:
+
+```sh
+yarn lerna publish
+```
+
+This will automatically bump the version and publish the packages. It'll also publish the changelogs on GitHub for each package.
+
+## Code of Conduct
+
+### Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+### Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+### Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+### Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to Brent Vatne ([brentvatne@gmail.com](mailto:brentvatne@gmail.com)), Satyajit Sahoo ([satyajit.happy@gmail.com](mailto:satyajit.happy@gmail.com)) or Michał Osadnik ([micosa97@gmail.com](mailto:micosa97@gmail.com)). All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+### Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+#### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+#### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+#### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+#### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
+available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
--- a/README.md
+++ b/README.md
@@ -1,545 +1,57 @@
-# Rethinking Navigation
+# React Navigation 5

 [![Build Status][build-badge]][build]
 [![Code Coverage][coverage-badge]][coverage]
 [![MIT License][license-badge]][license]

-An exploration of a component-first API for React Navigation for building more dynamic navigation solutions.
+Routing and navigation for your React Native apps.

-## Considerations
+Documentation can be found at [reactnavigation.org](https://reactnavigation.org/).

- Should play well with static type system
- Navigation state should be contained in root component (helpful for stuff such as deep linking)
- Component-first API
-
-## Building blocks
-
-### `NavigationContainer`
-
-Component which wraps the whole app. It stores the state for the whole navigation tree.
-
-### `useNavigationBuilder`
-
-Hook which can access the navigation state from the context. Along with the state, it also provides some helpers to modify the navigation state provided by the router. All state changes are notified to the parent `NavigationContainer`.
-
-### Router
-
-The router object provides various helper methods to deal with the state and actions, a reducer to update the state as well as some action creators.
-
-The router is responsible for handling actions dispatched by calling methods on the `navigation` object. If the router cannot handle an action, it can return `null`, which would propagate the action to other routers until it's handled.
-
-### Navigator
-
-Navigators bundle a router and a view which takes the navigation state and decides how to render it.
-
-A simple navigator could look like this:
-
-```js
-import { createNavigatorFactory } from '@react-navigation/native';
-
-function StackNavigator({ initialRouteName, children, ...rest }) {
-  // The `navigation` object contains the navigation state and some helpers (e.g. push, pop)
-  // The `descriptors` object contains the screen options and a helper for rendering a screen
-  const { state, navigation, descriptors } = useNavigationBuilder(StackRouter, {
-    initialRouteName,
-    children,
-  });
-
-  return (
-    // The view determines how to animate any state changes
-    <StackView
-      state={state}
-      navigation={navigation}
-      descriptors={descriptors}
-      {...rest}
-    />
-  );
-}
-
-export default createNavigatorFactory(StackNavigator);
-```
-
-The navigator can render a screen by calling `descriptors[route.key].render()`. Internally, the descriptor adds appropriate wrappers to handle nested state.
-
-## Architectural differences
-
-### Shape of the navigation state
-
-The shape of the navigation state looks very similar to the current implementation. There are few important differences:
-
- The name of the route is in the `route.name` property instead of `route.routeName`.
- The state of the child navigator exists on a separate property `route.state`.
- The state object contains a `routeNames` property which contains the list of defined route names in an array of strings,
-
-Example:
-
-```js
-{
-  index: 0,
-  key: 'stack-ytwk65',
-  routeNames: ['home', 'profile', 'settings'],
-  routes: [
-    {
-      key: 'home-hjds3b',
-      name: 'home',
-      state: {
-        index: 1,
-        key: 'tab-jhsf6g',
-        routeNames: ['feed', 'recommended'],
-        routes: [
-          {
-            key: 'feed-jv2iud',
-            name: 'feed',
-          },
-          {
-            key: 'recommended-njdh63',
-            name: 'recommended',
-          },
-        ],
-      },
-    },
-  ],
-}
-```
-
-### Deriving initial state
-
-In the current implementation of React Navigation, the initial state is extracted from the navigator definitions. This is possible because they are defined statically. In our case, it's not possible because the screens are rendered dynamically.
-
-Turns out we don't really need the initial state in the `NavigationContainer`. This state is the default state, so we can store `undefined` instead, and let the navigators initialize their initial state themselves. Next time an action modifies the state, we update the value in the container.
-
-If an initial state is specified, e.g. as a result of `Linking.getInitialURL()`, the child navigators will use that state, instead of having to initialize it themselves.
-
-### Passing state to child navigator
-
-Navigation state is exposed to children navigators via React context instead of having to pass it down manually. This lets the user nest navigators freely without having to worry about properly passing the state down.
-
-### Accessing state of other navigators
-
-Navigators should not access the state of other navigators. It might be tempting to access the state of a child route to perform some checks, but it's not going to work correctly, as the state object may not exist yet.
-
-Instead of direct state access, navigators should communicate via events. Each navigator should access and modify its own state only.
-
-### Bubbling of actions
-
-In the current implementation of React Navigation, routers manually call the child routers to apply any actions. Since we have a component based architecture, this is not really possible.
-
-Instead, we use an event based system. Child navigators can add listeners to handle actions. If the parent couldn't handle the action, it'll call the listeners. The event system is built into the core and the routers don't need to worry about it.
-
-When an action can be bubble, the `getStateForAction` method from a router should return `null`, otherwise it should return the state object.
-
-It's also possible to disable bubbling of actions when dispatching them by adding a `target` key in the action. The `target` key should refer to the key of the navigator that should handle the action.
-
-## Basic usage
-
-```js
-import { createStackNavigator } from '@react-navigation/stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-const Stack = createStackNavigator();
-const Tab = createBottomTabNavigator();
-
-function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="home">
-        <Stack.Screen name="settings" component={Settings} />
-        <Stack.Screen
-          name="profile"
-          component={Profile}
-          options={{ title: 'John Doe' }}
-        />
-        <Stack.Screen name="home">
-          {() => (
-            <Tab.Navigator initialRouteName="feed">
-              <Tab.Screen name="feed" component={Feed} />
-              <Tab.Screen name="article" component={Article} />
-              <Tab.Screen name="notifications">
-                {props => <Notifications {...props} />}
-              </Tab.Screen>
-            </Tab.Navigator>
-          )}
-        </Stack.Screen>
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-```
-
-Navigators need to have `Screen` components as their direct children. These components don't do anything by themselves, but the navigator can extract information from these and determine what to render. Implementation-wise, we use `React.Children` API for this purpose.
-
-The content to render can be specified in 2 ways:
-
-1. React component in `component` prop (recommended)
-2. Render callback as children
-
-When a React component is specified, the navigator takes care of adding a `React.memo` to prevent unnecessary re-renders. However, it's not possible to pass extra props to the component this way. It's preferable to use the context API for such cases instead of props.
-
-A render callback which doesn't have such limitation and is easier to use for this purpose. However, performance optimization for the component is left to the user in such case.
-
-The rendered component will receives a `navigation` prop with various helpers and a `route` prop which represents the route being rendered.
-
-## Setting screen options
-
-In React Navigation, screen options can be specified in a static property on the component (`navigationOptions`). This poses few issues:
-
- It's not possible to configure options based on props, state or context
- To update the props based on an action in the component (such as button press), we need to do it in a hacky way by changing params
- It breaks when used with HOCs which don't hoist static props, which is a common source of confusion
-
-Instead of a static property, we expose a method to configure screen options:
-
-```js
-function Selection({ navigation }) {
-  const [selectedIds, setSelectedIds] = React.useState([]);
-
-  navigation.setOptions({
-    title: `${selectedIds.length} items selected`,
-  });
-
-  return <SelectionList onSelect={id => setSelectedIds(ids => [...ids, id])} />;
-}
-```
-
-This allows options to be changed based on props, state or context, and doesn't have the disadvantages of static configuration.
-
-## Navigation events
-
-Screens can add listeners on the `navigation` prop like in React Navigation. By default, `focus` and `blur` events are fired when focused screen changes:
-
-```js
-function Profile({ navigation }) {
-  React.useEffect(() =>
-    navigation.addListener('focus', () => {
-      // do something
-    })
-  );
-
-  return <ProfileContent />;
-}
-```
-
-The `navigation.addListener` method returns a function to remove the listener which can be returned as the cleanup function in an effect.
-
-Navigators can also emit custom events using the `emit` method in the `navigation` object passed:
-
-```js
-navigation.emit({
-  type: 'transitionStart',
-  data: { blurring: false },
-  target: route.key,
-});
-```
-
-The `data` is available under the `data` property in the `event` object, i.e. `event.data`.
-
-The `target` property determines the screen that will receive the event. If the `target` property is omitted, the event is dispatched to all screens in the navigator.
-
-Screens cannot emit events as there is no `emit` method on a screen's `navigation` prop.
-
-If you don't need to get notified of focus change, but just need to check if the screen is currently focused in a callback, you can use the `navigation.isFocused()` method which returns a boolean. Note that it's not safe to use this in `render`. Only use it in callbacks, event listeners etc.
-
-## Additional utilities
-
-### Access navigation anywhere
-
-Passing the `navigation` prop down can be tedious. The library exports a `useNavigation` hook which can access the `navigation` prop from the parent screen:
-
-```js
-const navigation = useNavigation();
-```
-
-### Side-effects in focused screen
-
-Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using `focus` and `blur` events, it's not very ergonomic.
-
-To make this easier, the library exports a `useFocusEffect` hook:
-
-```js
-import { useFocusEffect } from '@react-navigation/native';
-
-function Profile({ userId }) {
-  const [user, setUser] = React.useState(null);
-
-  const fetchUser = React.useCallback(() => {
-    const request = API.fetchUser(userId).then(
-      data => setUser(data),
-      error => alert(error.message)
-    );
-
-    return () => request.abort();
-  }, [userId]);
-
-  useFocusEffect(fetchUser);
-
-  return <ProfileContent user={user} />;
-}
-```
-
-The `useFocusEffect` is analogous to React's `useEffect` hook. The only difference is that it runs on focus instead of render.
-
-**NOTE:** To avoid the running the effect too often, it's important to wrap the callback in `useCallback` before passing it to `useFocusEffect` as shown in the example.
-
-### Render based on focus state
-
-We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
-
-```js
-import { useIsFocused } from '@react-navigation/native';
-
-// ...
-
-const isFocused = useIsFocused();
-```
-
-## React Native
-
-For proper UX in React Native, we need to respect platform behavior such as the device back button on Android, deep linking etc. The library exports few hooks to make it easier.
-
-### Back button integration
-
-When the back button on the device is pressed, we also want to navigate back in the focused navigator. The library exports a `useBackButton` hook to handle this:
-
-```js
-import { useBackButton } from '@react-navigation/native';
-
-// ...
-
-const ref = React.useRef();
-
-useBackButton(ref);
-
-return <NavigationContainer ref={ref}>{/* content */}</NavigationContainer>;
-```
-
-### Scroll to top on tab button press
-
-When there's a scroll view in a tab and the user taps on the already focused tab bar again, we might want to scroll to top in our scroll view. The library exports a `useScrollToTop` hook to handle this:
-
-```js
-import { useScrollToTop } from '@react-navigation/native';
-
-// ...
-
-const ref = React.useRef();
-
-useScrollToTop(ref);
-
-return <ScrollView ref={ref}>{/* content */}</ScrollView>;
-```
-
-The hook can accept a ref object to any view that has a `scrollTo` method.
-
-### Deep-link integration
-
-To handle incoming links, we need to handle 2 scenarios:
-
-1. If the app wasn't previously open, we need to set the initial state based on the link
-2. If the app was already open, we need to update the state to reflect the incoming link
-
-The current implementation of React Navigation has an advantage in handling deep links and is able to automatically set the state based on the path definitions for each screen. It's possible because it can get the configuration for all screens statically.
-
-With our dynamic architecture, we can't determine the state automatically. So it's necessary to manually translate a deep link to a navigation state. The library exports a `getStateFromPath` utility to convert a URL to a state object if the path segments translate directly to route names.
-
-For example, the path `/rooms/chat?user=jane` will be translated to a state object like this:
-
-```js
-{
-  routes: [
-    {
-      name: 'rooms',
-      state: {
-        routes: [
-          {
-            name: 'chat',
-            params: { user: 'jane' },
-          },
-        ],
-      },
-    },
-  ],
-}
-```
-
-The `useLinking` hooks makes it easier to handle incoming links:
-
-```js
-import { useLinking } from '@react-navigation/native';
-
-// ...
-
-const ref = React.useRef();
-
-const { getInitialState } = useLinking(ref, {
-  prefixes: ['https://myapp.com', 'myapp://'],
-});
-
-const [isReady, setIsReady] = React.useState(false);
-const [initialState, setInitialState] = React.useState();
-
-React.useEffect(() => {
-  getInitialState()
-    .catch(() => {})
-    .then(state => {
-      if (state !== undefined) {
-        setInitialState(state);
-      }
-
-      setIsReady(true);
-    });
-}, [getInitialState]);
-
-if (!isReady) {
-  return null;
-}
-
-return (
-  <NavigationContainer initialState={initialState} ref={ref}>
-    {/* content */}
-  </NavigationContainer>
-);
-```
-
-The hook also accepts a `getStateFromPath` option where you can provide a custom function to convert the URL to a valid state object for more advanced use cases.
-
-## Type-checking
-
-The library is written with TypeScript and provides type definitions for TypeScript projects.
-
-When building custom navigators, each navigator also need to export a custom type for the `navigation` prop which should contain the actions they provide, .e.g. `push` for stack, `jumpTo` for tab etc. and pass correct type parameters to the helper functions to ensure that it works well with type-checking.
-
-Currently type checking and intelliSense works for route name and params. The user has to define a type alias with a list of routes along with the type of params they use.
-
-For our example above, we need 2 separate types for stack and tabs:
-
-```ts
-type StackParamList = {
-  settings: undefined;
-  profile: { userId: string };
-  home: undefined;
-};
-
-type TabParamList = {
-  feed: undefined;
-  article: undefined;
-  notifications: undefined;
-};
-```
-
-In a component, it's possible to annotate the `navigation` and `route` props using these types:
-
-```ts
-type Props = {
-  navigation: StackNavigationProp<StackParamList, 'profile'>;
-  route: RouteProp<StackParamList, 'profile'>;
-};
-
-function Profile(props: Props) {
-  // Content
-}
-```
-
-Annotating the `navigation` prop will be enough for provide type-checking for actions such as `navigate` etc. Annotating `route` will provide type-checking for accessing `params` for the current route.
-
-For nested navigators, the `navigation` prop is a combination of multiple `navigation` props, so we need to combine multiple types to type them. We export a type called `CompositeNavigationProp` to make it easier:
-
-```ts
-type FeedScreenNavigationProp = CompositeNavigationProp<
-  TabNavigationProp<TabParamList, 'feed'>,
-  StackNavigationProp<StackParamList>
->;
-```
-
-The `CompositeNavigationProp` type takes 2 parameters, first parameter is the primary navigation type (type for the navigator that owns this screen) and second parameter is the secondary navigation type (type for a parent navigator). The primary navigation type should always have the screen's route name as it's second parameter.
-
-For multiple parent navigators, this secondary type should be nested:
-
-```ts
-type FeedScreenNavigationProp = CompositeNavigationProp<
-  TabNavigationProp<TabParamList, 'feed'>,
-  CompositeNavigationProp<
-    StackNavigationProp<StackParamList>,
-    DrawerNavigationProp<DrawerParamList>
-  >
->;
-```
-
-To annotate the `navigation` prop from `useNavigation`, we can use a type parameter:
-
-```ts
-const navigation = useNavigation<FeedScreenNavigationProp>();
-```
-
-It's also possible to type-check the navigator to some extent. To do this, we need to pass a generic when creating the navigator object:
-
-```ts
-const Stack = createStackNavigator<StackParamList>();
-```
-
-And then we can use it:
-
-```js
-<Stack.Navigator initialRouteName="profile">
-  <Stack.Screen name="settings" component={Settings} />
-  <Stack.Screen
-    name="profile"
-    component={Profile}
-    options={{ title: 'My profile' }}
-  />
-  <Stack.Screen name="home" component={Home} />
-</Stack.Navigator>
-```
-
-Unfortunately it's not possible to verify that the type of children elements are correct since [TypeScript doesn't support type-checking JSX elements](https://github.com/microsoft/TypeScript/issues/21699).
+If you are looking for version 4, the code can be found in the [4.x branch](https://github.com/react-navigation/react-navigation/tree/4.x).

 ## Contributing

-The project uses a monorepo structure for the packages managed by [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) and [lerna](https://lerna.js.org). To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
+Please read through our [contribution guide](CONTRIBUTING.md) a to get started!
+
+## Installing from a fork on GitHub
+
+Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use [`gitpkg`](https://github.com/ramasilveyra/gitpkg).
+
+First install `gitpkg`:

 ```sh
-yarn
+yarn global add gitpkg
 ```

-While developing, you can run the [example app](/example/) with [Expo](https://expo.io/) to test your changes:
+Then follow these steps to publish and install a forked package:
+
+1. Fork this repo to your account and clone the forked repo to your local machine
+1. Open a Terminal and `cd` to the location of the cloned repo
+1. Run `yarn` to install any dependencies
+1. If you want to make any changes, make them and commit
+1. Now `cd` to the package directory that you want to use (e.g. `cd packages/stack` for `@react-navigation/stack`)
+1. Run `gitpkg publish` to publish the package to your repo
+
+After publishing, you should see something like this:

 ```sh
-yarn example start
+Package uploaded to git@github.com:<user>/<repo>.git with the name <name>
 ```

-Make sure your code passes TypeScript and ESLint. Run the following to verify:
+You can now install the dependency in your project:

 ```sh
-yarn typescript
-yarn lint
+yarn add <user>/<repo>.git#<name>
 ```

-To fix formatting errors, run the following:
-
-```sh
-yarn lint --fix
-```
-
-Remember to add tests for your change if possible. Run the tests by:
-
-```sh
-yarn test
-```
-
-## Publishing
-
-To publish a new version, first we need to export a `GH_TOKEN` environment variable as mentioned [here](https://github.com/lerna/lerna/tree/master/commands/version#--create-release-type). Then run:
-
-```sh
-yarn lerna publish
-```
-
-This will automatically bump the version and publish the packages. It'll also publish the changelogs on GitHub for each package.
+Remember to replace `<user>`, `<repo>` and `<name>` with right values.

 <!-- badges -->

-[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/navigation-ex/master.svg?style=flat-square
-[build]: https://circleci.com/gh/react-navigation/navigation-ex
-[coverage-badge]: https://img.shields.io/codecov/c/github/react-navigation/navigation-ex.svg?style=flat-square
-[coverage]: https://codecov.io/github/react-navigation/navigation-ex
+[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/react-navigation/master.svg?style=flat-square
+[build]: https://circleci.com/gh/react-navigation/react-navigation
+[coverage-badge]: https://img.shields.io/codecov/c/github/react-navigation/react-navigation.svg?style=flat-square
+[coverage]: https://codecov.io/github/react-navigation/react-navigation
 [license-badge]: https://img.shields.io/npm/l/@react-navigation/core.svg?style=flat-square
 [license]: https://opensource.org/licenses/MIT
--- a/babel.config.js
+++ b/babel.config.js
@@ -16,5 +16,7 @@ module.exports = {
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining',
+    '@babel/transform-flow-strip-types',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
 };
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,3 +1,6 @@
 import 'react-native-gesture-handler';
+import { registerRootComponent } from 'expo';

-export { default } from './src/index';
+import App from './src/index';
+
+registerRootComponent(App);
--- a/example/CHANGELOG.md
+++ b/example/CHANGELOG.md
@@ -1,230 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.22...@react-navigation/example@5.0.0-alpha.23) (2019-11-20)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.22](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.21...@react-navigation/example@5.0.0-alpha.22) (2019-11-17)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.21](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.20...@react-navigation/example@5.0.0-alpha.21) (2019-11-10)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.20](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.19...@react-navigation/example@5.0.0-alpha.20) (2019-11-08)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.19](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.18...@react-navigation/example@5.0.0-alpha.19) (2019-11-04)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.18](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.17...@react-navigation/example@5.0.0-alpha.18) (2019-11-02)
-
-
-### Bug Fixes
-
-* minor tweaks for web and fix example ([67fd69a](https://github.com/satya164/navigation-ex/commit/67fd69a))
-
-
-
-
-
-# [5.0.0-alpha.17](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.16...@react-navigation/example@5.0.0-alpha.17) (2019-10-29)
-
-
-### Bug Fixes
-
-* improve type annotation for screens ([8f16085](https://github.com/satya164/navigation-ex/commit/8f16085))
-
-
-
-
-
-# [5.0.0-alpha.16](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.15...@react-navigation/example@5.0.0-alpha.16) (2019-10-22)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.15](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.14...@react-navigation/example@5.0.0-alpha.15) (2019-10-22)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.14](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.13...@react-navigation/example@5.0.0-alpha.14) (2019-10-17)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.12...@react-navigation/example@5.0.0-alpha.13) (2019-10-15)
-
-
-### Bug Fixes
-
-* block GH interactions in Native Stack example ([#126](https://github.com/react-navigation/navigation-ex/issues/126)) ([386d1c0](https://github.com/react-navigation/navigation-ex/commit/386d1c0))
-* make it possible to run the example on web ([7a901af](https://github.com/react-navigation/navigation-ex/commit/7a901af))
-
-
-### Features
-
-* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
-
-
-
-
-
-# [5.0.0-alpha.12](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.11...@react-navigation/example@5.0.0-alpha.12) (2019-10-06)
-
-
-### Features
-
-* drop header: null in favor of more explitit headerShown option ([ba6b6ae](https://github.com/satya164/navigation-ex/commit/ba6b6ae))
-
-
-
-
-
-# [5.0.0-alpha.11](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.10...@react-navigation/example@5.0.0-alpha.11) (2019-10-03)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.10](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.9...@react-navigation/example@5.0.0-alpha.10) (2019-10-03)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.9](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.8...@react-navigation/example@5.0.0-alpha.9) (2019-10-03)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.7...@react-navigation/example@5.0.0-alpha.8) (2019-09-27)
-
-
-### Bug Fixes
-
-* close drawer on navigate ([655a220](https://github.com/react-navigation/navigation-ex/commit/655a220))
-
-
-
-
-
-# [5.0.0-alpha.7](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.6...@react-navigation/example@5.0.0-alpha.7) (2019-09-16)
-
-
-### Features
-
-* compatibility layer ([e0f28a4](https://github.com/satya164/navigation-ex/commit/e0f28a4))
-* make example run as bare react-native project as well ([#85](https://github.com/satya164/navigation-ex/issues/85)) ([d16c20c](https://github.com/satya164/navigation-ex/commit/d16c20c))
-
-
-
-
-
-# [5.0.0-alpha.6](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.4...@react-navigation/example@5.0.0-alpha.6) (2019-08-31)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.5](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.4...@react-navigation/example@5.0.0-alpha.5) (2019-08-31)
-
-**Note:** Version bump only for package @react-navigation/example
-
-
-
-
-
-# [5.0.0-alpha.4](https://github.com/satya164/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.3...@react-navigation/example@5.0.0-alpha.4) (2019-08-31)
-
-
-### Bug Fixes
-
-* handle route names change when all routes are removed ([#86](https://github.com/satya164/navigation-ex/issues/86)) ([1b2983e](https://github.com/satya164/navigation-ex/commit/1b2983e))
-
-
-
-
-
-# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.2...@react-navigation/example@5.0.0-alpha.3) (2019-08-29)
-
-
-### Features
-
-* handle more methods in useScrollToTop ([f9e8c7e](https://github.com/react-navigation/navigation-ex/commit/f9e8c7e))
-
-
-
-
-
-# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/example@5.0.0-alpha.1...@react-navigation/example@5.0.0-alpha.2) (2019-08-27)
-
-
-### Features
-
-* add native container ([d26b77f](https://github.com/react-navigation/navigation-ex/commit/d26b77f))
-
-
-
-
-
-# 5.0.0-alpha.1 (2019-08-21)
-
-
-### Bug Fixes
-
-* add margin on left when left button is specified in header ([f1f1541](https://github.com/satya164/navigation-ex/commit/f1f1541))
-
-
-### Features
-
-* add a simple stack and material tabs integration ([#39](https://github.com/satya164/navigation-ex/issues/39)) ([e0bee10](https://github.com/satya164/navigation-ex/commit/e0bee10))
-* add hook for deep link support ([35987ae](https://github.com/satya164/navigation-ex/commit/35987ae))
-* add integration for paper's bottom navigation ([f3b6d1f](https://github.com/satya164/navigation-ex/commit/f3b6d1f))
-* add native container with back button integration ([#48](https://github.com/satya164/navigation-ex/issues/48)) ([b7735af](https://github.com/satya164/navigation-ex/commit/b7735af))
-* integrate reanimated based stack ([#42](https://github.com/satya164/navigation-ex/issues/42)) ([dcf57c0](https://github.com/satya164/navigation-ex/commit/dcf57c0))
--- a/example/README.md
+++ b/example/README.md
@@ -5,3 +5,5 @@ If you want to run the example from the repo,
 - Clone the repository and run `yarn` in the project root
 - Run `yarn example start` to start the packager
 - Follow the instructions to open it with the [Expo app](https://expo.io/)
+
+You can also run the currently published [app on Expo](https://expo.io/@react-navigation/react-navigation-example) on your Android device or iOS simulator or the [web app](https://react-navigation-example.netlify.com/) in your browser.
--- a/example/android/ReactNavigationExample.iml
+++ b/example/android/ReactNavigationExample.iml
@@ -13,7 +13,7 @@
    <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/.gradle" />
    </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="1.8" jdkType="JavaSDK" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
 </module>
--- a/example/android/app/app.iml
+++ b/example/android/app/app.iml
@@ -4,8 +4,8 @@
    <facet type="android-gradle" name="Android-Gradle">
      <configuration>
        <option name="GRADLE_PROJECT_PATH" value=":app" />
-        <option name="LAST_SUCCESSFUL_SYNC_AGP_VERSION" value="3.3.0" />
-        <option name="LAST_KNOWN_AGP_VERSION" value="3.3.0" />
+        <option name="LAST_SUCCESSFUL_SYNC_AGP_VERSION" value="3.4.2" />
+        <option name="LAST_KNOWN_AGP_VERSION" value="3.4.2" />
      </configuration>
    </facet>
    <facet type="android" name="Android">
@@ -19,8 +19,8 @@
        <option name="ALLOW_USER_CONFIGURATION" value="false" />
        <option name="MANIFEST_FILE_RELATIVE_PATH" value="/src/main/AndroidManifest.xml" />
        <option name="RES_FOLDER_RELATIVE_PATH" value="/src/main/res" />
-        <option name="RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/src/main/res;file://$MODULE_DIR$/build/generated/res/rs/debug;file://$MODULE_DIR$/build/generated/res/resValues/debug" />
-        <option name="TEST_RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/build/generated/res/rs/androidTest/debug" />
+        <option name="RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/src/main/res;file://$MODULE_DIR$/build/generated/res/resValues/debug" />
+        <option name="TEST_RES_FOLDERS_RELATIVE_PATH" value="" />
        <option name="ASSETS_FOLDER_RELATIVE_PATH" value="/src/main/assets" />
      </configuration>
    </facet>
@@ -70,6 +70,7 @@
      <sourceFolder url="file://$MODULE_DIR$/src/main/assets" type="java-resource" />
      <sourceFolder url="file://$MODULE_DIR$/src/main/aidl" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/rncli/src/main/java" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/src/main/rs" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/src/main/shaders" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/src/androidTest/res" type="java-test-resource" />
@@ -90,91 +91,104 @@
    </content>
    <orderEntry type="jdk" jdkName="Android API 28 Platform" jdkType="Android SDK" />
    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Gradle: com.android.support:collections:28.0.0@jar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.lifecycle:common:1.1.1@jar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.core:common:1.1.1@jar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-annotations:28.0.0@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.facebook.infer.annotation:infer-annotation:0.11.2@jar" level="project" />
-    <orderEntry type="library" name="Gradle: javax.inject:javax.inject:1@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.google.code.findbugs:jsr305:3.0.2@jar" level="project" />
+    <orderEntry type="library" name="Gradle: javax.inject:javax.inject:1@jar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.collection:collection:1.1.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.lifecycle:lifecycle-common:2.1.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.arch.core:core-common:2.1.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.annotation:annotation:1.1.0@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.squareup.okhttp3:okhttp-urlconnection:3.12.1@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.squareup.okhttp3:okhttp:3.12.1@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.squareup.okio:okio:1.15.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:disklrucache:4.9.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:annotations:4.9.0@jar" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.41@jar" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib:1.3.41@jar" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.3.41@jar" level="project" />
+    <orderEntry type="library" name="Gradle: org.jetbrains:annotations:13.0@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.facebook.device.yearclass:yearclass:2.1.0@jar" level="project" />
    <orderEntry type="library" name="Gradle: commons-codec:commons-codec:1.10@jar" level="project" />
    <orderEntry type="library" name="Gradle: commons-io:commons-io:1.4@jar" level="project" />
-    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:disklrucache:4.9.0@jar" level="project" />
-    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:annotations:4.9.0@jar" level="project" />
-    <orderEntry type="library" name="Gradle: com.parse.bolts:bolts-tasks:1.4.0@jar" level="project" />
    <orderEntry type="library" name="Gradle: com.facebook.react:react-native:0.61.5@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:appcompat-v7:28.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.appcompat:appcompat:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.browser:browser:1.0.0@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:glide:4.9.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:gifdecoder:4.9.0@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-location:16.0.0@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-base:16.0.1@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-places-placereport:16.0.0@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-tasks:16.0.1@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.google.android.gms:play-services-basement:16.0.1@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-v4:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-fragment:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:animated-vector-drawable:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:customtabs:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-core-ui:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-core-utils:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-vector-drawable:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:loader:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-media-compat:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:viewpager:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:coordinatorlayout:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:drawerlayout:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:slidingpanelayout:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:customview:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:swiperefreshlayout:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:asynclayoutinflater:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:support-compat:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:versionedparcelable:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:cursoradapter:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.lifecycle:runtime:1.1.1@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:documentfile:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:localbroadcastmanager:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:print:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.lifecycle:viewmodel:1.1.1@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.github.bumptech.glide:gifdecoder:4.9.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.android.support:interpolator:28.0.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.lifecycle:livedata:1.1.1@aar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.lifecycle:livedata-core:1.1.1@aar" level="project" />
-    <orderEntry type="library" name="Gradle: android.arch.core:runtime:1.1.1@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.facebook.fresco:fresco:1.10.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-okhttp3:1.10.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.facebook.fresco:drawee:1.10.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline:1.10.0@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-base:1.10.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.legacy:legacy-support-v4:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.fragment:fragment:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.media:media:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.legacy:legacy-support-core-ui:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.legacy:legacy-support-core-utils:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.appcompat:appcompat-resources:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.drawerlayout:drawerlayout:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.viewpager:viewpager:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.loader:loader:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.activity:activity:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.vectordrawable:vectordrawable-animated:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.vectordrawable:vectordrawable:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.coordinatorlayout:coordinatorlayout:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.slidingpanelayout:slidingpanelayout:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.customview:customview:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.swiperefreshlayout:swiperefreshlayout:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.asynclayoutinflater:asynclayoutinflater:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.core:core:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.cursoradapter:cursoradapter:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.versionedparcelable:versionedparcelable:1.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.interpolator:interpolator:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.lifecycle:lifecycle-viewmodel:2.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.lifecycle:lifecycle-runtime:2.1.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.documentfile:documentfile:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.localbroadcastmanager:localbroadcastmanager:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.print:print:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.savedstate:savedstate:1.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.lifecycle:lifecycle-livedata:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.lifecycle:lifecycle-livedata-core:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: androidx.arch.core:core-runtime:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:fresco:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:fbcore:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:drawee:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-base:2.0.0@aar" level="project" />
    <orderEntry type="library" name="Gradle: com.facebook.soloader:soloader:0.6.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:nativeimagefilters:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:nativeimagetranscoder:2.0.0@aar" level="project" />
+    <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-okhttp3:2.0.0@aar" level="project" />
    <orderEntry type="library" name="Gradle: io.nlopez.smartlocation:library:3.2.11@aar" level="project" />
-    <orderEntry type="library" name="Gradle: com.facebook.fresco:fbcore:1.10.0@aar" level="project" />
-    <orderEntry type="module" module-name="react-native-screens" />
-    <orderEntry type="module" module-name="react-native-reanimated" />
-    <orderEntry type="module" module-name="react-native-gesture-handler" />
+    <orderEntry type="library" name="Gradle: org.webkit:android-jsc:r245459@aar" level="project" />
    <orderEntry type="module" module-name="expo-permissions" />
-    <orderEntry type="module" module-name="unimodules-core" />
-    <orderEntry type="module" module-name="unimodules-react-native-adapter" />
-    <orderEntry type="module" module-name="expo-app-loader-provider" />
    <orderEntry type="module" module-name="expo-constants" />
+    <orderEntry type="module" module-name="unimodules-image-loader-interface" />
+    <orderEntry type="module" module-name="expo-web-browser" />
+    <orderEntry type="module" module-name="unimodules-react-native-adapter" />
    <orderEntry type="module" module-name="expo-file-system" />
+    <orderEntry type="module" module-name="expo-location" />
+    <orderEntry type="module" module-name="expo-error-recovery" />
+    <orderEntry type="module" module-name="unimodules-permissions-interface" />
+    <orderEntry type="module" module-name="unimodules-core" />
+    <orderEntry type="module" module-name="expo-app-loader-provider" />
    <orderEntry type="module" module-name="expo-font" />
    <orderEntry type="module" module-name="expo-keep-awake" />
    <orderEntry type="module" module-name="expo-linear-gradient" />
-    <orderEntry type="module" module-name="expo-location" />
    <orderEntry type="module" module-name="expo-sqlite" />
-    <orderEntry type="module" module-name="expo-web-browser" />
    <orderEntry type="module" module-name="unimodules-barcode-scanner-interface" />
    <orderEntry type="module" module-name="unimodules-camera-interface" />
    <orderEntry type="module" module-name="unimodules-constants-interface" />
    <orderEntry type="module" module-name="unimodules-face-detector-interface" />
    <orderEntry type="module" module-name="unimodules-file-system-interface" />
    <orderEntry type="module" module-name="unimodules-font-interface" />
-    <orderEntry type="module" module-name="unimodules-image-loader-interface" />
-    <orderEntry type="module" module-name="unimodules-permissions-interface" />
    <orderEntry type="module" module-name="unimodules-sensors-interface" />
    <orderEntry type="module" module-name="unimodules-task-manager-interface" />
+    <orderEntry type="module" module-name="@react-native-community_masked-view" />
+    <orderEntry type="module" module-name="react-native-gesture-handler" />
+    <orderEntry type="module" module-name="react-native-reanimated" />
+    <orderEntry type="module" module-name="react-native-restart" />
+    <orderEntry type="module" module-name="react-native-safe-area-context" />
+    <orderEntry type="module" module-name="react-native-screens" />
  </component>
-</module>
+</module>
--- a/example/android/app/build.gradle
+++ b/example/android/app/build.gradle
@@ -80,8 +80,8 @@ project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
 ]

-apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
-apply from: "../../node_modules/react-native/react.gradle"
+apply from: '../../../node_modules/react-native-unimodules/gradle.groovy'
+apply from: "../../../node_modules/react-native/react.gradle"

 /**
 * Set this to true to create two separate APKs instead of one:
@@ -179,10 +179,10 @@ android {
 dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
-    addUnimodulesDependencies()
+    addUnimodulesDependencies([  modulesPaths : ['../../../node_modules'] ])

    if (enableHermes) {
-        def hermesPath = "../../node_modules/hermes-engine/android/";
+        def hermesPath = "../../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
@@ -197,4 +197,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
    into 'libs'
 }

-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
--- a/example/android/app/src/main/AndroidManifest.xml
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -36,12 +36,19 @@
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
+        android:launchMode="singleTask"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
+        <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="rne" />
+        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
--- a/example/android/build.gradle
+++ b/example/android/build.gradle
@@ -24,11 +24,11 @@ allprojects {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url("$rootDir/../node_modules/react-native/android")
+            url("$rootDir/../../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
-            url("$rootDir/../node_modules/jsc-android/dist")
+            url("$rootDir/../../node_modules/jsc-android/dist")
        }

        google()
--- a/example/android/settings.gradle
+++ b/example/android/settings.gradle
@@ -1,7 +1,7 @@
-apply from: '../node_modules/react-native-unimodules/gradle.groovy'
-includeUnimodulesProjects()
+apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
+includeUnimodulesProjects([ modulesPaths : ['../../../node_modules'] ])


 rootProject.name = 'ReactNavigationExample'
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
--- a/example/app.json
+++ b/example/app.json
@@ -1,7 +1,11 @@
 {
+  "name": "ReactNavigationExample",
+  "displayName": "React Navigation Example",
  "expo": {
    "name": "@react-navigation/example",
+    "owner": "react-navigation",
    "slug": "react-navigation-example",
+    "description": "Demo app to showcase various functionality of React Navigation",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
@@ -25,9 +29,6 @@
    "ios": {
      "supportsTablet": true
    },
-    "entryPoint": "node_modules/expo/AppEntry.js",
-    "description": "Demo app to showcase various functionality of React Navigation"
-  },
-  "displayName": "React Navigation Example",
-  "name": "ReactNavigationExample"
+    "entryPoint": "App.tsx"
+  }
 }
--- a/example/assets/album-art-01.jpg
+++ b/example/assets/album-art-01.jpg
--- a/example/assets/album-art-02.jpg
+++ b/example/assets/album-art-02.jpg
--- a/example/assets/album-art-03.jpg
+++ b/example/assets/album-art-03.jpg
--- a/example/assets/album-art-04.jpg
+++ b/example/assets/album-art-04.jpg
--- a/example/assets/album-art-05.jpg
+++ b/example/assets/album-art-05.jpg
--- a/example/assets/album-art-06.jpg
+++ b/example/assets/album-art-06.jpg
--- a/example/assets/album-art-07.jpg
+++ b/example/assets/album-art-07.jpg
--- a/example/assets/album-art-08.jpg
+++ b/example/assets/album-art-08.jpg
--- a/example/assets/album-art-09.jpg
+++ b/example/assets/album-art-09.jpg
--- a/example/assets/album-art-10.jpg
+++ b/example/assets/album-art-10.jpg
--- a/example/assets/album-art-11.jpg
+++ b/example/assets/album-art-11.jpg
--- a/example/assets/album-art-12.jpg
+++ b/example/assets/album-art-12.jpg
--- a/example/assets/album-art-13.jpg
+++ b/example/assets/album-art-13.jpg
--- a/example/assets/album-art-14.jpg
+++ b/example/assets/album-art-14.jpg
--- a/example/assets/album-art-15.jpg
+++ b/example/assets/album-art-15.jpg
--- a/example/assets/album-art-16.jpg
+++ b/example/assets/album-art-16.jpg
--- a/example/assets/album-art-17.jpg
+++ b/example/assets/album-art-17.jpg
--- a/example/assets/album-art-18.jpg
+++ b/example/assets/album-art-18.jpg
--- a/example/assets/album-art-19.jpg
+++ b/example/assets/album-art-19.jpg
--- a/example/assets/album-art-20.jpg
+++ b/example/assets/album-art-20.jpg
--- a/example/assets/album-art-21.jpg
+++ b/example/assets/album-art-21.jpg
--- a/example/assets/album-art-22.jpg
+++ b/example/assets/album-art-22.jpg
--- a/example/assets/album-art-23.jpg
+++ b/example/assets/album-art-23.jpg
--- a/example/assets/album-art-24.jpg
+++ b/example/assets/album-art-24.jpg
--- a/example/assets/album-art-4.jpg
+++ b/example/assets/album-art-4.jpg
--- a/example/assets/album-art-5.jpg
+++ b/example/assets/album-art-5.jpg
--- a/example/assets/album-art-6.jpg
+++ b/example/assets/album-art-6.jpg
--- a/example/assets/album-art-7.jpg
+++ b/example/assets/album-art-7.jpg
--- a/example/assets/album-art-8.jpg
+++ b/example/assets/album-art-8.jpg
--- a/example/assets/book.jpg
+++ b/example/assets/book.jpg
--- a/example/assets/icon.png
+++ b/example/assets/icon.png
--- a/example/e2e/.eslintrc.json
+++ b/example/e2e/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "settings": {
+    "import/core-modules": [
+      "detox",
+      "detox/runners/jest/adapter",
+      "detox/runners/jest/specReporter"
+    ]
+  },
+  "env": { "jest": true, "jasmine": true }
+}
--- a/example/e2e/__integration_tests__/index.test.js
+++ b/example/e2e/__integration_tests__/index.test.js
@@ -0,0 +1,9 @@
+import { by, element, expect, device } from 'detox';
+
+beforeEach(async () => {
+  await device.reloadReactNative();
+});
+
+it('has dark theme toggle', async () => {
+  await expect(element(by.text('Dark theme'))).toBeVisible();
+});
--- a/example/e2e/config.json
+++ b/example/e2e/config.json
@@ -0,0 +1,6 @@
+{
+  "setupFilesAfterEnv": ["./init.js"],
+  "testEnvironment": "node",
+  "reporters": ["detox/runners/jest/streamlineReporter"],
+  "verbose": true
+}
--- a/example/e2e/init.js
+++ b/example/e2e/init.js
@@ -0,0 +1,28 @@
+/* eslint-disable jest/no-jasmine-globals, import/no-commonjs */
+
+const detox = require('detox');
+const config = require('../../package.json').detox;
+const adapter = require('detox/runners/jest/adapter');
+const specReporter = require('detox/runners/jest/specReporter');
+
+// Set the default timeout
+jest.setTimeout(120000);
+
+jasmine.getEnv().addReporter(adapter);
+
+// This takes care of generating status logs on a per-spec basis. By default, jest only reports at file-level.
+// This is strictly optional.
+jasmine.getEnv().addReporter(specReporter);
+
+beforeAll(async () => {
+  await detox.init(config);
+}, 300000);
+
+beforeEach(async () => {
+  await adapter.beforeEach();
+});
+
+afterAll(async () => {
+  await adapter.afterAll();
+  await detox.cleanup();
+});
--- a/example/index.js
+++ b/example/index.js
@@ -1,6 +1,4 @@
 import { AppRegistry } from 'react-native';
-
-// Need to add extension or eslint confuses it with app.json
-import App from './App.tsx';
+import App from './src/index.tsx';

 AppRegistry.registerComponent('ReactNavigationExample', () => App);
--- a/example/ios/Podfile
+++ b/example/ios/Podfile
@@ -1,40 +1,40 @@
 platform :ios, '10.0'
-require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
-require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
+require_relative '../../node_modules/@react-native-community/cli-platform-ios/native_modules'
+require_relative '../../node_modules/react-native-unimodules/cocoapods.rb'

 target 'ReactNavigationExample' do
  # Pods for ReactNavigationExample
-  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
-  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
-  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
-  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
-  pod 'React', :path => '../node_modules/react-native/'
-  pod 'React-Core', :path => '../node_modules/react-native/'
-  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
-  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
-  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
-  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
-  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
-  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
-  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
-  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
-  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
-  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
-  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
-  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
+  pod 'FBLazyVector', :path => '../../node_modules/react-native/Libraries/FBLazyVector'
+  pod 'FBReactNativeSpec', :path => '../../node_modules/react-native/Libraries/FBReactNativeSpec'
+  pod 'RCTRequired', :path => '../../node_modules/react-native/Libraries/RCTRequired'
+  pod 'RCTTypeSafety', :path => '../../node_modules/react-native/Libraries/TypeSafety'
+  pod 'React', :path => '../../node_modules/react-native/'
+  pod 'React-Core', :path => '../../node_modules/react-native/'
+  pod 'React-CoreModules', :path => '../../node_modules/react-native/React/CoreModules'
+  pod 'React-Core/DevSupport', :path => '../../node_modules/react-native/'
+  pod 'React-RCTActionSheet', :path => '../../node_modules/react-native/Libraries/ActionSheetIOS'
+  pod 'React-RCTAnimation', :path => '../../node_modules/react-native/Libraries/NativeAnimation'
+  pod 'React-RCTBlob', :path => '../../node_modules/react-native/Libraries/Blob'
+  pod 'React-RCTImage', :path => '../../node_modules/react-native/Libraries/Image'
+  pod 'React-RCTLinking', :path => '../../node_modules/react-native/Libraries/LinkingIOS'
+  pod 'React-RCTNetwork', :path => '../../node_modules/react-native/Libraries/Network'
+  pod 'React-RCTSettings', :path => '../../node_modules/react-native/Libraries/Settings'
+  pod 'React-RCTText', :path => '../../node_modules/react-native/Libraries/Text'
+  pod 'React-RCTVibration', :path => '../../node_modules/react-native/Libraries/Vibration'
+  pod 'React-Core/RCTWebSocket', :path => '../../node_modules/react-native/'

-  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
-  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
-  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
-  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
-  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
-  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
-  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+  pod 'React-cxxreact', :path => '../../node_modules/react-native/ReactCommon/cxxreact'
+  pod 'React-jsi', :path => '../../node_modules/react-native/ReactCommon/jsi'
+  pod 'React-jsiexecutor', :path => '../../node_modules/react-native/ReactCommon/jsiexecutor'
+  pod 'React-jsinspector', :path => '../../node_modules/react-native/ReactCommon/jsinspector'
+  pod 'ReactCommon/jscallinvoker', :path => '../../node_modules/react-native/ReactCommon'
+  pod 'ReactCommon/turbomodule/core', :path => '../../node_modules/react-native/ReactCommon'
+  pod 'Yoga', :path => '../../node_modules/react-native/ReactCommon/yoga'

-  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
-  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  pod 'DoubleConversion', :podspec => '../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+  pod 'glog', :podspec => '../../node_modules/react-native/third-party-podspecs/glog.podspec'
+  pod 'Folly', :podspec => '../../node_modules/react-native/third-party-podspecs/Folly.podspec'

  use_native_modules!
-  use_unimodules!
+  use_unimodules!({ modules_paths: ['../../node_modules'] })
 end
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -2,6 +2,8 @@ PODS:
  - boost-for-react-native (1.63.0)
  - DoubleConversion (1.1.6)
  - EXAppLoaderProvider (8.0.0)
+  - EXBlur (8.0.0):
+    - UMCore
  - EXConstants (8.0.0):
    - UMConstantsInterface
    - UMCore
@@ -48,6 +50,8 @@ PODS:
    - glog
  - glog (0.3.5)
  - RCTRequired (0.61.5)
+  - RCTRestart (0.0.13):
+    - React
  - RCTTypeSafety (0.61.5):
    - FBLazyVector (= 0.61.5)
    - Folly (= 2018.10.22.00)
@@ -210,7 +214,7 @@ PODS:
    - React-cxxreact (= 0.61.5)
    - React-jsi (= 0.61.5)
  - React-jsinspector (0.61.5)
-  - react-native-safe-area-context (0.6.1):
+  - react-native-safe-area-context (0.6.2):
    - React
  - React-RCTActionSheet (0.61.5):
    - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -249,11 +253,11 @@ PODS:
    - ReactCommon/jscallinvoker (= 0.61.5)
  - RNCMaskedView (0.1.5):
    - React
-  - RNGestureHandler (1.5.2):
+  - RNGestureHandler (1.5.5):
    - React
  - RNReanimated (1.4.0):
    - React
-  - RNScreens (2.0.0-alpha.17):
+  - RNScreens (2.0.0-alpha.33):
    - React
  - UMBarCodeScannerInterface (5.0.0)
  - UMCameraInterface (5.0.0)
@@ -273,62 +277,64 @@ PODS:
  - Yoga (1.14.0)

 DEPENDENCIES:
-  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
-  - EXAppLoaderProvider (from `../node_modules/expo/node_modules/expo-app-loader-provider/ios`)
-  - EXConstants (from `../node_modules/expo/node_modules/expo-constants/ios`)
-  - EXErrorRecovery (from `../node_modules/expo-error-recovery/ios`)
-  - EXFileSystem (from `../node_modules/expo/node_modules/expo-file-system/ios`)
-  - EXFont (from `../node_modules/expo-font/ios`)
-  - EXKeepAwake (from `../node_modules/expo-keep-awake/ios`)
-  - EXLinearGradient (from `../node_modules/expo-linear-gradient/ios`)
-  - EXLocation (from `../node_modules/expo-location/ios`)
-  - EXPermissions (from `../node_modules/expo/node_modules/expo-permissions/ios`)
-  - EXSQLite (from `../node_modules/expo-sqlite/ios`)
-  - EXWebBrowser (from `../node_modules/expo-web-browser/ios`)
-  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
-  - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
-  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
-  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
-  - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
-  - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
-  - React (from `../node_modules/react-native/`)
-  - React-Core (from `../node_modules/react-native/`)
-  - React-Core/DevSupport (from `../node_modules/react-native/`)
-  - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
-  - React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
-  - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
-  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
-  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
-  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
-  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
-  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
-  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
-  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
-  - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
-  - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
-  - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
-  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
-  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
-  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
-  - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
-  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
-  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
-  - RNScreens (from `../node_modules/react-native-screens`)
-  - UMBarCodeScannerInterface (from `../node_modules/expo/node_modules/unimodules-barcode-scanner-interface/ios`)
-  - UMCameraInterface (from `../node_modules/expo/node_modules/unimodules-camera-interface/ios`)
-  - UMConstantsInterface (from `../node_modules/expo/node_modules/unimodules-constants-interface/ios`)
-  - "UMCore (from `../node_modules/expo/node_modules/@unimodules/core/ios`)"
-  - UMFaceDetectorInterface (from `../node_modules/expo/node_modules/unimodules-face-detector-interface/ios`)
-  - UMFileSystemInterface (from `../node_modules/expo/node_modules/unimodules-file-system-interface/ios`)
-  - UMFontInterface (from `../node_modules/expo/node_modules/unimodules-font-interface/ios`)
-  - UMImageLoaderInterface (from `../node_modules/expo/node_modules/unimodules-image-loader-interface/ios`)
-  - UMPermissionsInterface (from `../node_modules/expo/node_modules/unimodules-permissions-interface/ios`)
-  - "UMReactNativeAdapter (from `../node_modules/expo/node_modules/@unimodules/react-native-adapter/ios`)"
-  - UMSensorsInterface (from `../node_modules/expo/node_modules/unimodules-sensors-interface/ios`)
-  - UMTaskManagerInterface (from `../node_modules/expo/node_modules/unimodules-task-manager-interface/ios`)
-  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
+  - DoubleConversion (from `../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
+  - EXAppLoaderProvider (from `../../node_modules/expo-app-loader-provider/ios`)
+  - EXBlur (from `../../node_modules/expo-blur/ios`)
+  - EXConstants (from `../../node_modules/expo-constants/ios`)
+  - EXErrorRecovery (from `../../node_modules/expo-error-recovery/ios`)
+  - EXFileSystem (from `../../node_modules/expo-file-system/ios`)
+  - EXFont (from `../../node_modules/expo-font/ios`)
+  - EXKeepAwake (from `../../node_modules/expo-keep-awake/ios`)
+  - EXLinearGradient (from `../../node_modules/expo-linear-gradient/ios`)
+  - EXLocation (from `../../node_modules/expo-location/ios`)
+  - EXPermissions (from `../../node_modules/expo-permissions/ios`)
+  - EXSQLite (from `../../node_modules/expo-sqlite/ios`)
+  - EXWebBrowser (from `../../node_modules/expo-web-browser/ios`)
+  - FBLazyVector (from `../../node_modules/react-native/Libraries/FBLazyVector`)
+  - FBReactNativeSpec (from `../../node_modules/react-native/Libraries/FBReactNativeSpec`)
+  - Folly (from `../../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - glog (from `../../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - RCTRequired (from `../../node_modules/react-native/Libraries/RCTRequired`)
+  - RCTRestart (from `../../node_modules/react-native-restart/ios`)
+  - RCTTypeSafety (from `../../node_modules/react-native/Libraries/TypeSafety`)
+  - React (from `../../node_modules/react-native/`)
+  - React-Core (from `../../node_modules/react-native/`)
+  - React-Core/DevSupport (from `../../node_modules/react-native/`)
+  - React-Core/RCTWebSocket (from `../../node_modules/react-native/`)
+  - React-CoreModules (from `../../node_modules/react-native/React/CoreModules`)
+  - React-cxxreact (from `../../node_modules/react-native/ReactCommon/cxxreact`)
+  - React-jsi (from `../../node_modules/react-native/ReactCommon/jsi`)
+  - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
+  - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`)
+  - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
+  - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
+  - React-RCTBlob (from `../../node_modules/react-native/Libraries/Blob`)
+  - React-RCTImage (from `../../node_modules/react-native/Libraries/Image`)
+  - React-RCTLinking (from `../../node_modules/react-native/Libraries/LinkingIOS`)
+  - React-RCTNetwork (from `../../node_modules/react-native/Libraries/Network`)
+  - React-RCTSettings (from `../../node_modules/react-native/Libraries/Settings`)
+  - React-RCTText (from `../../node_modules/react-native/Libraries/Text`)
+  - React-RCTVibration (from `../../node_modules/react-native/Libraries/Vibration`)
+  - ReactCommon/jscallinvoker (from `../../node_modules/react-native/ReactCommon`)
+  - ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
+  - "RNCMaskedView (from `../../node_modules/@react-native-community/masked-view`)"
+  - RNGestureHandler (from `../../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../../node_modules/react-native-reanimated`)
+  - RNScreens (from `../../node_modules/react-native-screens`)
+  - UMBarCodeScannerInterface (from `../../node_modules/unimodules-barcode-scanner-interface/ios`)
+  - UMCameraInterface (from `../../node_modules/unimodules-camera-interface/ios`)
+  - UMConstantsInterface (from `../../node_modules/unimodules-constants-interface/ios`)
+  - "UMCore (from `../../node_modules/@unimodules/core/ios`)"
+  - UMFaceDetectorInterface (from `../../node_modules/unimodules-face-detector-interface/ios`)
+  - UMFileSystemInterface (from `../../node_modules/unimodules-file-system-interface/ios`)
+  - UMFontInterface (from `../../node_modules/unimodules-font-interface/ios`)
+  - UMImageLoaderInterface (from `../../node_modules/unimodules-image-loader-interface/ios`)
+  - UMPermissionsInterface (from `../../node_modules/unimodules-permissions-interface/ios`)
+  - "UMReactNativeAdapter (from `../../node_modules/@unimodules/react-native-adapter/ios`)"
+  - UMSensorsInterface (from `../../node_modules/unimodules-sensors-interface/ios`)
+  - UMTaskManagerInterface (from `../../node_modules/unimodules-task-manager-interface/ios`)
+  - Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)

 SPEC REPOS:
  trunk:
@@ -336,139 +342,145 @@ SPEC REPOS:

 EXTERNAL SOURCES:
  DoubleConversion:
-    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+    :podspec: "../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
  EXAppLoaderProvider:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/expo-app-loader-provider/ios"
+    path: "../../node_modules/expo-app-loader-provider/ios"
+  EXBlur:
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-blur/ios"
  EXConstants:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/expo-constants/ios"
+    path: "../../node_modules/expo-constants/ios"
  EXErrorRecovery:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-error-recovery/ios"
+    path: "../../node_modules/expo-error-recovery/ios"
  EXFileSystem:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/expo-file-system/ios"
+    path: "../../node_modules/expo-file-system/ios"
  EXFont:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-font/ios"
+    path: "../../node_modules/expo-font/ios"
  EXKeepAwake:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-keep-awake/ios"
+    path: "../../node_modules/expo-keep-awake/ios"
  EXLinearGradient:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-linear-gradient/ios"
+    path: "../../node_modules/expo-linear-gradient/ios"
  EXLocation:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-location/ios"
+    path: "../../node_modules/expo-location/ios"
  EXPermissions:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/expo-permissions/ios"
+    path: "../../node_modules/expo-permissions/ios"
  EXSQLite:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-sqlite/ios"
+    path: "../../node_modules/expo-sqlite/ios"
  EXWebBrowser:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo-web-browser/ios"
+    path: "../../node_modules/expo-web-browser/ios"
  FBLazyVector:
-    :path: "../node_modules/react-native/Libraries/FBLazyVector"
+    :path: "../../node_modules/react-native/Libraries/FBLazyVector"
  FBReactNativeSpec:
-    :path: "../node_modules/react-native/Libraries/FBReactNativeSpec"
+    :path: "../../node_modules/react-native/Libraries/FBReactNativeSpec"
  Folly:
-    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
+    :podspec: "../../node_modules/react-native/third-party-podspecs/Folly.podspec"
  glog:
-    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+    :podspec: "../../node_modules/react-native/third-party-podspecs/glog.podspec"
  RCTRequired:
-    :path: "../node_modules/react-native/Libraries/RCTRequired"
+    :path: "../../node_modules/react-native/Libraries/RCTRequired"
+  RCTRestart:
+    :path: "../../node_modules/react-native-restart/ios"
  RCTTypeSafety:
-    :path: "../node_modules/react-native/Libraries/TypeSafety"
+    :path: "../../node_modules/react-native/Libraries/TypeSafety"
  React:
-    :path: "../node_modules/react-native/"
+    :path: "../../node_modules/react-native/"
  React-Core:
-    :path: "../node_modules/react-native/"
+    :path: "../../node_modules/react-native/"
  React-CoreModules:
-    :path: "../node_modules/react-native/React/CoreModules"
+    :path: "../../node_modules/react-native/React/CoreModules"
  React-cxxreact:
-    :path: "../node_modules/react-native/ReactCommon/cxxreact"
+    :path: "../../node_modules/react-native/ReactCommon/cxxreact"
  React-jsi:
-    :path: "../node_modules/react-native/ReactCommon/jsi"
+    :path: "../../node_modules/react-native/ReactCommon/jsi"
  React-jsiexecutor:
-    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
+    :path: "../../node_modules/react-native/ReactCommon/jsiexecutor"
  React-jsinspector:
-    :path: "../node_modules/react-native/ReactCommon/jsinspector"
+    :path: "../../node_modules/react-native/ReactCommon/jsinspector"
  react-native-safe-area-context:
-    :path: "../node_modules/react-native-safe-area-context"
+    :path: "../../node_modules/react-native-safe-area-context"
  React-RCTActionSheet:
-    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
+    :path: "../../node_modules/react-native/Libraries/ActionSheetIOS"
  React-RCTAnimation:
-    :path: "../node_modules/react-native/Libraries/NativeAnimation"
+    :path: "../../node_modules/react-native/Libraries/NativeAnimation"
  React-RCTBlob:
-    :path: "../node_modules/react-native/Libraries/Blob"
+    :path: "../../node_modules/react-native/Libraries/Blob"
  React-RCTImage:
-    :path: "../node_modules/react-native/Libraries/Image"
+    :path: "../../node_modules/react-native/Libraries/Image"
  React-RCTLinking:
-    :path: "../node_modules/react-native/Libraries/LinkingIOS"
+    :path: "../../node_modules/react-native/Libraries/LinkingIOS"
  React-RCTNetwork:
-    :path: "../node_modules/react-native/Libraries/Network"
+    :path: "../../node_modules/react-native/Libraries/Network"
  React-RCTSettings:
-    :path: "../node_modules/react-native/Libraries/Settings"
+    :path: "../../node_modules/react-native/Libraries/Settings"
  React-RCTText:
-    :path: "../node_modules/react-native/Libraries/Text"
+    :path: "../../node_modules/react-native/Libraries/Text"
  React-RCTVibration:
-    :path: "../node_modules/react-native/Libraries/Vibration"
+    :path: "../../node_modules/react-native/Libraries/Vibration"
  ReactCommon:
-    :path: "../node_modules/react-native/ReactCommon"
+    :path: "../../node_modules/react-native/ReactCommon"
  RNCMaskedView:
-    :path: "../node_modules/@react-native-community/masked-view"
+    :path: "../../node_modules/@react-native-community/masked-view"
  RNGestureHandler:
-    :path: "../node_modules/react-native-gesture-handler"
+    :path: "../../node_modules/react-native-gesture-handler"
  RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
+    :path: "../../node_modules/react-native-reanimated"
  RNScreens:
-    :path: "../node_modules/react-native-screens"
+    :path: "../../node_modules/react-native-screens"
  UMBarCodeScannerInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-barcode-scanner-interface/ios"
+    path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
  UMCameraInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-camera-interface/ios"
+    path: "../../node_modules/unimodules-camera-interface/ios"
  UMConstantsInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-constants-interface/ios"
+    path: "../../node_modules/unimodules-constants-interface/ios"
  UMCore:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/@unimodules/core/ios"
+    path: "../../node_modules/@unimodules/core/ios"
  UMFaceDetectorInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-face-detector-interface/ios"
+    path: "../../node_modules/unimodules-face-detector-interface/ios"
  UMFileSystemInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-file-system-interface/ios"
+    path: "../../node_modules/unimodules-file-system-interface/ios"
  UMFontInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-font-interface/ios"
+    path: "../../node_modules/unimodules-font-interface/ios"
  UMImageLoaderInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-image-loader-interface/ios"
+    path: "../../node_modules/unimodules-image-loader-interface/ios"
  UMPermissionsInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-permissions-interface/ios"
+    path: "../../node_modules/unimodules-permissions-interface/ios"
  UMReactNativeAdapter:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/@unimodules/react-native-adapter/ios"
+    path: "../../node_modules/@unimodules/react-native-adapter/ios"
  UMSensorsInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-sensors-interface/ios"
+    path: "../../node_modules/unimodules-sensors-interface/ios"
  UMTaskManagerInterface:
    :path: !ruby/object:Pathname
-    path: "../node_modules/expo/node_modules/unimodules-task-manager-interface/ios"
+    path: "../../node_modules/unimodules-task-manager-interface/ios"
  Yoga:
-    :path: "../node_modules/react-native/ReactCommon/yoga"
+    :path: "../../node_modules/react-native/ReactCommon/yoga"

 SPEC CHECKSUMS:
  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
  EXAppLoaderProvider: ebdb6bc2632c1ccadbe49f5e4104d8d690969c49
+  EXBlur: d1604f66f89a9414f5ee65dfb23874437c1bb147
  EXConstants: 4051b16c17ef3defa03c541d42811dc92b249146
  EXErrorRecovery: d36db99ec6a3808f313f01b0890eb443796dd1c2
  EXFileSystem: 6e0d9bb6cc4ea404dbb8f583c1a8a2dcdf4b83b6
@@ -484,6 +496,7 @@ SPEC CHECKSUMS:
  Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
  RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
+  RCTRestart: dd19aab87fc1118e05b6b5b91b959105647f56b4
  RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
  React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
  React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
@@ -492,7 +505,7 @@ SPEC CHECKSUMS:
  React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
  React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
  React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-safe-area-context: 1f8a52fb0ab1321eef9a7099bd2c360d4e38264b
+  react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
  React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
  React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
  React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -504,9 +517,9 @@ SPEC CHECKSUMS:
  React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
  ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
  RNCMaskedView: dd13f9f7b146a9ad82f9b7eb6c9b5548fcf6e990
-  RNGestureHandler: 946a7691e41df61e2c4b1884deab41a4cdc3afff
+  RNGestureHandler: d2270608171c868581b840cfc692f2962c05cd17
  RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c
-  RNScreens: f5e2ff7ccde2a1bfcf2a48c6fd07fdcf1fd95223
+  RNScreens: 1c7fd499b915c77c21e8e6c327890c5af9b4cf7e
  UMBarCodeScannerInterface: 3802c8574ef119c150701d679ab386e2266d6a54
  UMCameraInterface: 985d301f688ed392f815728f0dd906ca34b7ccb1
  UMConstantsInterface: bda5f8bd3403ad99e663eb3c4da685d063c5653c
@@ -521,6 +534,6 @@ SPEC CHECKSUMS:
  UMTaskManagerInterface: a98e37a576a5220bf43b8faf33cfdc129d2f441d
  Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b

-PODFILE CHECKSUM: 18b58708b4bb9901516029103ee63c94d63edd9e
+PODFILE CHECKSUM: c48a21ff513d3eadafa50f8797207ef2be75e234

 COCOAPODS: 1.8.4
--- a/example/ios/ReactNavigationExample.xcodeproj/project.pbxproj
+++ b/example/ios/ReactNavigationExample.xcodeproj/project.pbxproj
@@ -188,7 +188,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		FC67D3D0567CD942E3DA69B7 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
--- a/example/ios/ReactNavigationExample/AppDelegate.m
+++ b/example/ios/ReactNavigationExample/AppDelegate.m
@@ -13,6 +13,7 @@
 #import <UMCore/UMModuleRegistry.h>
 #import <UMReactNativeAdapter/UMNativeModulesProxy.h>
 #import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>
+#import <React/RCTLinkingManager.h>

@implementation AppDelegate

@@ -52,4 +53,10 @@
 #endif
 }

+- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
+            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:app openURL:url options:options];
+}
+
@end
--- a/example/ios/ReactNavigationExample/Info.plist
+++ b/example/ios/ReactNavigationExample/Info.plist
@@ -20,33 +20,27 @@
 	<string>1.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Editor</string>
+			<key>CFBundleURLName</key>
+			<string>React Navigation Example</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>rne</string>
+			</array>
+		</dict>
+	</array>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
 		<key>NSExceptionDomains</key>
 		<dict>
 			<key>localhost</key>
@@ -78,5 +72,19 @@
 	<string>Give React Navigation Example periences permission to access your photos</string>
 	<key>NSRemindersUsageDescription</key>
 	<string>Allow React Navigation Example to access your reminders</string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
 </dict>
 </plist>
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -6,50 +6,60 @@ const escape = require('escape-string-regexp');
 const blacklist = require('metro-config/src/defaults/blacklist');

 const root = path.resolve(__dirname, '..');
-const packages = path.resolve(__dirname, '..', 'packages');
+const packages = path.resolve(root, 'packages');

-const modules = ['@babel/runtime', '@expo/vector-icons']
+// Get the list of dependencies for all packages in the monorepo
+const modules = ['@expo/vector-icons']
  .concat(
    ...fs
+      // List all packages under `packages/`
      .readdirSync(packages)
+      // Ignore hidden files such as .DS_Store
      .filter(p => !p.startsWith('.'))
      .map(p => {
        const pak = JSON.parse(
          fs.readFileSync(path.join(packages, p, 'package.json'), 'utf8')
        );

-        const deps = [];
-
-        if (pak.dependencies) {
-          deps.push(...Object.keys(pak.dependencies));
-        }
-
-        if (pak.peerDependencies) {
-          deps.push(...Object.keys(pak.peerDependencies));
-        }
-
-        return deps;
+        // We need to collect list of deps that this package imports
+        // Collecting both dependencies are peerDependencies should do it
+        return Object.keys({
+          ...pak.dependencies,
+          ...pak.peerDependencies,
+        });
      })
  )
  .sort()
  .filter(
    (m, i, self) =>
+      // Remove duplicates and package names of the packages in the monorepo
      self.lastIndexOf(m) === i && !m.startsWith('@react-navigation/')
  );

 module.exports = {
  projectRoot: __dirname,
+
+  // We need to watch the root of the monorepo
+  // This lets Metro find the monorepo packages automatically using haste
+  // This also lets us import modules from monorepo root
  watchFolders: [root],

  resolver: {
+    // We need to blacklist `node_modules` of all our packages
+    // This will avoid Metro throwing duplicate module errors
    blacklistRE: blacklist(
-      [root, ...fs.readdirSync(packages).map(p => path.join(packages, p))].map(
-        it => new RegExp(`^${escape(path.join(it, 'node_modules'))}\\/.*$`)
-      )
+      fs
+        .readdirSync(packages)
+        .map(p => path.join(packages, p))
+        .map(
+          it => new RegExp(`^${escape(path.join(it, 'node_modules'))}\\/.*$`)
+        )
    ),

+    // When we import a package from the monorepo, metro won't be able to find their deps
+    // We need to specify them in `extraNodeModules` to tell metro where to find them
    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
+      acc[name] = path.join(root, 'node_modules', name);
      return acc;
    }, {}),
  },
@@ -57,6 +67,8 @@ module.exports = {
  server: {
    enhanceMiddleware: middleware => {
      return (req, res, next) => {
+        // When an asset is imported outside the project root, it has wrong path on Android
+        // This happens for the back button in stack, so we fix the path to correct one
        const assets = '/packages/stack/src/views/assets';

        if (req.url.startsWith(assets)) {
@@ -72,7 +84,7 @@ module.exports = {
  },

  transformer: {
-    getTransformOptions: async () => ({
+    getTransformOptions: () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
--- a/example/package.json
+++ b/example/package.json
@@ -1,52 +1,42 @@
 {
  "name": "@react-navigation/example",
  "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0-alpha.23",
+  "version": "5.0.0",
  "private": true,
-  "workspaces": {
-    "nohoist": [
-      "*",
-      "*/**"
-    ]
-  },
  "scripts": {
    "start": "expo start",
-    "web": "expo start --web",
-    "react-native": "./node_modules/.bin/react-native",
-    "native": "./node_modules/.bin/react-native start",
-    "android": "./node_modules/.bin/react-native run-android",
-    "ios": "./node_modules/.bin/react-native run-ios"
+    "web": "expo start:web",
+    "native": "react-native start",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "0.1.5",
+    "@react-native-community/masked-view": "0.1.6",
+    "@types/react-native-restart": "^0.0.0",
    "color": "^3.1.2",
-    "expo": "^36.0.0",
+    "expo": "^36.0.2",
    "expo-asset": "~8.0.0",
-    "query-string": "^6.9.0",
+    "expo-blur": "^8.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "~1.5.0",
-    "react-native-iphone-x-helper": "^1.2.1",
-    "react-native-paper": "^3.3.0",
-    "react-native-reanimated": "^1.4.0",
-    "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^2.0.0-alpha.19",
-    "react-native-tab-view": "2.11.0",
+    "react-native-gesture-handler": "^1.5.6",
+    "react-native-paper": "^3.6.0",
+    "react-native-reanimated": "^1.7.0",
+    "react-native-restart": "^0.0.13",
+    "react-native-safe-area-context": "^0.7.2",
+    "react-native-screens": "^2.0.0-beta.2",
+    "react-native-tab-view": "2.13.0",
    "react-native-unimodules": "^0.7.0",
-    "react-native-web": "^0.11.7",
-    "scheduler": "^0.18.0",
-    "shortid": "^2.2.15",
-    "use-subscription": "^1.3.0"
+    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@expo/webpack-config": "^0.10.6",
-    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.25",
+    "@expo/webpack-config": "^0.10.12",
+    "@types/react": "^16.9.19",
+    "@types/react-native": "^0.60.30",
    "babel-preset-expo": "^8.0.0",
-    "expo-cli": "^3.11.1",
-    "typescript": "^3.7.3"
+    "expo-cli": "^3.11.9",
+    "typescript": "^3.7.5"
  }
 }
--- a/example/src/LinkingPrefixes.ts
+++ b/example/src/LinkingPrefixes.ts
@@ -1 +1 @@
-export default [];
+export default ['rne://127.0.0.1:19000/--/'];
--- a/example/src/Screens/AuthFlow.tsx
+++ b/example/src/Screens/AuthFlow.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
 import { Title, Button } from 'react-native-paper';
-import { ParamListBase } from '@react-navigation/native';
+import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
  HeaderBackButton,
@@ -40,11 +40,25 @@ const SplashScreen = () => {

 const SignInScreen = () => {
  const { signIn } = React.useContext(AuthContext);
+  const { colors } = useTheme();

  return (
    <View style={styles.content}>
-      <TextInput placeholder="Username" style={styles.input} />
-      <TextInput placeholder="Password" secureTextEntry style={styles.input} />
+      <TextInput
+        placeholder="Username"
+        style={[
+          styles.input,
+          { backgroundColor: colors.card, color: colors.text },
+        ]}
+      />
+      <TextInput
+        placeholder="Password"
+        secureTextEntry
+        style={[
+          styles.input,
+          { backgroundColor: colors.card, color: colors.text },
+        ]}
+      />
      <Button mode="contained" onPress={signIn} style={styles.button}>
        Sign in
      </Button>
@@ -73,6 +87,7 @@ type Props = {

 type State = {
  isLoading: boolean;
+  isSignout: boolean;
  userToken: undefined | string;
 };

@@ -94,17 +109,20 @@ export default function SimpleStackScreen({ navigation }: Props) {
        case 'SIGN_IN':
          return {
            ...prevState,
+            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
+            isSignout: true,
            userToken: undefined,
          };
      }
    },
    {
      isLoading: true,
+      isSignout: false,
      userToken: undefined,
    }
  );
@@ -147,7 +165,10 @@ export default function SimpleStackScreen({ navigation }: Props) {
        ) : state.userToken === undefined ? (
          <SimpleStack.Screen
            name="SignIn"
-            options={{ title: 'Sign in' }}
+            options={{
+              title: 'Sign in',
+              animationTypeForReplace: state.isSignout ? 'pop' : 'push',
+            }}
            component={SignInScreen}
          />
        ) : (
@@ -171,7 +192,6 @@ const styles = StyleSheet.create({
  input: {
    margin: 8,
    padding: 10,
-    backgroundColor: 'white',
    borderRadius: 3,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(0, 0, 0, 0.08)',
--- a/example/src/Screens/DynamicTabs.tsx
+++ b/example/src/Screens/DynamicTabs.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Title, Button } from 'react-native-paper';
+import { Feather } from '@expo/vector-icons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+type BottomTabParams = {
+  [key: string]: undefined;
+};
+
+const BottomTabs = createBottomTabNavigator<BottomTabParams>();
+
+export default function BottomTabsScreen() {
+  const [tabs, setTabs] = React.useState([0, 1]);
+
+  return (
+    <BottomTabs.Navigator>
+      {tabs.map(i => (
+        <BottomTabs.Screen
+          key={i}
+          name={`tab-${i}`}
+          options={{
+            title: `Tab ${i}`,
+            tabBarIcon: ({ color, size }) => (
+              <Feather name="octagon" color={color} size={size} />
+            ),
+          }}
+        >
+          {() => (
+            <View style={styles.container}>
+              <Title>Tab {i}</Title>
+              <Button onPress={() => setTabs(tabs => [...tabs, tabs.length])}>
+                Add a tab
+              </Button>
+              <Button
+                onPress={() =>
+                  setTabs(tabs => (tabs.length > 1 ? tabs.slice(0, -1) : tabs))
+                }
+              >
+                Remove a tab
+              </Button>
+            </View>
+          )}
+        </BottomTabs.Screen>
+      ))}
+    </BottomTabs.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
--- a/example/src/Screens/ModalPresentationStack.tsx
+++ b/example/src/Screens/ModalPresentationStack.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useSafeArea } from 'react-native-safe-area-context';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
@@ -25,11 +24,9 @@ const ArticleScreen = ({
  navigation: ModalStackNavigation;
  route: RouteProp<ModalStackParams, 'Article'>;
 }) => {
-  const insets = useSafeArea();
-
  return (
-    <React.Fragment>
-      <View style={[styles.buttons, { marginTop: insets.top }]}>
+    <ScrollView>
+      <View style={styles.buttons}>
        <Button
          mode="contained"
          onPress={() => navigation.push('Album')}
@@ -45,17 +42,15 @@ const ArticleScreen = ({
          Go back
        </Button>
      </View>
-      <Article author={{ name: route.params.author }} />
-    </React.Fragment>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
  );
 };

 const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
-  const insets = useSafeArea();
-
  return (
-    <React.Fragment>
-      <View style={[styles.buttons, { marginTop: insets.top }]}>
+    <ScrollView>
+      <View style={styles.buttons}>
        <Button
          mode="contained"
          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
@@ -71,8 +66,8 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
          Go back
        </Button>
      </View>
-      <Albums />
-    </React.Fragment>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
  );
 };

@@ -91,12 +86,16 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
  return (
    <ModalPresentationStack.Navigator
      mode="modal"
-      headerMode="none"
-      screenOptions={{
+      headerMode="screen"
+      screenOptions={({ route, navigation }) => ({
        ...TransitionPresets.ModalPresentationIOS,
        cardOverlayEnabled: true,
        gestureEnabled: true,
-      }}
+        headerStatusBarHeight:
+          navigation.dangerouslyGetState().routes.indexOf(route) > 0
+            ? 0
+            : undefined,
+      })}
      {...options}
    >
      <ModalPresentationStack.Screen
--- a/example/src/Screens/NativeStack.tsx
+++ b/example/src/Screens/NativeStack.tsx
@@ -137,7 +137,7 @@ const AlbumsScreen = ({
 }: {
  navigation: NativeStackNavigation;
 }) => (
-  <React.Fragment>
+  <ScrollView>
    <View style={styles.buttons}>
      <Button
        mode="contained"
@@ -154,8 +154,8 @@ const AlbumsScreen = ({
        Go back
      </Button>
    </View>
-    <Albums />
-  </React.Fragment>
+    <Albums scrollEnabled={false} />
+  </ScrollView>
 );

 const NativeStack = createNativeStackNavigator<NativeStackParams>();
--- a/example/src/Screens/SimpleStack.tsx
+++ b/example/src/Screens/SimpleStack.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -8,9 +8,11 @@ import {
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
+import NewsFeed from '../Shared/NewsFeed';

 type SimpleStackParams = {
  Article: { author: string };
+  NewsFeed: undefined;
  Album: undefined;
 };

@@ -24,14 +26,42 @@ const ArticleScreen = ({
  route: RouteProp<SimpleStackParams, 'Article'>;
 }) => {
  return (
-    <React.Fragment>
+    <ScrollView>
      <View style={styles.buttons}>
        <Button
          mode="contained"
-          onPress={() => navigation.push('Album')}
+          onPress={() => navigation.replace('NewsFeed')}
          style={styles.button}
        >
-          Push album
+          Replace with feed
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const NewsFeedScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.navigate('Album')}
+          style={styles.button}
+        >
+          Navigate to album
        </Button>
        <Button
          mode="outlined"
@@ -41,8 +71,8 @@ const ArticleScreen = ({
          Go back
        </Button>
      </View>
-      <Article author={{ name: route.params.author }} />
-    </React.Fragment>
+      <NewsFeed scrollEnabled={false} />
+    </ScrollView>
  );
 };

@@ -52,7 +82,7 @@ const AlbumsScreen = ({
  navigation: SimpleStackNavigation;
 }) => {
  return (
-    <React.Fragment>
+    <ScrollView>
      <View style={styles.buttons}>
        <Button
          mode="contained"
@@ -63,14 +93,14 @@ const AlbumsScreen = ({
        </Button>
        <Button
          mode="outlined"
-          onPress={() => navigation.goBack()}
+          onPress={() => navigation.pop(2)}
          style={styles.button}
        >
-          Go back
+          Pop by 2
        </Button>
      </View>
-      <Albums />
-    </React.Fragment>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
  );
 };

@@ -95,6 +125,11 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
        })}
        initialParams={{ author: 'Gandalf' }}
      />
+      <SimpleStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ title: 'Feed' }}
+      />
      <SimpleStack.Screen
        name="Album"
        component={AlbumsScreen}
--- a/example/src/Screens/StackHeaderCustomization.tsx
+++ b/example/src/Screens/StackHeaderCustomization.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native';
+import { Button, Appbar } from 'react-native-paper';
+import { BlurView } from 'expo-blur';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+  HeaderBackground,
+  useHeaderHeight,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type SimpleStackParams = {
+  Article: { author: string };
+  Album: undefined;
+};
+
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'Article'>;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Album')}
+          style={styles.button}
+        >
+          Push album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  const headerHeight = useHeaderHeight();
+
+  return (
+    <ScrollView contentContainerStyle={{ paddingTop: headerHeight }}>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const SimpleStack = createStackNavigator<SimpleStackParams>();
+
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation, ...rest }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  return (
+    <SimpleStack.Navigator {...rest}>
+      <SimpleStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params?.author}`,
+          headerTintColor: '#fff',
+          headerStyle: { backgroundColor: '#ff005d' },
+          headerBackTitleVisible: false,
+          headerTitleAlign: 'center',
+          headerBackImage: ({ tintColor }) => (
+            <MaterialCommunityIcons
+              name="arrow-left-circle-outline"
+              color={tintColor}
+              size={24}
+              style={{ marginHorizontal: Platform.OS === 'ios' ? 8 : 0 }}
+            />
+          ),
+          headerRight: ({ tintColor }) => (
+            <Appbar.Action
+              color={tintColor}
+              icon="dots-horizontal-circle-outline"
+              onPress={() =>
+                Alert.alert(
+                  'Never gonna give you up!',
+                  'Never gonna let you down! Never gonna run around and desert you!'
+                )
+              }
+            />
+          ),
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <SimpleStack.Screen
+        name="Album"
+        component={AlbumsScreen}
+        options={{
+          title: 'Album',
+          headerBackTitle: 'Back',
+          headerTransparent: true,
+          headerBackground: () => (
+            <HeaderBackground style={{ backgroundColor: 'transparent' }}>
+              <BlurView
+                tint="light"
+                intensity={75}
+                style={StyleSheet.absoluteFill}
+              />
+            </HeaderBackground>
+          ),
+        }}
+      />
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});
--- a/example/src/Screens/StackTransparent.tsx
+++ b/example/src/Screens/StackTransparent.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { Button, Paragraph } from 'react-native-paper';
+import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+
+type SimpleStackParams = {
+  Article: { author: string };
+  Dialog: undefined;
+};
+
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'Article'>;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Dialog')}
+          style={styles.button}
+        >
+          Show Dialog
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const DialogScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.dialog, { backgroundColor: colors.card }]}>
+        <Paragraph>
+          Mise en place is a French term that literally means “put in place.” It
+          also refers to a way cooks in professional kitchens and restaurants
+          set up their work stations—first by gathering all ingredients for a
+          recipes, partially preparing them (like measuring out and chopping),
+          and setting them all near each other. Setting up mise en place before
+          cooking is another top tip for home cooks, as it seriously helps with
+          organization. It’ll pretty much guarantee you never forget to add an
+          ingredient and save you time from running back and forth from the
+          pantry ten times.
+        </Paragraph>
+        <Button style={styles.close} compact onPress={navigation.goBack}>
+          Okay
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+const SimpleStack = createStackNavigator<SimpleStackParams>();
+
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function SimpleStackScreen({ navigation, ...rest }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  return (
+    <SimpleStack.Navigator mode="modal" {...rest}>
+      <SimpleStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <SimpleStack.Screen
+        name="Dialog"
+        component={DialogScreen}
+        options={{
+          headerShown: false,
+          cardStyle: { backgroundColor: 'transparent' },
+          cardOverlayEnabled: true,
+          cardStyleInterpolator: ({ current: { progress } }) => ({
+            cardStyle: {
+              opacity: progress.interpolate({
+                inputRange: [0, 0.5, 0.9, 1],
+                outputRange: [0, 0.25, 0.7, 1],
+              }),
+              transform: [
+                {
+                  scale: progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0.9, 1],
+                    extrapolate: 'clamp',
+                  }),
+                },
+              ],
+            },
+            overlayStyle: {
+              opacity: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 0.5],
+                extrapolate: 'clamp',
+              }),
+            },
+          }),
+        }}
+      />
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dialog: {
+    padding: 16,
+    width: '90%',
+    maxWidth: 400,
+    borderRadius: 3,
+  },
+  close: {
+    alignSelf: 'flex-end',
+  },
+});
--- a/example/src/Shared/Albums.tsx
+++ b/example/src/Shared/Albums.tsx
@@ -1,53 +1,90 @@
 /* eslint-disable import/no-commonjs */

 import * as React from 'react';
-import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
+import {
+  View,
+  Image,
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+  Dimensions,
+  Platform,
+} from 'react-native';
 import { useScrollToTop } from '@react-navigation/native';

 const COVERS = [
-  require('../../assets/album-art-1.jpg'),
-  require('../../assets/album-art-2.jpg'),
-  require('../../assets/album-art-3.jpg'),
-  require('../../assets/album-art-4.jpg'),
-  require('../../assets/album-art-5.jpg'),
-  require('../../assets/album-art-6.jpg'),
-  require('../../assets/album-art-7.jpg'),
-  require('../../assets/album-art-8.jpg'),
+  require('../../assets/album-art-01.jpg'),
+  require('../../assets/album-art-02.jpg'),
+  require('../../assets/album-art-03.jpg'),
+  require('../../assets/album-art-04.jpg'),
+  require('../../assets/album-art-05.jpg'),
+  require('../../assets/album-art-06.jpg'),
+  require('../../assets/album-art-07.jpg'),
+  require('../../assets/album-art-08.jpg'),
+  require('../../assets/album-art-09.jpg'),
+  require('../../assets/album-art-10.jpg'),
+  require('../../assets/album-art-11.jpg'),
+  require('../../assets/album-art-12.jpg'),
+  require('../../assets/album-art-13.jpg'),
+  require('../../assets/album-art-14.jpg'),
+  require('../../assets/album-art-15.jpg'),
+  require('../../assets/album-art-16.jpg'),
+  require('../../assets/album-art-17.jpg'),
+  require('../../assets/album-art-18.jpg'),
+  require('../../assets/album-art-19.jpg'),
+  require('../../assets/album-art-20.jpg'),
+  require('../../assets/album-art-21.jpg'),
+  require('../../assets/album-art-22.jpg'),
+  require('../../assets/album-art-23.jpg'),
+  require('../../assets/album-art-24.jpg'),
 ];

-export default function Albums() {
+export default function Albums(props: Partial<ScrollViewProps>) {
  const ref = React.useRef<ScrollView>(null);

  useScrollToTop(ref);

  return (
-    <ScrollView
-      ref={ref}
-      style={styles.container}
-      contentContainerStyle={styles.content}
-    >
+    <ScrollView ref={ref} contentContainerStyle={styles.content} {...props}>
      {COVERS.map((source, i) => (
        // eslint-disable-next-line react/no-array-index-key
-        <Image key={i} source={source} style={styles.cover} />
-      ))}
-      {COVERS.map((source, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Image key={i + 'F'} source={source} style={styles.cover} />
+        <View key={i} style={styles.item}>
+          <Image source={source} style={styles.photo} />
+        </View>
      ))}
    </ScrollView>
  );
 }

 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#000',
-  },
  content: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
-  cover: {
-    width: '50%',
-    height: Dimensions.get('window').width / 2,
+  ...Platform.select({
+    web: {
+      content: {
+        display: 'grid' as 'none',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+      },
+      item: {
+        width: '100%',
+      },
+    },
+    default: {
+      content: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      },
+      item: {
+        height: Dimensions.get('window').width / 2,
+        width: '50%',
+      },
+    },
+  }),
+  photo: {
+    flex: 1,
+    resizeMode: 'cover',
+    paddingTop: '100%',
  },
 });
--- a/example/src/Shared/Article.tsx
+++ b/example/src/Shared/Article.tsx
@@ -1,8 +1,15 @@
 import * as React from 'react';
-import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
+import {
+  View,
+  Text,
+  Image,
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+} from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';

-type Props = {
+type Props = Partial<ScrollViewProps> & {
  date?: string;
  author?: {
    name: string;
@@ -14,6 +21,7 @@ export default function Article({
  author = {
    name: 'Knowledge Bot',
  },
+  ...rest
 }: Props) {
  const ref = React.useRef<ScrollView>(null);

@@ -26,6 +34,7 @@ export default function Article({
      ref={ref}
      style={{ backgroundColor: colors.card }}
      contentContainerStyle={styles.content}
+      {...rest}
    >
      <View style={styles.author}>
        <Image
--- a/example/src/Shared/Chat.tsx
+++ b/example/src/Shared/Chat.tsx
@@ -6,6 +6,7 @@ import {
  TextInput,
  ScrollView,
  StyleSheet,
+  ScrollViewProps,
 } from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';
 import Color from 'color';
@@ -17,7 +18,7 @@ const MESSAGES = [
  'make me a sandwich',
 ];

-export default function Chat() {
+export default function Chat(props: Partial<ScrollViewProps>) {
  const ref = React.useRef<ScrollView>(null);

  useScrollToTop(ref);
@@ -29,6 +30,7 @@ export default function Chat() {
      <ScrollView
        style={styles.inverted}
        contentContainerStyle={styles.content}
+        {...props}
      >
        {MESSAGES.map((text, i) => {
          const odd = i % 2;
--- a/example/src/Shared/NewsFeed.tsx
+++ b/example/src/Shared/NewsFeed.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import {
+  View,
+  TextInput,
+  Image,
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+} from 'react-native';
+import { useScrollToTop, useTheme } from '@react-navigation/native';
+import {
+  Card,
+  Text,
+  Avatar,
+  Subheading,
+  IconButton,
+  Divider,
+} from 'react-native-paper';
+import Color from 'color';
+
+type Props = Partial<ScrollViewProps>;
+
+const Author = () => {
+  return (
+    <View style={[styles.row, styles.attribution]}>
+      <Avatar.Image source={require('../../assets/avatar-1.png')} size={32} />
+      <Subheading style={styles.author}>Joke bot</Subheading>
+    </View>
+  );
+};
+
+const Footer = () => {
+  return (
+    <View style={styles.row}>
+      <IconButton style={styles.icon} size={16} icon="heart-outline" />
+      <IconButton style={styles.icon} size={16} icon="comment-outline" />
+      <IconButton style={styles.icon} size={16} icon="share-outline" />
+    </View>
+  );
+};
+
+export default function NewsFeed(props: Props) {
+  const ref = React.useRef<ScrollView>(null);
+
+  useScrollToTop(ref);
+
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView ref={ref} {...props}>
+      <Card style={styles.card}>
+        <TextInput
+          placeholder="What's on your mind?"
+          placeholderTextColor={Color(colors.text)
+            .alpha(0.5)
+            .rgb()
+            .string()}
+          style={styles.input}
+        />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            If you aren&apos;t impressed with the picture of the first Black
+            Hole, you clearly don&apos;t understand the gravity of the
+            situation.
+          </Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            I went to the zoo and I saw a baguette in a cage. I asked the
+            zookeeper about it and he said it was bread in captivity.
+          </Text>
+        </Card.Content>
+        <Image source={require('../../assets/book.jpg')} style={styles.cover} />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>Why didn&apos;t 4 ask 5 out? Because he was 2².</Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            What did Master Yoda say when he first saw himself in 4k? HDMI.
+          </Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+      <Card style={styles.card}>
+        <Author />
+        <Card.Content style={styles.content}>
+          <Text>
+            Someone broke into my house and stole 20% of my couch. Ouch!
+          </Text>
+        </Card.Content>
+        <Divider />
+        <Footer />
+      </Card>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    padding: 16,
+    backgroundColor: 'transparent',
+    margin: 0,
+  },
+  card: {
+    marginVertical: 8,
+    borderRadius: 0,
+  },
+  cover: {
+    height: 160,
+    borderRadius: 0,
+  },
+  content: {
+    marginBottom: 12,
+  },
+  attribution: {
+    margin: 12,
+  },
+  author: {
+    marginHorizontal: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    flex: 1,
+  },
+});
--- a/example/src/Shared/SettingsItem.tsx
+++ b/example/src/Shared/SettingsItem.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Subheading, Switch } from 'react-native-paper';
+
+type Props = {
+  label: string;
+  value: boolean;
+  onValueChange: () => void;
+};
+
+export default function SettingsItem({ label, value, onValueChange }: Props) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+      }}
+    >
+      <Subheading>{label}</Subheading>
+      <Switch value={value} onValueChange={onValueChange} />
+    </View>
+  );
+}
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -1,21 +1,20 @@
 import * as React from 'react';
 import {
-  View,
  ScrollView,
  AsyncStorage,
  YellowBox,
  Platform,
  StatusBar,
+  I18nManager,
 } from 'react-native';
+import RNRestart from 'react-native-restart';
 import { MaterialIcons } from '@expo/vector-icons';
 import {
  Provider as PaperProvider,
  DefaultTheme as PaperLightTheme,
  DarkTheme as PaperDarkTheme,
-  Subheading,
  Appbar,
  List,
-  Switch,
  Divider,
 } from 'react-native-paper';
 import { Asset } from 'expo-asset';
@@ -23,7 +22,7 @@ import {
  InitialState,
  useLinking,
  NavigationContainerRef,
-  NavigationNativeContainer,
+  NavigationContainer,
  DefaultTheme,
  DarkTheme,
 } from '@react-navigation/native';
@@ -35,17 +34,23 @@ import {
  createStackNavigator,
  Assets as StackAssets,
  StackNavigationProp,
+  HeaderStyleInterpolators,
 } from '@react-navigation/stack';

 import LinkingPrefixes from './LinkingPrefixes';
 import SimpleStack from './Screens/SimpleStack';
 import NativeStack from './Screens/NativeStack';
 import ModalPresentationStack from './Screens/ModalPresentationStack';
+import StackTransparent from './Screens/StackTransparent';
+import StackHeaderCustomization from './Screens/StackHeaderCustomization';
 import BottomTabs from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
+import DynamicTabs from './Screens/DynamicTabs';
 import AuthFlow from './Screens/AuthFlow';
 import CompatAPI from './Screens/CompatAPI';
+import SettingsItem from './Shared/SettingsItem';
+import { Updates } from 'expo';

 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);

@@ -67,6 +72,14 @@ const SCREENS = {
    title: 'Modal Presentation Stack',
    component: ModalPresentationStack,
  },
+  StackTransparent: {
+    title: 'Transparent Stack',
+    component: StackTransparent,
+  },
+  StackHeaderCustomization: {
+    title: 'Header Customization in Stack',
+    component: StackHeaderCustomization,
+  },
  BottomTabs: { title: 'Bottom Tabs', component: BottomTabs },
  MaterialTopTabs: {
    title: 'Material Top Tabs',
@@ -76,6 +89,10 @@ const SCREENS = {
    title: 'Material Bottom Tabs',
    component: MaterialBottomTabs,
  },
+  DynamicTabs: {
+    title: 'Dynamic Tabs',
+    component: DynamicTabs,
+  },
  AuthFlow: {
    title: 'Auth Flow',
    component: AuthFlow,
@@ -100,22 +117,28 @@ export default function App() {
  // To test deep linking on, run the following in the Terminal:
  // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
  // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
+  // Android (bare): adb shell am start -a android.intent.action.VIEW -d "rne://127.0.0.1:19000/--/simple-stack"
+  // iOS (bare): xcrun simctl openurl booted rne://127.0.0.1:19000/--/simple-stack
  // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
  const { getInitialState } = useLinking(containerRef, {
    prefixes: LinkingPrefixes,
    config: {
-      Root: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
-        (acc, name) => {
-          // Convert screen names such as SimpleStack to kebab case (simple-stack)
-          acc[name] = name
-            .replace(/([A-Z]+)/g, '-$1')
-            .replace(/^-/, '')
-            .toLowerCase();
+      Root: {
+        path: '',
+        initialRouteName: 'Home',
+        screens: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
+          (acc, name) => {
+            // Convert screen names such as SimpleStack to kebab case (simple-stack)
+            acc[name] = name
+              .replace(/([A-Z]+)/g, '-$1')
+              .replace(/^-/, '')
+              .toLowerCase();

-          return acc;
-        },
-        {}
-      ),
+            return acc;
+          },
+          { Home: '' }
+        ),
+      },
    },
  });

@@ -131,7 +154,7 @@ export default function App() {
      try {
        let state = await getInitialState();

-        if (state === undefined) {
+        if (Platform.OS !== 'web' && state === undefined) {
          const savedState = await AsyncStorage.getItem(
            NAVIGATION_PERSISTENCE_KEY
          );
@@ -180,7 +203,7 @@ export default function App() {
      {Platform.OS === 'ios' && (
        <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
      )}
-      <NavigationNativeContainer
+      <NavigationContainer
        ref={containerRef}
        initialState={initialState}
        onStateChange={state =>
@@ -206,7 +229,11 @@ export default function App() {
            }: {
              navigation: DrawerNavigationProp<RootDrawerParamList>;
            }) => (
-              <Stack.Navigator>
+              <Stack.Navigator
+                screenOptions={{
+                  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+                }}
+              >
                <Stack.Screen
                  name="Home"
                  options={{
@@ -228,34 +255,39 @@ export default function App() {
                    <ScrollView
                      style={{ backgroundColor: theme.colors.background }}
                    >
-                      <View
-                        style={{
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          padding: 16,
+                      <SettingsItem
+                        label="Right to left"
+                        value={I18nManager.isRTL}
+                        onValueChange={() => {
+                          I18nManager.forceRTL(!I18nManager.isRTL);
+                          // @ts-ignore
+                          if (global.Expo) {
+                            Updates.reloadFromCache();
+                          } else {
+                            RNRestart.Restart();
+                          }
                        }}
-                      >
-                        <Subheading>Dark theme</Subheading>
-                        <Switch
-                          value={theme.dark}
-                          onValueChange={() => {
-                            AsyncStorage.setItem(
-                              THEME_PERSISTENCE_KEY,
-                              theme.dark ? 'light' : 'dark'
-                            );
+                      />
+                      <Divider />
+                      <SettingsItem
+                        label="Dark theme"
+                        value={theme.dark}
+                        onValueChange={() => {
+                          AsyncStorage.setItem(
+                            THEME_PERSISTENCE_KEY,
+                            theme.dark ? 'light' : 'dark'
+                          );

-                            setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
-                          }}
-                        />
-                      </View>
+                          setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
+                        }}
+                      />
                      <Divider />
                      {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
                        name => (
                          <List.Item
                            key={name}
                            title={SCREENS[name].title}
-                            onPress={() => navigation.push(name)}
+                            onPress={() => navigation.navigate(name)}
                          />
                        )
                      )}
@@ -276,7 +308,7 @@ export default function App() {
            )}
          </Drawer.Screen>
        </Drawer.Navigator>
-      </NavigationNativeContainer>
+      </NavigationContainer>
    </PaperProvider>
  );
 }
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -4,9 +4,14 @@ const createExpoWebpackConfigAsync = require('@expo/webpack-config');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

+const node_modules = path.resolve(__dirname, '..', 'node_modules');
+const packages = path.resolve(__dirname, '..', 'packages');
+
 module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

+  config.context = path.resolve(__dirname, '..');
+
  config.module.rules.push({
    test: /\.(js|ts|tsx)$/,
    include: /(packages|example)\/.+/,
@@ -19,28 +24,15 @@ module.exports = async function(env, argv) {
  );

  Object.assign(config.resolve.alias, {
-    react: path.resolve(__dirname, 'node_modules', 'react'),
-    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
-    'react-native-web': path.resolve(
-      __dirname,
-      'node_modules',
-      'react-native-web'
-    ),
-    'react-native-reanimated': path.resolve(
-      __dirname,
-      'node_modules',
-      'react-native-reanimated-web'
-    ),
-    '@expo/vector-icons/MaterialCommunityIcons': require.resolve(
-      '@expo/vector-icons/MaterialCommunityIcons'
-    ),
+    react: path.resolve(node_modules, 'react'),
+    'react-native': path.resolve(node_modules, 'react-native-web'),
+    'react-native-web': path.resolve(node_modules, 'react-native-web'),
+    '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
  });

-  fs.readdirSync(path.join(__dirname, '..')).forEach(name => {
+  fs.readdirSync(packages).forEach(name => {
    config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-      __dirname,
-      '..',
-      'packages',
+      packages,
      name,
      'src'
    );
--- a/lerna.json
+++ b/lerna.json
@@ -11,8 +11,6 @@
      "allowBranch": "master",
      "conventionalCommits": true,
      "createRelease": "github",
-      "preId": "alpha",
-      "preDistTag": "next",
      "message": "chore: publish",
      "ignoreChanges": [
        "**/__fixtures__/**",
--- a/package.json
+++ b/package.json
@@ -23,24 +23,26 @@
    "example": "yarn --cwd example"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-react": "^7.7.0",
-    "@babel/preset-typescript": "^7.7.2",
-    "@babel/runtime": "^7.7.6",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@types/jest": "^24.0.23",
-    "codecov": "^3.6.1",
-    "commitlint": "^8.2.0",
-    "core-js": "^3.5.0",
-    "eslint": "^6.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-flow": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@babel/runtime": "^7.8.4",
+    "@commitlint/config-conventional": "^8.3.4",
+    "@types/jest": "^25.1.2",
+    "codecov": "^3.6.5",
+    "commitlint": "^8.3.5",
+    "core-js": "^3.6.4",
+    "detox": "^15.1.4",
+    "eslint": "^6.8.0",
    "eslint-config-satya164": "^3.1.5",
-    "husky": "^3.0.9",
-    "jest": "^24.8.0",
-    "lerna": "^3.18.4",
+    "husky": "^4.2.1",
+    "jest": "^25.1.0",
+    "lerna": "^3.20.2",
    "prettier": "^1.19.1",
-    "typescript": "^3.7.3"
+    "typescript": "^3.7.5"
  },
  "resolutions": {
    "react": "~16.9.0",
@@ -63,12 +65,35 @@
    ],
    "moduleNameMapper": {
      "@react-navigation/([^/]+)": "<rootDir>/packages/$1/src"
-    }
+    },
+    "preset": "react-native"
  },
  "prettier": {
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "trailingComma": "es5"
+  },
+  "detox": {
+    "test-runner": "jest",
+    "runner-config": "example/e2e/config.json",
+    "configurations": {
+      "ios.sim.debug": {
+        "binaryPath": "example/ios/build/Build/Products/Debug-iphonesimulator/ReactNavigationExample.app",
+        "build": "set -o pipefail; xcodebuild -workspace example/ios/ReactNavigationExample.xcworkspace -scheme ReactNavigationExample -configuration Debug -sdk iphonesimulator -derivedDataPath example/ios/build",
+        "type": "ios.simulator",
+        "device": {
+          "type": "iPhone 11 Pro"
+        }
+      },
+      "ios.sim.release": {
+        "binaryPath": "example/ios/build/Build/Products/Release-iphonesimulator/ReactNavigationExample.app",
+        "build": "export RCT_NO_LAUNCH_PACKAGER=true; set -o pipefail; xcodebuild -workspace example/ios/ReactNavigationExample.xcworkspace -scheme ReactNavigationExample -configuration Release -sdk iphonesimulator -derivedDataPath example/ios/build",
+        "type": "ios.simulator",
+        "device": {
+          "type": "iPhone 11 Pro"
+        }
+      }
+    }
  }
 }
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/CHANGELOG.md
@@ -3,6 +3,174 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.0.5](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.4...@react-navigation/bottom-tabs@5.0.5) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.3...@react-navigation/bottom-tabs@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.2...@react-navigation/bottom-tabs@5.0.3) (2020-02-12)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.1...@react-navigation/bottom-tabs@5.0.2) (2020-02-11)
+
+
+### Bug Fixes
+
+* initialize keyboard-hiding tabBar to visible=true ([#6740](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6740), [#6799](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6799)) ([0c59ef7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/0c59ef7328c63108a2a2c04e927794d73cead63a))
+* provide route context to header and bottom tabs ([b6e7e08](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b6e7e08b9a05be6c04ed21e938b9580876239116))
+
+
+
+
+
+## [5.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.45...@react-navigation/bottom-tabs@5.0.1) (2020-02-10)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.45](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.44...@react-navigation/bottom-tabs@5.0.0-alpha.45) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.44](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.43...@react-navigation/bottom-tabs@5.0.0-alpha.44) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.42...@react-navigation/bottom-tabs@5.0.0-alpha.43) (2020-02-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.42) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+
+
+
+
+
+# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.40) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+
+
+
+
+
+# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.38...@react-navigation/bottom-tabs@5.0.0-alpha.39) (2020-01-24)
+
+
+### Bug Fixes
+
+* use layout instead of dimensions for determining tab bar layout ([f1fe951](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/f1fe951cf9d602e1b6d4932e3c6c77bbeaaec5c0))
+
+
+
+
+
+# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.37...@react-navigation/bottom-tabs@5.0.0-alpha.38) (2020-01-23)
+
+
+### Bug Fixes
+
+* don't use native driver on web ([0a982ee](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0a982ee6984b24c0ba053a30223e255f3835e050))
+
+
+### Features
+
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.36...@react-navigation/bottom-tabs@5.0.0-alpha.37) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.35...@react-navigation/bottom-tabs@5.0.0-alpha.36) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.34...@react-navigation/bottom-tabs@5.0.0-alpha.35) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.34) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.33) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.31...@react-navigation/bottom-tabs@5.0.0-alpha.32) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.30...@react-navigation/bottom-tabs@5.0.0-alpha.31) (2020-01-03)


--- a/packages/bottom-tabs/LICENSE
+++ b/packages/bottom-tabs/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Navigation Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/packages/bottom-tabs/README.md
+++ b/packages/bottom-tabs/README.md
@@ -2,78 +2,4 @@

 Bottom tab navigator for React Navigation following iOS design guidelines.

-## Installation
-
-Open a Terminal in your project's folder and run,
-
-```sh
-yarn add @react-navigation/native @react-navigation/bottom-tabs
-```
-
-Now we need to install [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
-
-If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
-
-```sh
-expo install react-native-safe-area-context
-```
-
-If you are not using Expo, run the following:
-
-```sh
-yarn add react-native-safe-area-context
-```
-
-If you are using Expo, you are done. Otherwise, continue to the next steps.
-
-To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
-
-```sh
-cd ios
-pod install
-cd ..
-```
-
-## Usage
-
-```js
-import { MaterialCommunityIcons } from 'react-native-vector-icons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-const getTabBarIcon = name => ({ color, size }) => (
-  <MaterialCommunityIcons name={name} color={color} size={size} />
-);
-
-const BottomTabs = createBottomTabNavigator();
-
-export default function App() {
-  return (
-    <BottomTabs.Navigator>
-      <BottomTabs.Screen
-        name="article"
-        component={Article}
-        options={{
-          tabBarLabel: 'Article',
-          tabBarIcon: getTabBarIcon('file-document-box'),
-        }}
-      />
-      <BottomTabs.Screen
-        name="chat"
-        component={Chat}
-        options={{
-          tabBarLabel: 'Chat',
-          tabBarIcon: getTabBarIcon('message-reply'),
-        }}
-      />
-      <BottomTabs.Screen
-        name="contacts"
-        component={Contacts}
-        options={{
-          tabBarLabel: 'Contacts',
-          tabBarIcon: getTabBarIcon('contacts'),
-        }}
-      />
-    </BottomTabs.Navigator>
-  );
-}
-```
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/bottom-tab-navigator.html).
--- a/packages/bottom-tabs/package.json
+++ b/packages/bottom-tabs/package.json
@@ -10,21 +10,18 @@
    "android",
    "tab"
  ],
-  "version": "5.0.0-alpha.31",
+  "version": "5.0.4",
  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/react-navigation/navigation-ex.git",
-    "directory": "packages/bottom-tabs"
-  },
+  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs",
  "main": "lib/commonjs/index.js",
  "react-native": "src/index.tsx",
  "module": "lib/module/index.js",
-  "types": "lib/typescript/bottom-tabs/src/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
  "files": [
    "src",
    "lib"
  ],
+  "sideEffects": false,
  "publishConfig": {
    "access": "public"
  },
@@ -33,26 +30,26 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19",
    "color": "^3.1.2",
    "react-native-iphone-x-helper": "^1.2.1"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.7.0",
-    "@types/color": "^3.0.0",
-    "@types/react": "^16.9.16",
-    "@types/react-native": "^0.60.25",
+    "@react-native-community/bob": "^0.9.3",
+    "@react-navigation/native": "^5.0.4",
+    "@types/color": "^3.0.1",
+    "@types/react": "^16.9.19",
+    "@types/react-native": "^0.60.30",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-safe-area-context": "^0.6.0",
-    "typescript": "^3.7.3"
+    "react-native-safe-area-context": "^0.7.2",
+    "typescript": "^3.7.5"
  },
  "peerDependencies": {
-    "@react-navigation/native": "^5.0.0-alpha.0",
+    "@react-navigation/native": "^5.0.0",
    "react": "*",
    "react-native": "*",
-    "react-native-safe-area-context": "^0.6.0"
+    "react-native-safe-area-context": ">= 0.6.0"
  },
  "@react-native-community/bob": {
    "source": "src",
@@ -60,7 +57,12 @@
    "targets": [
      "commonjs",
      "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
    ]
  }
 }
--- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
+++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
@@ -3,12 +3,10 @@ import {
  useNavigationBuilder,
  createNavigatorFactory,
  DefaultNavigatorOptions,
-} from '@react-navigation/native';
-import {
  TabRouter,
  TabRouterOptions,
  TabNavigationState,
-} from '@react-navigation/routers';
+} from '@react-navigation/native';
 import BottomTabView from '../views/BottomTabView';
 import {
  BottomTabNavigationConfig,
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -10,18 +10,18 @@ import {
  NavigationProp,
  ParamListBase,
  Descriptor,
+  TabNavigationState,
 } from '@react-navigation/native';
-import { TabNavigationState } from '@react-navigation/routers';

 export type BottomTabNavigationEventMap = {
  /**
   * Event which fires on tapping on the tab in the tab bar.
   */
-  tabPress: undefined;
+  tabPress: { data: undefined; canPreventDefault: true };
  /**
   * Event which fires on long press on the tab in the tab bar.
   */
-  tabLongPress: undefined;
+  tabLongPress: { data: undefined };
 };

 export type LabelPosition = 'beside-icon' | 'below-icon';
@@ -99,6 +99,12 @@ export type BottomTabNavigationOptions = {
   * Renders `TouchableWithoutFeedback` by default.
   */
  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+
+  /**
+   * Whether this screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
+   */
+  unmountOnBlur?: boolean;
 };

 export type BottomTabDescriptor = Descriptor<
@@ -118,11 +124,6 @@ export type BottomTabNavigationConfig = {
   * Set it to `false` if you want to render all screens on initial render.
   */
  lazy?: boolean;
-  /**
-   * Whether a screen should be unmounted when navigating away from it.
-   * Defaults to `false`.
-   */
-  unmountInactiveScreens?: boolean;
  /**
   * Function that returns a React element to display as the tab bar.
   */
@@ -175,15 +176,10 @@ export type BottomTabBarOptions = {
   */
  tabStyle?: StyleProp<ViewStyle>;
  /**
-   * Whether the label is renderd below the icon or beside the icon.
-   * When a function is passed, it receives the device dimensions to render the label differently.
-   * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's renderd beside.
+   * Whether the label is rendered below the icon or beside the icon.
+   * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's rendered beside.
   */
-  labelPosition?:
-    | LabelPosition
-    | ((options: {
-        dimensions: { height: number; width: number };
-      }) => LabelPosition);
+  labelPosition?: LabelPosition;
  /**
   * Whether the label position should adapt to the orientation.
   */
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import {
  NavigationContext,
+  NavigationRouteContext,
  CommonActions,
  useTheme,
 } from '@react-navigation/native';
@@ -27,6 +28,8 @@ type Props = BottomTabBarProps & {
 const DEFAULT_TABBAR_HEIGHT = 50;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;

+const useNativeDriver = Platform.OS !== 'web';
+
 export default function BottomTabBar({
  state,
  navigation,
@@ -48,10 +51,13 @@ export default function BottomTabBar({
  const { colors } = useTheme();

  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
-  const [layout, setLayout] = React.useState({ height: 0, width: 0 });
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
  const [keyboardShown, setKeyboardShown] = React.useState(false);

-  const [visible] = React.useState(() => new Animated.Value(0));
+  const [visible] = React.useState(() => new Animated.Value(1));

  const { routes } = state;

@@ -60,7 +66,7 @@ export default function BottomTabBar({
      Animated.timing(visible, {
        toValue: 0,
        duration: 200,
-        useNativeDriver: true,
+        useNativeDriver,
      }).start();
    }
  }, [keyboardShown, visible]);
@@ -76,7 +82,7 @@ export default function BottomTabBar({
      Animated.timing(visible, {
        toValue: 1,
        duration: 250,
-        useNativeDriver: true,
+        useNativeDriver,
      }).start(({ finished }) => {
        if (finished) {
          setKeyboardShown(false);
@@ -122,27 +128,15 @@ export default function BottomTabBar({
  };

  const shouldUseHorizontalLabels = () => {
-    const isLandscape = dimensions.width > dimensions.height;
-
    if (labelPosition) {
-      let position;
-
-      if (typeof labelPosition === 'string') {
-        position = labelPosition;
-      } else {
-        position = labelPosition({ dimensions });
-      }
-
-      if (position) {
-        return position === 'beside-icon';
-      }
+      return labelPosition === 'beside-icon';
    }

    if (!adaptive) {
      return false;
    }

-    if (dimensions.width >= 768) {
+    if (layout.width >= 768) {
      // Screen size matches a tablet
      let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;

@@ -156,8 +150,10 @@ export default function BottomTabBar({
        }
      }

-      return routes.length * maxTabItemWidth <= dimensions.width;
+      return routes.length * maxTabItemWidth <= layout.width;
    } else {
+      const isLandscape = dimensions.width > dimensions.height;
+
      return isLandscape;
    }
  };
@@ -205,6 +201,7 @@ export default function BottomTabBar({
                const event = navigation.emit({
                  type: 'tabPress',
                  target: route.key,
+                  canPreventDefault: true,
                });

                if (!focused && !event.defaultPrevented) {
@@ -241,27 +238,29 @@ export default function BottomTabBar({
                  key={route.key}
                  value={descriptors[route.key].navigation}
                >
-                  <BottomTabItem
-                    route={route}
-                    focused={focused}
-                    horizontal={shouldUseHorizontalLabels()}
-                    onPress={onPress}
-                    onLongPress={onLongPress}
-                    accessibilityLabel={accessibilityLabel}
-                    testID={options.tabBarTestID}
-                    allowFontScaling={allowFontScaling}
-                    activeTintColor={activeTintColor}
-                    inactiveTintColor={inactiveTintColor}
-                    activeBackgroundColor={activeBackgroundColor}
-                    inactiveBackgroundColor={inactiveBackgroundColor}
-                    button={options.tabBarButton}
-                    icon={options.tabBarIcon}
-                    label={label}
-                    showIcon={showIcon}
-                    showLabel={showLabel}
-                    labelStyle={labelStyle}
-                    style={tabStyle}
-                  />
+                  <NavigationRouteContext.Provider value={route}>
+                    <BottomTabItem
+                      route={route}
+                      focused={focused}
+                      horizontal={shouldUseHorizontalLabels()}
+                      onPress={onPress}
+                      onLongPress={onLongPress}
+                      accessibilityLabel={accessibilityLabel}
+                      testID={options.tabBarTestID}
+                      allowFontScaling={allowFontScaling}
+                      activeTintColor={activeTintColor}
+                      inactiveTintColor={inactiveTintColor}
+                      activeBackgroundColor={activeBackgroundColor}
+                      inactiveBackgroundColor={inactiveBackgroundColor}
+                      button={options.tabBarButton}
+                      icon={options.tabBarIcon}
+                      label={label}
+                      showIcon={showIcon}
+                      showLabel={showLabel}
+                      labelStyle={labelStyle}
+                      style={tabStyle}
+                    />
+                  </NavigationRouteContext.Provider>
                </NavigationContext.Provider>
              );
            })}
--- a/Show More
+++ b/Show More