chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.41
 - @react-navigation/compat@5.0.0-alpha.30
 - @react-navigation/core@5.0.0-alpha.39
 - @react-navigation/drawer@5.0.0-alpha.43
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.38
 - @react-navigation/material-top-tabs@5.0.0-alpha.37
 - @react-navigation/native-stack@5.0.0-alpha.31
 - @react-navigation/native@5.0.0-alpha.31
 - @react-navigation/routers@5.0.0-alpha.29
 - @react-navigation/stack@5.0.0-alpha.65

.circleci/config.yml

@@ -1,107 +1,65 @@
-version: 2.1
+version: 2
 
-executors:
-  default:
-    docker:
-      - image: circleci/node:10
-    working_directory: ~/project
-    environment:
-      YARN_CACHE_FOLDER: "~/.cache/yarn"
-
-commands:
-  attach_project:
-    steps:
-      - attach_workspace:
-          at: ~/project
+defaults: &defaults
+  docker:
+    - image: circleci/node:10
+  working_directory: ~/project
 
 jobs:
   install-dependencies:
-    executor: default
+    <<: *defaults
     steps:
       - checkout
-      - attach_project
+      - attach_workspace:
+          at: ~/project
       - restore_cache:
           keys:
-            - yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - yarn-packages-v1-{{ .Branch }}-
-            - yarn-packages-v1-
-      - run:
-          name: Install project dependencies
-          command: yarn install --frozen-lockfile
+            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v1-dependencies-
+      - run: yarn install --frozen-lockfile
       - save_cache:
-          key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
-          paths: ~/.cache/yarn
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
+          paths: node_modules
       - persist_to_workspace:
           root: .
           paths: .
-
   lint-and-typecheck:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Lint files
-          command: yarn lint
-      - run:
-          name: Typecheck files
-          command: yarn typescript
-
-  unit-tests:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Run unit tests
-          command: yarn test --maxWorkers=2 --coverage
-      - run:
-          name: Upload test coverage
-          command: yarn codecov
-      - store_artifacts:
-          path: coverage
-          destination: coverage
-
-  integration-tests:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Install Headless Chrome dependencies
-          command: |
-            sudo apt-get install -yq \
-            gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
-            libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
-            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
-            libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
-            fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
-      - run:
-          name: Build example for web
-          command: yarn example expo build:web --no-pwa
-      - run:
-          name: Run integration tests
-          command: yarn example test --maxWorkers=2
-
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn lint
+            yarn typescript
+  unit-test:
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn test --coverage
+            cat ./coverage/lcov.info | ./node_modules/.bin/codecov
+        - store_artifacts:
+            path: coverage
+            destination: coverage
   build-packages:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Build packages in the monorepo
-          command: yarn lerna run prepare
-      - run:
-          name: Verify paths for types
-          command: node scripts/check-types-path.js
+      <<: *defaults
+      steps:
+        - attach_workspace:
+            at: ~/project
+        - run: |
+            yarn lerna run prepare
+            node scripts/check-types-path.js
 
 workflows:
+  version: 2
   build-and-test:
     jobs:
       - install-dependencies
       - lint-and-typecheck:
           requires:
             - install-dependencies
-      - unit-tests:
-          requires:
-            - install-dependencies
-      - integration-tests:
+      - unit-test:
           requires:
             - install-dependencies
       - build-packages:

.eslintignore

@@ -4,7 +4,3 @@ dist/
 lib/
 web-build/
 web-report/
-
-.expo/
-.yarn/
-.vscode/

.eslintrc.json

@@ -1,27 +1,19 @@
 {
   "extends": "satya164",
   "settings": {
-    "react": {
-      "version": "16"
-    },
+    "react": { "version": "16" },
     "import/core-modules": [
       "@react-navigation/core",
       "@react-navigation/native",
       "@react-navigation/routers",
       "@react-navigation/compat",
       "@react-navigation/stack",
+      "@react-navigation/native-stack",
       "@react-navigation/drawer",
       "@react-navigation/bottom-tabs",
       "@react-navigation/material-top-tabs",
-      "@react-navigation/material-bottom-tabs",
-      "@react-navigation/devtools"
+      "@react-navigation/material-bottom-tabs"
     ]
   },
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "rules": {
-    "react/no-unused-prop-types": "off"
-  }
+  "env": { "browser": true, "node": true }
 }

.gitattributes

@@ -1 +1 @@
-yarn-*.js binary
+* text eol=lf

.github/FUNDING.yml

@@ -1 +0,0 @@
-github: react-navigation

.github/ISSUE_TEMPLATE/bug-report-native-stack.md

@@ -1,8 +1,8 @@
 ---
-name: React Navigation 4
-about: Report an issue with React Navigation 4
+name: Native Stack Navigator
+about: Report an issue with Native Stack Navigator (@react-navigation/native-stack)
 title: ''
-labels: bug, version-4
+labels: bug, package:native-stack
 assignees: ''
 ---
 
@@ -29,13 +29,8 @@ assignees: ''
 | 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-navigation/native       |
+| @react-navigation/native-stack |
 | react-native-screens           |
 | react-native                   |
 | expo                           |

.github/ISSUE_TEMPLATE/config.yml

@@ -1,10 +1,10 @@
 blank_issues_enabled: false
 contact_links:
   - name: Troubleshooting
-    url: https://reactnavigation.org/docs/troubleshooting.html
+    url: https://reactnavigation.org/docs/en/next/troubleshooting.html
     about: Read how to troubleshoot and fix common issues and mistakes.
   - name: Documentation
-    url: https://reactnavigation.org
+    url: https://next.reactnavigation.org
     about: Read the official documentation.
   - name: Feature requests
     url: https://react-navigation.canny.io/feature-requests

.github/workflows/expo-preview.yml

@@ -5,10 +5,9 @@ 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@v2
+        uses: actions/checkout@v1
 
       - name: Setup Node.js
         uses: actions/setup-node@v1
@@ -23,16 +22,20 @@ jobs:
           expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
-      - name: Restore yarn cache
+      - name: Get yarn cache
         id: yarn-cache
-        uses: actions/cache@v2
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Check yarn cache
+        uses: actions/cache@v1
         with:
-          path: '**/node_modules'
+          path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn
 
       - name: Publish Expo app
         working-directory: ./example
@@ -43,25 +46,8 @@ jobs:
         run: echo "::set-output name=path::@react-navigation/react-navigation-example?release-channel=pr-${{ github.event.number }}"
 
       - name: Comment on PR
-        uses: actions/github-script@v2
+        uses: unsplash/comment-on-pr@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            const body = 'The Expo app for the example from this branch is ready!\n\n[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})\n\n<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>';
-
-            const comments = await github.issues.listComments({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-            });
-
-            if (comments.some(comment => comment.body === body)) {
-              return;
-            }
-
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body
-            })
+          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=200x200&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>.

.github/workflows/expo.yml

@@ -2,7 +2,7 @@ name: Expo Publish
 on:
   push:
     branches:
-      - main
+      - master
 
 jobs:
   publish:
@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v1
 
       - name: Setup Node.js
         uses: actions/setup-node@v1
@@ -25,16 +25,19 @@ jobs:
           expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
-      - name: Restore yarn cache
+      - name: Get yarn cache
         id: yarn-cache
-        uses: actions/cache@v2
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
         with:
-          path: '**/node_modules'
+          path: ${{ steps.yarn-cache.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn
 
       - name: Publish Expo app
         working-directory: ./example

.github/workflows/rebase.yml

@@ -9,8 +9,7 @@ jobs:
     if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - uses: actions/checkout@master
         with:
           fetch-depth: 0
 

.github/workflows/triage.yml

@@ -1,65 +0,0 @@
-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/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "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.\n\nMake sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (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/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) 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.\n\nThe 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 please provide the repro in a GitHub repository."
-            })
-
-  question:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'question'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "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 or an issue unrelated to this library. 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.\n\nIf you believe that this is actually a bug in the library, please open a new issue and fill the issue template with relevant information."
-            })
-
-  feature-request:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'feature-request'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. Seems you have a feature request. Please post the feature request on [Canny](https://react-navigation.canny.io/feature-requests). This lets other users upvote your feature request and helps us prioritize the most requested features.\n\nYou can also open a detailed proposal in our [RFC repo](https://github.com/react-navigation/rfcs) for discussion."
-            })

.github/workflows/versions.yml

@@ -1,38 +0,0 @@
-name: Check versions
-on:
-  issues:
-    types: [opened, edited]
-
-jobs:
-  check-versions:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: react-navigation/check-versions-action@v1.0.0
-        if: contains(github.event.issue.labels.*.name, 'version-4') != true
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          required-packages: |
-            @react-navigation/native
-          optional-packages: |
-            @react-navigation/bottom-tabs
-            @react-navigation/compat
-            @react-navigation/core
-            @react-navigation/devtools
-            @react-navigation/drawer
-            @react-navigation/material-bottom-tabs
-            @react-navigation/material-top-tabs
-            @react-navigation/routers
-            @react-navigation/stack
-
-      - uses: react-navigation/check-versions-action@v1.0.0
-        if: contains(github.event.issue.labels.*.name, 'version-4')
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          required-packages: |
-            react-navigation
-          optional-packages: |
-            react-navigation-animated-switch
-            react-navigation-drawer
-            react-navigation-material-bottom-tabs
-            react-navigation-stack
-            react-navigation-tabs

.gitignore

@@ -4,9 +4,6 @@
 .idea
 .expo
 .gradle
-.project
-.settings
-.history
 
 local.properties
 

.yarnrc

@@ -1,5 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-yarn-path ".yarn/releases/yarn-1.18.0.js"

CONTRIBUTING.md

@@ -1,204 +0,0 @@
-# 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 release
-```
-
-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.

README.md

@@ -4,29 +4,72 @@
 [![Code Coverage][coverage-badge]][coverage]
 [![MIT License][license-badge]][license]
 
-Routing and navigation for your React Native apps.
+Routing and navigation for your React Native apps with a component-first API.
 
-Documentation can be found at [reactnavigation.org](https://reactnavigation.org/).
-
-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).
-
-## Package Versions
-
-| Name                                                                     |                                                                               Latest Version                                                                                |
-| ------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| [@react-navigation/core](/packages/core)                                 |                 [![badge](https://img.shields.io/npm/v/@react-navigation/core.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/core)                 |
-| [@react-navigation/native](/packages/native)                             |               [![badge](https://img.shields.io/npm/v/@react-navigation/native.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/native)               |
-| [@react-navigation/routers](/packages/routers)                           |              [![badge](https://img.shields.io/npm/v/@react-navigation/routers.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/routers)              |
-| [@react-navigation/stack](/packages/stack)                               |                [![badge](https://img.shields.io/npm/v/@react-navigation/stack.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/stack)                |
-| [@react-navigation/drawer](/packages/drawer)                             |               [![badge](https://img.shields.io/npm/v/@react-navigation/drawer.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/drawer)               |
-| [@react-navigation/material-top-tabs](/packages/material-top-tabs)       |    [![badge](https://img.shields.io/npm/v/@react-navigation/material-top-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/material-top-tabs)    |
-| [@react-navigation/material-bottom-tabs](/packages/material-bottom-tabs) | [![badge](https://img.shields.io/npm/v/@react-navigation/material-bottom-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/material-bottom-tabs) |
-| [@react-navigation/bottom-tabs](/packages/bottom-tabs)                   |          [![badge](https://img.shields.io/npm/v/@react-navigation/bottom-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/bottom-tabs)          |
-| [@react-navigation/devtools](/packages/devtools)                         |             [![badge](https://img.shields.io/npm/v/@react-navigation/devtools.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/devtools)             |
+Documentation can be found at [next.reactnavigation.org](https://next.reactnavigation.org/).
 
 ## Contributing
 
-Please read through our [contribution guide](CONTRIBUTING.md) to get started!
+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
+```
+
+## 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.
 
 ## Installing from a fork on GitHub
 
@@ -63,9 +106,9 @@ Remember to replace `<user>`, `<repo>` and `<name>` with right values.
 
 <!-- badges -->
 
-[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/react-navigation/main.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
+[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
 [license-badge]: https://img.shields.io/npm/l/@react-navigation/core.svg?style=flat-square
 [license]: https://opensource.org/licenses/MIT

babel.config.js

@@ -1,3 +1,22 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'usage',
+        corejs: 3,
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/transform-flow-strip-types',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ],
 };

example/App.tsx

@@ -1,10 +1,6 @@
 import 'react-native-gesture-handler';
 import { registerRootComponent } from 'expo';
-import { Asset } from 'expo-asset';
-import { Assets as StackAssets } from '@react-navigation/stack';
 
 import App from './src/index';
 
-Asset.loadAsync(StackAssets);
-
 registerRootComponent(App);

example/CHANGELOG.md

@@ -3,39 +3,228 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/example@5.0.0-alpha.23...@react-navigation/example@5.1.0) (2020-05-20)
+# [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
 
-* add config to enable redux devtools integration ([c9c825b](https://github.com/react-navigation/react-navigation/commit/c9c825bee61426635a28ee149eeeff3d628171cd))
-* clamp interpolated styles ([67798af](https://github.com/react-navigation/react-navigation/commit/67798af869dcbbf323629fc7e7cc9062d1e12c29))
-* disable screens when mode is modal on older expo versions ([94d7b28](https://github.com/react-navigation/react-navigation/commit/94d7b28c0b2ce0d56c99b224610f305be6451626))
-* dispatch pop early when screen is closed with gesture ([#336](https://github.com/react-navigation/react-navigation/issues/336)) ([3d937d1](https://github.com/react-navigation/react-navigation/commit/3d937d1e6571cd613e830d64f7b2e7426076d371)), closes [#267](https://github.com/react-navigation/react-navigation/issues/267)
-* provide initial values for safe area to prevent blank screen ([#238](https://github.com/react-navigation/react-navigation/issues/238)) ([77b7570](https://github.com/react-navigation/react-navigation/commit/77b757091c0451e20bca01138629669c7da544a8))
-* render fallback only if linking is enabled. closes [#8161](https://github.com/react-navigation/react-navigation/issues/8161) ([1c075ff](https://github.com/react-navigation/react-navigation/commit/1c075ffb169d233ed0515efea264a5a69b4de52e))
-* return onPress instead of onClick for useLinkProps ([ae5442e](https://github.com/react-navigation/react-navigation/commit/ae5442ebe812b91fa1f12164f27d1aeed918ab0e))
-* rtl in native app example ([50b366e](https://github.com/react-navigation/react-navigation/commit/50b366e7341f201d29a44f20b7771b3a832b0045))
-* screens integration on Android ([#294](https://github.com/react-navigation/react-navigation/issues/294)) ([9bfb295](https://github.com/react-navigation/react-navigation/commit/9bfb29562020c61b4d5c9bee278bcb1c7bdb8b67))
-* spread parent params to children in compat navigator ([24febf6](https://github.com/react-navigation/react-navigation/commit/24febf6ea99be2e5f22005fdd2a82136d647255c)), closes [#6785](https://github.com/react-navigation/react-navigation/issues/6785)
-* update screens for native stack ([5411816](https://github.com/react-navigation/react-navigation/commit/54118161885738a6d20b062c7e6679f3bace8424))
-* wrap navigators in gesture handler root ([41a5e1a](https://github.com/react-navigation/react-navigation/commit/41a5e1a385aa5180abc3992a4c67077c37b998b9))
+* 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
 
-* add `animationTypeForReplace` option ([#297](https://github.com/react-navigation/react-navigation/issues/297)) ([6262f72](https://github.com/react-navigation/react-navigation/commit/6262f7298bff843571fb4b1a677d3beabe29833e))
-* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/react-navigation/issues/308)) ([b931ae6](https://github.com/react-navigation/react-navigation/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-* add a useLinkProps hook ([f2291d1](https://github.com/react-navigation/react-navigation/commit/f2291d110faa2aa8e10c9133c1c0c28d54af7917))
-* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/commit/942d2be2c72720469475ce12ec8df23825994dbf))
-* add custom theme support ([#211](https://github.com/react-navigation/react-navigation/issues/211)) ([00fc616](https://github.com/react-navigation/react-navigation/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
-* add deeplinking to native example ([#309](https://github.com/react-navigation/react-navigation/issues/309)) ([e55e866](https://github.com/react-navigation/react-navigation/commit/e55e866af2f2163ee89bc527997cda13ffeb2abe))
-* add headerStatusBarHeight option to stack ([b201fd2](https://github.com/react-navigation/react-navigation/commit/b201fd20716a2f03cb9373c72281f5d396a9356d))
-* add Link component as useLinkTo hook for navigating to links ([2573b5b](https://github.com/react-navigation/react-navigation/commit/2573b5beaac1240434e52f3f57bb29da2f541c88))
-* add openByDefault option to drawer ([36689e2](https://github.com/react-navigation/react-navigation/commit/36689e24c21b474692bb7ecd0b901c8afbbe9a20))
-* add permanent drawer type ([#7818](https://github.com/react-navigation/react-navigation/issues/7818)) ([6a5d0a0](https://github.com/react-navigation/react-navigation/commit/6a5d0a035afae60d91aef78401ec8826295746fe))
-* add preventDefault functionality in material bottom tabs ([3dede31](https://github.com/react-navigation/react-navigation/commit/3dede316ccab3b2403a475f60ce20b5c4e4cc068))
-* emit appear and dismiss events for native stack ([f1df4a0](https://github.com/react-navigation/react-navigation/commit/f1df4a080877b3642e748a41a5ffc2da8c449a8c))
-* initialState should take priority over deep link ([039017b](https://github.com/react-navigation/react-navigation/commit/039017bc2af69120d2d10e8f2c8a62919c37eb65))
-* integrate with history API on web ([5a3f835](https://github.com/react-navigation/react-navigation/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
+* 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))

example/README.md

@@ -5,5 +5,3 @@ 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.

example/android/ReactNavigationExample.iml

@@ -13,7 +13,7 @@
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
     </content>
-    <orderEntry type="jdk" jdkName="1.8" jdkType="JavaSDK" />
+    <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
 </module>

example/android/app/app.iml

@@ -161,33 +161,32 @@
     <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: org.webkit:android-jsc:r245459@aar" level="project" />
-    <orderEntry type="module" module-name="expo-permissions" />
-    <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-sqlite" />
-    <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-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="android-expo-permissions" />
+    <orderEntry type="module" module-name="android-expo-constants" />
+    <orderEntry type="module" module-name="android-unimodules-image-loader-interface" />
+    <orderEntry type="module" module-name="android-expo-web-browser" />
+    <orderEntry type="module" module-name="android-unimodules-react-native-adapter" />
+    <orderEntry type="module" module-name="android-expo-file-system" />
+    <orderEntry type="module" module-name="android-expo-location" />
+    <orderEntry type="module" module-name="android-expo-error-recovery" />
+    <orderEntry type="module" module-name="android-unimodules-permissions-interface" />
+    <orderEntry type="module" module-name="android-unimodules-core" />
+    <orderEntry type="module" module-name="android-expo-app-loader-provider" />
+    <orderEntry type="module" module-name="android-expo-font" />
+    <orderEntry type="module" module-name="android-expo-keep-awake" />
+    <orderEntry type="module" module-name="android-expo-linear-gradient" />
+    <orderEntry type="module" module-name="android-expo-sqlite" />
+    <orderEntry type="module" module-name="android-unimodules-barcode-scanner-interface" />
+    <orderEntry type="module" module-name="android-unimodules-camera-interface" />
+    <orderEntry type="module" module-name="android-unimodules-constants-interface" />
+    <orderEntry type="module" module-name="android-unimodules-face-detector-interface" />
+    <orderEntry type="module" module-name="android-unimodules-file-system-interface" />
+    <orderEntry type="module" module-name="android-unimodules-font-interface" />
+    <orderEntry type="module" module-name="android-unimodules-sensors-interface" />
+    <orderEntry type="module" module-name="android-unimodules-task-manager-interface" />
+    <orderEntry type="module" module-name="android-@react-native-community_masked-view" />
+    <orderEntry type="module" module-name="android-react-native-gesture-handler" />
+    <orderEntry type="module" module-name="android-react-native-reanimated" />
     <orderEntry type="module" module-name="react-native-safe-area-context" />
     <orderEntry type="module" module-name="react-native-screens" />
   </component>

example/app.json

@@ -7,6 +7,12 @@
     "slug": "react-navigation-example",
     "description": "Demo app to showcase various functionality of React Navigation",
     "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
     "version": "1.0.0",
     "icon": "./assets/icon.png",
     "splash": {
@@ -14,16 +20,15 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "sdkVersion": "37.0.0",
-    "platforms": ["ios", "android", "web"],
-    "ios": {
-      "supportsTablet": true
-    },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
-    "scheme": "rne",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
     "entryPoint": "App.tsx"
   }
 }

example/babel.config.js

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

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 }
+}

example/e2e/__integration_tests__/Link.test.tsx

@@ -1,44 +0,0 @@
-import { page } from '../config/setup-playwright';
-
-beforeEach(async () => {
-  await page.click('[data-testid=LinkComponent]');
-});
-
-it('loads the article page', async () => {
-  expect(await page.evaluate(() => location.pathname + location.search)).toBe(
-    '/link-component/article/gandalf'
-  );
-  expect(
-    ((await page.accessibility.snapshot()) as any)?.children?.find(
-      (it: any) => it.role === 'heading'
-    )?.name
-  ).toBe('Article by Gandalf');
-});
-
-it('goes to the album page and goes back', async () => {
-  await page.click('[href="/link-component/music"]');
-
-  expect(await page.evaluate(() => location.pathname + location.search)).toBe(
-    '/link-component/music'
-  );
-
-  expect(
-    ((await page.accessibility.snapshot()) as any)?.children?.find(
-      (it: any) => it.role === 'heading'
-    )?.name
-  ).toBe('Albums');
-
-  await page.click('[aria-label="Article by Gandalf, back"]');
-
-  await page.waitForNavigation();
-
-  expect(await page.evaluate(() => location.pathname + location.search)).toBe(
-    '/link-component/article/gandalf'
-  );
-
-  expect(
-    ((await page.accessibility.snapshot()) as any)?.children?.find(
-      (it: any) => it.role === 'heading'
-    )?.name
-  ).toBe('Article by Gandalf');
-});

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();
+});

example/e2e/__integration_tests__/index.test.tsx

@@ -1,14 +0,0 @@
-import { page } from '../config/setup-playwright';
-
-it('loads the example app', async () => {
-  const snapshot = await page.accessibility.snapshot();
-
-  expect(
-    (snapshot?.children as Record<string, unknown>[])?.find(
-      (it) => it.role === 'heading'
-    )?.name
-  ).toBe('Examples');
-  const title = await page.$eval('[role=heading]', (el) => el.textContent);
-
-  expect(title).toBe('Examples');
-});

example/e2e/__integration_tests__/server.test.tsx

@@ -1,13 +0,0 @@
-import fetch from 'node-fetch';
-import cheerio from 'cheerio';
-
-const server = 'http://localhost:3275';
-
-it('renders the home page', async () => {
-  const res = await fetch(server);
-  const html = await res.text();
-
-  const $ = cheerio.load(html);
-
-  expect($('title').text()).toBe('Examples');
-});

example/e2e/config.json

@@ -0,0 +1,6 @@
+{
+  "setupFilesAfterEnv": ["./init.js"],
+  "testEnvironment": "node",
+  "reporters": ["detox/runners/jest/streamlineReporter"],
+  "verbose": true
+}

example/e2e/config/setup-playwright.tsx

@@ -1,24 +0,0 @@
-/* eslint-env jest */
-
-import { chromium, Browser, BrowserContext, Page } from 'playwright';
-
-let browser: Browser;
-let context: BrowserContext;
-let page: Page;
-
-beforeAll(async () => {
-  browser = await chromium.launch();
-});
-
-afterAll(async () => {
-  await browser.close();
-});
-
-beforeEach(async () => {
-  context = await browser.newContext();
-  page = await context.newPage();
-
-  await page.goto('http://localhost:3579');
-});
-
-export { browser, context, page };

example/e2e/config/setup-server.tsx

@@ -1,16 +0,0 @@
-import { setup } from 'jest-dev-server';
-
-export default async function () {
-  await setup([
-    {
-      command: 'yarn serve -l 3579 web-build',
-      launchTimeout: 50000,
-      port: 3579,
-    },
-    {
-      command: 'yarn server',
-      launchTimeout: 50000,
-      port: 3275,
-    },
-  ]);
-}

example/e2e/config/teardown-server.tsx

@@ -1,5 +0,0 @@
-import { teardown } from 'jest-dev-server';
-
-export default async function () {
-  await teardown();
-}

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();
+});

example/ios/Podfile.lock

@@ -1,38 +1,35 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - EXBlur (8.1.0):
+  - EXAppLoaderProvider (8.0.0)
+  - EXBlur (8.0.0):
     - UMCore
-  - EXConstants (9.0.0):
+  - EXConstants (8.0.0):
     - UMConstantsInterface
     - UMCore
-  - EXErrorRecovery (1.1.0):
+  - EXErrorRecovery (1.0.0):
     - UMCore
-  - EXFileSystem (8.1.0):
+  - EXFileSystem (8.0.0):
     - UMCore
     - UMFileSystemInterface
-  - EXFont (8.1.0):
+  - EXFont (8.0.0):
     - UMCore
     - UMFontInterface
-  - EXImageLoader (1.0.1):
-    - React-Core
+  - EXKeepAwake (8.0.0):
     - UMCore
-    - UMImageLoaderInterface
-  - EXKeepAwake (8.1.0):
+  - EXLinearGradient (8.0.0):
     - UMCore
-  - EXLinearGradient (8.1.0):
-    - UMCore
-  - EXLocation (8.1.0):
+  - EXLocation (8.0.0):
     - UMCore
     - UMPermissionsInterface
     - UMTaskManagerInterface
-  - EXPermissions (8.1.0):
+  - EXPermissions (8.0.0):
     - UMCore
     - UMPermissionsInterface
-  - EXSQLite (8.1.0):
+  - EXSQLite (8.0.0):
     - UMCore
     - UMFileSystemInterface
-  - EXWebBrowser (8.2.1):
+  - EXWebBrowser (8.0.0):
     - UMCore
   - FBLazyVector (0.61.5)
   - FBReactNativeSpec (0.61.5):
@@ -53,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)
@@ -215,9 +214,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-restart (0.0.15):
-    - React
-  - react-native-safe-area-context (1.0.0):
+  - react-native-safe-area-context (0.6.2):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -254,41 +251,39 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNCMaskedView (0.1.10):
+  - RNCMaskedView (0.1.5):
     - React
-  - RNGestureHandler (1.6.1):
+  - RNGestureHandler (1.5.5):
     - React
-  - RNReanimated (1.8.0):
+  - RNReanimated (1.4.0):
     - React
-  - RNScreens (2.7.0):
+  - RNScreens (2.0.0-alpha.33):
     - React
-  - UMAppLoader (1.0.2)
-  - UMBarCodeScannerInterface (5.1.0)
-  - UMCameraInterface (5.1.0)
-  - UMConstantsInterface (5.1.0)
-  - UMCore (5.1.2)
-  - UMFaceDetectorInterface (5.1.0)
-  - UMFileSystemInterface (5.1.0)
-  - UMFontInterface (5.1.0)
-  - UMImageLoaderInterface (5.1.0)
-  - UMPermissionsInterface (5.1.0):
-    - UMCore
-  - UMReactNativeAdapter (5.2.0):
+  - UMBarCodeScannerInterface (5.0.0)
+  - UMCameraInterface (5.0.0)
+  - UMConstantsInterface (5.0.0)
+  - UMCore (5.0.0)
+  - UMFaceDetectorInterface (5.0.0)
+  - UMFileSystemInterface (5.0.0)
+  - UMFontInterface (5.0.0)
+  - UMImageLoaderInterface (5.0.0)
+  - UMPermissionsInterface (5.0.0)
+  - UMReactNativeAdapter (5.0.0):
     - React-Core
     - UMCore
     - UMFontInterface
-  - UMSensorsInterface (5.1.0)
-  - UMTaskManagerInterface (5.1.0)
+  - UMSensorsInterface (5.0.0)
+  - UMTaskManagerInterface (5.0.0)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
   - 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`)
-  - EXImageLoader (from `../../node_modules/expo-image-loader/ios`)
   - EXKeepAwake (from `../../node_modules/expo-keep-awake/ios`)
   - EXLinearGradient (from `../../node_modules/expo-linear-gradient/ios`)
   - EXLocation (from `../../node_modules/expo-location/ios`)
@@ -300,6 +295,7 @@ DEPENDENCIES:
   - 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/`)
@@ -310,7 +306,6 @@ DEPENDENCIES:
   - 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-restart (from `../../node_modules/react-native-restart`)
   - 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`)
@@ -327,11 +322,10 @@ DEPENDENCIES:
   - RNGestureHandler (from `../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../node_modules/react-native-screens`)
-  - UMAppLoader (from `../../node_modules/unimodules-app-loader/ios`)
   - 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/react-native-unimodules/node_modules/@unimodules/core/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`)
@@ -349,30 +343,42 @@ SPEC REPOS:
 EXTERNAL SOURCES:
   DoubleConversion:
     :podspec: "../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
+  EXAppLoaderProvider:
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-app-loader-provider/ios"
   EXBlur:
-    :path: "../../node_modules/expo-blur/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-blur/ios"
   EXConstants:
-    :path: "../../node_modules/expo-constants/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-constants/ios"
   EXErrorRecovery:
-    :path: "../../node_modules/expo-error-recovery/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-error-recovery/ios"
   EXFileSystem:
-    :path: "../../node_modules/expo-file-system/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-file-system/ios"
   EXFont:
-    :path: "../../node_modules/expo-font/ios"
-  EXImageLoader:
-    :path: "../../node_modules/expo-image-loader/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-font/ios"
   EXKeepAwake:
-    :path: "../../node_modules/expo-keep-awake/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-keep-awake/ios"
   EXLinearGradient:
-    :path: "../../node_modules/expo-linear-gradient/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-linear-gradient/ios"
   EXLocation:
-    :path: "../../node_modules/expo-location/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-location/ios"
   EXPermissions:
-    :path: "../../node_modules/expo-permissions/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-permissions/ios"
   EXSQLite:
-    :path: "../../node_modules/expo-sqlite/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-sqlite/ios"
   EXWebBrowser:
-    :path: "../../node_modules/expo-web-browser/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/expo-web-browser/ios"
   FBLazyVector:
     :path: "../../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
@@ -383,6 +389,8 @@ EXTERNAL SOURCES:
     :podspec: "../../node_modules/react-native/third-party-podspecs/glog.podspec"
   RCTRequired:
     :path: "../../node_modules/react-native/Libraries/RCTRequired"
+  RCTRestart:
+    :path: "../../node_modules/react-native-restart/ios"
   RCTTypeSafety:
     :path: "../../node_modules/react-native/Libraries/TypeSafety"
   React:
@@ -399,8 +407,6 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
-  react-native-restart:
-    :path: "../../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
@@ -431,55 +437,66 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../node_modules/react-native-screens"
-  UMAppLoader:
-    :path: "../../node_modules/unimodules-app-loader/ios"
   UMBarCodeScannerInterface:
-    :path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
   UMCameraInterface:
-    :path: "../../node_modules/unimodules-camera-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-camera-interface/ios"
   UMConstantsInterface:
-    :path: "../../node_modules/unimodules-constants-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-constants-interface/ios"
   UMCore:
-    :path: "../../node_modules/react-native-unimodules/node_modules/@unimodules/core/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/@unimodules/core/ios"
   UMFaceDetectorInterface:
-    :path: "../../node_modules/unimodules-face-detector-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-face-detector-interface/ios"
   UMFileSystemInterface:
-    :path: "../../node_modules/unimodules-file-system-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-file-system-interface/ios"
   UMFontInterface:
-    :path: "../../node_modules/unimodules-font-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-font-interface/ios"
   UMImageLoaderInterface:
-    :path: "../../node_modules/unimodules-image-loader-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-image-loader-interface/ios"
   UMPermissionsInterface:
-    :path: "../../node_modules/unimodules-permissions-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-permissions-interface/ios"
   UMReactNativeAdapter:
-    :path: "../../node_modules/@unimodules/react-native-adapter/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/@unimodules/react-native-adapter/ios"
   UMSensorsInterface:
-    :path: "../../node_modules/unimodules-sensors-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-sensors-interface/ios"
   UMTaskManagerInterface:
-    :path: "../../node_modules/unimodules-task-manager-interface/ios"
+    :path: !ruby/object:Pathname
+    path: "../../node_modules/unimodules-task-manager-interface/ios"
   Yoga:
     :path: "../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  EXBlur: aa14d84bff6e9c2232fbcaf54ad809eee1cc41dc
-  EXConstants: 5304709b1bea70a4828f48ba4c7fc3ec3b2d9b17
-  EXErrorRecovery: 8f4c21ab2f51bf75defe4536f841a37de59b0661
-  EXFileSystem: cf4232ba7c62dc49b78c2d36005f97b6fddf0b01
-  EXFont: 8326ecf966be559f7ced7c8e221a32fc4d9ed8b0
-  EXImageLoader: 5ad6896fa1ef2ee814b551873cbf7a7baccc694a
-  EXKeepAwake: d045bc2cf1ad5a04f0323cc7c894b95b414042e0
-  EXLinearGradient: 97d8095d1e4ad96f7893e010e564796ed8aeea42
-  EXLocation: bbd487fd96a18a3ad9725389bbb94c4a5f78edf3
-  EXPermissions: 24b97f734ce9172d245a5be38ad9ccfcb6135964
-  EXSQLite: 877ad6c8eb169353a2f94d5ad26510ffadd46a1f
-  EXWebBrowser: 5902f99ac5ac551e5c82ff46f13a337b323aa9ea
+  EXAppLoaderProvider: ebdb6bc2632c1ccadbe49f5e4104d8d690969c49
+  EXBlur: d1604f66f89a9414f5ee65dfb23874437c1bb147
+  EXConstants: 4051b16c17ef3defa03c541d42811dc92b249146
+  EXErrorRecovery: d36db99ec6a3808f313f01b0890eb443796dd1c2
+  EXFileSystem: 6e0d9bb6cc4ea404dbb8f583c1a8a2dcdf4b83b6
+  EXFont: 6187b5ab46ee578d5f8e7f2ea092752e78772235
+  EXKeepAwake: 66e9f80b6d129633725a0e42f8d285c229876811
+  EXLinearGradient: 75f302f9d6484267a3f6d3252df2e7a5f00e716a
+  EXLocation: 3c75d012ca92eed94d4338778d79c49d1252393a
+  EXPermissions: 9bc08859a675d291e89be9a0870155c27c16ac35
+  EXSQLite: 220226a354912b100dfe913f5fe6f31762c8927e
+  EXWebBrowser: db32607359fb7b55b7b7b91df32dd3d8355bb3b7
   FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
+  RCTRestart: dd19aab87fc1118e05b6b5b91b959105647f56b4
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
   React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
@@ -488,8 +505,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-restart: fff228304625f55de2ebd4de43938110f4c888ed
-  react-native-safe-area-context: a346c75f2288147527365ce27b59ca6d38c27805
+  react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -500,25 +516,24 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
-  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
-  RNReanimated: 955cf4068714003d2f1a6e2bae3fb1118f359aff
-  RNScreens: cf198f915f8a2bf163de94ca9f5bfc8d326c3706
-  UMAppLoader: ee77a072f9e15128f777ccd6d2d00f52ab4387e6
-  UMBarCodeScannerInterface: 9dc692b87e5f20fe277fa57aa47f45d418c3cc6c
-  UMCameraInterface: 625878bbf2ba188a8548675e1d1d2e438a653e6d
-  UMConstantsInterface: 64060cf86587bcd90b1dbd804cceb6d377a308c1
-  UMCore: eb200e882eadafcd31ead290770835fd648c0945
-  UMFaceDetectorInterface: d6677d6ddc9ab95a0ca857aa7f8ba76656cc770f
-  UMFileSystemInterface: c70ea7147198b9807080f3597f26236be49b0165
-  UMFontInterface: d9d3b27af698c5389ae9e20b99ef56a083f491fb
-  UMImageLoaderInterface: 14dd2c46c67167491effc9e91250e9510f12709e
-  UMPermissionsInterface: 5e83a9167c177e4a0f0a3539345983cc749efb3e
-  UMReactNativeAdapter: 126da3486c1a1f11945b649d557d6c2ebb9407b2
-  UMSensorsInterface: 48941f70175e2975af1a9386c6d6cb16d8126805
-  UMTaskManagerInterface: cb890c79c63885504ddc0efd7a7d01481760aca2
+  RNCMaskedView: dd13f9f7b146a9ad82f9b7eb6c9b5548fcf6e990
+  RNGestureHandler: d2270608171c868581b840cfc692f2962c05cd17
+  RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c
+  RNScreens: 1c7fd499b915c77c21e8e6c327890c5af9b4cf7e
+  UMBarCodeScannerInterface: 3802c8574ef119c150701d679ab386e2266d6a54
+  UMCameraInterface: 985d301f688ed392f815728f0dd906ca34b7ccb1
+  UMConstantsInterface: bda5f8bd3403ad99e663eb3c4da685d063c5653c
+  UMCore: 7ab08669a8bb2e61f557c1fe9784521cb5aa28e3
+  UMFaceDetectorInterface: ce14e8e597f6a52aa66e4ab956cb5bff4fa8acf8
+  UMFileSystemInterface: 2ed004c9620f43f0b36b33c42ce668500850d6a4
+  UMFontInterface: 24fbc0a02ade6c60ad3ee3e2b5d597c8dcfc3208
+  UMImageLoaderInterface: 3976a14c588341228881ff75970fbabf122efca4
+  UMPermissionsInterface: 2abf9f7f4aa7110e27beaf634a7deda2d50ff3d7
+  UMReactNativeAdapter: 230406e3335a8dbd4c9c0e654488a1cf3b44552f
+  UMSensorsInterface: d708a892ef1500bdd9fc3ff03f7836c66d1634d3
+  UMTaskManagerInterface: a98e37a576a5220bf43b8faf33cfdc129d2f441d
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: c48a21ff513d3eadafa50f8797207ef2be75e234
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.8.4

example/jest.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  testRegex: '/__integration_tests__/.*\\.(test|spec)\\.(js|tsx?)$',
-  globalSetup: './e2e/config/setup-server.tsx',
-  globalTeardown: './e2e/config/teardown-server.tsx',
-  setupFilesAfterEnv: ['./e2e/config/setup-playwright.tsx'],
-};

example/metro.config.js

@@ -8,25 +8,26 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const root = path.resolve(__dirname, '..');
 const packages = path.resolve(root, 'packages');
 
-const workspaces = fs
-  // List all packages under `packages/`
-  .readdirSync(packages)
-  // Ignore hidden files such as .DS_Store
-  .filter((p) => !p.startsWith('.'))
-  .map((p) => path.join(packages, p));
-
 // Get the list of dependencies for all packages in the monorepo
 const modules = ['@expo/vector-icons']
   .concat(
-    ...workspaces.map((it) => {
-      const pak = JSON.parse(
-        fs.readFileSync(path.join(it, 'package.json'), 'utf8')
-      );
+    ...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')
+        );
 
-      // We need to make sure that only one version is loaded for peerDependencies
-      // So we blacklist them at the root, and alias them to the versions in example's node_modules
-      return pak.peerDependencies ? Object.keys(pak.peerDependencies) : [];
-    })
+        // 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(
@@ -44,16 +45,15 @@ module.exports = {
   watchFolders: [root],
 
   resolver: {
-    // We need to blacklist the peerDependencies we've collected in packages' node_modules
+    // We need to blacklist `node_modules` of all our packages
+    // This will avoid Metro throwing duplicate module errors
     blacklistRE: blacklist(
-      [].concat(
-        ...workspaces.map((it) =>
-          modules.map(
-            (m) =>
-              new RegExp(`^${escape(path.join(it, 'node_modules', m))}\\/.*$`)
-          )
+      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
@@ -65,7 +65,7 @@ module.exports = {
   },
 
   server: {
-    enhanceMiddleware: (middleware) => {
+    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

example/package.json

@@ -1,61 +1,43 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.1.0",
+  "version": "5.0.0-alpha.23",
   "private": true,
   "scripts": {
     "start": "expo start",
     "web": "expo start:web",
     "native": "react-native start",
     "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "server": "nodemon -e '.js,.ts,.tsx' --exec \"babel-node -i '/node_modules[/\\](?react-native)/' -x '.web.tsx,.web.ts,.web.js,.tsx,.ts,.js' --config-file ./server/babel.config.js server\"",
-    "test": "jest"
+    "ios": "react-native run-ios"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.2.0",
-    "@react-native-community/masked-view": "^0.1.10",
+    "@expo/vector-icons": "^10.0.0",
+    "@react-native-community/masked-view": "0.1.5",
+    "@types/react-native-restart": "^0.0.0",
     "color": "^3.1.2",
-    "expo": "^37.0.12",
-    "expo-asset": "~8.1.5",
-    "expo-blur": "~8.1.0",
-    "koa": "^2.12.0",
+    "expo": "^36.0.2",
+    "expo-asset": "~8.0.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.6.0",
-    "react-native-paper": "^3.10.1",
-    "react-native-reanimated": "^1.8.0",
-    "react-native-restart": "^0.0.15",
-    "react-native-safe-area-context": "^1.0.0",
-    "react-native-screens": "^2.7.0",
-    "react-native-tab-view": "2.14.4",
-    "react-native-unimodules": "~0.9.1",
-    "react-native-vector-icons": "^6.6.0",
+    "react-native-gesture-handler": "^1.5.5",
+    "react-native-paper": "^3.5.0",
+    "react-native-reanimated": "^1.4.0",
+    "react-native-restart": "^0.0.13",
+    "react-native-safe-area-context": "^0.6.2",
+    "react-native-screens": "^2.0.0-alpha.33",
+    "react-native-tab-view": "2.13.0",
+    "react-native-unimodules": "^0.7.0",
     "react-native-web": "^0.11.7"
   },
   "devDependencies": {
-    "@babel/node": "^7.10.1",
-    "@expo/webpack-config": "^0.12.12",
-    "@types/cheerio": "^0.22.18",
-    "@types/jest-dev-server": "^4.2.0",
-    "@types/koa": "^2.11.3",
-    "@types/node-fetch": "^2.5.7",
-    "@types/react": "^16.9.36",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-native": "^0.62.7",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "^8.2.1",
-    "cheerio": "^1.0.0-rc.3",
-    "expo-cli": "^3.21.5",
-    "jest": "^26.0.1",
-    "jest-dev-server": "^4.4.0",
-    "mock-require-assets": "^0.0.1",
-    "node-fetch": "^2.6.0",
-    "nodemon": "^2.0.4",
-    "playwright": "^0.14.0",
-    "serve": "^11.3.2",
-    "typescript": "^3.9.5"
+    "@babel/core": "^7.7.7",
+    "@expo/webpack-config": "^0.10.9",
+    "@types/react": "^16.9.17",
+    "@types/react-native": "^0.60.30",
+    "babel-preset-expo": "^8.0.0",
+    "expo-cli": "^3.11.5",
+    "typescript": "^3.7.4"
   }
 }

example/server/babel.config.js

@@ -1,40 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-
-const packages = path.resolve(__dirname, '..', '..', 'packages');
-
-const alias = Object.fromEntries(
-  fs
-    .readdirSync(packages)
-    .filter((name) => !name.startsWith('.'))
-    .map((name) => [
-      `@react-navigation/${name}`,
-      path.resolve(
-        packages,
-        name,
-        require(`../../packages/${name}/package.json`).source
-      ),
-    ])
-);
-
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/preset-flow',
-    '@babel/preset-typescript',
-    '@babel/preset-react',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-class-properties',
-    [
-      'module-resolver',
-      {
-        root: ['..'],
-        alias: {
-          'react-native': 'react-native-web',
-          ...alias,
-        },
-      },
-    ],
-  ],
-};

example/server/index.tsx

@@ -1,54 +0,0 @@
-import './resolve-hooks';
-
-import Koa from 'koa';
-import * as React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { AppRegistry } from 'react-native-web';
-import { ServerContainer, ServerContainerRef } from '@react-navigation/native';
-import App from '../src/index';
-
-AppRegistry.registerComponent('App', () => App);
-
-const PORT = process.env.PORT || 3275;
-
-const app = new Koa();
-
-app.use(async (ctx) => {
-  const { element, getStyleElement } = AppRegistry.getApplication('App');
-
-  const ref = React.createRef<ServerContainerRef>();
-
-  const html = ReactDOMServer.renderToString(
-    <ServerContainer
-      ref={ref}
-      location={{ pathname: ctx.path, search: ctx.search }}
-    >
-      {element}
-    </ServerContainer>
-  );
-
-  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());
-
-  const document = `
-    <!DOCTYPE html>
-    <html style="height: 100%">
-    <meta charset="utf-8">
-    <meta httpEquiv="X-UA-Compatible" content="IE=edge">
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
-    >
-    ${css}
-    <title>${ref.current?.getCurrentOptions()?.title}</title>
-    <body style="min-height: 100%">
-    <div id="root" style="display: flex; min-height: 100vh">
-    ${html}
-    </div>
-`;
-
-  ctx.body = document;
-});
-
-app.listen(PORT, () => {
-  console.log(`Running at http://localhost:${PORT}`);
-});

example/server/resolve-hooks.tsx

@@ -1,12 +0,0 @@
-import 'mock-require-assets';
-
-import Module from 'module';
-
-// We need to make sure that .web.xx extensions are resolved before .xx
-// @ts-expect-error: _extensions doesn't exist in the type definitions
-Module._extensions = Object.fromEntries(
-  // @ts-expect-error
-  Object.entries(Module._extensions).sort((a, b) => {
-    return b[0].split('.').length - a[0].split('.').length;
-  })
-);

example/src/AsyncStorage.native.tsx

@@ -1,3 +0,0 @@
-import { AsyncStorage } from 'react-native';
-
-export default AsyncStorage;

example/src/AsyncStorage.tsx

@@ -1,14 +0,0 @@
-export default {
-  getItem(key: string) {
-    return Promise.resolve(localStorage.getItem(key));
-  },
-  setItem(key: string, value: string) {
-    return Promise.resolve(localStorage.setItem(key, value));
-  },
-  removeItem(key: string) {
-    return Promise.resolve(localStorage.removeItem(key));
-  },
-  clear() {
-    return Promise.resolve(localStorage.clear());
-  },
-};

example/src/Restart.native.tsx

@@ -1,11 +0,0 @@
-import { Updates } from 'expo';
-import RNRestart from 'react-native-restart';
-
-export function restartApp() {
-  // @ts-expect-error: Expo doesn't exist in global definitions
-  if (global.Expo) {
-    Updates.reloadFromCache();
-  } else {
-    RNRestart.Restart();
-  }
-}

example/src/Restart.tsx

@@ -1 +0,0 @@
-export function restartApp() {}

example/src/Screens/AuthFlow.tsx

@@ -5,7 +5,7 @@ import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
   HeaderBackButton,
-  StackScreenProps,
+  StackNavigationProp,
 } from '@react-navigation/stack';
 
 type AuthStackParams = {
@@ -81,6 +81,10 @@ const HomeScreen = () => {
 
 const SimpleStack = createStackNavigator<AuthStackParams>();
 
+type Props = {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
 type State = {
   isLoading: boolean;
   isSignout: boolean;
@@ -92,9 +96,7 @@ type Action =
   | { type: 'SIGN_IN'; token: string }
   | { type: 'SIGN_OUT' };
 
-export default function SimpleStackScreen({
-  navigation,
-}: StackScreenProps<ParamListBase>) {
+export default function SimpleStackScreen({ navigation }: Props) {
   const [state, dispatch] = React.useReducer<React.Reducer<State, Action>>(
     (prevState, action) => {
       switch (action.type) {
@@ -133,11 +135,9 @@ export default function SimpleStackScreen({
     return () => clearTimeout(timer);
   }, []);
 
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
+  navigation.setOptions({
+    headerShown: false,
+  });
 
   const authContext = React.useMemo(
     () => ({
@@ -147,10 +147,6 @@ export default function SimpleStackScreen({
     []
   );
 
-  if (state.isLoading) {
-    return <SplashScreen />;
-  }
-
   return (
     <AuthContext.Provider value={authContext}>
       <SimpleStack.Navigator
@@ -160,7 +156,13 @@ export default function SimpleStackScreen({
           ),
         }}
       >
-        {state.userToken === undefined ? (
+        {state.isLoading ? (
+          <SimpleStack.Screen
+            name="Splash"
+            component={SplashScreen}
+            options={{ title: 'Auth Flow' }}
+          />
+        ) : state.userToken === undefined ? (
           <SimpleStack.Screen
             name="SignIn"
             options={{

example/src/Screens/BottomTabs.tsx

@@ -1,16 +1,6 @@
 import * as React from 'react';
-import { View, ScrollView, StyleSheet, Platform } from 'react-native';
-import { Button } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import {
-  getFocusedRouteNameFromRoute,
-  ParamListBase,
-} from '@react-navigation/native';
-import type { StackScreenProps } from '@react-navigation/stack';
-import {
-  createBottomTabNavigator,
-  BottomTabScreenProps,
-} from '@react-navigation/bottom-tabs';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -32,72 +22,30 @@ type BottomTabParams = {
   Chat: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
-const AlbumsScreen = ({
-  navigation,
-}: BottomTabScreenProps<BottomTabParams>) => {
-  return (
-    <ScrollView>
-      <View style={styles.buttons}>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.setOptions({ tabBarVisible: false })}
-          style={styles.button}
-        >
-          Hide tab bar
-        </Button>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.setOptions({ tabBarVisible: true })}
-          style={styles.button}
-        >
-          Show tab bar
-        </Button>
-      </View>
-      <Albums scrollEnabled={scrollEnabled} />
-    </ScrollView>
-  );
-};
-
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
-export default function BottomTabsScreen({
-  navigation,
-  route,
-}: StackScreenProps<ParamListBase, string>) {
-  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Article';
-
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      title: routeName,
-    });
-  }, [navigation, routeName]);
-
+export default function BottomTabsScreen() {
   return (
     <BottomTabs.Navigator
       screenOptions={{
-        tabBarButton:
-          Platform.OS === 'web'
-            ? undefined
-            : (props) => <TouchableBounce {...props} />,
+        tabBarButton: props => <TouchableBounce {...props} />,
       }}
     >
       <BottomTabs.Screen
         name="Article"
-        component={SimpleStackScreen}
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
         }}
-      />
+      >
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
+      </BottomTabs.Screen>
       <BottomTabs.Screen
         name="Chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
           tabBarIcon: getTabBarIcon('message-reply'),
-          tabBarBadge: 2,
         }}
       />
       <BottomTabs.Screen
@@ -110,7 +58,7 @@ export default function BottomTabsScreen({
       />
       <BottomTabs.Screen
         name="Albums"
-        component={AlbumsScreen}
+        component={Albums}
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
@@ -119,13 +67,3 @@ export default function BottomTabsScreen({
     </BottomTabs.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  buttons: {
-    flexDirection: 'row',
-    padding: 8,
-  },
-  button: {
-    margin: 8,
-  },
-});

example/src/Screens/CompatAPI.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ScrollView, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
 import {
   createCompatNavigatorFactory,
@@ -8,36 +8,28 @@ import {
 import {
   createStackNavigator,
   StackNavigationProp,
-  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
-import NewsFeed from '../Shared/NewsFeed';
 
 type CompatStackParams = {
-  Albums: undefined;
-  Nested: { author: string };
-};
-
-type NestedStackParams = {
-  Feed: undefined;
   Article: { author: string };
+  Album: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
-const AlbumsScreen: CompatScreenType<StackNavigationProp<
-  CompatStackParams
+const ArticleScreen: CompatScreenType<StackNavigationProp<
+  CompatStackParams,
+  'Article'
 >> = ({ navigation }) => {
   return (
-    <ScrollView>
+    <React.Fragment>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Nested', { author: 'Babel fish' })}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
-          Push nested
+          Push album
         </Button>
         <Button
           mode="outlined"
@@ -47,20 +39,24 @@ const AlbumsScreen: CompatScreenType<StackNavigationProp<
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
-    </ScrollView>
+      <Article author={{ name: navigation.getParam('author') }} />
+    </React.Fragment>
   );
 };
 
-const FeedScreen: CompatScreenType<StackNavigationProp<NestedStackParams>> = ({
-  navigation,
-}) => {
+ArticleScreen.navigationOptions = ({ navigation }) => ({
+  title: `Article by ${navigation.getParam('author')}`,
+});
+
+const AlbumsScreen: CompatScreenType<StackNavigationProp<
+  CompatStackParams
+>> = ({ navigation }) => {
   return (
-    <ScrollView>
+    <React.Fragment>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Article')}
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
           style={styles.button}
         >
           Push article
@@ -73,68 +69,22 @@ const FeedScreen: CompatScreenType<StackNavigationProp<NestedStackParams>> = ({
           Go back
         </Button>
       </View>
-      <NewsFeed scrollEnabled={scrollEnabled} />
-    </ScrollView>
+      <Albums />
+    </React.Fragment>
   );
 };
 
-const ArticleScreen: CompatScreenType<StackNavigationProp<
-  NestedStackParams,
-  'Article'
->> = ({ navigation }) => {
-  return (
-    <ScrollView>
-      <View style={styles.buttons}>
-        <Button
-          mode="contained"
-          onPress={() => navigation.push('Albums')}
-          style={styles.button}
-        >
-          Push albums
-        </Button>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.goBack()}
-          style={styles.button}
-        >
-          Go back
-        </Button>
-      </View>
-      <Article
-        author={{ name: navigation.getParam('author') }}
-        scrollEnabled={scrollEnabled}
-      />
-    </ScrollView>
-  );
-};
-
-ArticleScreen.navigationOptions = ({ navigation }) => ({
-  title: `Article by ${navigation.getParam('author')}`,
-});
-
-const createCompatStackNavigator = createCompatNavigatorFactory(
-  createStackNavigator
-);
-
-const CompatStack = createCompatStackNavigator<
+const CompatStack = createCompatNavigatorFactory(createStackNavigator)<
   StackNavigationProp<CompatStackParams>
 >(
   {
-    Albums: AlbumsScreen,
-    Nested: {
-      screen: createCompatStackNavigator<
-        StackNavigationProp<NestedStackParams>
-      >(
-        {
-          Feed: { getScreen: () => FeedScreen },
-          Article: { getScreen: () => ArticleScreen },
-        },
-        { navigationOptions: { headerShown: false } }
-      ),
+    Article: {
+      screen: ArticleScreen,
       params: {
         author: 'Gandalf',
       },
     },
+    Album: AlbumsScreen,
   },
   {
     mode: 'modal',
@@ -143,12 +93,12 @@ const CompatStack = createCompatStackNavigator<
 
 export default function CompatStackScreen({
   navigation,
-}: StackScreenProps<{}>) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
+}: {
+  navigation: StackNavigationProp<{}>;
+}) {
+  navigation.setOptions({
+    headerShown: false,
+  });
 
   return <CompatStack />;
 }

example/src/Screens/DynamicTabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Title, Button } from 'react-native-paper';
-import Feather from 'react-native-vector-icons/Feather';
+import { Feather } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 type BottomTabParams = {
@@ -15,7 +15,7 @@ export default function BottomTabsScreen() {
 
   return (
     <BottomTabs.Navigator>
-      {tabs.map((i) => (
+      {tabs.map(i => (
         <BottomTabs.Screen
           key={i}
           name={`tab-${i}`}
@@ -29,14 +29,12 @@ export default function BottomTabsScreen() {
           {() => (
             <View style={styles.container}>
               <Title>Tab {i}</Title>
-              <Button onPress={() => setTabs((tabs) => [...tabs, tabs.length])}>
+              <Button onPress={() => setTabs(tabs => [...tabs, tabs.length])}>
                 Add a tab
               </Button>
               <Button
                 onPress={() =>
-                  setTabs((tabs) =>
-                    tabs.length > 1 ? tabs.slice(0, -1) : tabs
-                  )
+                  setTabs(tabs => (tabs.length > 1 ? tabs.slice(0, -1) : tabs))
                 }
               >
                 Remove a tab

example/src/Screens/LinkComponent.tsx

@@ -1,153 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
-import { Button } from 'react-native-paper';
-import {
-  Link,
-  StackActions,
-  ParamListBase,
-  useLinkProps,
-} from '@react-navigation/native';
-import {
-  createStackNavigator,
-  StackScreenProps,
-} from '@react-navigation/stack';
-import Article from '../Shared/Article';
-import Albums from '../Shared/Albums';
-
-type SimpleStackParams = {
-  Article: { author: string };
-  Albums: undefined;
-};
-
-const scrollEnabled = Platform.select({ web: true, default: false });
-
-const LinkButton = ({
-  to,
-  ...rest
-}: React.ComponentProps<typeof Button> & { to: string }) => {
-  const { onPress, ...props } = useLinkProps({ to });
-
-  return (
-    <Button
-      {...props}
-      {...rest}
-      {...Platform.select({
-        web: { onClick: onPress } as any,
-        default: { onPress },
-      })}
-    />
-  );
-};
-
-const ArticleScreen = ({
-  navigation,
-  route,
-}: StackScreenProps<SimpleStackParams, 'Article'>) => {
-  return (
-    <ScrollView>
-      <View style={styles.buttons}>
-        <Link
-          to="/link-component/music"
-          style={[styles.button, { padding: 8 }]}
-        >
-          Go to /link-component/music
-        </Link>
-        <Link
-          to="/link-component/music"
-          action={StackActions.replace('Albums')}
-          style={[styles.button, { padding: 8 }]}
-        >
-          Replace with /link-component/music
-        </Link>
-        <LinkButton
-          to="/link-component/music"
-          mode="contained"
-          style={styles.button}
-        >
-          Go to /link-component/music
-        </LinkButton>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.goBack()}
-          style={styles.button}
-        >
-          Go back
-        </Button>
-      </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
-    </ScrollView>
-  );
-};
-
-const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
-  return (
-    <ScrollView>
-      <View style={styles.buttons}>
-        <Link
-          to="/link-component/article/babel"
-          style={[styles.button, { padding: 8 }]}
-        >
-          Go to /link-component/article
-        </Link>
-        <LinkButton
-          to="/link-component/article/babel"
-          mode="contained"
-          style={styles.button}
-        >
-          Go to /link-component/article
-        </LinkButton>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.goBack()}
-          style={styles.button}
-        >
-          Go back
-        </Button>
-      </View>
-      <Albums scrollEnabled={scrollEnabled} />
-    </ScrollView>
-  );
-};
-
-const SimpleStack = createStackNavigator<SimpleStackParams>();
-
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
-  StackScreenProps<ParamListBase>;
-
-export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
-  return (
-    <SimpleStack.Navigator {...rest}>
-      <SimpleStack.Screen
-        name="Article"
-        component={ArticleScreen}
-        options={({ route }) => ({
-          title: `Article by ${route.params.author}`,
-        })}
-        initialParams={{ author: 'Gandalf' }}
-      />
-      <SimpleStack.Screen
-        name="Albums"
-        component={AlbumsScreen}
-        options={{ title: 'Albums' }}
-      />
-    </SimpleStack.Navigator>
-  );
-}
-
-const styles = StyleSheet.create({
-  buttons: {
-    padding: 8,
-  },
-  button: {
-    margin: 8,
-  },
-});

example/src/Screens/MasterDetail.tsx

@@ -1,148 +0,0 @@
-import * as React from 'react';
-import { Dimensions, ScaledSize } from 'react-native';
-import { Appbar } from 'react-native-paper';
-import {
-  useTheme,
-  useNavigation,
-  ParamListBase,
-} from '@react-navigation/native';
-import {
-  createDrawerNavigator,
-  DrawerScreenProps,
-  DrawerContent,
-  DrawerContentComponentProps,
-  DrawerContentOptions,
-} from '@react-navigation/drawer';
-import type { StackScreenProps } from '@react-navigation/stack';
-import Article from '../Shared/Article';
-import Albums from '../Shared/Albums';
-import NewsFeed from '../Shared/NewsFeed';
-
-type DrawerParams = {
-  Article: undefined;
-  NewsFeed: undefined;
-  Albums: undefined;
-};
-
-const useIsLargeScreen = () => {
-  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
-
-  React.useEffect(() => {
-    const onDimensionsChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    Dimensions.addEventListener('change', onDimensionsChange);
-
-    return () => Dimensions.removeEventListener('change', onDimensionsChange);
-  }, []);
-
-  return dimensions.width > 414;
-};
-
-const Header = ({
-  onGoBack,
-  title,
-}: {
-  onGoBack: () => void;
-  title: string;
-}) => {
-  const { colors } = useTheme();
-  const isLargeScreen = useIsLargeScreen();
-
-  return (
-    <Appbar.Header style={{ backgroundColor: colors.card, elevation: 1 }}>
-      {isLargeScreen ? null : <Appbar.BackAction onPress={onGoBack} />}
-      <Appbar.Content title={title} />
-    </Appbar.Header>
-  );
-};
-
-const ArticleScreen = ({
-  navigation,
-}: DrawerScreenProps<DrawerParams, 'Article'>) => {
-  return (
-    <>
-      <Header title="Article" onGoBack={() => navigation.toggleDrawer()} />
-      <Article />
-    </>
-  );
-};
-
-const NewsFeedScreen = ({
-  navigation,
-}: DrawerScreenProps<DrawerParams, 'NewsFeed'>) => {
-  return (
-    <>
-      <Header title="Feed" onGoBack={() => navigation.toggleDrawer()} />
-      <NewsFeed />
-    </>
-  );
-};
-
-const AlbumsScreen = ({
-  navigation,
-}: DrawerScreenProps<DrawerParams, 'Albums'>) => {
-  return (
-    <>
-      <Header title="Albums" onGoBack={() => navigation.toggleDrawer()} />
-      <Albums />
-    </>
-  );
-};
-
-const CustomDrawerContent = (
-  props: DrawerContentComponentProps<DrawerContentOptions>
-) => {
-  const { colors } = useTheme();
-  const navigation = useNavigation();
-
-  return (
-    <>
-      <Appbar.Header style={{ backgroundColor: colors.card, elevation: 1 }}>
-        <Appbar.Action icon="close" onPress={() => navigation.goBack()} />
-        <Appbar.Content title="Pages" />
-      </Appbar.Header>
-      <DrawerContent {...props} />
-    </>
-  );
-};
-
-const Drawer = createDrawerNavigator<DrawerParams>();
-
-type Props = Partial<React.ComponentProps<typeof Drawer.Navigator>> &
-  StackScreenProps<ParamListBase>;
-
-export default function DrawerScreen({ navigation, ...rest }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-      gestureEnabled: false,
-    });
-  }, [navigation]);
-
-  const isLargeScreen = useIsLargeScreen();
-
-  return (
-    <Drawer.Navigator
-      openByDefault
-      drawerType={isLargeScreen ? 'permanent' : 'back'}
-      drawerStyle={isLargeScreen ? null : { width: '100%' }}
-      overlayColor="transparent"
-      drawerContent={(props) => <CustomDrawerContent {...props} />}
-      {...rest}
-    >
-      <Drawer.Screen name="Article" component={ArticleScreen} />
-      <Drawer.Screen
-        name="NewsFeed"
-        component={NewsFeedScreen}
-        options={{ title: 'Feed' }}
-      />
-      <Drawer.Screen
-        name="Albums"
-        component={AlbumsScreen}
-        options={{ title: 'Albums' }}
-      />
-    </Drawer.Navigator>
-  );
-}

example/src/Screens/MaterialBottomTabs.tsx

@@ -22,13 +22,14 @@ export default function MaterialBottomTabsScreen() {
     <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
       <MaterialBottomTabs.Screen
         name="Article"
-        component={SimpleStackScreen}
         options={{
           tabBarLabel: 'Article',
           tabBarIcon: 'file-document-box',
           tabBarColor: '#C9E7F8',
         }}
-      />
+      >
+        {props => <SimpleStackScreen {...props} headerMode="none" />}
+      </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
         name="Chat"
         component={Chat}

example/src/Screens/MaterialTopTabs.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import type { ParamListBase } from '@react-navigation/native';
-import type { StackScreenProps } from '@react-navigation/stack';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -14,15 +12,7 @@ type MaterialTopTabParams = {
 
 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
-export default function MaterialTopTabsScreen({
-  navigation,
-}: StackScreenProps<ParamListBase>) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      cardStyle: { flex: 1 },
-    });
-  }, [navigation]);
-
+export default function MaterialTopTabsScreen() {
   return (
     <MaterialTopTabs.Navigator>
       <MaterialTopTabs.Screen

example/src/Screens/ModalPresentationStack.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
-import type { ParamListBase } from '@react-navigation/native';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
-  StackNavigationOptions,
+  StackNavigationProp,
   TransitionPresets,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
@@ -13,21 +12,24 @@ import Albums from '../Shared/Albums';
 
 type ModalStackParams = {
   Article: { author: string };
-  Albums: undefined;
+  Album: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
+type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
-}: StackScreenProps<ModalStackParams, 'Article'>) => {
+}: {
+  navigation: ModalStackNavigation;
+  route: RouteProp<ModalStackParams, 'Article'>;
+}) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Albums')}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
           Push album
@@ -40,15 +42,12 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
 
-const AlbumsScreen = ({ navigation }: StackScreenProps<ModalStackParams>) => {
+const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -67,27 +66,27 @@ const AlbumsScreen = ({ navigation }: StackScreenProps<ModalStackParams>) => {
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };
 
 const ModalPresentationStack = createStackNavigator<ModalStackParams>();
 
-type Props = StackScreenProps<ParamListBase> & {
-  options?: StackNavigationOptions;
+type Props = {
+  options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
+  navigation: StackNavigationProp<ParamListBase>;
 };
 
 export default function SimpleStackScreen({ navigation, options }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
+  navigation.setOptions({
+    headerShown: false,
+  });
 
   return (
     <ModalPresentationStack.Navigator
       mode="modal"
+      headerMode="screen"
       screenOptions={({ route, navigation }) => ({
         ...TransitionPresets.ModalPresentationIOS,
         cardOverlayEnabled: true,
@@ -108,9 +107,9 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <ModalPresentationStack.Screen
-        name="Albums"
+        name="Album"
         component={AlbumsScreen}
-        options={{ title: 'Albums' }}
+        options={{ title: 'Album' }}
       />
     </ModalPresentationStack.Navigator>
   );

example/src/Screens/NativeStack.tsx

@@ -0,0 +1,233 @@
+import * as React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+// eslint-disable-next-line import/no-unresolved
+import { enableScreens } from 'react-native-screens';
+import {
+  RouteProp,
+  ParamListBase,
+  useFocusEffect,
+  useTheme,
+} from '@react-navigation/native';
+import { DrawerNavigationProp } from '@react-navigation/drawer';
+import { StackNavigationProp } from '@react-navigation/stack';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import Albums from '../Shared/Albums';
+
+type NativeStackParams = {
+  Article: { author: string };
+  Album: undefined;
+};
+
+type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
+
+const Title = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return <Text style={[styles.title, { color: colors.text }]}>{children}</Text>;
+};
+
+const Paragraph = ({ children }: { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text style={[styles.paragraph, { color: colors.text }]}>{children}</Text>
+  );
+};
+
+const ArticleScreen = ({
+  navigation,
+}: {
+  navigation: NativeStackNavigation;
+  route: RouteProp<NativeStackParams, 'Article'>;
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <ScrollView
+      style={{ backgroundColor: colors.card }}
+      contentContainerStyle={styles.content}
+    >
+      <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>
+      <Title>What is Lorem Ipsum?</Title>
+      <Paragraph>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </Paragraph>
+      <Title>Where does it come from?</Title>
+      <Paragraph>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
+        of ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Paragraph>
+      <Paragraph>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </Paragraph>
+      <Title>Why do we use it?</Title>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using &quot;Content here, content here&quot;,
+        making it look like readable English. Many desktop publishing packages
+        and web page editors now use Lorem Ipsum as their default model text,
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
+        still in their infancy. Various versions have evolved over the years,
+        sometimes by accident, sometimes on purpose (injected humour and the
+        like).
+      </Paragraph>
+      <Title>Where can I get some?</Title>
+      <Paragraph>
+        There are many variations of passages of Lorem Ipsum available, but the
+        majority have suffered alteration in some form, by injected humour, or
+        randomised words which don&apos;t look even slightly believable. If you
+        are going to use a passage of Lorem Ipsum, you need to be sure there
+        isn&apos;t anything embarrassing hidden in the middle of text. All the
+        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
+        as necessary, making this the first true generator on the Internet. It
+        uses a dictionary of over 200 Latin words, combined with a handful of
+        model sentence structures, to generate Lorem Ipsum which looks
+        reasonable. The generated Lorem Ipsum is therefore always free from
+        repetition, injected humour, or non-characteristic words etc.
+      </Paragraph>
+    </ScrollView>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: NativeStackNavigation;
+}) => (
+  <ScrollView>
+    <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 NativeStack = createNativeStackNavigator<NativeStackParams>();
+
+type Props = {
+  navigation: StackNavigationProp<ParamListBase>;
+};
+
+export default function NativeStackScreen({ navigation }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const drawer = navigation.dangerouslyGetParent() as DrawerNavigationProp<
+        ParamListBase
+      >;
+
+      navigation.setOptions({ gestureEnabled: false });
+      drawer.setOptions({ gestureEnabled: false });
+
+      return () => {
+        navigation.setOptions({ gestureEnabled: true });
+        drawer.setOptions({ gestureEnabled: true });
+      };
+    }, [navigation])
+  );
+
+  return (
+    <NativeStack.Navigator>
+      <NativeStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        options={{
+          title: 'Lorem Ipsum',
+          headerLargeTitle: true,
+          headerHideShadow: true,
+        }}
+      />
+      <NativeStack.Screen
+        name="Album"
+        component={AlbumsScreen}
+        options={{ title: 'Album' }}
+      />
+    </NativeStack.Navigator>
+  );
+}
+
+enableScreens(true);
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  paragraph: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+});

example/src/Screens/NativeStack.web.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function NativeStack() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Not supported on Web :(</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#eceff1',
+  },
+  text: {
+    fontSize: 16,
+    color: '#999',
+  },
+});

example/src/Screens/NotFound.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { Button } from 'react-native-paper';
-import type { StackScreenProps } from '@react-navigation/stack';
-
-const NotFoundScreen = ({
-  navigation,
-}: StackScreenProps<{ Home: undefined }>) => {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>404 Not Found</Text>
-      <Button
-        mode="contained"
-        onPress={() => navigation.navigate('Home')}
-        style={styles.button}
-      >
-        Go to home
-      </Button>
-    </View>
-  );
-};
-
-export default NotFoundScreen;
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 36,
-  },
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 8,
-  },
-  button: {
-    margin: 24,
-  },
-});

example/src/Screens/PreventRemove.tsx

@@ -1,170 +0,0 @@
-import * as React from 'react';
-import {
-  Alert,
-  View,
-  TextInput,
-  ScrollView,
-  StyleSheet,
-  Platform,
-} from 'react-native';
-import { Button } from 'react-native-paper';
-import {
-  useTheme,
-  CommonActions,
-  ParamListBase,
-  NavigationAction,
-} from '@react-navigation/native';
-import {
-  createStackNavigator,
-  StackScreenProps,
-} from '@react-navigation/stack';
-import Article from '../Shared/Article';
-
-type PreventRemoveParams = {
-  Article: { author: string };
-  Input: undefined;
-};
-
-const scrollEnabled = Platform.select({ web: true, default: false });
-
-const ArticleScreen = ({
-  navigation,
-  route,
-}: StackScreenProps<PreventRemoveParams, 'Article'>) => {
-  return (
-    <ScrollView>
-      <View style={styles.buttons}>
-        <Button
-          mode="contained"
-          onPress={() => navigation.push('Input')}
-          style={styles.button}
-        >
-          Push Input
-        </Button>
-        <Button
-          mode="outlined"
-          onPress={() => navigation.popToTop()}
-          style={styles.button}
-        >
-          Pop to top
-        </Button>
-      </View>
-      <Article
-        author={{ name: route.params?.author ?? 'Unknown' }}
-        scrollEnabled={scrollEnabled}
-      />
-    </ScrollView>
-  );
-};
-
-const InputScreen = ({
-  navigation,
-}: StackScreenProps<PreventRemoveParams, 'Input'>) => {
-  const [text, setText] = React.useState('');
-  const { colors } = useTheme();
-
-  const hasUnsavedChanges = Boolean(text);
-
-  React.useEffect(
-    () =>
-      navigation.addListener('beforeRemove', (e) => {
-        const action: NavigationAction & { payload?: { confirmed?: boolean } } =
-          e.data.action;
-
-        if (!hasUnsavedChanges || action.payload?.confirmed) {
-          return;
-        }
-
-        e.preventDefault();
-
-        Alert.alert(
-          'Discard changes?',
-          'You have unsaved changes. Are you sure to discard them and leave the screen?',
-          [
-            { text: "Don't leave", style: 'cancel', onPress: () => {} },
-            {
-              text: 'Discard',
-              style: 'destructive',
-              onPress: () => navigation.dispatch(action),
-            },
-          ]
-        );
-      }),
-    [hasUnsavedChanges, navigation]
-  );
-
-  return (
-    <View style={styles.content}>
-      <TextInput
-        autoFocus
-        style={[
-          styles.input,
-          { backgroundColor: colors.card, color: colors.text },
-        ]}
-        value={text}
-        placeholder="Type something…"
-        onChangeText={setText}
-      />
-      <Button
-        mode="outlined"
-        color="tomato"
-        onPress={() =>
-          navigation.dispatch({
-            ...CommonActions.goBack(),
-            payload: { confirmed: true },
-          })
-        }
-        style={styles.button}
-      >
-        Discard and go back
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => navigation.push('Article', { author: text })}
-        style={styles.button}
-      >
-        Push Article
-      </Button>
-    </View>
-  );
-};
-
-const SimpleStack = createStackNavigator<PreventRemoveParams>();
-
-type Props = StackScreenProps<ParamListBase>;
-
-export default function SimpleStackScreen({ navigation }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
-  return (
-    <SimpleStack.Navigator>
-      <SimpleStack.Screen name="Input" component={InputScreen} />
-      <SimpleStack.Screen name="Article" component={ArticleScreen} />
-    </SimpleStack.Navigator>
-  );
-}
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  input: {
-    margin: 8,
-    padding: 10,
-    borderRadius: 3,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(0, 0, 0, 0.08)',
-  },
-  buttons: {
-    flexDirection: 'row',
-    padding: 8,
-  },
-  button: {
-    margin: 8,
-  },
-});

example/src/Screens/SimpleStack.tsx

@@ -1,33 +1,36 @@
 import * as React from 'react';
-import { View, Platform, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
-import type { ParamListBase } from '@react-navigation/native';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  StackNavigationProp,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import NewsFeed from '../Shared/NewsFeed';
 
 type SimpleStackParams = {
-  Article: { author: string } | undefined;
-  NewsFeed: { date: number };
-  Albums: undefined;
+  Article: { author: string };
+  NewsFeed: undefined;
+  Album: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
-}: StackScreenProps<SimpleStackParams, 'Article'>) => {
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'Article'>;
+}) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.replace('NewsFeed', { date: Date.now() })}
+          onPress={() => navigation.replace('NewsFeed')}
           style={styles.button}
         >
           Replace with feed
@@ -40,24 +43,22 @@ const ArticleScreen = ({
           Pop screen
         </Button>
       </View>
-      <Article
-        author={{ name: route.params?.author ?? 'Unknown' }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
 
 const NewsFeedScreen = ({
-  route,
   navigation,
-}: StackScreenProps<SimpleStackParams, 'NewsFeed'>) => {
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.navigate('Albums')}
+          onPress={() => navigation.navigate('Album')}
           style={styles.button}
         >
           Navigate to album
@@ -70,14 +71,16 @@ const NewsFeedScreen = ({
           Go back
         </Button>
       </View>
-      <NewsFeed scrollEnabled={scrollEnabled} date={route.params.date} />
+      <NewsFeed scrollEnabled={false} />
     </ScrollView>
   );
 };
 
 const AlbumsScreen = ({
   navigation,
-}: StackScreenProps<SimpleStackParams, 'Albums'>) => {
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -96,29 +99,29 @@ const AlbumsScreen = ({
           Pop by 2
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-export default function SimpleStackScreen({
-  navigation,
-}: StackScreenProps<ParamListBase>) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
+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>
+    <SimpleStack.Navigator {...rest}>
       <SimpleStack.Screen
         name="Article"
         component={ArticleScreen}
         options={({ route }) => ({
-          title: `Article by ${route.params?.author ?? 'Unknown'}`,
+          title: `Article by ${route.params.author}`,
         })}
         initialParams={{ author: 'Gandalf' }}
       />
@@ -128,9 +131,9 @@ export default function SimpleStackScreen({
         options={{ title: 'Feed' }}
       />
       <SimpleStack.Screen
-        name="Albums"
+        name="Album"
         component={AlbumsScreen}
-        options={{ title: 'Albums' }}
+        options={{ title: 'Album' }}
       />
     </SimpleStack.Navigator>
   );

example/src/Screens/StackHeaderCustomization.tsx

@@ -1,44 +1,38 @@
 import * as React from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  ScrollView,
-  Alert,
-  Platform,
-} from 'react-native';
+import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native';
 import { Button, Appbar } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTheme, ParamListBase } from '@react-navigation/native';
+import { BlurView } from 'expo-blur';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  StackNavigationProp,
   HeaderBackground,
   useHeaderHeight,
-  Header,
-  StackHeaderProps,
 } from '@react-navigation/stack';
-import BlurView from '../Shared/BlurView';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
 type SimpleStackParams = {
   Article: { author: string };
-  Albums: undefined;
+  Album: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
-}: StackScreenProps<SimpleStackParams, 'Article'>) => {
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'Article'>;
+}) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Albums')}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
           Push album
@@ -51,15 +45,16 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
 
-const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
+const AlbumsScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
   const headerHeight = useHeaderHeight();
 
   return (
@@ -80,43 +75,21 @@ const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
-  StackScreenProps<ParamListBase>;
-
-function CustomHeader(props: StackHeaderProps) {
-  const { current, next } = props.scene.progress;
-
-  const progress = Animated.add(current, next || 0);
-  const opacity = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [0, 1, 0],
-  });
-
-  return (
-    <>
-      <Header {...props} />
-      <Animated.Text style={[styles.banner, { opacity }]}>
-        Why hello there, pardner!
-      </Animated.Text>
-    </>
-  );
-}
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
+  navigation: StackNavigationProp<ParamListBase>;
+};
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
-  const { colors, dark } = useTheme();
+  navigation.setOptions({
+    headerShown: false,
+  });
 
   return (
     <SimpleStack.Navigator {...rest}>
@@ -125,7 +98,6 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         component={ArticleScreen}
         options={({ route }) => ({
           title: `Article by ${route.params?.author}`,
-          header: CustomHeader,
           headerTintColor: '#fff',
           headerStyle: { backgroundColor: '#ff005d' },
           headerBackTitleVisible: false,
@@ -154,22 +126,16 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <SimpleStack.Screen
-        name="Albums"
+        name="Album"
         component={AlbumsScreen}
         options={{
-          title: 'Albums',
+          title: 'Album',
           headerBackTitle: 'Back',
           headerTransparent: true,
           headerBackground: () => (
-            <HeaderBackground
-              style={{
-                backgroundColor: 'transparent',
-                borderBottomWidth: StyleSheet.hairlineWidth,
-                borderBottomColor: colors.border,
-              }}
-            >
+            <HeaderBackground style={{ backgroundColor: 'transparent' }}>
               <BlurView
-                tint={dark ? 'dark' : 'light'}
+                tint="light"
                 intensity={75}
                 style={StyleSheet.absoluteFill}
               />
@@ -189,10 +155,4 @@ const styles = StyleSheet.create({
   button: {
     margin: 8,
   },
-  banner: {
-    textAlign: 'center',
-    color: 'tomato',
-    backgroundColor: 'papayawhip',
-    padding: 4,
-  },
 });

example/src/Screens/StackTransparent.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button, Paragraph } from 'react-native-paper';
-import { ParamListBase, useTheme } from '@react-navigation/native';
+import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackScreenProps,
+  StackNavigationProp,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 
@@ -13,12 +13,15 @@ type SimpleStackParams = {
   Dialog: undefined;
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
+type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
-}: StackScreenProps<SimpleStackParams, 'Article'>) => {
+}: {
+  navigation: SimpleStackNavigation;
+  route: RouteProp<SimpleStackParams, 'Article'>;
+}) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -37,15 +40,16 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
 
-const DialogScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
+const DialogScreen = ({
+  navigation,
+}: {
+  navigation: SimpleStackNavigation;
+}) => {
   const { colors } = useTheme();
 
   return (
@@ -72,15 +76,14 @@ const DialogScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
-  StackScreenProps<ParamListBase>;
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
+  navigation: StackNavigationProp<ParamListBase>;
+};
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
+  navigation.setOptions({
+    headerShown: false,
+  });
 
   return (
     <SimpleStack.Navigator mode="modal" {...rest}>

example/src/Shared/Albums.tsx

@@ -9,7 +9,6 @@ import {
   ScrollViewProps,
   Dimensions,
   Platform,
-  ScaledSize,
 } from 'react-native';
 import { useScrollToTop } from '@react-navigation/native';
 
@@ -41,38 +40,15 @@ const COVERS = [
 ];
 
 export default function Albums(props: Partial<ScrollViewProps>) {
-  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
-
-  React.useEffect(() => {
-    const onDimensionsChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    Dimensions.addEventListener('change', onDimensionsChange);
-
-    return () => Dimensions.removeEventListener('change', onDimensionsChange);
-  }, []);
-
   const ref = React.useRef<ScrollView>(null);
 
   useScrollToTop(ref);
 
-  const itemSize = dimensions.width / Math.floor(dimensions.width / 150);
-
   return (
     <ScrollView ref={ref} contentContainerStyle={styles.content} {...props}>
       {COVERS.map((source, i) => (
-        <View
-          // eslint-disable-next-line react/no-array-index-key
-          key={i}
-          style={[
-            styles.item,
-            Platform.OS !== 'web' && {
-              height: itemSize,
-              width: itemSize,
-            },
-          ]}
-        >
+        // eslint-disable-next-line react/no-array-index-key
+        <View key={i} style={styles.item}>
           <Image source={source} style={styles.photo} />
         </View>
       ))}
@@ -81,6 +57,10 @@ export default function Albums(props: Partial<ScrollViewProps>) {
 }
 
 const styles = StyleSheet.create({
+  content: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
   ...Platform.select({
     web: {
       content: {
@@ -96,6 +76,10 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         flexWrap: 'wrap',
       },
+      item: {
+        height: Dimensions.get('window').width / 2,
+        width: '50%',
+      },
     },
   }),
   photo: {

example/src/Shared/BlurView.native.tsx

@@ -1,3 +0,0 @@
-import { BlurView } from 'expo-blur';
-
-export default BlurView;

example/src/Shared/BlurView.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { View, ViewProps } from 'react-native';
-
-type Props = ViewProps & {
-  tint: 'light' | 'dark';
-  intensity: number;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function BlurView({ tint, intensity, ...rest }: Props) {
-  return <View {...rest} />;
-}

example/src/Shared/Chat.tsx

@@ -68,7 +68,10 @@ export default function Chat(props: Partial<ScrollViewProps>) {
           styles.input,
           { backgroundColor: colors.card, color: colors.text },
         ]}
-        placeholderTextColor={Color(colors.text).alpha(0.5).rgb().string()}
+        placeholderTextColor={Color(colors.text)
+          .alpha(0.5)
+          .rgb()
+          .string()}
         placeholder="Write a message"
         underlineColorAndroid="transparent"
       />

example/src/Shared/NewsFeed.tsx

@@ -18,9 +18,7 @@ import {
 } from 'react-native-paper';
 import Color from 'color';
 
-type Props = Partial<ScrollViewProps> & {
-  date?: number;
-};
+type Props = Partial<ScrollViewProps>;
 
 const Author = () => {
   return (
@@ -53,7 +51,10 @@ export default function NewsFeed(props: Props) {
       <Card style={styles.card}>
         <TextInput
           placeholder="What's on your mind?"
-          placeholderTextColor={Color(colors.text).alpha(0.5).rgb().string()}
+          placeholderTextColor={Color(colors.text)
+            .alpha(0.5)
+            .rgb()
+            .string()}
           style={styles.input}
         />
       </Card>

example/src/Shared/TouchableBounce.native.tsx

@@ -1,4 +1,4 @@
-// @ts-expect-error: there are no type definitions for deep imports
+// @ts-ignore
 import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
 
 export default TouchableBounce;

example/src/index.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import {
   ScrollView,
+  AsyncStorage,
   YellowBox,
   Platform,
   StatusBar,
   I18nManager,
-  Dimensions,
-  ScaledSize,
-  Linking,
 } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
-import { enableScreens } from 'react-native-screens';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import RNRestart from 'react-native-restart';
+import { MaterialIcons } from '@expo/vector-icons';
 import {
   Provider as PaperProvider,
   DefaultTheme as PaperLightTheme,
@@ -19,50 +16,44 @@ import {
   Appbar,
   List,
   Divider,
-  Text,
 } from 'react-native-paper';
+import { Asset } from 'expo-asset';
 import {
   InitialState,
-  NavigationContainer,
+  useLinking,
+  NavigationContainerRef,
+  NavigationNativeContainer,
   DefaultTheme,
   DarkTheme,
-  PathConfigMap,
-  NavigationContainerRef,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
-  DrawerScreenProps,
+  DrawerNavigationProp,
 } from '@react-navigation/drawer';
 import {
   createStackNavigator,
-  StackScreenProps,
+  Assets as StackAssets,
+  StackNavigationProp,
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
-import { useReduxDevToolsExtension } from '@react-navigation/devtools';
 
-import { restartApp } from './Restart';
-import AsyncStorage from './AsyncStorage';
 import LinkingPrefixes from './LinkingPrefixes';
-import SettingsItem from './Shared/SettingsItem';
 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 NotFound from './Screens/NotFound';
 import DynamicTabs from './Screens/DynamicTabs';
-import MasterDetail from './Screens/MasterDetail';
 import AuthFlow from './Screens/AuthFlow';
-import PreventRemove from './Screens/PreventRemove';
 import CompatAPI from './Screens/CompatAPI';
-import LinkComponent from './Screens/LinkComponent';
+import SettingsItem from './Shared/SettingsItem';
+import { Updates } from 'expo';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
-enableScreens();
-
 type RootDrawerParamList = {
   Root: undefined;
   Another: undefined;
@@ -70,13 +61,13 @@ type RootDrawerParamList = {
 
 type RootStackParamList = {
   Home: undefined;
-  NotFound: undefined;
 } & {
   [P in keyof typeof SCREENS]: undefined;
 };
 
 const SCREENS = {
   SimpleStack: { title: 'Simple Stack', component: SimpleStack },
+  NativeStack: { title: 'Native Stack', component: NativeStack },
   ModalPresentationStack: {
     title: 'Modal Presentation Stack',
     component: ModalPresentationStack,
@@ -102,26 +93,14 @@ const SCREENS = {
     title: 'Dynamic Tabs',
     component: DynamicTabs,
   },
-  MasterDetail: {
-    title: 'Master Detail',
-    component: MasterDetail,
-  },
   AuthFlow: {
     title: 'Auth Flow',
     component: AuthFlow,
   },
-  PreventRemove: {
-    title: 'Prevent removing screen',
-    component: PreventRemove,
-  },
   CompatAPI: {
     title: 'Compat Layer',
     component: CompatAPI,
   },
-  LinkComponent: {
-    title: '<Link />',
-    component: LinkComponent,
-  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
@@ -130,10 +109,41 @@ const Stack = createStackNavigator<RootStackParamList>();
 const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const THEME_PERSISTENCE_KEY = 'THEME_TYPE';
 
+Asset.loadAsync(StackAssets);
+
 export default function App() {
+  const containerRef = React.useRef<NavigationContainerRef>();
+
+  // 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: {
+        path: 'root',
+        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;
+          },
+          {}
+        ),
+      },
+    },
+  });
+
   const [theme, setTheme] = React.useState(DefaultTheme);
 
-  const [isReady, setIsReady] = React.useState(Platform.OS === 'web');
+  const [isReady, setIsReady] = React.useState(false);
   const [initialState, setInitialState] = React.useState<
     InitialState | undefined
   >();
@@ -141,18 +151,17 @@ export default function App() {
   React.useEffect(() => {
     const restoreState = async () => {
       try {
-        const initialUrl = await Linking.getInitialURL();
+        let state = await getInitialState();
 
-        if (Platform.OS !== 'web' || initialUrl === null) {
+        if (Platform.OS !== 'web' && state === undefined) {
           const savedState = await AsyncStorage.getItem(
             NAVIGATION_PERSISTENCE_KEY
           );
+          state = savedState ? JSON.parse(savedState) : undefined;
+        }
 
-          const state = savedState ? JSON.parse(savedState) : undefined;
-
-          if (state !== undefined) {
-            setInitialState(state);
-          }
+        if (state !== undefined) {
+          setInitialState(state);
         }
       } finally {
         try {
@@ -168,7 +177,7 @@ export default function App() {
     };
 
     restoreState();
-  }, []);
+  }, [getInitialState]);
 
   const paperTheme = React.useMemo(() => {
     const t = theme.dark ? PaperDarkTheme : PaperLightTheme;
@@ -184,105 +193,27 @@ export default function App() {
     };
   }, [theme.colors, theme.dark]);
 
-  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
-
-  React.useEffect(() => {
-    const onDimensionsChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    Dimensions.addEventListener('change', onDimensionsChange);
-
-    return () => Dimensions.removeEventListener('change', onDimensionsChange);
-  }, []);
-
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-
-  useReduxDevToolsExtension(navigationRef);
-
   if (!isReady) {
     return null;
   }
 
-  const isLargeScreen = dimensions.width >= 1024;
-
   return (
     <PaperProvider theme={paperTheme}>
       {Platform.OS === 'ios' && (
         <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
       )}
-      <NavigationContainer
-        ref={navigationRef}
+      <NavigationNativeContainer
+        ref={containerRef}
         initialState={initialState}
-        onStateChange={(state) =>
+        onStateChange={state =>
           AsyncStorage.setItem(
             NAVIGATION_PERSISTENCE_KEY,
             JSON.stringify(state)
           )
         }
         theme={theme}
-        linking={{
-          // 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`)
-          prefixes: LinkingPrefixes,
-          config: {
-            screens: {
-              Root: {
-                path: '',
-                initialRouteName: 'Home',
-                screens: Object.keys(SCREENS).reduce<PathConfigMap>(
-                  (acc, name) => {
-                    // Convert screen names such as SimpleStack to kebab case (simple-stack)
-                    const path = name
-                      .replace(/([A-Z]+)/g, '-$1')
-                      .replace(/^-/, '')
-                      .toLowerCase();
-
-                    acc[name] = {
-                      path,
-                      screens: {
-                        Article: {
-                          path: 'article/:author?',
-                          parse: {
-                            author: (author) =>
-                              author.charAt(0).toUpperCase() +
-                              author.slice(1).replace(/-/g, ' '),
-                          },
-                          stringify: {
-                            author: (author: string) =>
-                              author.toLowerCase().replace(/\s/g, '-'),
-                          },
-                        },
-                        Albums: 'music',
-                        Chat: 'chat',
-                        Contacts: 'people',
-                        NewsFeed: 'feed',
-                        Dialog: 'dialog',
-                      },
-                    };
-
-                    return acc;
-                  },
-                  {
-                    Home: '',
-                    NotFound: '*',
-                  }
-                ),
-              },
-            },
-          },
-        }}
-        fallback={<Text>Loading…</Text>}
-        documentTitle={{
-          formatter: (options, route) =>
-            `${options?.title ?? route?.name} - React Navigation Example`,
-        }}
       >
-        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
+        <Drawer.Navigator>
           <Drawer.Screen
             name="Root"
             options={{
@@ -292,7 +223,11 @@ export default function App() {
               ),
             }}
           >
-            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
+            {({
+              navigation,
+            }: {
+              navigation: DrawerNavigationProp<RootDrawerParamList>;
+            }) => (
               <Stack.Navigator
                 screenOptions={{
                   headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
@@ -302,18 +237,20 @@ export default function App() {
                   name="Home"
                   options={{
                     title: 'Examples',
-                    headerLeft: isLargeScreen
-                      ? undefined
-                      : () => (
-                          <Appbar.Action
-                            color={theme.colors.text}
-                            icon="menu"
-                            onPress={() => navigation.toggleDrawer()}
-                          />
-                        ),
+                    headerLeft: () => (
+                      <Appbar.Action
+                        color={theme.colors.text}
+                        icon="menu"
+                        onPress={() => navigation.toggleDrawer()}
+                      />
+                    ),
                   }}
                 >
-                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
+                  {({
+                    navigation,
+                  }: {
+                    navigation: StackNavigationProp<RootStackParamList>;
+                  }) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >
@@ -322,7 +259,12 @@ export default function App() {
                         value={I18nManager.isRTL}
                         onValueChange={() => {
                           I18nManager.forceRTL(!I18nManager.isRTL);
-                          restartApp();
+                          // @ts-ignore
+                          if (global.Expo) {
+                            Updates.reloadFromCache();
+                          } else {
+                            RNRestart.Restart();
+                          }
                         }}
                       />
                       <Divider />
@@ -335,15 +277,14 @@ export default function App() {
                             theme.dark ? 'light' : 'dark'
                           );
 
-                          setTheme((t) => (t.dark ? DefaultTheme : DarkTheme));
+                          setTheme(t => (t.dark ? DefaultTheme : DarkTheme));
                         }}
                       />
                       <Divider />
                       {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
-                        (name) => (
+                        name => (
                           <List.Item
                             key={name}
-                            testID={name}
                             title={SCREENS[name].title}
                             onPress={() => navigation.navigate(name)}
                           />
@@ -352,17 +293,12 @@ export default function App() {
                     </ScrollView>
                   )}
                 </Stack.Screen>
-                <Stack.Screen
-                  name="NotFound"
-                  component={NotFound}
-                  options={{ title: 'Oops!' }}
-                />
                 {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
-                  (name) => (
+                  name => (
                     <Stack.Screen
                       key={name}
                       name={name}
-                      getComponent={() => SCREENS[name].component}
+                      component={SCREENS[name].component}
                       options={{ title: SCREENS[name].title }}
                     />
                   )
@@ -371,7 +307,7 @@ export default function App() {
             )}
           </Drawer.Screen>
         </Drawer.Navigator>
-      </NavigationContainer>
+      </NavigationNativeContainer>
     </PaperProvider>
   );
 }

example/types/react-native-web.d.ts

@@ -1,16 +0,0 @@
-declare module 'react-native-web' {
-  export const AppRegistry: {
-    registerComponent(
-      name: string,
-      callback: () => React.ComponentType<any>
-    ): void;
-
-    getApplication(
-      name: string,
-      options?: { initialProps: object }
-    ): {
-      element: React.ReactElement;
-      getStyleElement(): React.ReactElement;
-    };
-  };
-}

example/web/_redirects

@@ -1 +0,0 @@
-/*    /index.html   200

example/webpack.config.js

@@ -7,7 +7,7 @@ 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) {
+module.exports = async function(env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
   config.context = path.resolve(__dirname, '..');
@@ -20,25 +20,23 @@ module.exports = async function (env, argv) {
   });
 
   config.resolve.plugins = config.resolve.plugins.filter(
-    (p) => !(p instanceof ModuleScopePlugin)
+    p => !(p instanceof ModuleScopePlugin)
   );
 
   Object.assign(config.resolve.alias, {
-    'react': path.resolve(node_modules, 'react'),
+    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(packages)
-    .filter((name) => !name.startsWith('.'))
-    .forEach((name) => {
-      config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-        packages,
-        name,
-        require(`../packages/${name}/package.json`).source
-      );
-    });
+  fs.readdirSync(packages).forEach(name => {
+    config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
+      packages,
+      name,
+      'src'
+    );
+  });
 
   return config;
 };

jest/setup.js

@@ -1,25 +1,7 @@
-/* eslint-env jest */
-/* eslint-disable import/no-extraneous-dependencies */
-
-import 'react-native-gesture-handler/jestSetup';
-
-jest.mock('react-native-reanimated', () => {
-  const Reanimated = require('react-native-reanimated/mock');
-
-  // The mock for `call` immediately calls the callback which is incorrect
-  // So we override it with a no-op
-  Reanimated.default.call = () => {};
-
-  return Reanimated;
-});
-
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
-
 const error = console.error;
 
 console.error = (...args) =>
-  // Suppress error messages regarding error boundary in tests
+  // Supress error messages regarding error boundary in tests
   /(Consider adding an error boundary to your tree to customize error handling behavior|React will try to recreate this component tree from scratch using the error boundary you provided|Error boundaries should implement getDerivedStateFromError)/m.test(
     args[0]
   )

lerna.json

@@ -8,9 +8,11 @@
   "version": "independent",
   "command": {
     "publish": {
-      "allowBranch": "main",
+      "allowBranch": "master",
       "conventionalCommits": true,
       "createRelease": "github",
+      "preId": "alpha",
+      "preDistTag": "next",
       "message": "chore: publish",
       "ignoreChanges": [
         "**/__fixtures__/**",

netlify.toml

@@ -1,5 +0,0 @@
-
-[build]
-  base    = "/"
-  publish = "example/web-build"
-  command = "yarn example expo build:web"

package.json

@@ -13,31 +13,35 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/react-navigation/react-navigation.git"
+    "url": "git+https://github.com/satya164/react-navigation.git"
   },
   "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/), Michał Osadnik <micosa97@gmail.com> (https://github.com/osdnk/)",
   "scripts": {
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "typescript": "tsc --noEmit --composite false",
+    "lint": "eslint --ext '.js,.ts,.tsx' .",
+    "typescript": "tsc --noEmit",
     "test": "jest",
-    "prerelease": "lerna run clean",
-    "release": "lerna publish",
     "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.7",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.7",
+    "@babel/runtime": "^7.7.7",
     "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^26.0.0",
-    "babel-jest": "^26.0.1",
-    "codecov": "^3.7.0",
-    "commitlint": "^8.3.5",
-    "eslint": "^7.2.0",
-    "eslint-config-satya164": "^3.1.7",
-    "husky": "^4.2.5",
-    "jest": "^26.0.1",
-    "lerna": "^3.22.1",
-    "metro-react-native-babel-preset": "^0.59.0",
-    "prettier": "^2.0.5",
-    "typescript": "^3.9.5"
+    "@types/jest": "^24.0.25",
+    "codecov": "^3.6.1",
+    "commitlint": "^8.3.4",
+    "core-js": "^3.6.2",
+    "detox": "^15.0.0",
+    "eslint": "^6.8.0",
+    "eslint-config-satya164": "^3.1.5",
+    "husky": "^4.0.1",
+    "jest": "^24.9.0",
+    "lerna": "^3.20.2",
+    "prettier": "^1.19.1",
+    "typescript": "^3.7.4"
   },
   "resolutions": {
     "react": "~16.9.0",
@@ -52,6 +56,9 @@
   "jest": {
     "testEnvironment": "node",
     "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|tsx?)$",
+    "transform": {
+      "^.+\\.(js|ts|tsx)$": "babel-jest"
+    },
     "setupFiles": [
       "<rootDir>/jest/setup.js"
     ],

packages/bottom-tabs/CHANGELOG.md

@@ -3,54 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.7.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.2...@react-navigation/bottom-tabs@5.7.3) (2020-07-28)
+# [5.0.0-alpha.41](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.41) (2020-02-02)
 
 
 ### Bug Fixes
 
-* add accessibilityState property ([#8548](https://github.com/react-navigation/react-navigation/issues/8548)) ([ce4eb7e](https://github.com/react-navigation/react-navigation/commit/ce4eb7e9273a25e4433eb82e255a58ba3bf4d632))
-* pass label position flag to label rendering in BottomTabBar ([#8557](https://github.com/react-navigation/react-navigation/issues/8557)) ([baea77e](https://github.com/react-navigation/react-navigation/commit/baea77e3325f0d7e5ce331ad61979a9362dd01fa))
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
 
 
 
 
 
-## [5.7.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.1...@react-navigation/bottom-tabs@5.7.2) (2020-07-19)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.7.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.0...@react-navigation/bottom-tabs@5.7.1) (2020-07-14)
+# [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
 
-* don't render badge on bottom tabs if not visible. closes [#8577](https://github.com/react-navigation/react-navigation/issues/8577) ([2f74541](https://github.com/react-navigation/react-navigation/commit/2f74541811bac4d36e89c159cd1f4b267063e7f9))
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
 
 
 
 
 
-# [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.6.1...@react-navigation/bottom-tabs@5.7.0) (2020-07-10)
+# [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
 
-* fix bottom tab bar to match iOS defaults ([849e04a](https://github.com/react-navigation/react-navigation/commit/849e04ab6a541fffb490ffdfa9819608b88494f4))
+* 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
 
-* add support for badges to bottom tab bar ([96c7b68](https://github.com/react-navigation/react-navigation/commit/96c7b688ce773b3dd1f1cf7775367cd7080c94a2))
+* 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.6.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.6.0...@react-navigation/bottom-tabs@5.6.1) (2020-06-25)
+# [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
 
@@ -58,24 +60,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.6.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.5.2...@react-navigation/bottom-tabs@5.6.0) (2020-06-24)
+# [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 we don't miss dimensions updates ([c65f9ef](https://github.com/react-navigation/react-navigation/commit/c65f9ef1a9be93b399e724a9731605e408aca80e))
-* remove broken showIcon option from bottom-tabs ([1612819](https://github.com/react-navigation/react-navigation/commit/16128199edd4de37f9c7353bdf803de8e2f201a2))
-
-
-### Features
-
-* add iconStyle prop to bottom tab bar options ([#8188](https://github.com/react-navigation/react-navigation/issues/8188)) ([4480d2f](https://github.com/react-navigation/react-navigation/commit/4480d2fe04c8da11b444ebe75ee618d380682312))
+* 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.5.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.1...@react-navigation/bottom-tabs@5.5.2) (2020-06-06)
+# [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
 
@@ -83,30 +79,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.5.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.0...@react-navigation/bottom-tabs@5.5.1) (2020-05-27)
-
-
-### Bug Fixes
-
-* fix type of style for various options ([9d822b9](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/9d822b95a6df797e2e63e481573e64ea7d0f9386))
-
-
-
-
-
-# [5.5.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.7...@react-navigation/bottom-tabs@5.5.0) (2020-05-23)
-
-
-### Features
-
-* animate changes to tabBarVisible in BottomTabBar ([#8286](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/8286)) ([c1e46f8](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/c1e46f8e331e0054995aa476455af204d02d4170))
-* update react-native-safe-area-context to 1.0.0 ([#8182](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/8182)) ([d62fbfe](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/d62fbfe255140f16b182e8b54b276a7c96f2aec6))
-
-
-
-
-
-## [5.4.7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.6...@react-navigation/bottom-tabs@5.4.7) (2020-05-20)
+# [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
 
@@ -114,382 +87,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.4.6](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.5...@react-navigation/bottom-tabs@5.4.6) (2020-05-20)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.4.5](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.4...@react-navigation/bottom-tabs@5.4.5) (2020-05-16)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.4.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.3...@react-navigation/bottom-tabs@5.4.4) (2020-05-14)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.4.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.2...@react-navigation/bottom-tabs@5.4.3) (2020-05-14)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.4.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.1...@react-navigation/bottom-tabs@5.4.2) (2020-05-10)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.4.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.0...@react-navigation/bottom-tabs@5.4.1) (2020-05-08)
-
-
-### Bug Fixes
-
-* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
-
-
-
-
-
-# [5.4.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.4...@react-navigation/bottom-tabs@5.4.0) (2020-05-08)
-
-
-### Features
-
-* add generic type aliases for screen props ([bea14aa](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/bea14aa26fd5cbfebc7973733c5cf1f44fd323aa)), closes [#7971](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/7971)
-
-
-
-
-
-## [5.3.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.3...@react-navigation/bottom-tabs@5.3.4) (2020-05-05)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.3.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.2...@react-navigation/bottom-tabs@5.3.3) (2020-05-01)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.3.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.1...@react-navigation/bottom-tabs@5.3.2) (2020-05-01)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.3.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.0...@react-navigation/bottom-tabs@5.3.1) (2020-04-30)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.3.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.8...@react-navigation/bottom-tabs@5.3.0) (2020-04-30)
-
-
-### Features
-
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/942d2be2c72720469475ce12ec8df23825994dbf))
-
-
-
-
-
-## [5.2.8](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.7...@react-navigation/bottom-tabs@5.2.8) (2020-04-27)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.6...@react-navigation/bottom-tabs@5.2.7) (2020-04-17)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.6](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.5...@react-navigation/bottom-tabs@5.2.6) (2020-04-08)
-
-
-### Bug Fixes
-
-* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
-
-
-
-
-
-## [5.2.5](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.4...@react-navigation/bottom-tabs@5.2.5) (2020-03-30)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.3...@react-navigation/bottom-tabs@5.2.4) (2020-03-23)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.2...@react-navigation/bottom-tabs@5.2.3) (2020-03-22)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.1...@react-navigation/bottom-tabs@5.2.2) (2020-03-19)
-
-
-### Bug Fixes
-
-* don't use react-native-screens on web ([b1a65fc](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/7485)
-* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6789)
-
-
-
-
-
-## [5.2.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.0...@react-navigation/bottom-tabs@5.2.1) (2020-03-17)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.2.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.1...@react-navigation/bottom-tabs@5.2.0) (2020-03-16)
-
-
-### Features
-
-* add safeAreaInsets to bottom tabs ([82af7be](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/82af7bed7135e42e24693b48cf7f1c6f9f5a6981))
-
-
-
-
-
-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.0...@react-navigation/bottom-tabs@5.1.1) (2020-03-03)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.7...@react-navigation/bottom-tabs@5.1.0) (2020-02-26)
-
-
-### Features
-
-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6756)
-
-
-
-
-
-## [5.0.7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.6...@react-navigation/bottom-tabs@5.0.7) (2020-02-21)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.0.6](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.5...@react-navigation/bottom-tabs@5.0.6) (2020-02-19)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.0.5](https://github.com/react-navigation/react-navigation/tree/main/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/main/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/main/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/main/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/main/packages/bottom-tabs/issues/6740), [#6799](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6799)) ([0c59ef7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/0c59ef7328c63108a2a2c04e927794d73cead63a))
-* provide route context to header and bottom tabs ([b6e7e08](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b6e7e08b9a05be6c04ed21e938b9580876239116))
-
-
-
-
-
-## [5.0.1](https://github.com/react-navigation/react-navigation/tree/main/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/react-navigation/tree/main/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/react-navigation/tree/main/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/react-navigation/tree/main/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/react-navigation/tree/main/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/react-navigation/tree/main/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-
-
-
-
-
-# [5.0.0-alpha.40](https://github.com/react-navigation/react-navigation/tree/main/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/react-navigation/tree/main/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-
-
-
-
-
-# [5.0.0-alpha.39](https://github.com/react-navigation/react-navigation/tree/main/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/react-navigation/tree/main/packages/bottom-tabs/commit/f1fe951cf9d602e1b6d4932e3c6c77bbeaaec5c0))
-
-
-
-
-
-# [5.0.0-alpha.38](https://github.com/react-navigation/react-navigation/tree/main/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/react-navigation/tree/main/packages/bottom-tabs/commit/0a982ee6984b24c0ba053a30223e255f3835e050))
-
-
-### Features
-
-* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
-
-
-
-
-
-# [5.0.0-alpha.37](https://github.com/react-navigation/react-navigation/tree/main/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/react-navigation/tree/main/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/react-navigation/tree/main/packages/bottom-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/265)
-
-
-
-
-
-# [5.0.0-alpha.35](https://github.com/react-navigation/react-navigation/tree/main/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/react-navigation/tree/main/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/react-navigation/tree/main/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)
+# [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
 

packages/bottom-tabs/README.md

@@ -2,4 +2,80 @@
 
 Bottom tab navigator for React Navigation following iOS design guidelines.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/bottom-tab-navigator.html).
+Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/next/bottom-tab-navigator.html).
+
+## 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>
+  );
+}
+```

packages/bottom-tabs/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.7.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -11,21 +10,16 @@
     "android",
     "tab"
   ],
+  "version": "5.0.0-alpha.41",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/react-navigation/react-navigation.git",
-    "directory": "packages/bottom-tabs"
-  },
+  "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
-  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib",
-    "!**/__tests__"
+    "lib"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -36,29 +30,26 @@
     "clean": "del lib"
   },
   "dependencies": {
+    "@react-navigation/routers": "^5.0.0-alpha.29",
     "color": "^3.1.2",
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.2",
+    "@react-native-community/bob": "^0.8.0",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.36",
-    "@types/react-native": "^0.62.7",
-    "del-cli": "^3.0.1",
+    "@types/react": "^16.9.17",
+    "@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": "^1.0.0",
-    "react-native-screens": "^2.7.0",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "react-native-safe-area-context": "^0.6.2",
+    "typescript": "^3.7.4"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^5.0.5",
+    "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": ">= 0.6.0",
-    "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
+    "react-native-safe-area-context": "^0.6.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/bottom-tabs/src/__tests__/index.test.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
-import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import { createBottomTabNavigator, BottomTabScreenProps } from '../index';
-
-it('renders a bottom tab navigator with screens', async () => {
-  const Test = ({ route, navigation }: BottomTabScreenProps<ParamListBase>) => (
-    <View>
-      <Text>Screen {route.name}</Text>
-      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
-      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
-    </View>
-  );
-
-  const Tab = createBottomTabNavigator();
-
-  const { findByText, queryByText } = render(
-    <NavigationContainer>
-      <Tab.Navigator>
-        <Tab.Screen name="A" component={Test} />
-        <Tab.Screen name="B" component={Test} />
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
-
-  expect(queryByText('Screen A')).not.toBeNull();
-  expect(queryByText('Screen B')).toBeNull();
-
-  fireEvent.press(await findByText('Go to B'));
-
-  expect(queryByText('Screen B')).not.toBeNull();
-});

packages/bottom-tabs/src/index.tsx

@@ -12,10 +12,9 @@ export { default as BottomTabBar } from './views/BottomTabBar';
 /**
  * Types
  */
-export type {
+export {
   BottomTabNavigationOptions,
   BottomTabNavigationProp,
-  BottomTabScreenProps,
   BottomTabBarProps,
   BottomTabBarOptions,
 } from './types';

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -3,12 +3,14 @@ import {
   useNavigationBuilder,
   createNavigatorFactory,
   DefaultNavigatorOptions,
+} from '@react-navigation/native';
+import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
-} from '@react-navigation/native';
+} from '@react-navigation/routers';
 import BottomTabView from '../views/BottomTabView';
-import type {
+import {
   BottomTabNavigationConfig,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,
@@ -48,8 +50,6 @@ function BottomTabNavigator({
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
   BottomTabNavigationOptions,
-  BottomTabNavigationEventMap,
   typeof BottomTabNavigator
 >(BottomTabNavigator);

packages/bottom-tabs/src/types.tsx

@@ -1,21 +1,17 @@
-import type * as React from 'react';
-import type {
-  Animated,
+import * as React from 'react';
+import {
   TouchableWithoutFeedbackProps,
   StyleProp,
   TextStyle,
   ViewStyle,
-  GestureResponderEvent,
 } from 'react-native';
-import type {
+import {
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
   Descriptor,
-  TabNavigationState,
-  TabActionHelpers,
-  RouteProp,
 } from '@react-navigation/native';
+import { TabNavigationState } from '@react-navigation/routers';
 
 export type BottomTabNavigationEventMap = {
   /**
@@ -44,15 +40,18 @@ export type BottomTabNavigationProp<
   TabNavigationState,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap
-> &
-  TabActionHelpers<ParamList>;
-
-export type BottomTabScreenProps<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = {
-  navigation: BottomTabNavigationProp<ParamList, RouteName>;
-  route: RouteProp<ParamList, RouteName>;
+> & {
+  /**
+   * Jump to an existing tab.
+   *
+   * @param name Name of the route for the tab.
+   * @param [params] Params object for the route.
+   */
+  jumpTo<RouteName extends Extract<keyof ParamList, string>>(
+    ...args: ParamList[RouteName] extends undefined | any
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
+      : [RouteName, ParamList[RouteName]]
+  ): void;
 };
 
 export type BottomTabNavigationOptions = {
@@ -63,16 +62,12 @@ export type BottomTabNavigationOptions = {
 
   /**
    * Title string of a tab displayed in the tab bar
-   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
+   * or a function that given { focused: boolean, color: string } returns a React.Node to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
     | string
-    | ((props: {
-        focused: boolean;
-        color: string;
-        position: LabelPosition;
-      }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
@@ -83,11 +78,6 @@ export type BottomTabNavigationOptions = {
     size: number;
   }) => React.ReactNode;
 
-  /**
-   * Text to show in a badge on the tab icon.
-   */
-  tabBarBadge?: number | string;
-
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
    * It's recommended to set this if you don't have a label for the tab.
@@ -128,7 +118,7 @@ export type BottomTabDescriptorMap = {
   [key: string]: BottomTabDescriptor;
 };
 
-export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
+export type BottomTabNavigationConfig = {
   /**
    * Whether the screens should render the first time they are accessed. Defaults to `true`.
    * Set it to `false` if you want to render all screens on initial render.
@@ -137,11 +127,11 @@ export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
   /**
    * Function that returns a React element to display as the tab bar.
    */
-  tabBar?: (props: BottomTabBarProps<T>) => React.ReactNode;
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
   /**
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
-  tabBarOptions?: T;
+  tabBarOptions?: BottomTabBarOptions;
 };
 
 export type BottomTabBarOptions = {
@@ -158,7 +148,7 @@ export type BottomTabBarOptions = {
    */
   inactiveTintColor?: string;
   /**
-   * Background color for the active tab.
+   * Background olor for the active tab.
    */
   activeBackgroundColor?: string;
   /**
@@ -173,57 +163,39 @@ export type BottomTabBarOptions = {
    * Whether the tab label should be visible. Defaults to `true`.
    */
   showLabel?: boolean;
+  /**
+   * Whether the tab icon should be visible. Defaults to `true`.
+   */
+  showIcon?: boolean;
   /**
    * Style object for the tab label.
    */
   labelStyle?: StyleProp<TextStyle>;
-  /**
-   * Style object for the tab icon.
-   */
-  iconStyle?: StyleProp<TextStyle>;
   /**
    * Style object for the tab container.
    */
   tabStyle?: StyleProp<ViewStyle>;
   /**
-   * Whether the label is rendered below the icon or beside the icon.
-   * By default, the position is chosen automatically based on device width.
-   * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
+   * Whether the label is renderd below the icon or beside the icon.
+   * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's renderd beside.
    */
   labelPosition?: LabelPosition;
   /**
    * Whether the label position should adapt to the orientation.
    */
   adaptive?: boolean;
-  /**
-   * Safe area insets for the tab bar. This is used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
-   * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
-   */
-  safeAreaInsets?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-  };
   /**
    * Style object for the tab bar container.
    */
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<ViewStyle>;
 };
 
-export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
+export type BottomTabBarProps = BottomTabBarOptions & {
   state: TabNavigationState;
   descriptors: BottomTabDescriptorMap;
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
 };
 
-export type BottomTabBarButtonProps = Omit<
-  TouchableWithoutFeedbackProps,
-  'onPress'
-> & {
-  to?: string;
+export type BottomTabBarButtonProps = TouchableWithoutFeedbackProps & {
   children: React.ReactNode;
-  onPress?: (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => void;
 };

packages/bottom-tabs/src/utils/useIsKeyboardShown.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { Keyboard, Platform } from 'react-native';
-
-export default function useIsKeyboardShown() {
-  const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
-
-  React.useEffect(() => {
-    const handleKeyboardShow = () => setIsKeyboardShown(true);
-    const handleKeyboardHide = () => setIsKeyboardShown(false);
-
-    if (Platform.OS === 'ios') {
-      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
-      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
-    } else {
-      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
-      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
-    }
-
-    return () => {
-      if (Platform.OS === 'ios') {
-        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
-        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
-      } else {
-        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
-        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
-      }
-    };
-  }, []);
-
-  return isKeyboardShown;
-}

packages/bottom-tabs/src/utils/useWindowDimensions.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { ScaledSize, Dimensions } from 'react-native';
-
-// This is similar to the new useWindowDimensions hook in react-native
-// However, we have a custom implementation to support older RN versions
-export default function useWindowDimensions() {
-  const [dimensions, setDimensions] = React.useState(() => {
-    // `height` and `width` maybe undefined during SSR, so we initialize them
-    const { height = 0, width = 0 } = Dimensions.get('window');
-
-    return { height, width };
-  });
-
-  React.useEffect(() => {
-    const onChange = ({ window }: { window: ScaledSize }) => {
-      const { width, height } = window;
-
-      setDimensions((d) => {
-        if (width === d.width && height === d.height) {
-          return d;
-        }
-
-        return { width, height };
-      });
-    };
-
-    // We might have missed an update before the listener was added
-    // So make sure to update the dimensions
-    onChange({ window: Dimensions.get('window') });
-
-    Dimensions.addEventListener('change', onChange);
-
-    return () => Dimensions.addEventListener('change', onChange);
-  }, []);
-
-  return dimensions;
-}

packages/bottom-tabs/src/views/Badge.tsx

@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';
-import color from 'color';
-import { useTheme } from '@react-navigation/native';
-
-type Props = {
-  /**
-   * Whether the badge is visible
-   */
-  visible: boolean;
-  /**
-   * Content of the `Badge`.
-   */
-  children?: string | number;
-  /**
-   * Size of the `Badge`.
-   */
-  size?: number;
-  /**
-   * Style object for the tab bar container.
-   */
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-};
-
-export default function Badge({
-  visible = true,
-  size = 18,
-  children,
-  style,
-  ...rest
-}: Props) {
-  const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
-  const [rendered, setRendered] = React.useState(visible ? true : false);
-
-  const theme = useTheme();
-
-  React.useEffect(() => {
-    if (!rendered) {
-      return;
-    }
-
-    Animated.timing(opacity, {
-      toValue: visible ? 1 : 0,
-      duration: 150,
-      useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished && !visible) {
-        setRendered(false);
-      }
-    });
-  }, [opacity, rendered, visible]);
-
-  if (visible && !rendered) {
-    setRendered(true);
-  }
-
-  if (!visible && !rendered) {
-    return null;
-  }
-
-  // @ts-expect-error: backgroundColor definitely exists
-  const { backgroundColor = theme.colors.notification, ...restStyle } =
-    StyleSheet.flatten(style) || {};
-  const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
-
-  const borderRadius = size / 2;
-  const fontSize = Math.floor((size * 3) / 4);
-
-  return (
-    <Animated.Text
-      numberOfLines={1}
-      style={[
-        {
-          opacity,
-          transform: [
-            {
-              scale: opacity.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0.5, 1],
-              }),
-            },
-          ],
-          backgroundColor,
-          color: textColor,
-          fontSize,
-          lineHeight: size - 1,
-          height: size,
-          minWidth: size,
-          borderRadius,
-        },
-        styles.container,
-        restStyle,
-      ]}
-      {...rest}
-    >
-      {children}
-    </Animated.Text>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-end',
-    textAlign: 'center',
-    paddingHorizontal: 4,
-    overflow: 'hidden',
-  },
-});

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -3,29 +3,28 @@ import {
   View,
   Animated,
   StyleSheet,
+  Keyboard,
   Platform,
   LayoutChangeEvent,
+  ScaledSize,
+  Dimensions,
 } from 'react-native';
 import {
   NavigationContext,
-  NavigationRouteContext,
   CommonActions,
   useTheme,
-  useLinkBuilder,
 } from '@react-navigation/native';
-import { useSafeArea } from 'react-native-safe-area-context';
+import { SafeAreaConsumer } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
-import useWindowDimensions from '../utils/useWindowDimensions';
-import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import type { BottomTabBarProps } from '../types';
+import { BottomTabBarProps } from '../types';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
 };
 
-const DEFAULT_TABBAR_HEIGHT = 49;
+const DEFAULT_TABBAR_HEIGHT = 50;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -43,63 +42,79 @@ export default function BottomTabBar({
   keyboardHidesTabBar = false,
   labelPosition,
   labelStyle,
-  iconStyle,
-  safeAreaInsets,
+  showIcon,
   showLabel,
   style,
   tabStyle,
 }: Props) {
   const { colors } = useTheme();
-  const buildLink = useLinkBuilder();
 
-  const focusedRoute = state.routes[state.index];
-  const focusedDescriptor = descriptors[focusedRoute.key];
-  const focusedOptions = focusedDescriptor.options;
+  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
+  const [keyboardShown, setKeyboardShown] = React.useState(false);
 
-  const dimensions = useWindowDimensions();
-  const isKeyboardShown = useIsKeyboardShown();
+  const [visible] = React.useState(() => new Animated.Value(0));
 
-  const shouldShowTabBar =
-    focusedOptions.tabBarVisible !== false &&
-    !(keyboardHidesTabBar && isKeyboardShown);
-
-  const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
-
-  const [visible] = React.useState(
-    () => new Animated.Value(shouldShowTabBar ? 1 : 0)
-  );
+  const { routes } = state;
 
   React.useEffect(() => {
-    if (shouldShowTabBar) {
-      Animated.timing(visible, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver,
-      }).start(({ finished }) => {
-        if (finished) {
-          setIsTabBarHidden(false);
-        }
-      });
-    } else {
-      setIsTabBarHidden(true);
-
+    if (keyboardShown) {
       Animated.timing(visible, {
         toValue: 0,
         duration: 200,
         useNativeDriver,
       }).start();
     }
-  }, [shouldShowTabBar, visible]);
+  }, [keyboardShown, visible]);
 
-  const [layout, setLayout] = React.useState({
-    height: 0,
-    width: dimensions.width,
-  });
+  React.useEffect(() => {
+    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
+
+    const handleKeyboardShow = () => setKeyboardShown(true);
+
+    const handleKeyboardHide = () =>
+      Animated.timing(visible, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver,
+      }).start(({ finished }) => {
+        if (finished) {
+          setKeyboardShown(false);
+        }
+      });
+
+    Dimensions.addEventListener('change', handleOrientationChange);
+
+    if (Platform.OS === 'ios') {
+      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
+    } else {
+      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
+    }
+
+    return () => {
+      Dimensions.removeEventListener('change', handleOrientationChange);
+
+      if (Platform.OS === 'ios') {
+        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
+      } else {
+        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
+      }
+    };
+  }, [visible]);
 
   const handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
 
-    setLayout((layout) => {
+    setLayout(layout => {
       if (height === layout.height && width === layout.width) {
         return layout;
       } else {
@@ -111,7 +126,6 @@ export default function BottomTabBar({
     });
   };
 
-  const { routes } = state;
   const shouldUseHorizontalLabels = () => {
     if (labelPosition) {
       return labelPosition === 'beside-icon';
@@ -143,123 +157,114 @@ export default function BottomTabBar({
     }
   };
 
-  const defaultInsets = useSafeArea();
-
-  const insets = {
-    top: safeAreaInsets?.top ?? defaultInsets.top,
-    right: safeAreaInsets?.right ?? defaultInsets.right,
-    bottom: safeAreaInsets?.bottom ?? defaultInsets.bottom,
-    left: safeAreaInsets?.left ?? defaultInsets.left,
-  };
-
-  const paddingBottom = Math.max(insets.bottom - 4, 0);
-
   return (
-    <Animated.View
-      style={[
-        styles.tabBar,
-        {
-          backgroundColor: colors.card,
-          borderTopColor: colors.border,
-        },
-        {
-          transform: [
+    <SafeAreaConsumer>
+      {insets => (
+        <Animated.View
+          style={[
+            styles.tabBar,
             {
-              translateY: visible.interpolate({
-                inputRange: [0, 1],
-                outputRange: [layout.height + paddingBottom, 0],
-              }),
+              backgroundColor: colors.card,
+              borderTopColor: colors.border,
             },
-          ],
-          // Absolutely position the tab bar so that the content is below it
-          // This is needed to avoid gap at bottom when the tab bar is hidden
-          position: isTabBarHidden ? 'absolute' : null,
-        },
-        {
-          height: DEFAULT_TABBAR_HEIGHT + paddingBottom,
-          paddingBottom,
-          paddingHorizontal: Math.max(insets.left, insets.right),
-        },
-        style,
-      ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-    >
-      <View style={styles.content} onLayout={handleLayout}>
-        {routes.map((route, index) => {
-          const focused = index === state.index;
-          const { options } = descriptors[route.key];
+            keyboardHidesTabBar
+              ? {
+                  // When the keyboard is shown, slide down the tab bar
+                  transform: [
+                    {
+                      translateY: visible.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [layout.height, 0],
+                      }),
+                    },
+                  ],
+                  // Absolutely position the tab bar so that the content is below it
+                  // This is needed to avoid gap at bottom when the tab bar is hidden
+                  position: keyboardShown ? 'absolute' : null,
+                }
+              : null,
+            {
+              height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
+              paddingBottom: insets ? insets.bottom : 0,
+            },
+            style,
+          ]}
+          pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
+        >
+          <View style={styles.content} onLayout={handleLayout}>
+            {routes.map((route, index) => {
+              const focused = index === state.index;
+              const { options } = descriptors[route.key];
 
-          const onPress = () => {
-            const event = navigation.emit({
-              type: 'tabPress',
-              target: route.key,
-              canPreventDefault: true,
-            });
+              const onPress = () => {
+                const event = navigation.emit({
+                  type: 'tabPress',
+                  target: route.key,
+                  canPreventDefault: true,
+                });
 
-            if (!focused && !event.defaultPrevented) {
-              navigation.dispatch({
-                ...CommonActions.navigate(route.name),
-                target: state.key,
-              });
-            }
-          };
+                if (!focused && !event.defaultPrevented) {
+                  navigation.dispatch({
+                    ...CommonActions.navigate(route.name),
+                    target: state.key,
+                  });
+                }
+              };
 
-          const onLongPress = () => {
-            navigation.emit({
-              type: 'tabLongPress',
-              target: route.key,
-            });
-          };
+              const onLongPress = () => {
+                navigation.emit({
+                  type: 'tabLongPress',
+                  target: route.key,
+                });
+              };
 
-          const label =
-            options.tabBarLabel !== undefined
-              ? options.tabBarLabel
-              : options.title !== undefined
-              ? options.title
-              : route.name;
+              const label =
+                options.tabBarLabel !== undefined
+                  ? options.tabBarLabel
+                  : options.title !== undefined
+                  ? options.title
+                  : route.name;
 
-          const accessibilityLabel =
-            options.tabBarAccessibilityLabel !== undefined
-              ? options.tabBarAccessibilityLabel
-              : typeof label === 'string'
-              ? `${label}, tab, ${index + 1} of ${routes.length}`
-              : undefined;
+              const accessibilityLabel =
+                options.tabBarAccessibilityLabel !== undefined
+                  ? options.tabBarAccessibilityLabel
+                  : typeof label === 'string'
+                  ? `${label}, tab, ${index + 1} of ${routes.length}`
+                  : undefined;
 
-          return (
-            <NavigationContext.Provider
-              key={route.key}
-              value={descriptors[route.key].navigation}
-            >
-              <NavigationRouteContext.Provider value={route}>
-                <BottomTabItem
-                  route={route}
-                  focused={focused}
-                  horizontal={shouldUseHorizontalLabels()}
-                  onPress={onPress}
-                  onLongPress={onLongPress}
-                  accessibilityLabel={accessibilityLabel}
-                  to={buildLink(route.name, route.params)}
-                  testID={options.tabBarTestID}
-                  allowFontScaling={allowFontScaling}
-                  activeTintColor={activeTintColor}
-                  inactiveTintColor={inactiveTintColor}
-                  activeBackgroundColor={activeBackgroundColor}
-                  inactiveBackgroundColor={inactiveBackgroundColor}
-                  button={options.tabBarButton}
-                  icon={options.tabBarIcon}
-                  badge={options.tabBarBadge}
-                  label={label}
-                  showLabel={showLabel}
-                  labelStyle={labelStyle}
-                  iconStyle={iconStyle}
-                  style={tabStyle}
-                />
-              </NavigationRouteContext.Provider>
-            </NavigationContext.Provider>
-          );
-        })}
-      </View>
-    </Animated.View>
+              return (
+                <NavigationContext.Provider
+                  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}
+                  />
+                </NavigationContext.Provider>
+              );
+            })}
+          </View>
+        </Animated.View>
+      )}
+    </SafeAreaConsumer>
   );
 }
 

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
 import {
   View,
-  Text,
   TouchableWithoutFeedback,
+  Animated,
   StyleSheet,
-  Platform,
   StyleProp,
   ViewStyle,
   TextStyle,
-  GestureResponderEvent,
 } from 'react-native';
-import { Link, Route, useTheme } from '@react-navigation/native';
+import { Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 
 import TabBarIcon from './TabBarIcon';
-import type { BottomTabBarButtonProps, LabelPosition } from '../types';
+import { BottomTabBarButtonProps } from '../types';
 
 type Props = {
   /**
@@ -30,11 +28,7 @@ type Props = {
    */
   label:
     | string
-    | ((props: {
-        focused: boolean;
-        color: string;
-        position: LabelPosition;
-      }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
   /**
    * Icon to display for the tab.
    */
@@ -43,14 +37,6 @@ type Props = {
     size: number;
     color: string;
   }) => React.ReactNode;
-  /**
-   * Text to show in a badge on the tab icon.
-   */
-  badge?: number | string;
-  /**
-   * URL to use for the link to the tab.
-   */
-  to?: string;
   /**
    * The button for the tab. Uses a `TouchableWithoutFeedback` by default.
    */
@@ -64,16 +50,13 @@ type Props = {
    */
   testID?: string;
   /**
-   * Function to execute on press in React Native.
-   * On the web, this will use onClick.
+   * Function to execute on press.
    */
-  onPress: (
-    e: React.MouseEvent<HTMLElement, MouseEvent> | GestureResponderEvent
-  ) => void;
+  onPress: () => void;
   /**
    * Function to execute on long press.
    */
-  onLongPress: (e: GestureResponderEvent) => void;
+  onLongPress: () => void;
   /**
    * Whether the label should be aligned with the icon horizontally.
    */
@@ -98,6 +81,10 @@ type Props = {
    * Whether to show the label text for the tab.
    */
   showLabel?: boolean;
+  /**
+   * Whether to show the icon for the tab.
+   */
+  showIcon?: boolean;
   /**
    * Whether to allow scaling the font for the label for accessibility purposes.
    */
@@ -106,10 +93,6 @@ type Props = {
    * Style object for the label element.
    */
   labelStyle?: StyleProp<TextStyle>;
-  /**
-   * Style object for the icon element.
-   */
-  iconStyle?: StyleProp<ViewStyle>;
   /**
    * Style object for the wrapper element.
    */
@@ -121,49 +104,11 @@ export default function BottomTabBarItem({
   route,
   label,
   icon,
-  badge,
-  to,
-  button = ({
-    children,
-    style,
-    onPress,
-    to,
-    accessibilityRole,
-    ...rest
-  }: BottomTabBarButtonProps) => {
-    if (Platform.OS === 'web' && to) {
-      // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
-      // We need to use `onClick` to be able to prevent default browser handling of links.
-      return (
-        <Link
-          {...rest}
-          to={to}
-          style={[styles.button, style]}
-          onPress={(e: any) => {
-            if (
-              !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-              (e.button == null || e.button === 0) // ignore everything but left clicks
-            ) {
-              e.preventDefault();
-              onPress?.(e);
-            }
-          }}
-        >
-          {children}
-        </Link>
-      );
-    } else {
-      return (
-        <TouchableWithoutFeedback
-          {...rest}
-          accessibilityRole={accessibilityRole}
-          onPress={onPress}
-        >
-          <View style={style}>{children}</View>
-        </TouchableWithoutFeedback>
-      );
-    }
-  },
+  button = ({ children, style, ...rest }: BottomTabBarButtonProps) => (
+    <TouchableWithoutFeedback {...rest}>
+      <View style={style}>{children}</View>
+    </TouchableWithoutFeedback>
+  ),
   accessibilityLabel,
   testID,
   onPress,
@@ -174,9 +119,9 @@ export default function BottomTabBarItem({
   activeBackgroundColor = 'transparent',
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
+  showIcon = true,
   allowFontScaling,
   labelStyle,
-  iconStyle,
   style,
 }: Props) {
   const { colors } = useTheme();
@@ -188,7 +133,9 @@ export default function BottomTabBarItem({
 
   const inactiveTintColor =
     customInactiveTintColor === undefined
-      ? Color(colors.text).mix(Color(colors.card), 0.5).hex()
+      ? Color(colors.text)
+          .mix(Color(colors.card), 0.5)
+          .hex()
       : customInactiveTintColor;
 
   const renderLabel = ({ focused }: { focused: boolean }) => {
@@ -200,30 +147,30 @@ export default function BottomTabBarItem({
 
     if (typeof label === 'string') {
       return (
-        <Text
+        <Animated.Text
           numberOfLines={1}
           style={[
             styles.label,
             { color },
-            horizontal ? styles.labelBeside : styles.labelBeneath,
+            showIcon && horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}
           allowFontScaling={allowFontScaling}
         >
           {label}
-        </Text>
+        </Animated.Text>
       );
     }
 
-    return label({
-      focused,
-      color,
-      position: horizontal ? 'beside-icon' : 'below-icon',
-    });
+    if (typeof label === 'string') {
+      return label;
+    }
+
+    return label({ focused, color });
   };
 
   const renderIcon = ({ focused }: { focused: boolean }) => {
-    if (icon === undefined) {
+    if (showIcon === false || icon === undefined) {
       return null;
     }
 
@@ -233,14 +180,13 @@ export default function BottomTabBarItem({
     return (
       <TabBarIcon
         route={route}
-        horizontal={horizontal}
-        badge={badge}
+        size={horizontal ? 17 : 24}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
         renderIcon={icon}
-        style={iconStyle}
+        style={horizontal ? styles.iconHorizontal : styles.iconVertical}
       />
     );
   };
@@ -252,13 +198,11 @@ export default function BottomTabBarItem({
     : inactiveBackgroundColor;
 
   return button({
-    to,
     onPress,
     onLongPress,
     testID,
     accessibilityLabel,
     accessibilityRole: 'button',
-    accessibilityState: { selected: focused },
     accessibilityStates: focused ? ['selected'] : [],
     style: [
       styles.tab,
@@ -288,19 +232,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
+  iconVertical: {
+    flex: 1,
+  },
+  iconHorizontal: {
+    height: '100%',
+  },
   label: {
     textAlign: 'center',
     backgroundColor: 'transparent',
   },
   labelBeneath: {
-    fontSize: 10,
+    fontSize: 11,
+    marginBottom: 1.5,
   },
   labelBeside: {
-    fontSize: 13,
+    fontSize: 12,
     marginLeft: 20,
-    marginTop: 3,
-  },
-  button: {
-    display: 'flex',
   },
 });

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import {
-  NavigationHelpersContext,
-  TabNavigationState,
-  useTheme,
-} from '@react-navigation/native';
+import { TabNavigationState } from '@react-navigation/routers';
+import { useTheme } from '@react-navigation/native';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
-import type {
+import {
   BottomTabNavigationConfig,
   BottomTabDescriptorMap,
   BottomTabNavigationHelpers,
@@ -75,8 +72,17 @@ export default class BottomTabView extends React.Component<Props, State> {
       tabBarOptions,
       state,
       navigation,
-      descriptors,
     } = this.props;
+
+    const { descriptors } = this.props;
+    const route = state.routes[state.index];
+    const descriptor = descriptors[route.key];
+    const options = descriptor.options;
+
+    if (options.tabBarVisible === false) {
+      return null;
+    }
+
     return tabBar({
       ...tabBarOptions,
       state: state,
@@ -86,46 +92,44 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   render() {
-    const { state, descriptors, navigation, lazy } = this.props;
+    const { state, descriptors, lazy } = this.props;
     const { routes } = state;
     const { loaded } = this.state;
 
     return (
-      <NavigationHelpersContext.Provider value={navigation}>
-        <SafeAreaProviderCompat>
-          <View style={styles.container}>
-            <ScreenContainer style={styles.pages}>
-              {routes.map((route, index) => {
-                const descriptor = descriptors[route.key];
-                const { unmountOnBlur } = descriptor.options;
-                const isFocused = state.index === index;
+      <SafeAreaProviderCompat>
+        <View style={styles.container}>
+          <ScreenContainer style={styles.pages}>
+            {routes.map((route, index) => {
+              const descriptor = descriptors[route.key];
+              const { unmountOnBlur } = descriptor.options;
+              const isFocused = state.index === index;
 
-                if (unmountOnBlur && !isFocused) {
-                  return null;
-                }
+              if (unmountOnBlur && !isFocused) {
+                return null;
+              }
 
-                if (lazy && !loaded.includes(index) && !isFocused) {
-                  // Don't render a screen if we've never navigated to it
-                  return null;
-                }
+              if (lazy && !loaded.includes(index) && !isFocused) {
+                // Don't render a screen if we've never navigated to it
+                return null;
+              }
 
-                return (
-                  <ResourceSavingScene
-                    key={route.key}
-                    style={StyleSheet.absoluteFill}
-                    isVisible={isFocused}
-                  >
-                    <SceneContent isFocused={isFocused}>
-                      {descriptor.render()}
-                    </SceneContent>
-                  </ResourceSavingScene>
-                );
-              })}
-            </ScreenContainer>
-            {this.renderTabBar()}
-          </View>
-        </SafeAreaProviderCompat>
-      </NavigationHelpersContext.Provider>
+              return (
+                <ResourceSavingScene
+                  key={route.key}
+                  style={StyleSheet.absoluteFill}
+                  isVisible={isFocused}
+                >
+                  <SceneContent isFocused={isFocused}>
+                    {descriptor.render()}
+                  </SceneContent>
+                </ResourceSavingScene>
+              );
+            })}
+          </ScreenContainer>
+          {this.renderTabBar()}
+        </View>
+      </SafeAreaProviderCompat>
     );
   }
 }

packages/bottom-tabs/src/views/ResourceSavingScene.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
+
 // eslint-disable-next-line import/no-unresolved
 import { Screen, screensEnabled } from 'react-native-screens';
 
@@ -9,15 +10,13 @@ type Props = {
   style?: any;
 };
 
-const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
+const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
-    // react-native-screens is buggy on web
-    if (screensEnabled?.() && Platform.OS !== 'web') {
+    if (screensEnabled?.()) {
       const { isVisible, ...rest } = this.props;
-
-      // @ts-expect-error: stackPresentation is incorrectly marked as required
+      // @ts-ignore
       return <Screen active={isVisible ? 1 : 0} {...rest} />;
     }
 
@@ -25,13 +24,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
 
     return (
       <View
-        style={[
-          styles.container,
-          Platform.OS === 'web'
-            ? { display: isVisible ? 'flex' : 'none' }
-            : null,
-          style,
-        ]}
+        style={[styles.container, style, { opacity: isVisible ? 1 : 0 }]}
         collapsable={false}
         removeClippedSubviews={
           // On iOS, set removeClippedSubviews to true only when not focused

packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx

@@ -2,25 +2,17 @@ import * as React from 'react';
 import {
   SafeAreaProvider,
   SafeAreaConsumer,
-  initialWindowSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   getStatusBarHeight,
   getBottomSpace,
 } from 'react-native-iphone-x-helper';
 
-// The provider component for safe area initializes asynchornously
-// Until the insets are available, there'll be blank screen
-// To avoid the blank screen, we specify some initial values
 const initialSafeAreaInsets = {
-  // Approximate values which are good enough for most cases
   top: getStatusBarHeight(true),
   bottom: getBottomSpace(),
   right: 0,
   left: 0,
-  // If we are on a newer version of the library, we can get the correct window insets
-  // The component might not be filling the window, but this is good enough for most cases
-  ...initialWindowSafeAreaInsets,
 };
 
 type Props = {
@@ -30,11 +22,11 @@ type Props = {
 export default function SafeAreaProviderCompat({ children }: Props) {
   return (
     <SafeAreaConsumer>
-      {(insets) => {
+      {insets => {
         if (insets) {
           // If we already have insets, don't wrap the stack in another safe area provider
           // This avoids an issue with updates at the cost of potentially incorrect values
-          // https://github.com/react-navigation/react-navigation/issues/174
+          // https://github.com/react-navigation/navigation-ex/issues/174
           return children;
         }
 

packages/bottom-tabs/src/views/TabBarIcon.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import type { Route } from '@react-navigation/native';
-import Badge from './Badge';
+import { Route } from '@react-navigation/native';
 
 type Props = {
   route: Route<string>;
-  horizontal: boolean;
-  badge?: string | number;
+  size: number;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: string;
@@ -20,23 +18,18 @@ type Props = {
 };
 
 export default function TabBarIcon({
-  horizontal,
-  badge,
   activeOpacity,
   inactiveOpacity,
   activeTintColor,
   inactiveTintColor,
   renderIcon,
+  size,
   style,
 }: Props) {
-  const size = 25;
-
   // We render the icon twice at the same position on top of each other:
   // active and inactive one, so we can fade between them.
   return (
-    <View
-      style={[horizontal ? styles.iconHorizontal : styles.iconVertical, style]}
-    >
+    <View style={style}>
       <View style={[styles.icon, { opacity: activeOpacity }]}>
         {renderIcon({
           focused: true,
@@ -51,16 +44,6 @@ export default function TabBarIcon({
           color: inactiveTintColor,
         })}
       </View>
-      <Badge
-        visible={badge != null}
-        style={[
-          styles.badge,
-          horizontal ? styles.badgeHorizontal : styles.badgeVertical,
-        ]}
-        size={(size * 3) / 4}
-      >
-        {badge}
-      </Badge>
     </View>
   );
 }
@@ -79,21 +62,4 @@ const styles = StyleSheet.create({
     // Workaround for react-native >= 0.54 layout bug
     minWidth: 25,
   },
-  iconVertical: {
-    flex: 1,
-  },
-  iconHorizontal: {
-    height: '100%',
-    marginTop: 3,
-  },
-  badge: {
-    position: 'absolute',
-    left: 3,
-  },
-  badgeVertical: {
-    top: 3,
-  },
-  badgeHorizontal: {
-    top: 7,
-  },
 });

packages/bottom-tabs/tsconfig.json

@@ -2,8 +2,8 @@
   "extends": "../../tsconfig",
   "references": [
     { "path": "../core" },
-    { "path": "../routers" },
-    { "path": "../native" }
+    { "path": "../native" },
+    { "path": "../routers" }
   ],
   "compilerOptions": {
     "outDir": "./lib/typescript"

packages/compat/CHANGELOG.md

@@ -3,37 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.2.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.3...@react-navigation/compat@5.2.4) (2020-07-28)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.2.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.1...@react-navigation/compat@5.2.3) (2020-07-22)
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.30) (2020-02-02)
 
 
 ### Bug Fixes
 
-* fix false warning due to change in Object.assign in metro preset ([5e358b3](https://github.com/react-navigation/react-navigation/commit/5e358b3aadac7bb186521872d515fff2e571a940)), closes [#8584](https://github.com/react-navigation/react-navigation/issues/8584)
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
 
 
 
 
 
-## [5.2.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.1...@react-navigation/compat@5.2.2) (2020-07-22)
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.29) (2020-02-02)
 
 
 ### Bug Fixes
 
-* fix false warning due to change in Object.assign in metro preset ([240a706](https://github.com/react-navigation/react-navigation/commit/240a706a56220b63d603a52407a738c2872349dd)), closes [#8584](https://github.com/react-navigation/react-navigation/issues/8584)
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
 
 
 
 
 
-## [5.2.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.0...@react-navigation/compat@5.2.1) (2020-07-19)
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.27...@react-navigation/compat@5.0.0-alpha.28) (2020-01-24)
 
 **Note:** Version bump only for package @react-navigation/compat
 
@@ -41,37 +35,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.2.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.28...@react-navigation/compat@5.2.0) (2020-07-10)
-
-
-### Features
-
-* add a getComponent prop to lazily specify components ([f418029](https://github.com/react-navigation/react-navigation/commit/f4180295bf22e32c65f6a7ab7089523cb2de58fb))
-
-
-
-
-
-## [5.1.28](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.27...@react-navigation/compat@5.1.28) (2020-06-25)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.27](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.26...@react-navigation/compat@5.1.27) (2020-06-24)
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.26...@react-navigation/compat@5.0.0-alpha.27) (2020-01-23)
 
 
 ### Bug Fixes
 
-* more improvements to types ([d244488](https://github.com/react-navigation/react-navigation/commit/d2444887be227bbbdcfcb13a7f26a8ebb344043e))
+* ensure re-render on isFirstRouteInParent change in compat layer ([14ae373](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/14ae3738cf46088e082bd1c60b9dcc6dacacd1bf))
+* improvements to the compat layer ([2a76dc4](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/2a76dc4d3c4cc0365a3afcff6ac321145efed026))
 
 
 
 
 
-## [5.1.26](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.25...@react-navigation/compat@5.1.26) (2020-06-06)
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.25...@react-navigation/compat@5.0.0-alpha.26) (2020-01-14)
 
 **Note:** Version bump only for package @react-navigation/compat
 
@@ -79,82 +55,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.1.25](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.24...@react-navigation/compat@5.1.25) (2020-05-27)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.24](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.23...@react-navigation/compat@5.1.24) (2020-05-23)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.23](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.22...@react-navigation/compat@5.1.23) (2020-05-20)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.22](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.21...@react-navigation/compat@5.1.22) (2020-05-20)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.21](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.20...@react-navigation/compat@5.1.21) (2020-05-16)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.20](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.19...@react-navigation/compat@5.1.20) (2020-05-14)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.19](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.18...@react-navigation/compat@5.1.19) (2020-05-14)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.18](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.17...@react-navigation/compat@5.1.18) (2020-05-10)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.17](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.16...@react-navigation/compat@5.1.17) (2020-05-08)
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.24...@react-navigation/compat@5.0.0-alpha.25) (2020-01-13)
 
 
 ### Bug Fixes
 
-* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/issues/265)
 
 
 
 
 
-## [5.1.16](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.15...@react-navigation/compat@5.1.16) (2020-05-08)
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.23...@react-navigation/compat@5.0.0-alpha.24) (2020-01-13)
 
 **Note:** Version bump only for package @react-navigation/compat
 
@@ -162,7 +74,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.1.15](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.14...@react-navigation/compat@5.1.15) (2020-05-05)
+# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.23) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/compat
 
@@ -170,299 +82,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.1.14](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.13...@react-navigation/compat@5.1.14) (2020-05-01)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.13](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.12...@react-navigation/compat@5.1.13) (2020-05-01)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.12](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.11...@react-navigation/compat@5.1.12) (2020-04-30)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.11](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.10...@react-navigation/compat@5.1.11) (2020-04-30)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.10](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.9...@react-navigation/compat@5.1.10) (2020-04-27)
-
-
-### Bug Fixes
-
-* fix typo in navigationOptions ([8cbb201](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/8cbb201f1a7fb90e45a078df6bc42ce4771cc6a6))
-* spread parent params to children in compat navigator ([24febf6](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/24febf6ea99be2e5f22005fdd2a82136d647255c)), closes [#6785](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/6785)
-
-
-
-
-
-## [5.1.9](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.8...@react-navigation/compat@5.1.9) (2020-04-17)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.8](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.7...@react-navigation/compat@5.1.8) (2020-04-08)
-
-
-### Bug Fixes
-
-* use 1 as default in compatibility pop action ([4408117](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/44081172d440c713ad3543a2d5e1e18ebc8f72a4))
-
-
-
-
-
-## [5.1.7](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.6...@react-navigation/compat@5.1.7) (2020-03-30)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.6](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.5...@react-navigation/compat@5.1.6) (2020-03-23)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.5](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.4...@react-navigation/compat@5.1.5) (2020-03-22)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.4](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.3...@react-navigation/compat@5.1.4) (2020-03-19)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.3](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.2...@react-navigation/compat@5.1.3) (2020-03-17)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.2](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.1...@react-navigation/compat@5.1.2) (2020-03-16)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.0...@react-navigation/compat@5.1.1) (2020-03-03)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.7...@react-navigation/compat@5.1.0) (2020-02-26)
-
-
-### Features
-
-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/6756)
-
-
-
-
-
-## [5.0.7](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.6...@react-navigation/compat@5.0.7) (2020-02-21)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.0.6](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.5...@react-navigation/compat@5.0.6) (2020-02-19)
-
-
-### Bug Fixes
-
-* add NavigationEvents ([d69b0db](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/d69b0db60455b8789276822ba73f5349db8842d7)), closes [/github.com/react-navigation/react-navigation/issues/6821#issuecomment-588268512](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/issuecomment-588268512)
-
-
-
-
-
-## [5.0.5](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.4...@react-navigation/compat@5.0.5) (2020-02-14)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.0.4](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.3...@react-navigation/compat@5.0.4) (2020-02-14)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.0.3](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.2...@react-navigation/compat@5.0.3) (2020-02-12)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.0.2](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.1...@react-navigation/compat@5.0.2) (2020-02-11)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.0.1](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.34...@react-navigation/compat@5.0.1) (2020-02-10)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.34](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.33...@react-navigation/compat@5.0.0-alpha.34) (2020-02-04)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.33](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.32...@react-navigation/compat@5.0.0-alpha.33) (2020-02-04)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.32](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.31...@react-navigation/compat@5.0.0-alpha.32) (2020-02-03)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.31](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.31) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
-
-
-
-
-
-# [5.0.0-alpha.29](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.29) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
-
-
-
-
-
-# [5.0.0-alpha.28](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.27...@react-navigation/compat@5.0.0-alpha.28) (2020-01-24)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.27](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.26...@react-navigation/compat@5.0.0-alpha.27) (2020-01-23)
-
-
-### Bug Fixes
-
-* ensure re-render on isFirstRouteInParent change in compat layer ([14ae373](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/14ae3738cf46088e082bd1c60b9dcc6dacacd1bf))
-* improvements to the compat layer ([2a76dc4](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/2a76dc4d3c4cc0365a3afcff6ac321145efed026))
-
-
-
-
-
-# [5.0.0-alpha.26](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.25...@react-navigation/compat@5.0.0-alpha.26) (2020-01-14)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.25](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.24...@react-navigation/compat@5.0.0-alpha.25) (2020-01-13)
-
-
-### Bug Fixes
-
-* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/265)
-
-
-
-
-
-# [5.0.0-alpha.24](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.23...@react-navigation/compat@5.0.0-alpha.24) (2020-01-13)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.23](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.23) (2020-01-09)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.0.0-alpha.22](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.22) (2020-01-09)
+# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.22) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/compat
 

packages/compat/README.md

@@ -2,4 +2,29 @@
 
 Compatibility layer to write navigator definitions in static configuration format.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/compatibility.html).
+Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/next/compatibility.html).
+
+## Installation
+
+Open a Terminal in your project's folder and run,
+
+```sh
+yarn add @react-navigation/native @react-navigation/compat
+```
+
+## Usage
+
+```js
+import { createCompatNavigatorFactory } from '@react-navigation/compat';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const RootStack = createCompatNavigatorFactory(createStackNavigator)(
+  {
+    Home: { screen: HomeScreen },
+    Profile: { screen: ProfileScreen },
+  },
+  {
+    initialRouteName: 'Profile',
+  }
+);
+```

packages/compat/package.json

@@ -1,26 +1,16 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.2.4",
+  "version": "5.0.0-alpha.30",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/react-navigation/react-navigation.git",
-    "directory": "packages/compat"
-  },
-  "bugs": {
-    "url": "https://github.com/react-navigation/react-navigation/issues"
-  },
-  "homepage": "https://reactnavigation.org/docs/compatibility.html",
+  "repository": "https://github.com/react-navigation/navigation-ex/tree/master/packages/compat",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
-  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
-    "lib",
-    "!**/__tests__"
+    "lib"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -30,16 +20,17 @@
     "prepare": "bob build",
     "clean": "del lib"
   },
+  "dependencies": {
+    "@react-navigation/routers": "^5.0.0-alpha.29"
+  },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
-    "@react-navigation/native": "^5.7.2",
-    "@types/react": "^16.9.36",
+    "@types/react": "^16.9.17",
     "react": "~16.9.0",
-    "typescript": "^3.9.5"
+    "typescript": "^3.7.4"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^5.0.5",
-    "react": "*"
+    "@react-navigation/native": "^5.0.0-alpha.0",
+    "react": "~16.9.0"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/compat/src/CompatScreen.tsx

@@ -1,17 +1,25 @@
 import * as React from 'react';
+import {
+  NavigationProp,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/native';
 import ScreenPropsContext from './ScreenPropsContext';
 import useCompatNavigation from './useCompatNavigation';
 
-type Props = {
-  getComponent: () => React.ComponentType<any>;
+type Props<ParamList extends ParamListBase> = {
+  navigation: NavigationProp<ParamList>;
+  route: RouteProp<ParamList, string>;
+  component: React.ComponentType<any>;
 };
 
-function CompatScreen({ getComponent }: Props) {
+function ScreenComponent<ParamList extends ParamListBase>(
+  props: Props<ParamList>
+) {
   const navigation = useCompatNavigation();
   const screenProps = React.useContext(ScreenPropsContext);
-  const ScreenComponent = getComponent();
 
-  return <ScreenComponent navigation={navigation} screenProps={screenProps} />;
+  return <props.component navigation={navigation} screenProps={screenProps} />;
 }
 
-export default React.memo(CompatScreen);
+export default React.memo(ScreenComponent);

packages/compat/src/DrawerActions.tsx

@@ -1,4 +1,4 @@
-import { DrawerActions, DrawerActionType } from '@react-navigation/native';
+import { DrawerActions, DrawerActionType } from '@react-navigation/routers';
 
 export function openDrawer(): DrawerActionType {
   return DrawerActions.openDrawer();

packages/compat/src/NavigationEvents.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { useNavigation } from '@react-navigation/native';
-
-type Props = {
-  onWillFocus?: () => void;
-  onDidFocus?: () => void;
-  onWillBlur?: () => void;
-  onDidBlur?: () => void;
-};
-
-export default function NavigationEvents(props: Props) {
-  const navigation = useNavigation();
-  const propsRef = React.useRef(props);
-
-  React.useEffect(() => {
-    propsRef.current = props;
-  });
-
-  React.useEffect(() => {
-    const unsubFocus = navigation.addListener('focus', () => {
-      propsRef.current.onWillFocus?.();
-    });
-
-    const unsubBlur = navigation.addListener('blur', () => {
-      propsRef.current.onWillBlur?.();
-    });
-
-    // @ts-expect-error: transitionEnd may not exist on this navigator
-    const unsubTransitionEnd = navigation.addListener('transitionEnd', () => {
-      if (navigation.isFocused()) {
-        propsRef.current.onDidFocus?.();
-      } else {
-        propsRef.current.onDidBlur?.();
-      }
-    });
-
-    return () => {
-      unsubFocus();
-      unsubBlur();
-      unsubTransitionEnd();
-    };
-  }, [navigation]);
-
-  return null;
-}

packages/compat/src/StackActions.tsx

@@ -1,8 +1,5 @@
-import {
-  CommonActions,
-  StackActions,
-  StackActionType,
-} from '@react-navigation/native';
+import { CommonActions } from '@react-navigation/native';
+import { StackActions, StackActionType } from '@react-navigation/routers';
 
 export function reset(): CommonActions.Action {
   throw new Error(