chore: publish

- @react-navigation/bottom-tabs@5.7.2
 - @react-navigation/compat@5.2.1
 - @react-navigation/core@5.12.1
 - @react-navigation/devtools@5.1.3
 - @react-navigation/drawer@5.8.6
 - @react-navigation/material-bottom-tabs@5.2.14
 - @react-navigation/material-top-tabs@5.2.14
 - @react-navigation/native@5.7.1
 - @react-navigation/stack@5.7.1

.circleci/config.yml

@@ -1,89 +1,97 @@
-version: 2
+version: 2.1
 
-defaults: &defaults
-  docker:
-    - image: circleci/node:10
-  working_directory: ~/project
+executors:
+  default:
+    docker:
+      - image: circleci/node:10
+    working_directory: ~/project
+    environment:
+      YARN_CACHE_FOLDER: "~/.cache/yarn"
+
+commands:
+  attach_project:
+    steps:
+      - attach_workspace:
+          at: ~/project
 
 jobs:
   install-dependencies:
-    <<: *defaults
+    executor: default
     steps:
       - checkout
-      - attach_workspace:
-          at: ~/project
+      - attach_project
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "yarn.lock" }}
-            - v1-dependencies-
+            - yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - yarn-packages-v1-{{ .Branch }}-
+            - yarn-packages-v1-
       - run:
           name: Install project dependencies
           command: yarn install --frozen-lockfile
       - save_cache:
-          key: v1-dependencies-{{ checksum "yarn.lock" }}
-          paths: node_modules
+          key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          paths: ~/.cache/yarn
       - persist_to_workspace:
           root: .
           paths: .
+
   lint-and-typecheck:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/project
-        - run:
-            name: Lint files
-            command: yarn lint
-        - run:
-            name: Typecheck files
-            command: yarn typescript
+    executor: default
+    steps:
+      - attach_project
+      - run:
+          name: Lint files
+          command: yarn lint
+      - run:
+          name: Typecheck files
+          command: yarn typescript
+
   unit-tests:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/project
-        - run:
-            name: Run unit tests
-            command: yarn test --coverage
-        - run:
-            name: Upload test coverage
-            command: cat ./coverage/lcov.info | ./node_modules/.bin/codecov
-        - store_artifacts:
-            path: coverage
-            destination: coverage
+    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:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/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
+    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
+
   build-packages:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/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
+    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
 
 workflows:
-  version: 2
   build-and-test:
     jobs:
       - install-dependencies

.eslintrc.json

@@ -1,7 +1,9 @@
 {
   "extends": "satya164",
   "settings": {
-    "react": { "version": "16" },
+    "react": {
+      "version": "16"
+    },
     "import/core-modules": [
       "@react-navigation/core",
       "@react-navigation/native",
@@ -11,8 +13,15 @@
       "@react-navigation/drawer",
       "@react-navigation/bottom-tabs",
       "@react-navigation/material-top-tabs",
-      "@react-navigation/material-bottom-tabs"
+      "@react-navigation/material-bottom-tabs",
+      "@react-navigation/devtools"
     ]
   },
-  "env": { "browser": true, "node": true }
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "react/no-unused-prop-types": "off"
+  }
 }

.github/FUNDING.yml

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

.github/workflows/expo-preview.yml

@@ -8,7 +8,7 @@ jobs:
     if: github.event.pull_request.head.repo.owner.login == 'react-navigation'
     steps:
       - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v1
@@ -23,20 +23,16 @@ jobs:
           expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
           expo-cache: true
 
-      - name: Get yarn cache
+      - name: Restore yarn cache
         id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Check yarn cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
+          path: '**/node_modules'
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
 
       - name: Publish Expo app
         working-directory: ./example
@@ -47,8 +43,25 @@ jobs:
         run: echo "::set-output name=path::@react-navigation/react-navigation-example?release-channel=pr-${{ github.event.number }}"
 
       - name: Comment on PR
-        uses: unsplash/comment-on-pr@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: actions/github-script@v2
         with:
-          msg: The Expo app for the example from this branch is ready!<br><br>[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})<br><br><a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>.
+          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
+            })

.github/workflows/expo.yml

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

.github/workflows/rebase.yml

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

.github/workflows/triage.yml

@@ -8,42 +8,58 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'needs more info'
     steps:
-      - uses: actions/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
         with:
-          args: comment "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](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.)."
+          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/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
         with:
-          args: comment "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. The easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then you can also provide the repro in a GitHub repository."
+          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/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
         with:
-          args: comment "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel."
+          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/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
         with:
-          args: comment "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."
+          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,25 +1,36 @@
 name: Check versions
 on:
   issues:
-    types: [opened]
+    types: [opened, edited]
 
 jobs:
   check-versions:
     runs-on: ubuntu-latest
     steps:
-      - uses: react-navigation/check-versions-action@master
+      - 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 }}
-          packages: |
+          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/native
             @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

README.md

@@ -10,9 +10,23 @@ 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)             |
+
 ## Contributing
 
-Please read through our [contribution guide](CONTRIBUTING.md) a to get started!
+Please read through our [contribution guide](CONTRIBUTING.md) to get started!
 
 ## Installing from a fork on GitHub
 
@@ -49,7 +63,7 @@ Remember to replace `<user>`, `<repo>` and `<name>` with right values.
 
 <!-- badges -->
 
-[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/react-navigation/master.svg?style=flat-square
+[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

babel.config.js

@@ -1,22 +1,3 @@
 module.exports = {
-  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',
-  ],
+  presets: ['module:metro-react-native-babel-preset'],
 };

example/App.tsx

@@ -1,6 +1,10 @@
 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

@@ -0,0 +1,41 @@
+# Change Log
+
+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)
+
+
+### 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))
+
+
+### 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))

example/app.json

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

example/e2e/__integration_tests__/Link.test.tsx

@@ -6,7 +6,7 @@ beforeEach(async () => {
 
 it('loads the article page', async () => {
   expect(await page.evaluate(() => location.pathname + location.search)).toBe(
-    '/link-component/Article?author=Gandalf'
+    '/link-component/article/gandalf'
   );
   expect(
     ((await page.accessibility.snapshot()) as any)?.children?.find(
@@ -16,24 +16,24 @@ it('loads the article page', async () => {
 });
 
 it('goes to the album page and goes back', async () => {
-  await page.click('[href="/link-component/Album"]');
+  await page.click('[href="/link-component/music"]');
 
   expect(await page.evaluate(() => location.pathname + location.search)).toBe(
-    '/link-component/Album'
+    '/link-component/music'
   );
 
   expect(
     ((await page.accessibility.snapshot()) as any)?.children?.find(
       (it: any) => it.role === 'heading'
     )?.name
-  ).toBe('Album');
+  ).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?author=Gandalf'
+    '/link-component/article/gandalf'
   );
 
   expect(

example/e2e/__integration_tests__/index.test.tsx

@@ -3,10 +3,11 @@ import { page } from '../config/setup-playwright';
 it('loads the example app', async () => {
   const snapshot = await page.accessibility.snapshot();
 
-  // @ts-ignore
-  expect(snapshot?.children?.find((it) => it.role === 'heading')?.name).toBe(
-    'Examples'
-  );
+  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

@@ -0,0 +1,13 @@
+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/setup-server.tsx

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

example/ios/Podfile.lock

@@ -1,35 +1,38 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - EXAppLoaderProvider (8.0.0)
-  - EXBlur (8.0.0):
+  - EXBlur (8.1.0):
     - UMCore
-  - EXConstants (8.0.0):
+  - EXConstants (9.0.0):
     - UMConstantsInterface
     - UMCore
-  - EXErrorRecovery (1.0.0):
+  - EXErrorRecovery (1.1.0):
     - UMCore
-  - EXFileSystem (8.0.0):
+  - EXFileSystem (8.1.0):
     - UMCore
     - UMFileSystemInterface
-  - EXFont (8.0.0):
+  - EXFont (8.1.0):
     - UMCore
     - UMFontInterface
-  - EXKeepAwake (8.0.0):
+  - EXImageLoader (1.0.1):
+    - React-Core
     - UMCore
-  - EXLinearGradient (8.0.0):
+    - UMImageLoaderInterface
+  - EXKeepAwake (8.1.0):
     - UMCore
-  - EXLocation (8.0.0):
+  - EXLinearGradient (8.1.0):
+    - UMCore
+  - EXLocation (8.1.0):
     - UMCore
     - UMPermissionsInterface
     - UMTaskManagerInterface
-  - EXPermissions (8.0.0):
+  - EXPermissions (8.1.0):
     - UMCore
     - UMPermissionsInterface
-  - EXSQLite (8.0.0):
+  - EXSQLite (8.1.0):
     - UMCore
     - UMFileSystemInterface
-  - EXWebBrowser (8.0.0):
+  - EXWebBrowser (8.2.1):
     - UMCore
   - FBLazyVector (0.61.5)
   - FBReactNativeSpec (0.61.5):
@@ -50,8 +53,6 @@ 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)
@@ -214,7 +215,9 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-safe-area-context (0.6.2):
+  - react-native-restart (0.0.15):
+    - React
+  - react-native-safe-area-context (1.0.0):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -251,39 +254,41 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNCMaskedView (0.1.5):
+  - RNCMaskedView (0.1.10):
     - React
-  - RNGestureHandler (1.5.5):
+  - RNGestureHandler (1.6.1):
     - React
-  - RNReanimated (1.4.0):
+  - RNReanimated (1.8.0):
     - React
-  - RNScreens (2.0.0-alpha.33):
+  - RNScreens (2.7.0):
     - React
-  - 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):
+  - 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):
     - React-Core
     - UMCore
     - UMFontInterface
-  - UMSensorsInterface (5.0.0)
-  - UMTaskManagerInterface (5.0.0)
+  - UMSensorsInterface (5.1.0)
+  - UMTaskManagerInterface (5.1.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`)
@@ -295,7 +300,6 @@ 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/`)
@@ -306,6 +310,7 @@ 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`)
@@ -322,10 +327,11 @@ 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/@unimodules/core/ios`)"
+  - "UMCore (from `../../node_modules/react-native-unimodules/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`)
@@ -343,42 +349,30 @@ 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: !ruby/object:Pathname
-    path: "../../node_modules/expo-blur/ios"
+    :path: "../../node_modules/expo-blur/ios"
   EXConstants:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-constants/ios"
+    :path: "../../node_modules/expo-constants/ios"
   EXErrorRecovery:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-error-recovery/ios"
+    :path: "../../node_modules/expo-error-recovery/ios"
   EXFileSystem:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-file-system/ios"
+    :path: "../../node_modules/expo-file-system/ios"
   EXFont:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-font/ios"
+    :path: "../../node_modules/expo-font/ios"
+  EXImageLoader:
+    :path: "../../node_modules/expo-image-loader/ios"
   EXKeepAwake:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-keep-awake/ios"
+    :path: "../../node_modules/expo-keep-awake/ios"
   EXLinearGradient:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-linear-gradient/ios"
+    :path: "../../node_modules/expo-linear-gradient/ios"
   EXLocation:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-location/ios"
+    :path: "../../node_modules/expo-location/ios"
   EXPermissions:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-permissions/ios"
+    :path: "../../node_modules/expo-permissions/ios"
   EXSQLite:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-sqlite/ios"
+    :path: "../../node_modules/expo-sqlite/ios"
   EXWebBrowser:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/expo-web-browser/ios"
+    :path: "../../node_modules/expo-web-browser/ios"
   FBLazyVector:
     :path: "../../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
@@ -389,8 +383,6 @@ 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:
@@ -407,6 +399,8 @@ 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:
@@ -437,66 +431,55 @@ 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: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
+    :path: "../../node_modules/unimodules-barcode-scanner-interface/ios"
   UMCameraInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-camera-interface/ios"
+    :path: "../../node_modules/unimodules-camera-interface/ios"
   UMConstantsInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-constants-interface/ios"
+    :path: "../../node_modules/unimodules-constants-interface/ios"
   UMCore:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/@unimodules/core/ios"
+    :path: "../../node_modules/react-native-unimodules/node_modules/@unimodules/core/ios"
   UMFaceDetectorInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-face-detector-interface/ios"
+    :path: "../../node_modules/unimodules-face-detector-interface/ios"
   UMFileSystemInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-file-system-interface/ios"
+    :path: "../../node_modules/unimodules-file-system-interface/ios"
   UMFontInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-font-interface/ios"
+    :path: "../../node_modules/unimodules-font-interface/ios"
   UMImageLoaderInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-image-loader-interface/ios"
+    :path: "../../node_modules/unimodules-image-loader-interface/ios"
   UMPermissionsInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-permissions-interface/ios"
+    :path: "../../node_modules/unimodules-permissions-interface/ios"
   UMReactNativeAdapter:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/@unimodules/react-native-adapter/ios"
+    :path: "../../node_modules/@unimodules/react-native-adapter/ios"
   UMSensorsInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-sensors-interface/ios"
+    :path: "../../node_modules/unimodules-sensors-interface/ios"
   UMTaskManagerInterface:
-    :path: !ruby/object:Pathname
-    path: "../../node_modules/unimodules-task-manager-interface/ios"
+    :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
-  EXAppLoaderProvider: ebdb6bc2632c1ccadbe49f5e4104d8d690969c49
-  EXBlur: d1604f66f89a9414f5ee65dfb23874437c1bb147
-  EXConstants: 4051b16c17ef3defa03c541d42811dc92b249146
-  EXErrorRecovery: d36db99ec6a3808f313f01b0890eb443796dd1c2
-  EXFileSystem: 6e0d9bb6cc4ea404dbb8f583c1a8a2dcdf4b83b6
-  EXFont: 6187b5ab46ee578d5f8e7f2ea092752e78772235
-  EXKeepAwake: 66e9f80b6d129633725a0e42f8d285c229876811
-  EXLinearGradient: 75f302f9d6484267a3f6d3252df2e7a5f00e716a
-  EXLocation: 3c75d012ca92eed94d4338778d79c49d1252393a
-  EXPermissions: 9bc08859a675d291e89be9a0870155c27c16ac35
-  EXSQLite: 220226a354912b100dfe913f5fe6f31762c8927e
-  EXWebBrowser: db32607359fb7b55b7b7b91df32dd3d8355bb3b7
+  EXBlur: aa14d84bff6e9c2232fbcaf54ad809eee1cc41dc
+  EXConstants: 5304709b1bea70a4828f48ba4c7fc3ec3b2d9b17
+  EXErrorRecovery: 8f4c21ab2f51bf75defe4536f841a37de59b0661
+  EXFileSystem: cf4232ba7c62dc49b78c2d36005f97b6fddf0b01
+  EXFont: 8326ecf966be559f7ced7c8e221a32fc4d9ed8b0
+  EXImageLoader: 5ad6896fa1ef2ee814b551873cbf7a7baccc694a
+  EXKeepAwake: d045bc2cf1ad5a04f0323cc7c894b95b414042e0
+  EXLinearGradient: 97d8095d1e4ad96f7893e010e564796ed8aeea42
+  EXLocation: bbd487fd96a18a3ad9725389bbb94c4a5f78edf3
+  EXPermissions: 24b97f734ce9172d245a5be38ad9ccfcb6135964
+  EXSQLite: 877ad6c8eb169353a2f94d5ad26510ffadd46a1f
+  EXWebBrowser: 5902f99ac5ac551e5c82ff46f13a337b323aa9ea
   FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
-  RCTRestart: dd19aab87fc1118e05b6b5b91b959105647f56b4
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
   React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
@@ -505,7 +488,8 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-safe-area-context: 25260c5d0b9c53fd7aa88e569e2edae72af1f6a3
+  react-native-restart: fff228304625f55de2ebd4de43938110f4c888ed
+  react-native-safe-area-context: a346c75f2288147527365ce27b59ca6d38c27805
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -516,24 +500,25 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  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
+  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
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: c48a21ff513d3eadafa50f8797207ef2be75e234
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.1

example/metro.config.js

@@ -8,26 +8,25 @@ 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(
-    ...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')
-        );
+    ...workspaces.map((it) => {
+      const pak = JSON.parse(
+        fs.readFileSync(path.join(it, 'package.json'), 'utf8')
+      );
 
-        // 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,
-        });
-      })
+      // 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) : [];
+    })
   )
   .sort()
   .filter(
@@ -45,15 +44,16 @@ module.exports = {
   watchFolders: [root],
 
   resolver: {
-    // We need to blacklist `node_modules` of all our packages
-    // This will avoid Metro throwing duplicate module errors
+    // We need to blacklist the peerDependencies we've collected in packages' node_modules
     blacklistRE: blacklist(
-      fs
-        .readdirSync(packages)
-        .map((p) => path.join(packages, p))
-        .map(
-          (it) => new RegExp(`^${escape(path.join(it, 'node_modules'))}\\/.*$`)
+      [].concat(
+        ...workspaces.map((it) =>
+          modules.map(
+            (m) =>
+              new RegExp(`^${escape(path.join(it, 'node_modules', m))}\\/.*$`)
+          )
         )
+      )
     ),
 
     // When we import a package from the monorepo, metro won't be able to find their deps

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "private": true,
   "scripts": {
     "start": "expo start",
@@ -9,39 +9,53 @@
     "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"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "^0.1.7",
+    "@expo/vector-icons": "^10.2.0",
+    "@react-native-community/masked-view": "^0.1.10",
     "color": "^3.1.2",
-    "expo": "^37.0.0",
-    "expo-asset": "~8.1.3",
+    "expo": "^37.0.12",
+    "expo-asset": "~8.1.5",
     "expo-blur": "~8.1.0",
+    "koa": "^2.12.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.7.0",
-    "react-native-reanimated": "^1.7.0",
-    "react-native-restart": "^0.0.14",
-    "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.3.0",
-    "react-native-tab-view": "2.14.0",
-    "react-native-unimodules": "~0.8.1",
+    "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-web": "^0.11.7"
   },
   "devDependencies": {
-    "@expo/webpack-config": "^0.11.19",
+    "@babel/node": "^7.10.1",
+    "@expo/webpack-config": "^0.12.12",
+    "@types/cheerio": "^0.22.18",
     "@types/jest-dev-server": "^4.2.0",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.60.22",
-    "babel-preset-expo": "^8.1.0",
-    "expo-cli": "^3.17.18",
-    "jest": "^25.2.7",
+    "@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.0",
-    "typescript": "^3.8.3"
+    "serve": "^11.3.2",
+    "typescript": "^3.9.5"
   }
 }

example/server/babel.config.js

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,12 @@
+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/Restart.native.tsx

@@ -0,0 +1,11 @@
+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

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

example/src/Screens/AuthFlow.tsx

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

example/src/Screens/BottomTabs.tsx

@@ -1,7 +1,16 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+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 TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -23,9 +32,48 @@ 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() {
+export default function BottomTabsScreen({
+  navigation,
+  route,
+}: StackScreenProps<ParamListBase, string>) {
+  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Article';
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      title: routeName,
+    });
+  }, [navigation, routeName]);
+
   return (
     <BottomTabs.Navigator
       screenOptions={{
@@ -37,19 +85,19 @@ export default function BottomTabsScreen() {
     >
       <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
@@ -62,7 +110,7 @@ export default function BottomTabsScreen() {
       />
       <BottomTabs.Screen
         name="Albums"
-        component={Albums}
+        component={AlbumsScreen}
         options={{
           title: 'Albums',
           tabBarIcon: getTabBarIcon('image-album'),
@@ -71,3 +119,13 @@ export default function BottomTabsScreen() {
     </BottomTabs.Navigator>
   );
 }
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

example/src/Screens/CompatAPI.tsx

@@ -8,6 +8,7 @@ import {
 import {
   createStackNavigator,
   StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -126,8 +127,8 @@ const CompatStack = createCompatStackNavigator<
         StackNavigationProp<NestedStackParams>
       >(
         {
-          Feed: FeedScreen,
-          Article: ArticleScreen,
+          Feed: { getScreen: () => FeedScreen },
+          Article: { getScreen: () => ArticleScreen },
         },
         { navigationOptions: { headerShown: false } }
       ),
@@ -143,12 +144,12 @@ const CompatStack = createCompatStackNavigator<
 
 export default function CompatStackScreen({
   navigation,
-}: {
-  navigation: StackNavigationProp<{}>;
-}) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+}: StackScreenProps<{}>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   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 '@expo/vector-icons';
+import Feather from 'react-native-vector-icons/Feather';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 type BottomTabParams = {

example/src/Screens/LinkComponent.tsx

@@ -4,24 +4,21 @@ import { Button } from 'react-native-paper';
 import {
   Link,
   StackActions,
-  RouteProp,
   ParamListBase,
   useLinkProps,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
 type SimpleStackParams = {
   Article: { author: string };
-  Album: undefined;
+  Albums: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const LinkButton = ({
@@ -45,32 +42,29 @@ const LinkButton = ({
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Link
-          to="/link-component/Album"
+          to="/link-component/music"
           style={[styles.button, { padding: 8 }]}
         >
-          Go to /link-component/Album
+          Go to /link-component/music
         </Link>
         <Link
-          to="/link-component/Album"
-          action={StackActions.replace('Album')}
+          to="/link-component/music"
+          action={StackActions.replace('Albums')}
           style={[styles.button, { padding: 8 }]}
         >
-          Replace with /link-component/Album
+          Replace with /link-component/music
         </Link>
         <LinkButton
-          to="/link-component/Album"
+          to="/link-component/music"
           mode="contained"
           style={styles.button}
         >
-          Go to /link-component/Album
+          Go to /link-component/music
         </LinkButton>
         <Button
           mode="outlined"
@@ -88,26 +82,22 @@ const ArticleScreen = ({
   );
 };
 
-const AlbumsScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Link
-          to="/link-component/Article?author=Babel"
+          to="/link-component/article/babel"
           style={[styles.button, { padding: 8 }]}
         >
-          Go to /link-component/Article
+          Go to /link-component/article
         </Link>
         <LinkButton
-          to="/link-component/Article?author=Babel"
+          to="/link-component/article/babel"
           mode="contained"
           style={styles.button}
         >
-          Go to /link-component/Article
+          Go to /link-component/article
         </LinkButton>
         <Button
           mode="outlined"
@@ -124,14 +114,15 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <SimpleStack.Navigator {...rest}>
@@ -144,9 +135,9 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <SimpleStack.Screen
-        name="Album"
+        name="Albums"
         component={AlbumsScreen}
-        options={{ title: 'Album' }}
+        options={{ title: 'Albums' }}
       />
     </SimpleStack.Navigator>
   );

example/src/Screens/MasterDetail.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
 import { Dimensions, ScaledSize } from 'react-native';
 import { Appbar } from 'react-native-paper';
-import { ParamListBase } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import {
+  useTheme,
+  useNavigation,
+  ParamListBase,
+} from '@react-navigation/native';
 import {
   createDrawerNavigator,
-  DrawerNavigationProp,
+  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';
@@ -15,11 +21,9 @@ import NewsFeed from '../Shared/NewsFeed';
 type DrawerParams = {
   Article: undefined;
   NewsFeed: undefined;
-  Album: undefined;
+  Albums: undefined;
 };
 
-type DrawerNavigation = DrawerNavigationProp<DrawerParams>;
-
 const useIsLargeScreen = () => {
   const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
 
@@ -43,17 +47,20 @@ const Header = ({
   onGoBack: () => void;
   title: string;
 }) => {
+  const { colors } = useTheme();
   const isLargeScreen = useIsLargeScreen();
 
   return (
-    <Appbar.Header>
+    <Appbar.Header style={{ backgroundColor: colors.card, elevation: 1 }}>
       {isLargeScreen ? null : <Appbar.BackAction onPress={onGoBack} />}
       <Appbar.Content title={title} />
     </Appbar.Header>
   );
 };
 
-const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const ArticleScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'Article'>) => {
   return (
     <>
       <Header title="Article" onGoBack={() => navigation.toggleDrawer()} />
@@ -62,7 +69,9 @@ const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
   );
 };
 
-const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const NewsFeedScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'NewsFeed'>) => {
   return (
     <>
       <Header title="Feed" onGoBack={() => navigation.toggleDrawer()} />
@@ -71,7 +80,9 @@ const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
   );
 };
 
-const AlbumsScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const AlbumsScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'Albums'>) => {
   return (
     <>
       <Header title="Albums" onGoBack={() => navigation.toggleDrawer()} />
@@ -80,17 +91,35 @@ const AlbumsScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
   );
 };
 
-const Drawer = createDrawerNavigator<DrawerParams>();
+const CustomDrawerContent = (
+  props: DrawerContentComponentProps<DrawerContentOptions>
+) => {
+  const { colors } = useTheme();
+  const navigation = useNavigation();
 
-type Props = Partial<React.ComponentProps<typeof Drawer.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
+  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) {
-  navigation.setOptions({
-    headerShown: false,
-    gestureEnabled: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+      gestureEnabled: false,
+    });
+  }, [navigation]);
 
   const isLargeScreen = useIsLargeScreen();
 
@@ -100,15 +129,7 @@ export default function DrawerScreen({ navigation, ...rest }: Props) {
       drawerType={isLargeScreen ? 'permanent' : 'back'}
       drawerStyle={isLargeScreen ? null : { width: '100%' }}
       overlayColor="transparent"
-      drawerContent={(props) => (
-        <>
-          <Appbar.Header>
-            <Appbar.Action icon="close" onPress={() => navigation.goBack()} />
-            <Appbar.Content title="Pages" />
-          </Appbar.Header>
-          <DrawerContent {...props} />
-        </>
-      )}
+      drawerContent={(props) => <CustomDrawerContent {...props} />}
       {...rest}
     >
       <Drawer.Screen name="Article" component={ArticleScreen} />
@@ -118,9 +139,9 @@ export default function DrawerScreen({ navigation, ...rest }: Props) {
         options={{ title: 'Feed' }}
       />
       <Drawer.Screen
-        name="Album"
+        name="Albums"
         component={AlbumsScreen}
-        options={{ title: 'Album' }}
+        options={{ title: 'Albums' }}
       />
     </Drawer.Navigator>
   );

example/src/Screens/MaterialBottomTabs.tsx

@@ -22,14 +22,13 @@ 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,4 +1,6 @@
 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';
@@ -12,7 +14,15 @@ type MaterialTopTabParams = {
 
 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
 
-export default function MaterialTopTabsScreen() {
+export default function MaterialTopTabsScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      cardStyle: { flex: 1 },
+    });
+  }, [navigation]);
+
   return (
     <MaterialTopTabs.Navigator>
       <MaterialTopTabs.Screen

example/src/Screens/ModalPresentationStack.tsx

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

example/src/Screens/NotFound.tsx

@@ -0,0 +1,38 @@
+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

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

example/src/Screens/StackHeaderCustomization.tsx

@@ -1,40 +1,44 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView, Alert, Platform } from 'react-native';
+import {
+  Animated,
+  View,
+  StyleSheet,
+  ScrollView,
+  Alert,
+  Platform,
+} from 'react-native';
 import { Button, Appbar } from 'react-native-paper';
-import { BlurView } from 'expo-blur';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { RouteProp, ParamListBase } from '@react-navigation/native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
   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 };
-  Album: undefined;
+  Albums: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Album')}
+          onPress={() => navigation.push('Albums')}
           style={styles.button}
         >
           Push album
@@ -55,11 +59,7 @@ const ArticleScreen = ({
   );
 };
 
-const AlbumsScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
   const headerHeight = useHeaderHeight();
 
   return (
@@ -87,14 +87,36 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+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>
+    </>
+  );
+}
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  const { colors, dark } = useTheme();
 
   return (
     <SimpleStack.Navigator {...rest}>
@@ -103,6 +125,7 @@ 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,
@@ -131,16 +154,22 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <SimpleStack.Screen
-        name="Album"
+        name="Albums"
         component={AlbumsScreen}
         options={{
-          title: 'Album',
+          title: 'Albums',
           headerBackTitle: 'Back',
           headerTransparent: true,
           headerBackground: () => (
-            <HeaderBackground style={{ backgroundColor: 'transparent' }}>
+            <HeaderBackground
+              style={{
+                backgroundColor: 'transparent',
+                borderBottomWidth: StyleSheet.hairlineWidth,
+                borderBottomColor: colors.border,
+              }}
+            >
               <BlurView
-                tint="light"
+                tint={dark ? 'dark' : 'light'}
                 intensity={75}
                 style={StyleSheet.absoluteFill}
               />
@@ -160,4 +189,10 @@ 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 { Button, Paragraph } from 'react-native-paper';
-import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
+import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 
@@ -13,17 +13,12 @@ type SimpleStackParams = {
   Dialog: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({
   navigation,
   route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -50,11 +45,7 @@ const ArticleScreen = ({
   );
 };
 
-const DialogScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const DialogScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
   const { colors } = useTheme();
 
   return (
@@ -81,14 +72,15 @@ const DialogScreen = ({
 
 const SimpleStack = createStackNavigator<SimpleStackParams>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;
 
 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
 
   return (
     <SimpleStack.Navigator mode="modal" {...rest}>

example/src/Shared/Albums.tsx

@@ -81,10 +81,6 @@ export default function Albums(props: Partial<ScrollViewProps>) {
 }
 
 const styles = StyleSheet.create({
-  content: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
   ...Platform.select({
     web: {
       content: {

example/src/Shared/BlurView.native.tsx

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

example/src/Shared/BlurView.tsx

@@ -0,0 +1,12 @@
+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/NewsFeed.tsx

@@ -18,7 +18,9 @@ import {
 } from 'react-native-paper';
 import Color from 'color';
 
-type Props = Partial<ScrollViewProps>;
+type Props = Partial<ScrollViewProps> & {
+  date?: number;
+};
 
 const Author = () => {
   return (

example/src/Shared/TouchableBounce.native.tsx

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

example/src/index.tsx

@@ -7,13 +7,11 @@ import {
   I18nManager,
   Dimensions,
   ScaledSize,
+  Linking,
 } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
-import RNRestart from 'react-native-restart';
-import { Updates } from 'expo';
-import { Asset } from 'expo-asset';
-import { MaterialIcons } from '@expo/vector-icons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {
   Provider as PaperProvider,
   DefaultTheme as PaperLightTheme,
@@ -28,18 +26,21 @@ import {
   NavigationContainer,
   DefaultTheme,
   DarkTheme,
+  PathConfigMap,
+  NavigationContainerRef,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
-  DrawerNavigationProp,
+  DrawerScreenProps,
 } from '@react-navigation/drawer';
 import {
   createStackNavigator,
-  Assets as StackAssets,
-  StackNavigationProp,
+  StackScreenProps,
   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';
@@ -50,19 +51,18 @@ 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 AuthFlow from './Screens/AuthFlow';
-import CompatAPI from './Screens/CompatAPI';
 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';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
 enableScreens();
 
-// @ts-ignore
-global.REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED = true;
-
 type RootDrawerParamList = {
   Root: undefined;
   Another: undefined;
@@ -70,6 +70,7 @@ type RootDrawerParamList = {
 
 type RootStackParamList = {
   Home: undefined;
+  NotFound: undefined;
 } & {
   [P in keyof typeof SCREENS]: undefined;
 };
@@ -109,6 +110,10 @@ const SCREENS = {
     title: 'Auth Flow',
     component: AuthFlow,
   },
+  PreventRemove: {
+    title: 'Prevent removing screen',
+    component: PreventRemove,
+  },
   CompatAPI: {
     title: 'Compat Layer',
     component: CompatAPI,
@@ -125,12 +130,10 @@ const Stack = createStackNavigator<RootStackParamList>();
 const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const THEME_PERSISTENCE_KEY = 'THEME_TYPE';
 
-Asset.loadAsync(StackAssets);
-
 export default function App() {
   const [theme, setTheme] = React.useState(DefaultTheme);
 
-  const [isReady, setIsReady] = React.useState(false);
+  const [isReady, setIsReady] = React.useState(Platform.OS === 'web');
   const [initialState, setInitialState] = React.useState<
     InitialState | undefined
   >();
@@ -138,18 +141,18 @@ export default function App() {
   React.useEffect(() => {
     const restoreState = async () => {
       try {
-        let state;
+        const initialUrl = await Linking.getInitialURL();
 
-        if (Platform.OS !== 'web' && state === undefined) {
+        if (Platform.OS !== 'web' || initialUrl === null) {
           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 {
@@ -193,6 +196,10 @@ export default function App() {
     return () => Dimensions.removeEventListener('change', onDimensionsChange);
   }, []);
 
+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+
+  useReduxDevToolsExtension(navigationRef);
+
   if (!isReady) {
     return null;
   }
@@ -205,6 +212,7 @@ export default function App() {
         <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
       )}
       <NavigationContainer
+        ref={navigationRef}
         initialState={initialState}
         onStateChange={(state) =>
           AsyncStorage.setItem(
@@ -222,25 +230,57 @@ export default function App() {
           // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
           prefixes: LinkingPrefixes,
           config: {
-            Root: {
-              path: '',
-              initialRouteName: 'Home',
-              screens: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
-                (acc, name) => {
-                  // Convert screen names such as SimpleStack to kebab case (simple-stack)
-                  acc[name] = name
-                    .replace(/([A-Z]+)/g, '-$1')
-                    .replace(/^-/, '')
-                    .toLowerCase();
+            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();
 
-                  return acc;
-                },
-                { Home: '' }
-              ),
+                    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.Screen
@@ -252,11 +292,7 @@ export default function App() {
               ),
             }}
           >
-            {({
-              navigation,
-            }: {
-              navigation: DrawerNavigationProp<RootDrawerParamList>;
-            }) => (
+            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
               <Stack.Navigator
                 screenOptions={{
                   headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
@@ -277,11 +313,7 @@ export default function App() {
                         ),
                   }}
                 >
-                  {({
-                    navigation,
-                  }: {
-                    navigation: StackNavigationProp<RootStackParamList>;
-                  }) => (
+                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >
@@ -290,12 +322,7 @@ export default function App() {
                         value={I18nManager.isRTL}
                         onValueChange={() => {
                           I18nManager.forceRTL(!I18nManager.isRTL);
-                          // @ts-ignore
-                          if (global.Expo) {
-                            Updates.reloadFromCache();
-                          } else {
-                            RNRestart.Restart();
-                          }
+                          restartApp();
                         }}
                       />
                       <Divider />
@@ -325,12 +352,17 @@ 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) => (
                     <Stack.Screen
                       key={name}
                       name={name}
-                      component={SCREENS[name].component}
+                      getComponent={() => SCREENS[name].component}
                       options={{ title: SCREENS[name].title }}
                     />
                   )

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

@@ -0,0 +1,16 @@
+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/webpack.config.js

@@ -24,19 +24,21 @@ module.exports = async function (env, argv) {
   );
 
   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).forEach((name) => {
-    config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-      packages,
-      name,
-      'src'
-    );
-  });
+  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
+      );
+    });
 
   return config;
 };

jest/setup.js

@@ -1,3 +1,21 @@
+/* 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) =>

lerna.json

@@ -8,7 +8,7 @@
   "version": "independent",
   "command": {
     "publish": {
-      "allowBranch": "master",
+      "allowBranch": "main",
       "conventionalCommits": true,
       "createRelease": "github",
       "message": "chore: publish",

package.json

@@ -13,11 +13,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/satya164/react-navigation.git"
+    "url": "git+https://github.com/react-navigation/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 --ext '.js,.ts,.tsx' .",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "typescript": "tsc --noEmit --composite false",
     "test": "jest",
     "prerelease": "lerna run clean",
@@ -25,26 +25,19 @@
     "example": "yarn --cwd example"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-flow": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
     "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^25.2.1",
-    "babel-jest": "^25.2.6",
-    "codecov": "^3.6.5",
+    "@types/jest": "^26.0.0",
+    "babel-jest": "^26.0.1",
+    "codecov": "^3.7.0",
     "commitlint": "^8.3.5",
-    "core-js": "^3.6.4",
-    "eslint": "^6.8.0",
-    "eslint-config-satya164": "^3.1.6",
-    "husky": "^4.2.3",
-    "jest": "^25.2.7",
-    "lerna": "^3.20.2",
-    "prettier": "^2.0.4",
-    "typescript": "^3.8.3"
+    "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"
   },
   "resolutions": {
     "react": "~16.9.0",
@@ -59,9 +52,6 @@
   "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,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.0...@react-navigation/bottom-tabs@5.3.1) (2020-04-30)
+## [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
 
@@ -11,19 +11,34 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.8...@react-navigation/bottom-tabs@5.3.0) (2020-04-30)
+## [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)
+
+
+### 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))
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* fix bottom tab bar to match iOS defaults ([849e04a](https://github.com/react-navigation/react-navigation/commit/849e04ab6a541fffb490ffdfa9819608b88494f4))
 
 
 ### Features
 
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/942d2be2c72720469475ce12ec8df23825994dbf))
+* add support for badges to bottom tab bar ([96c7b68](https://github.com/react-navigation/react-navigation/commit/96c7b688ce773b3dd1f1cf7775367cd7080c94a2))
 
 
 
 
 
-## [5.2.8](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.7...@react-navigation/bottom-tabs@5.2.8) (2020-04-27)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs
 
@@ -31,81 +46,24 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/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/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.5...@react-navigation/bottom-tabs@5.2.6) (2020-04-08)
+# [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)
 
 
 ### Bug Fixes
 
-* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
-
-
-
-
-
-## [5.2.5](https://github.com/react-navigation/react-navigation/tree/master/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/master/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/master/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/master/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/master/packages/bottom-tabs/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/7485)
-* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6789)
-
-
-
-
-
-## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/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/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.1...@react-navigation/bottom-tabs@5.2.0) (2020-03-16)
+* 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 safeAreaInsets to bottom tabs ([82af7be](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/82af7bed7135e42e24693b48cf7f1c6f9f5a6981))
+* 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))
 
 
 
 
 
-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.0...@react-navigation/bottom-tabs@5.1.1) (2020-03-03)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs
 
@@ -113,18 +71,30 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.7...@react-navigation/bottom-tabs@5.1.0) (2020-02-26)
+## [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
 
-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6756)
+* 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.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.6...@react-navigation/bottom-tabs@5.0.7) (2020-02-21)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs
 
@@ -132,7 +102,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.5...@react-navigation/bottom-tabs@5.0.6) (2020-02-19)
+## [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
 
@@ -140,7 +110,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.5](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.4...@react-navigation/bottom-tabs@5.0.5) (2020-02-14)
+## [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
 
@@ -148,7 +118,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.3...@react-navigation/bottom-tabs@5.0.4) (2020-02-14)
+## [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
 
@@ -156,7 +126,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.2...@react-navigation/bottom-tabs@5.0.3) (2020-02-12)
+## [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
 
@@ -164,100 +134,37 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.1...@react-navigation/bottom-tabs@5.0.2) (2020-02-11)
+## [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
 
-* initialize keyboard-hiding tabBar to visible=true ([#6740](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6740), [#6799](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6799)) ([0c59ef7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/0c59ef7328c63108a2a2c04e927794d73cead63a))
-* provide route context to header and bottom tabs ([b6e7e08](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b6e7e08b9a05be6c04ed21e938b9580876239116))
+* 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.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.45...@react-navigation/bottom-tabs@5.0.1) (2020-02-10)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.0.0-alpha.45](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.44...@react-navigation/bottom-tabs@5.0.0-alpha.45) (2020-02-04)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.0.0-alpha.44](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.43...@react-navigation/bottom-tabs@5.0.0-alpha.44) (2020-02-04)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.42...@react-navigation/bottom-tabs@5.0.0-alpha.43) (2020-02-03)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.42) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-
-
-
-
-
-# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.40) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-
-
-
-
-
-# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.38...@react-navigation/bottom-tabs@5.0.0-alpha.39) (2020-01-24)
-
-
-### Bug Fixes
-
-* use layout instead of dimensions for determining tab bar layout ([f1fe951](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/f1fe951cf9d602e1b6d4932e3c6c77bbeaaec5c0))
-
-
-
-
-
-# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.37...@react-navigation/bottom-tabs@5.0.0-alpha.38) (2020-01-23)
-
-
-### Bug Fixes
-
-* don't use native driver on web ([0a982ee](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0a982ee6984b24c0ba053a30223e255f3835e050))
+# [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
 
-* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+* 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.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)
+## [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
 
@@ -265,18 +172,70 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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
 
-* 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)
+* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
 
 
 
 
 
-# [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)
+## [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
 
@@ -284,7 +243,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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
 
@@ -292,7 +251,233 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs
 

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.3.1",
+  "version": "5.7.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -12,14 +12,20 @@
     "tab"
   ],
   "license": "MIT",
-  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "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"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -34,17 +40,18 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.1",
+    "@react-native-community/bob": "^0.15.1",
+    "@react-navigation/native": "^5.7.1",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
-    "del-cli": "^3.0.0",
+    "@types/react": "^16.9.36",
+    "@types/react-native": "^0.62.7",
+    "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.3.0",
-    "typescript": "^3.8.3"
+    "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"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

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

@@ -0,0 +1,33 @@
+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

@@ -15,6 +15,7 @@ export { default as BottomTabBar } from './views/BottomTabBar';
 export type {
   BottomTabNavigationOptions,
   BottomTabNavigationProp,
+  BottomTabScreenProps,
   BottomTabBarProps,
   BottomTabBarOptions,
 } from './types';

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

@@ -8,7 +8,7 @@ import {
   TabNavigationState,
 } from '@react-navigation/native';
 import BottomTabView from '../views/BottomTabView';
-import {
+import type {
   BottomTabNavigationConfig,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,

packages/bottom-tabs/src/types.tsx

@@ -1,18 +1,20 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
+  Animated,
   TouchableWithoutFeedbackProps,
   StyleProp,
   TextStyle,
   ViewStyle,
   GestureResponderEvent,
 } from 'react-native';
-import {
+import type {
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
   Descriptor,
   TabNavigationState,
   TabActionHelpers,
+  RouteProp,
 } from '@react-navigation/native';
 
 export type BottomTabNavigationEventMap = {
@@ -45,6 +47,14 @@ export type BottomTabNavigationProp<
 > &
   TabActionHelpers<ParamList>;
 
+export type BottomTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = {
+  navigation: BottomTabNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
 export type BottomTabNavigationOptions = {
   /**
    * Title text for the screen.
@@ -69,6 +79,11 @@ 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.
@@ -109,7 +124,7 @@ export type BottomTabDescriptorMap = {
   [key: string]: BottomTabDescriptor;
 };
 
-export type BottomTabNavigationConfig = {
+export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
   /**
    * 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.
@@ -118,11 +133,11 @@ export type BottomTabNavigationConfig = {
   /**
    * Function that returns a React element to display as the tab bar.
    */
-  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
+  tabBar?: (props: BottomTabBarProps<T>) => React.ReactNode;
   /**
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
-  tabBarOptions?: BottomTabBarOptions;
+  tabBarOptions?: T;
 };
 
 export type BottomTabBarOptions = {
@@ -154,21 +169,21 @@ 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, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's rendered beside.
+   * By default, in `vertical` orientation, label is rendered below and in `horizontal` orientation, it's rendered beside.
    */
   labelPosition?: LabelPosition;
   /**
@@ -188,10 +203,10 @@ export type BottomTabBarOptions = {
   /**
    * Style object for the tab bar container.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
-export type BottomTabBarProps = BottomTabBarOptions & {
+export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
   state: TabNavigationState;
   descriptors: BottomTabDescriptorMap;
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,108 @@
+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,11 +3,8 @@ import {
   View,
   Animated,
   StyleSheet,
-  Keyboard,
   Platform,
   LayoutChangeEvent,
-  ScaledSize,
-  Dimensions,
 } from 'react-native';
 import {
   NavigationContext,
@@ -19,14 +16,16 @@ import {
 import { useSafeArea } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
-import { BottomTabBarProps } from '../types';
+import useWindowDimensions from '../utils/useWindowDimensions';
+import useIsKeyboardShown from '../utils/useIsKeyboardShown';
+import type { BottomTabBarProps } from '../types';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
 };
 
-const DEFAULT_TABBAR_HEIGHT = 50;
+const DEFAULT_TABBAR_HEIGHT = 49;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -44,8 +43,8 @@ export default function BottomTabBar({
   keyboardHidesTabBar = false,
   labelPosition,
   labelStyle,
+  iconStyle,
   safeAreaInsets,
-  showIcon,
   showLabel,
   style,
   tabStyle,
@@ -53,72 +52,49 @@ export default function BottomTabBar({
   const { colors } = useTheme();
   const buildLink = useLinkBuilder();
 
-  const [dimensions, setDimensions] = React.useState(() => {
-    const { height = 0, width = 0 } = Dimensions.get('window');
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
 
-    return { height, width };
-  });
+  const dimensions = useWindowDimensions();
+  const isKeyboardShown = useIsKeyboardShown();
 
-  const [layout, setLayout] = React.useState({
-    height: 0,
-    width: dimensions.width,
-  });
-  const [keyboardShown, setKeyboardShown] = React.useState(false);
+  const shouldShowTabBar =
+    focusedOptions.tabBarVisible !== false &&
+    !(keyboardHidesTabBar && isKeyboardShown);
 
-  const [visible] = React.useState(() => new Animated.Value(1));
+  const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
 
-  const { routes } = state;
+  const [visible] = React.useState(
+    () => new Animated.Value(shouldShowTabBar ? 1 : 0)
+  );
 
   React.useEffect(() => {
-    if (keyboardShown) {
-      Animated.timing(visible, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver,
-      }).start();
-    }
-  }, [keyboardShown, visible]);
-
-  React.useEffect(() => {
-    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    const handleKeyboardShow = () => setKeyboardShown(true);
-
-    const handleKeyboardHide = () =>
+    if (shouldShowTabBar) {
       Animated.timing(visible, {
         toValue: 1,
         duration: 250,
         useNativeDriver,
       }).start(({ finished }) => {
         if (finished) {
-          setKeyboardShown(false);
+          setIsTabBarHidden(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);
+      setIsTabBarHidden(true);
+
+      Animated.timing(visible, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver,
+      }).start();
     }
+  }, [shouldShowTabBar, visible]);
 
-    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 [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
 
   const handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
@@ -135,6 +111,7 @@ export default function BottomTabBar({
     });
   };
 
+  const { routes } = state;
   const shouldUseHorizontalLabels = () => {
     if (labelPosition) {
       return labelPosition === 'beside-icon';
@@ -175,6 +152,8 @@ export default function BottomTabBar({
     left: safeAreaInsets?.left ?? defaultInsets.left,
   };
 
+  const paddingBottom = Math.max(insets.bottom - 4, 0);
+
   return (
     <Animated.View
       style={[
@@ -183,30 +162,27 @@ export default function BottomTabBar({
           backgroundColor: colors.card,
           borderTopColor: colors.border,
         },
-        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.bottom,
-          paddingBottom: insets.bottom,
+          transform: [
+            {
+              translateY: visible.interpolate({
+                inputRange: [0, 1],
+                outputRange: [layout.height + paddingBottom, 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: isTabBarHidden ? 'absolute' : null,
+        },
+        {
+          height: DEFAULT_TABBAR_HEIGHT + paddingBottom,
+          paddingBottom,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}
-      pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
+      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
     >
       <View style={styles.content} onLayout={handleLayout}>
         {routes.map((route, index) => {
@@ -271,10 +247,11 @@ export default function BottomTabBar({
                   inactiveBackgroundColor={inactiveBackgroundColor}
                   button={options.tabBarButton}
                   icon={options.tabBarIcon}
+                  badge={options.tabBarBadge}
                   label={label}
-                  showIcon={showIcon}
                   showLabel={showLabel}
                   labelStyle={labelStyle}
+                  iconStyle={iconStyle}
                   style={tabStyle}
                 />
               </NavigationRouteContext.Provider>

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
   View,
+  Text,
   TouchableWithoutFeedback,
-  Animated,
   StyleSheet,
   Platform,
   StyleProp,
@@ -14,7 +14,7 @@ import { Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 
 import TabBarIcon from './TabBarIcon';
-import { BottomTabBarButtonProps } from '../types';
+import type { BottomTabBarButtonProps } from '../types';
 
 type Props = {
   /**
@@ -39,6 +39,10 @@ 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.
    */
@@ -90,10 +94,6 @@ 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.
    */
@@ -102,6 +102,10 @@ 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.
    */
@@ -113,6 +117,7 @@ export default function BottomTabBarItem({
   route,
   label,
   icon,
+  badge,
   to,
   button = ({
     children,
@@ -165,9 +170,9 @@ export default function BottomTabBarItem({
   activeBackgroundColor = 'transparent',
   inactiveBackgroundColor = 'transparent',
   showLabel = true,
-  showIcon = true,
   allowFontScaling,
   labelStyle,
+  iconStyle,
   style,
 }: Props) {
   const { colors } = useTheme();
@@ -191,30 +196,26 @@ export default function BottomTabBarItem({
 
     if (typeof label === 'string') {
       return (
-        <Animated.Text
+        <Text
           numberOfLines={1}
           style={[
             styles.label,
             { color },
-            showIcon && horizontal ? styles.labelBeside : styles.labelBeneath,
+            horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}
           allowFontScaling={allowFontScaling}
         >
           {label}
-        </Animated.Text>
+        </Text>
       );
     }
 
-    if (typeof label === 'string') {
-      return label;
-    }
-
     return label({ focused, color });
   };
 
   const renderIcon = ({ focused }: { focused: boolean }) => {
-    if (showIcon === false || icon === undefined) {
+    if (icon === undefined) {
       return null;
     }
 
@@ -224,13 +225,14 @@ export default function BottomTabBarItem({
     return (
       <TabBarIcon
         route={route}
-        size={horizontal ? 17 : 24}
+        horizontal={horizontal}
+        badge={badge}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
         renderIcon={icon}
-        style={horizontal ? styles.iconHorizontal : styles.iconVertical}
+        style={iconStyle}
       />
     );
   };
@@ -277,23 +279,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  iconVertical: {
-    flex: 1,
-  },
-  iconHorizontal: {
-    height: '100%',
-  },
   label: {
     textAlign: 'center',
     backgroundColor: 'transparent',
   },
   labelBeneath: {
-    fontSize: 11,
-    marginBottom: 1.5,
+    fontSize: 10,
   },
   labelBeside: {
-    fontSize: 12,
+    fontSize: 13,
     marginLeft: 20,
+    marginTop: 3,
   },
   button: {
     display: 'flex',

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

@@ -12,7 +12,7 @@ import { ScreenContainer } from 'react-native-screens';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
-import {
+import type {
   BottomTabNavigationConfig,
   BottomTabDescriptorMap,
   BottomTabNavigationHelpers,
@@ -75,17 +75,8 @@ 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,

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

@@ -17,7 +17,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
     if (screensEnabled?.() && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
-      // @ts-ignore
+      // @ts-expect-error: stackPresentation is incorrectly marked as required
       return <Screen active={isVisible ? 1 : 0} {...rest} />;
     }
 

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Route } from '@react-navigation/native';
+import type { Route } from '@react-navigation/native';
+import Badge from './Badge';
 
 type Props = {
   route: Route<string>;
-  size: number;
+  horizontal: boolean;
+  badge?: string | number;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: string;
@@ -18,18 +20,23 @@ 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={style}>
+    <View
+      style={[horizontal ? styles.iconHorizontal : styles.iconVertical, style]}
+    >
       <View style={[styles.icon, { opacity: activeOpacity }]}>
         {renderIcon({
           focused: true,
@@ -44,6 +51,16 @@ 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>
   );
 }
@@ -62,4 +79,21 @@ 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/compat/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.1.12](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.11...@react-navigation/compat@5.1.12) (2020-04-30)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/compat
 
@@ -11,113 +11,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.1.11](https://github.com/react-navigation/react-navigation/tree/master/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/master/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/master/packages/compat/commit/8cbb201f1a7fb90e45a078df6bc42ce4771cc6a6))
-* spread parent params to children in compat navigator ([24febf6](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/24febf6ea99be2e5f22005fdd2a82136d647255c)), closes [#6785](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/6785)
-
-
-
-
-
-## [5.1.9](https://github.com/react-navigation/react-navigation/tree/master/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/master/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/master/packages/compat/commit/44081172d440c713ad3543a2d5e1e18ebc8f72a4))
-
-
-
-
-
-## [5.1.7](https://github.com/react-navigation/react-navigation/tree/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/packages/compat/compare/@react-navigation/compat@5.0.7...@react-navigation/compat@5.1.0) (2020-02-26)
+# [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 ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/6756)
+* add a getComponent prop to lazily specify components ([f418029](https://github.com/react-navigation/react-navigation/commit/f4180295bf22e32c65f6a7ab7089523cb2de58fb))
 
 
 
 
 
-## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.6...@react-navigation/compat@5.0.7) (2020-02-21)
+## [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
 
@@ -125,18 +30,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.5...@react-navigation/compat@5.0.6) (2020-02-19)
+## [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)
 
 
 ### Bug Fixes
 
-* add NavigationEvents ([d69b0db](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/d69b0db60455b8789276822ba73f5349db8842d7)), closes [/github.com/react-navigation/react-navigation/issues/6821#issuecomment-588268512](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/issuecomment-588268512)
+* more improvements to types ([d244488](https://github.com/react-navigation/react-navigation/commit/d2444887be227bbbdcfcb13a7f26a8ebb344043e))
 
 
 
 
 
-## [5.0.5](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.4...@react-navigation/compat@5.0.5) (2020-02-14)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/compat
 
@@ -144,7 +49,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.3...@react-navigation/compat@5.0.4) (2020-02-14)
+## [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
 
@@ -152,7 +57,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.2...@react-navigation/compat@5.0.3) (2020-02-12)
+## [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
 
@@ -160,7 +65,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.1...@react-navigation/compat@5.0.2) (2020-02-11)
+## [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
 
@@ -168,7 +73,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.34...@react-navigation/compat@5.0.1) (2020-02-10)
+## [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
 
@@ -176,7 +81,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.33...@react-navigation/compat@5.0.0-alpha.34) (2020-02-04)
+## [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
 
@@ -184,7 +89,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.32...@react-navigation/compat@5.0.0-alpha.33) (2020-02-04)
+## [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
 
@@ -192,7 +97,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.31...@react-navigation/compat@5.0.0-alpha.32) (2020-02-03)
+## [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
 
@@ -200,31 +105,86 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.31](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.31) (2020-02-02)
+## [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)
 
 
 ### Bug Fixes
 
-* 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))
+* 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))
 
 
 
 
 
-# [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)
+## [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)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [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)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [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
 
-* 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))
+* 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.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)
+## [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
 
@@ -232,19 +192,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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
 
-* 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))
+* use 1 as default in compatibility pop action ([4408117](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/44081172d440c713ad3543a2d5e1e18ebc8f72a4))
 
 
 
 
 
-# [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)
+## [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
 
@@ -252,18 +211,85 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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
 
-* 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)
+* 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.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)
+## [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
 
@@ -271,7 +297,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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
 
@@ -279,7 +305,134 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [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)
+## [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)
 
 **Note:** Version bump only for package @react-navigation/compat
 

packages/compat/package.json

@@ -1,20 +1,26 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.1.12",
+  "version": "5.2.1",
   "license": "MIT",
-  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
+  "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",
   "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"
+    "lib",
+    "!**/__tests__"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -25,11 +31,11 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.1",
-    "@types/react": "^16.9.23",
+    "@react-native-community/bob": "^0.15.1",
+    "@react-navigation/native": "^5.7.1",
+    "@types/react": "^16.9.36",
     "react": "~16.9.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/compat/src/CompatScreen.tsx

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

packages/compat/src/NavigationEvents.tsx

@@ -25,7 +25,7 @@ export default function NavigationEvents(props: Props) {
       propsRef.current.onWillBlur?.();
     });
 
-    // @ts-ignore
+    // @ts-expect-error: transitionEnd may not exist on this navigator
     const unsubTransitionEnd = navigation.addListener('transitionEnd', () => {
       if (navigation.isFocused()) {
         propsRef.current.onDidFocus?.();

packages/compat/src/createCompatNavigationProp.tsx

@@ -1,4 +1,4 @@
-import {
+import type {
   NavigationState,
   PartialState,
   ParamListBase,
@@ -6,7 +6,7 @@ import {
   RouteProp,
 } from '@react-navigation/native';
 import * as helpers from './helpers';
-import { CompatNavigationProp } from './types';
+import type { CompatNavigationProp } from './types';
 
 type EventName =
   | 'action'
@@ -16,10 +16,6 @@ type EventName =
   | 'didBlur'
   | 'refocus';
 
-// const focusSubscriptions = new WeakMap<() => void, () => void>();
-// const blurSubscriptions = new WeakMap<() => void, () => void>();
-// const refocusSubscriptions = new WeakMap<() => void, () => void>();
-
 export default function createCompatNavigationProp<
   NavigationPropType extends NavigationProp<ParamListBase>,
   ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
@@ -74,7 +70,7 @@ export default function createCompatNavigationProp<
             }
           };
 
-          // @ts-ignore
+          // @ts-expect-error: this event may not exist in this navigator
           unsubscribe = navigation.addListener('transitionEnd', listener);
           context.subscriptions.didFocus.set(callback, unsubscribe);
           break;
@@ -86,7 +82,7 @@ export default function createCompatNavigationProp<
             }
           };
 
-          // @ts-ignore
+          // @ts-expect-error: this event may not exist in this navigator
           unsubscribe = navigation.addListener('transitionEnd', listener);
           context.subscriptions.didBlur.set(callback, unsubscribe);
           break;
@@ -98,7 +94,7 @@ export default function createCompatNavigationProp<
             }
           };
 
-          // @ts-ignore
+          // @ts-expect-error: this event may not exist in this navigator
           unsubscribe = navigation.addListener('tabPress', listener);
           context.subscriptions.refocus.set(callback, unsubscribe);
           break;
@@ -106,7 +102,6 @@ export default function createCompatNavigationProp<
         case 'action':
           throw new Error("Listening to 'action' events is not supported.");
         default:
-          // @ts-ignore
           unsubscribe = navigation.addListener(type, callback);
       }
 
@@ -144,18 +139,17 @@ export default function createCompatNavigationProp<
         case 'action':
           throw new Error("Listening to 'action' events is not supported.");
         default:
-          // @ts-ignore
           navigation.removeListener(type, callback);
       }
     },
     state: {
       ...state,
-      // @ts-ignore
+      // @ts-expect-error
       routeName: state.name,
       get index() {
-        // @ts-ignore
+        // @ts-expect-error
         if (state.index !== undefined) {
-          // @ts-ignore
+          // @ts-expect-error
           return state.index;
         }
 
@@ -163,13 +157,13 @@ export default function createCompatNavigationProp<
           "Accessing child navigation state for a route is not safe and won't work correctly."
         );
 
-        // @ts-ignore
+        // @ts-expect-error
         return state.state ? state.state.index : undefined;
       },
       get routes() {
-        // @ts-ignore
+        // @ts-expect-error
         if (state.routes !== undefined) {
-          // @ts-ignore
+          // @ts-expect-error
           return state.routes;
         }
 
@@ -177,7 +171,7 @@ export default function createCompatNavigationProp<
           "Accessing child navigation state for a route is not safe and won't work correctly."
         );
 
-        // @ts-ignore
+        // @ts-expect-error
         return state.state ? state.state.routes : undefined;
       },
     },
@@ -185,7 +179,7 @@ export default function createCompatNavigationProp<
       paramName: T,
       defaultValue: ParamList[T]
     ): ParamList[T] {
-      // @ts-ignore
+      // @ts-expect-error
       const params = state.params;
 
       if (params && paramName in params) {
@@ -201,7 +195,7 @@ export default function createCompatNavigationProp<
 
       const { routes } = navigation.dangerouslyGetState();
 
-      // @ts-ignore
+      // @ts-expect-error
       return routes[0].key === state.key;
     },
     dangerouslyGetParent() {

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -6,24 +6,23 @@ import {
   TypedNavigator,
   NavigationProp,
   RouteProp,
-  EventMapBase,
   NavigationRouteContext,
 } from '@react-navigation/native';
 import CompatScreen from './CompatScreen';
 import ScreenPropsContext from './ScreenPropsContext';
 import createCompatNavigationProp from './createCompatNavigationProp';
-import { CompatScreenType, CompatRouteConfig } from './types';
+import type { CompatScreenType, CompatRouteConfig } from './types';
 
 export default function createCompatNavigatorFactory<
   CreateNavigator extends () => TypedNavigator<
     ParamListBase,
     NavigationState,
     {},
-    EventMapBase,
+    any,
     React.ComponentType<any>
   >
 >(createNavigator: CreateNavigator) {
-  // @ts-ignore
+  // @ts-expect-error: isCompat may or may not exist
   if (createNavigator.isCompat) {
     throw new Error(
       `The navigator is already in compat mode. You don't need to wrap it in 'createCompatNavigatorFactory'.`
@@ -99,7 +98,7 @@ export default function createCompatNavigatorFactory<
                 state?: NavigationState | PartialState<NavigationState>;
               };
             }) => {
-              // @ts-ignore
+              // @ts-expect-error: navigationOptions may exists on the component, but TS is dumb
               const routeNavigationOptions = routeConfigItem.navigationOptions;
               const screenNavigationOptions = getScreenComponent()
                 .navigationOptions;
@@ -116,7 +115,8 @@ export default function createCompatNavigatorFactory<
                 typeof screenNavigationOptions === 'function'
                   ? {
                       navigation: createCompatNavigationProp<
-                        NavigationPropType
+                        NavigationPropType,
+                        ParamList
                       >(navigation, route, {}),
                       navigationOptions: defaultNavigationOptions || {},
                       screenProps,
@@ -142,13 +142,7 @@ export default function createCompatNavigatorFactory<
                 initialParams={{ ...parentRouteParams, ...initialParams }}
                 options={screenOptions}
               >
-                {({ navigation, route }) => (
-                  <CompatScreen
-                    navigation={navigation}
-                    route={route}
-                    component={getScreenComponent()}
-                  />
-                )}
+                {() => <CompatScreen getComponent={getScreenComponent} />}
               </Pair.Screen>
             );
           }),

packages/compat/src/types.tsx

@@ -1,5 +1,9 @@
-import { ParamListBase, NavigationProp, Route } from '@react-navigation/native';
-import * as helpers from './helpers';
+import type {
+  ParamListBase,
+  NavigationProp,
+  Route,
+} from '@react-navigation/native';
+import type * as helpers from './helpers';
 
 export type CompatNavigationProp<
   NavigationPropType extends NavigationProp<ParamListBase>,

packages/compat/src/useCompatNavigation.tsx

@@ -7,7 +7,7 @@ import {
   useNavigationState,
 } from '@react-navigation/native';
 import createCompatNavigationProp from './createCompatNavigationProp';
-import { CompatNavigationProp } from './types';
+import type { CompatNavigationProp } from './types';
 
 export default function useCompatNavigation<
   T extends NavigationProp<ParamListBase>

packages/compat/src/withNavigation.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
+import type { NavigationProp, ParamListBase } from '@react-navigation/native';
 import useCompatNavigation from './useCompatNavigation';
-import { CompatNavigationProp } from './types';
+import type { CompatNavigationProp } from './types';
 
 type InjectedProps<T extends NavigationProp<ParamListBase>> = {
   navigation: CompatNavigationProp<T>;
@@ -22,7 +22,7 @@ export default function withNavigation<
   }): React.ReactElement => {
     const navigation = useCompatNavigation<T>();
 
-    // @ts-ignore
+    // @ts-expect-error: type checking HOC is hard
     return <Comp ref={onRef} navigation={navigation} {...rest} />;
   };
 

packages/compat/src/withNavigationFocus.tsx

@@ -19,7 +19,7 @@ export default function withNavigationFocus<
   }): React.ReactElement => {
     const isFocused = useIsFocused();
 
-    // @ts-ignore
+    // @ts-expect-error: type checking HOC is hard
     return <Comp ref={onRef} isFocused={isFocused} {...rest} />;
   };
 

packages/core/CHANGELOG.md

@@ -3,99 +3,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.5...@react-navigation/core@5.4.0) (2020-04-30)
+## [5.12.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.0...@react-navigation/core@5.12.1) (2020-07-19)
 
 
 ### Bug Fixes
 
-* handle empty paths when parsing ([c3fa83e](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c3fa83efe0d73db76365f8be3d6a8ca1d1289b71))
-* parsing url ([bd35b4f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/bd35b4fc202c3868fb75c3675b62de67557089e1))
+* make sure new state events are emitted when new navigators mount ([af8b274](https://github.com/react-navigation/react-navigation/commit/af8b27414c8628570d946003f4fdff3341cb8954))
+
+
+
+
+
+# [5.12.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.11.1...@react-navigation/core@5.12.0) (2020-07-10)
+
+
+### Bug Fixes
+
+* avoid error setting warning for devtools migration. closes [#8534](https://github.com/react-navigation/react-navigation/issues/8534) ([1801a13](https://github.com/react-navigation/react-navigation/commit/1801a13323eff149fb6bc4e3c3f12422b401f178))
+* fix bubbling actions to correct target when specified ([9671c76](https://github.com/react-navigation/react-navigation/commit/9671c76c5121aaa64a956e2ca696b2f1712cd6f4))
+* fix options event being emitted incorrectly ([#8559](https://github.com/react-navigation/react-navigation/issues/8559)) ([a255e35](https://github.com/react-navigation/react-navigation/commit/a255e350f9a54c6d8e410167c9c8661e70b23779))
+* improve the warning message for non-serializable values ([e63580e](https://github.com/react-navigation/react-navigation/commit/e63580edbef8e77239f3dbefc919d1a41723eff1))
+* mark some types as read-only ([7c3a0a0](https://github.com/react-navigation/react-navigation/commit/7c3a0a0f23629da0beb956ba5a9689ab965061ce))
 
 
 ### Features
 
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+* add a `beforeRemove` event ([6925e92](https://github.com/react-navigation/react-navigation/commit/6925e92dc3e9885e3f552ca5e5eb51ae1521e54e))
+* add a getComponent prop to lazily specify components ([f418029](https://github.com/react-navigation/react-navigation/commit/f4180295bf22e32c65f6a7ab7089523cb2de58fb))
 
 
 
 
 
-## [5.3.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.4...@react-navigation/core@5.3.5) (2020-04-27)
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.11.0...@react-navigation/core@5.11.1) (2020-06-25)
 
 
 ### Bug Fixes
 
-* add config to enable redux devtools integration ([c9c825b](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c9c825bee61426635a28ee149eeeff3d628171cd))
+* fix error with type definitions. closes [#8511](https://github.com/react-navigation/react-navigation/issues/8511) ([d1210a8](https://github.com/react-navigation/react-navigation/commit/d1210a861b37201827c333a5c012c4f0ebd9bb6a))
 
 
 
 
 
-## [5.3.4](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.3...@react-navigation/core@5.3.4) (2020-04-17)
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.10.0...@react-navigation/core@5.11.0) (2020-06-24)
 
 
 ### Bug Fixes
 
-* add initial option for navigating to nested navigators ([004c7d7](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/004c7d7ab1f80faf04b2a1836ec6b79a5419e45f))
-* add initial param for actions from deep link ([a3f7a5f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/a3f7a5feba2e6aa2158aeaea6cde73ae1603173e))
-* handle initial: false for nested route after first initialization ([187aefe](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/187aefe9c400b499f920c212bf856414e25c5aaf))
-
-
-
-
-
-## [5.3.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.2...@react-navigation/core@5.3.3) (2020-04-08)
-
-
-### Bug Fixes
-
-* switch order of focus and blur events. closes [#7963](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7963) ([ce3994c](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/ce3994c82c28669d5742017eb7627e9adf996933))
-* workaround warning about setState in another component in render ([d4fd906](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/d4fd906915cc20d6fb21508384c05a540d8644d8))
-
-
-
-
-
-## [5.3.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.1...@react-navigation/core@5.3.2) (2020-03-30)
-
-
-### Bug Fixes
-
-* handle no path property and undefined query params ([#7911](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7911)) ([cd47915](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/cd47915861a56cd7eaa9ac79f5139cde56ca95a7))
-
-
-
-
-
-## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.0...@react-navigation/core@5.3.1) (2020-03-23)
-
-
-### Bug Fixes
-
-* don't emit events for screens that don't exist anymore ([1c00142](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/1c001424b595b40f9db9343096c833f75353b099))
-* only call listeners for focused screen for global events ([3096de6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/3096de62868a7ed9ed65e529c8ddfa001b9be486))
-
-
-
-
-
-# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.3...@react-navigation/core@5.3.0) (2020-03-22)
-
-
-### Bug Fixes
-
-* return correct value for isFocused after changing screens ([5b15c71](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/5b15c7164f5503f2f0d51006a3f23bd0c58fd9b7)), closes [#7843](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7843)
+* fix getCurrentOptions for nested screens ([6730690](https://github.com/react-navigation/react-navigation/commit/67306905299314bda053e553ded228374e3e23c9))
+* fix getCurrentOptions for nested screens ([afc83ee](https://github.com/react-navigation/react-navigation/commit/afc83eedf8c308c958a08900e069948e3d8a6aa1))
+* more improvements to types ([d244488](https://github.com/react-navigation/react-navigation/commit/d2444887be227bbbdcfcb13a7f26a8ebb344043e))
 
 
 ### Features
 
-* support function in listeners prop ([3709e65](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/3709e652f41a16c2c2b05d5dbbe1da2017ba2c3f))
+* add devtools package ([#8436](https://github.com/react-navigation/react-navigation/issues/8436)) ([95b044e](https://github.com/react-navigation/react-navigation/commit/95b044ecf95939f40ced4da740a365140b3952b7))
+* add event for options on container ([#8334](https://github.com/react-navigation/react-navigation/issues/8334)) ([fe3f98e](https://github.com/react-navigation/react-navigation/commit/fe3f98eb9cdd986c32460b78520b4d3d2435c279))
+* add helper to get focused route name from nested state ([#8435](https://github.com/react-navigation/react-navigation/issues/8435)) ([f51f9c8](https://github.com/react-navigation/react-navigation/commit/f51f9c8493e079f73688adaf9dc43a2171c3e44a))
+* rework linking configuration to be more strict ([#8502](https://github.com/react-navigation/react-navigation/issues/8502)) ([a021cfb](https://github.com/react-navigation/react-navigation/commit/a021cfb8af4afd50f785f6ee9b51d361e25704ca))
 
 
 
 
 
-## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.2...@react-navigation/core@5.2.3) (2020-03-19)
+# [5.10.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.9.0...@react-navigation/core@5.10.0) (2020-06-06)
+
+
+### Bug Fixes
+
+* catch missing params when they are required in navigate ([#8389](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8389)) ([8774ca9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/8774ca97e1da91e97677ecd816c85f66af296b93))
+* make sure the wildcard pattern catches nested unmatched routes ([c3bd349](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c3bd349d77688011c9c55027edd66c6f39de2ade))
+* only use the query params for focused route in path ([2d66ef9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2d66ef93ec9923a452415c482c40e7c6b769917c))
+* prevent state change being emitted unnecessarily ([ab1f79c](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ab1f79c096e94475a4da1acf1c850d04fb1bc4cf))
+
+
+### Features
+
+* add wildcard patterns for paths ([4fe72e3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/4fe72e3ce7bae9120d04e490401f3bad58ebdf5c)), closes [#8019](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8019)
+
+
+
+
+
+# [5.9.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.8.2...@react-navigation/core@5.9.0) (2020-05-27)
+
+
+### Features
+
+* add ref to get current options in `ServerContainer` ([#8333](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8333)) ([0b1a718](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0b1a718756e208d84b20e45ca56004332308ad54))
+
+
+
+
+
+## [5.8.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.8.1...@react-navigation/core@5.8.2) (2020-05-23)
 
 **Note:** Version bump only for package @react-navigation/core
 
@@ -103,7 +105,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.1...@react-navigation/core@5.2.2) (2020-03-16)
+## [5.8.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.8.0...@react-navigation/core@5.8.1) (2020-05-20)
 
 **Note:** Version bump only for package @react-navigation/core
 
@@ -111,133 +113,189 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.0...@react-navigation/core@5.2.1) (2020-03-03)
-
-
-### Bug Fixes
-
-* fix links for documentation ([5bb0f40](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/5bb0f405ceb5755d39a0b5b1f2e4ecee0da051bc))
-* move updating state to useEffect ([2dfa4f3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2dfa4f36293a2acb718814f6b2fa79d7c7ddf09c))
-
-
-
-
-
-# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.6...@react-navigation/core@5.2.0) (2020-02-26)
+# [5.8.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.7.0...@react-navigation/core@5.8.0) (2020-05-20)
 
 
 ### Features
 
-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6756)
+* add getCurrentOptions ([#8277](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8277)) ([d024ec6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/d024ec6d74dffe481ce6fde732c729e20c1668f4))
+* add getCurrentRoute ([#8254](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8254)) ([7b25c8e](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/7b25c8eb2e6f96128fd86b92615346ce55bedeca))
 
 
 
 
 
-## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.5...@react-navigation/core@5.1.6) (2020-02-21)
+# [5.7.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.6.1...@react-navigation/core@5.7.0) (2020-05-16)
 
 
 ### Bug Fixes
 
-* avoid emitting focus events twice ([f167008](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f16700812f3757713b04ca3a860209795b4a6c44)), closes [#6749](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6749)
-* preserve screen order with numeric names ([125bd70](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/125bd70e49b708d936a2eee72ba5cb92eacf26a9)), closes [#6900](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6900)
-
-
-
-
-
-## [5.1.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.4...@react-navigation/core@5.1.5) (2020-02-19)
-
-
-### Bug Fixes
-
-* show descriptive error for invalid return for useFocusEffect ([1a28c29](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/1a28c299b5e3f0805eb6e9ea3cf5e9cc90c7a280))
-
-
-
-
-
-## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.3...@react-navigation/core@5.1.4) (2020-02-14)
-
-
-### Bug Fixes
-
-* link to migration guide on invalid usage ([c5fcfbd](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c5fcfbd4277541e131acbaa7602a5d7e636afebb))
-* return '/' for empty paths ([aaf01e0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/aaf01e01e7b47b375f68aebe6d0effe82878d060))
-
-
-
-
-
-## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.2...@react-navigation/core@5.1.3) (2020-02-14)
-
-
-### Bug Fixes
-
-* return false for canGoBack if navigator hasn't finished mounting ([c8ac5fa](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c8ac5fab61cf127985431075a3c59c1f3dfa42da))
-* throw a descriptive error if navigation object hasn't initialized ([b6accd0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/b6accd03f69dd438e595094d8bf8599cc12e71ac))
-* update links in error messages ([f964200](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f964200b0dcbc19d5f88ad2dd1eb8e5576973497))
-
-
-
-
-
-## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.1...@react-navigation/core@5.1.2) (2020-02-12)
-
-
-### Bug Fixes
-
-* fix false positives for circular object check ([030c63c](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/030c63c89fe447aa484b767831c8f8e26e90431c)), closes [#6827](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6827)
-* static container memo check ([#6825](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6825)) ([2bf0958](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2bf09585021470f500d967e9242836840efe970f))
-
-
-
-
-
-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.0...@react-navigation/core@5.1.1) (2020-02-11)
-
-
-### Bug Fixes
-
-* don't cleanup state on switching navigator ([359ae1b](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/359ae1bfacec5ef880b3944f465c881aedb16767))
-
-
-
-
-
-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.43...@react-navigation/core@5.1.0) (2020-02-10)
-
-
-### Bug Fixes
-
-* add some links in the error messages ([13b4e07](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/13b4e07348496f7cb516d625b44a6a7d310ef9af))
+* don't use Object.fromEntries ([51f4d11](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/51f4d11fdf4bd2bb06f8cd4094f051816590e62c))
 
 
 ### Features
 
-* support ignoring empty path strings ([#349](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/349)) ([61b1134](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/61b1134f90310390fe819622c1f33273fca0bd42))
+* add a PathConfig type ([60cb3c9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/60cb3c9ba76d7ef166c9fe8b55f23728975b5b6e))
 
 
 
 
 
-# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.42...@react-navigation/core@5.0.0-alpha.43) (2020-02-04)
+## [5.6.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.6.0...@react-navigation/core@5.6.1) (2020-05-14)
 
 
 ### Bug Fixes
 
-* improve error message for unhandled action ([ca4a360](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ca4a36070a21c4fe86cb1cc55a4452dca293f215))
+* don't use flat since it's not supported in node ([21b397f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/21b397f0d6b96ec4875d3172f47533130bb08009))
+
+
+
+
+
+# [5.6.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.5.2...@react-navigation/core@5.6.0) (2020-05-14)
+
+
+### Bug Fixes
+
+* ignore extra slashes in the pattern ([3c47716](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3c47716826d0dfa69dfa6112141c116723372ea1))
+* ignore state updates when we're not mounted ([0149e85](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0149e85a95b90c6a9d487fa753ddbf5d01c03e3d)), closes [#8226](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8226)
 
 
 ### Features
 
-* add initialRouteName property to config ([#322](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/322)) ([4ca5cc6](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/4ca5cc632992187f12870281e4cf4c7d1f799967))
+* merge path patterns for nested screens ([#8253](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8253)) ([acc9646](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/acc9646426fee53558d686dfbe5fd0e35361d8c0))
 
 
 
 
 
-# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.41...@react-navigation/core@5.0.0-alpha.42) (2020-02-04)
+## [5.5.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.5.1...@react-navigation/core@5.5.2) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+## [5.5.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.5.0...@react-navigation/core@5.5.1) (2020-05-08)
+
+
+### Bug Fixes
+
+* avoid cleaning up state when a new navigator is mounted. fixes [#8195](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8195) ([f6d0676](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/f6d06768d3c36d1f5beaffcb660f3c259209f2e7))
+
+
+
+
+
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.4.0...@react-navigation/core@5.5.0) (2020-05-05)
+
+
+### Features
+
+* add support for optional params to linking ([#8196](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8196)) ([fcd1cc6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/fcd1cc64c151e4941f3f544a54b5048d853821f6))
+* support params anywhere in path segement ([#8184](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8184)) ([3999fc2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3999fc28365c3a06a17d963c7be7fb7e897f99e0))
+
+
+
+
+
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.5...@react-navigation/core@5.4.0) (2020-04-30)
+
+
+### Bug Fixes
+
+* handle empty paths when parsing ([c3fa83e](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c3fa83efe0d73db76365f8be3d6a8ca1d1289b71))
+* parsing url ([bd35b4f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/bd35b4fc202c3868fb75c3675b62de67557089e1))
+
+
+### Features
+
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.4...@react-navigation/core@5.3.5) (2020-04-27)
+
+
+### Bug Fixes
+
+* add config to enable redux devtools integration ([c9c825b](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c9c825bee61426635a28ee149eeeff3d628171cd))
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.3...@react-navigation/core@5.3.4) (2020-04-17)
+
+
+### Bug Fixes
+
+* add initial option for navigating to nested navigators ([004c7d7](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/004c7d7ab1f80faf04b2a1836ec6b79a5419e45f))
+* add initial param for actions from deep link ([a3f7a5f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/a3f7a5feba2e6aa2158aeaea6cde73ae1603173e))
+* handle initial: false for nested route after first initialization ([187aefe](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/187aefe9c400b499f920c212bf856414e25c5aaf))
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.2...@react-navigation/core@5.3.3) (2020-04-08)
+
+
+### Bug Fixes
+
+* switch order of focus and blur events. closes [#7963](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/7963) ([ce3994c](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ce3994c82c28669d5742017eb7627e9adf996933))
+* workaround warning about setState in another component in render ([d4fd906](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/d4fd906915cc20d6fb21508384c05a540d8644d8))
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.1...@react-navigation/core@5.3.2) (2020-03-30)
+
+
+### Bug Fixes
+
+* handle no path property and undefined query params ([#7911](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/7911)) ([cd47915](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/cd47915861a56cd7eaa9ac79f5139cde56ca95a7))
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.0...@react-navigation/core@5.3.1) (2020-03-23)
+
+
+### Bug Fixes
+
+* don't emit events for screens that don't exist anymore ([1c00142](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/1c001424b595b40f9db9343096c833f75353b099))
+* only call listeners for focused screen for global events ([3096de6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3096de62868a7ed9ed65e529c8ddfa001b9be486))
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.3...@react-navigation/core@5.3.0) (2020-03-22)
+
+
+### Bug Fixes
+
+* return correct value for isFocused after changing screens ([5b15c71](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5b15c7164f5503f2f0d51006a3f23bd0c58fd9b7)), closes [#7843](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/7843)
+
+
+### Features
+
+* support function in listeners prop ([3709e65](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3709e652f41a16c2c2b05d5dbbe1da2017ba2c3f))
+
+
+
+
+
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.2...@react-navigation/core@5.2.3) (2020-03-19)
 
 **Note:** Version bump only for package @react-navigation/core
 
@@ -245,115 +303,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.41](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.40...@react-navigation/core@5.0.0-alpha.41) (2020-02-03)
-
-
-### Bug Fixes
-
-* ignore circular references when checking serializable ([e5063b9](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/e5063b93398350511f3fd2ef48425559f871781f))
-
-
-
-
-
-# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.40) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
-* tweak error messages for validation ([2243b45](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))
-
-
-### Features
-
-* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
-* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
-* integrate with history API on web ([5a3f835](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
-
-
-
-
-
-# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.38) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
-* tweak error messages for validation ([2243b45](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))
-
-
-### Features
-
-* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
-* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
-* integrate with history API on web ([5a3f835](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
-
-
-
-
-
-# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.36...@react-navigation/core@5.0.0-alpha.37) (2020-01-24)
-
-
-### Bug Fixes
-
-* add error message when trying to use v4 API with v5 ([179e807](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/179e807a64a7d031d671c2c4b12edaee3c3440c5))
-* validate screen configs ([2f1f0af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2f1f0af862ef8625da4c2aaf463d45fe17a4ac88))
-* warn if non-serializable values found in state ([5751e7f](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5751e7f97a1731a5c71862174dfd931b6ffe13e2))
-
-
-
-
-
-# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.35...@react-navigation/core@5.0.0-alpha.36) (2020-01-23)
-
-
-### Bug Fixes
-
-* disallow canPreventDefault option if not present in types ([d9059b5](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/d9059b56d8a89b39fec43d38a7b0514d41c0b550))
-* don't add ?if query params is empty ([3bf5ddd](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/3bf5ddde2ac1ba45f1123752d37532175f18a3d9))
-* fix types for useFocusEffect ([23ab45a](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/23ab45aceb72cc27ebfacdedfbf60d0c540fecfb)), closes [#270](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/270)
-* make sure that we return correct value if selector changes ([6c2acbb](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/6c2acbb304a9f11789b45a410b6c41911eca3947)), closes [/github.com/react-navigation/navigation-ex/pull/273#issuecomment-576581225](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/issuecomment-576581225)
-* use protected for private value store ([ad4eaff](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ad4eaff1e99e4f9fca3a193764fd0f26efa41341))
-
-
-### Features
-
-* add useNavigationState hook ([32a2206](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/32a2206513bc084d8da07187385d11db498f1e2a))
-* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/da67e134d2157201360427d3c10da24f24cae7aa))
-* support nested config in getPathFromState ([#266](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/266)) ([1e53821](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/1e53821d52be182369add07a86c72221c5dba53e))
-
-
-
-
-
-# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.34...@react-navigation/core@5.0.0-alpha.35) (2020-01-14)
-
-
-### Bug Fixes
-
-* fix intellisense for CompositeNavigationProp ([a912323](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/a912323c1dfa0c3564ca82c448a86f85d1658f7f))
-
-
-
-
-
-# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.33...@react-navigation/core@5.0.0-alpha.34) (2020-01-13)
-
-
-### Bug Fixes
-
-* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/265)
-
-
-
-
-
-# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.32...@react-navigation/core@5.0.0-alpha.33) (2020-01-13)
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.1...@react-navigation/core@5.2.2) (2020-03-16)
 
 **Note:** Version bump only for package @react-navigation/core
 
@@ -361,7 +311,133 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.32) (2020-01-09)
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.0...@react-navigation/core@5.2.1) (2020-03-03)
+
+
+### Bug Fixes
+
+* fix links for documentation ([5bb0f40](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5bb0f405ceb5755d39a0b5b1f2e4ecee0da051bc))
+* move updating state to useEffect ([2dfa4f3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2dfa4f36293a2acb718814f6b2fa79d7c7ddf09c))
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.6...@react-navigation/core@5.2.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6756)
+
+
+
+
+
+## [5.1.6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.5...@react-navigation/core@5.1.6) (2020-02-21)
+
+
+### Bug Fixes
+
+* avoid emitting focus events twice ([f167008](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/f16700812f3757713b04ca3a860209795b4a6c44)), closes [#6749](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6749)
+* preserve screen order with numeric names ([125bd70](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/125bd70e49b708d936a2eee72ba5cb92eacf26a9)), closes [#6900](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6900)
+
+
+
+
+
+## [5.1.5](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.4...@react-navigation/core@5.1.5) (2020-02-19)
+
+
+### Bug Fixes
+
+* show descriptive error for invalid return for useFocusEffect ([1a28c29](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/1a28c299b5e3f0805eb6e9ea3cf5e9cc90c7a280))
+
+
+
+
+
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.3...@react-navigation/core@5.1.4) (2020-02-14)
+
+
+### Bug Fixes
+
+* link to migration guide on invalid usage ([c5fcfbd](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c5fcfbd4277541e131acbaa7602a5d7e636afebb))
+* return '/' for empty paths ([aaf01e0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/aaf01e01e7b47b375f68aebe6d0effe82878d060))
+
+
+
+
+
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.2...@react-navigation/core@5.1.3) (2020-02-14)
+
+
+### Bug Fixes
+
+* return false for canGoBack if navigator hasn't finished mounting ([c8ac5fa](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c8ac5fab61cf127985431075a3c59c1f3dfa42da))
+* throw a descriptive error if navigation object hasn't initialized ([b6accd0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/b6accd03f69dd438e595094d8bf8599cc12e71ac))
+* update links in error messages ([f964200](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/f964200b0dcbc19d5f88ad2dd1eb8e5576973497))
+
+
+
+
+
+## [5.1.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.1...@react-navigation/core@5.1.2) (2020-02-12)
+
+
+### Bug Fixes
+
+* fix false positives for circular object check ([030c63c](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/030c63c89fe447aa484b767831c8f8e26e90431c)), closes [#6827](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6827)
+* static container memo check ([#6825](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6825)) ([2bf0958](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2bf09585021470f500d967e9242836840efe970f))
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.0...@react-navigation/core@5.1.1) (2020-02-11)
+
+
+### Bug Fixes
+
+* don't cleanup state on switching navigator ([359ae1b](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/359ae1bfacec5ef880b3944f465c881aedb16767))
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.43...@react-navigation/core@5.1.0) (2020-02-10)
+
+
+### Bug Fixes
+
+* add some links in the error messages ([13b4e07](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/13b4e07348496f7cb516d625b44a6a7d310ef9af))
+
+
+### Features
+
+* support ignoring empty path strings ([#349](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/349)) ([61b1134](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/61b1134f90310390fe819622c1f33273fca0bd42))
+
+
+
+
+
+# [5.0.0-alpha.43](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.42...@react-navigation/core@5.0.0-alpha.43) (2020-02-04)
+
+
+### Bug Fixes
+
+* improve error message for unhandled action ([ca4a360](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ca4a36070a21c4fe86cb1cc55a4452dca293f215))
+
+
+### Features
+
+* add initialRouteName property to config ([#322](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/322)) ([4ca5cc6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/4ca5cc632992187f12870281e4cf4c7d1f799967))
+
+
+
+
+
+# [5.0.0-alpha.42](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.41...@react-navigation/core@5.0.0-alpha.42) (2020-02-04)
 
 **Note:** Version bump only for package @react-navigation/core
 
@@ -369,7 +445,131 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.31) (2020-01-09)
+# [5.0.0-alpha.41](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.40...@react-navigation/core@5.0.0-alpha.41) (2020-02-03)
+
+
+### Bug Fixes
+
+* ignore circular references when checking serializable ([e5063b9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/e5063b93398350511f3fd2ef48425559f871781f))
+
+
+
+
+
+# [5.0.0-alpha.40](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.40) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
+* tweak error messages for validation ([2243b45](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))
+
+
+### Features
+
+* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
+* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
+* integrate with history API on web ([5a3f835](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
+
+
+
+
+
+# [5.0.0-alpha.38](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.38) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
+* tweak error messages for validation ([2243b45](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))
+
+
+### Features
+
+* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
+* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
+* integrate with history API on web ([5a3f835](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
+
+
+
+
+
+# [5.0.0-alpha.37](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.36...@react-navigation/core@5.0.0-alpha.37) (2020-01-24)
+
+
+### Bug Fixes
+
+* add error message when trying to use v4 API with v5 ([179e807](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/179e807a64a7d031d671c2c4b12edaee3c3440c5))
+* validate screen configs ([2f1f0af](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2f1f0af862ef8625da4c2aaf463d45fe17a4ac88))
+* warn if non-serializable values found in state ([5751e7f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5751e7f97a1731a5c71862174dfd931b6ffe13e2))
+
+
+
+
+
+# [5.0.0-alpha.36](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.35...@react-navigation/core@5.0.0-alpha.36) (2020-01-23)
+
+
+### Bug Fixes
+
+* disallow canPreventDefault option if not present in types ([d9059b5](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/d9059b56d8a89b39fec43d38a7b0514d41c0b550))
+* don't add ?if query params is empty ([3bf5ddd](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3bf5ddde2ac1ba45f1123752d37532175f18a3d9))
+* fix types for useFocusEffect ([23ab45a](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/23ab45aceb72cc27ebfacdedfbf60d0c540fecfb)), closes [#270](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/270)
+* make sure that we return correct value if selector changes ([6c2acbb](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/6c2acbb304a9f11789b45a410b6c41911eca3947)), closes [/github.com/react-navigation/navigation-ex/pull/273#issuecomment-576581225](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/issuecomment-576581225)
+* use protected for private value store ([ad4eaff](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ad4eaff1e99e4f9fca3a193764fd0f26efa41341))
+
+
+### Features
+
+* add useNavigationState hook ([32a2206](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/32a2206513bc084d8da07187385d11db498f1e2a))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+* support nested config in getPathFromState ([#266](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/266)) ([1e53821](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/1e53821d52be182369add07a86c72221c5dba53e))
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.34...@react-navigation/core@5.0.0-alpha.35) (2020-01-14)
+
+
+### Bug Fixes
+
+* fix intellisense for CompositeNavigationProp ([a912323](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/a912323c1dfa0c3564ca82c448a86f85d1658f7f))
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.33...@react-navigation/core@5.0.0-alpha.34) (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/core/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.32...@react-navigation/core@5.0.0-alpha.33) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.32) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.0.0-alpha.31](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.31) (2020-01-09)
 
 **Note:** Version bump only for package @react-navigation/core
 

packages/core/package.json

@@ -1,25 +1,31 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.4.0",
+  "version": "5.12.1",
   "keywords": [
     "react",
     "react-native",
     "react-navigation"
   ],
   "license": "MIT",
-  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/core",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/core"
+  },
   "bugs": {
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
   "homepage": "https://reactnavigation.org",
   "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"
+    "lib",
+    "!**/__tests__"
   ],
   "publishConfig": {
     "access": "public"
@@ -29,23 +35,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.4.2",
-    "escape-string-regexp": "^2.0.0",
-    "nanoid": "^3.0.2",
-    "query-string": "^6.12.0",
+    "@react-navigation/routers": "^5.4.9",
+    "escape-string-regexp": "^4.0.0",
+    "nanoid": "^3.1.9",
+    "query-string": "^6.13.1",
     "react-is": "^16.13.0",
     "use-subscription": "^1.4.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@types/react": "^16.9.23",
+    "@react-native-community/bob": "^0.15.1",
+    "@types/react": "^16.9.36",
     "@types/react-is": "^16.7.1",
     "@types/use-subscription": "^1.0.0",
-    "del-cli": "^3.0.0",
+    "del-cli": "^3.0.1",
     "react": "~16.9.0",
-    "react-native-testing-library": "^1.12.0",
+    "react-native-testing-library": "^2.1.0",
     "react-test-renderer": "~16.13.1",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "react": "*"

packages/core/src/BaseNavigationContainer.tsx

@@ -9,54 +9,46 @@ import {
 } from '@react-navigation/routers';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationBuilderContext from './NavigationBuilderContext';
+import NavigationStateContext from './NavigationStateContext';
+import UnhandledActionContext from './UnhandledActionContext';
 import { ScheduleUpdateContext } from './useScheduleUpdate';
-import useFocusedListeners from './useFocusedListeners';
-import useDevTools from './useDevTools';
-import useStateGetters from './useStateGetters';
+import useChildListeners from './useChildListeners';
+import useKeyedChildListeners from './useKeyedChildListeners';
+import useOptionsGetters from './useOptionsGetters';
 import useEventEmitter from './useEventEmitter';
 import useSyncState from './useSyncState';
-import isSerializable from './isSerializable';
-
-import { NavigationContainerRef, NavigationContainerProps } from './types';
+import checkSerializable from './checkSerializable';
+import type {
+  NavigationContainerEventMap,
+  NavigationContainerRef,
+  NavigationContainerProps,
+} from './types';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
-const DEVTOOLS_CONFIG_KEY =
-  'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED';
-
-const MISSING_CONTEXT_ERROR =
-  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
-
 const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
 
-export const NavigationStateContext = React.createContext<{
-  isDefault?: true;
-  state?: NavigationState | PartialState<NavigationState>;
-  getKey: () => string | undefined;
-  setKey: (key: string) => void;
-  getState: () => NavigationState | PartialState<NavigationState> | undefined;
-  setState: (
-    state: NavigationState | PartialState<NavigationState> | undefined
-  ) => void;
-}>({
-  isDefault: true,
+const serializableWarnings: string[] = [];
 
-  get getKey(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setKey(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get getState(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setState(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-});
-
-let hasWarnedForSerialization = false;
+try {
+  /**
+   * Migration instructions for removal of devtools from core
+   */
+  Object.defineProperty(
+    global,
+    'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED',
+    {
+      set(_) {
+        console.warn(
+          "Redux devtools extension integration can be enabled with the '@react-navigation/devtools' package. For more details, see https://reactnavigation.org/docs/devtools"
+        );
+      },
+    }
+  );
+} catch (e) {
+  // Ignore
+}
 
 /**
  * Remove `key` and `routeNames` from the state objects recursively to get partial state.
@@ -73,7 +65,6 @@ const getPartialState = (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { key, routeNames, ...partialState } = state;
 
-  // @ts-ignore
   return {
     ...partialState,
     stale: true,
@@ -127,7 +118,6 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     const isFirstMountRef = React.useRef<boolean>(true);
-    const skipTrackingRef = React.useRef<boolean>(false);
 
     const navigatorKeyRef = React.useRef<string | undefined>();
 
@@ -137,46 +127,26 @@ const BaseNavigationContainer = React.forwardRef(
       navigatorKeyRef.current = key;
     }, []);
 
-    const reset = React.useCallback(
-      (state: NavigationState) => {
-        skipTrackingRef.current = true;
-        setState(state);
-      },
-      [setState]
-    );
+    const { listeners, addListener } = useChildListeners();
 
-    const { trackState, trackAction } = useDevTools({
-      enabled:
-        // @ts-ignore
-        DEVTOOLS_CONFIG_KEY in global ? global[DEVTOOLS_CONFIG_KEY] : false,
-      name: '@react-navigation',
-      reset,
-      state,
-    });
-
-    const {
-      listeners,
-      addListener: addFocusedListener,
-    } = useFocusedListeners();
-
-    const { getStateForRoute, addStateGetter } = useStateGetters();
+    const { keyedListeners, addKeyedListener } = useKeyedChildListeners();
 
     const dispatch = (
       action: NavigationAction | ((state: NavigationState) => NavigationAction)
     ) => {
-      if (listeners[0] == null) {
+      if (listeners.focus[0] == null) {
         throw new Error(NOT_INITIALIZED_ERROR);
       }
 
-      listeners[0]((navigation) => navigation.dispatch(action));
+      listeners.focus[0]((navigation) => navigation.dispatch(action));
     };
 
     const canGoBack = () => {
-      if (listeners[0] == null) {
+      if (listeners.focus[0] == null) {
         return false;
       }
 
-      const { result, handled } = listeners[0]((navigation) =>
+      const { result, handled } = listeners.focus[0]((navigation) =>
         navigation.canGoBack()
       );
 
@@ -189,17 +159,29 @@ const BaseNavigationContainer = React.forwardRef(
 
     const resetRoot = React.useCallback(
       (state?: PartialState<NavigationState> | NavigationState) => {
-        trackAction('@@RESET_ROOT');
         setState(state);
       },
-      [setState, trackAction]
+      [setState]
     );
 
     const getRootState = React.useCallback(() => {
-      return getStateForRoute('root');
-    }, [getStateForRoute]);
+      return keyedListeners.getState.root?.();
+    }, [keyedListeners.getState]);
 
-    const emitter = useEventEmitter();
+    const getCurrentRoute = React.useCallback(() => {
+      let state = getRootState();
+      if (state === undefined) {
+        return undefined;
+      }
+      while (state.routes[state.index].state !== undefined) {
+        state = state.routes[state.index].state as NavigationState;
+      }
+      return state.routes[state.index];
+    }, [getRootState]);
+
+    const emitter = useEventEmitter<NavigationContainerEventMap>();
+
+    const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({});
 
     React.useImperativeHandle(ref, () => ({
       ...(Object.keys(CommonActions) as (keyof typeof CommonActions)[]).reduce<
@@ -208,7 +190,7 @@ const BaseNavigationContainer = React.forwardRef(
         acc[name] = (...args: any[]) =>
           dispatch(
             CommonActions[name](
-              // @ts-ignore
+              // @ts-expect-error: we can't know the type statically
               ...args
             )
           );
@@ -221,15 +203,43 @@ const BaseNavigationContainer = React.forwardRef(
       getRootState,
       dangerouslyGetState: () => state,
       dangerouslyGetParent: () => undefined,
+      getCurrentRoute,
+      getCurrentOptions,
     }));
 
+    const onDispatchAction = React.useCallback(
+      (action: NavigationAction, noop: boolean) => {
+        emitter.emit({ type: '__unsafe_action__', data: { action, noop } });
+      },
+      [emitter]
+    );
+
+    const lastEmittedOptionsRef = React.useRef<object | undefined>();
+
+    const onOptionsChange = React.useCallback(
+      (options) => {
+        if (lastEmittedOptionsRef.current === options) {
+          return;
+        }
+
+        lastEmittedOptionsRef.current = options;
+
+        emitter.emit({
+          type: 'options',
+          data: { options },
+        });
+      },
+      [emitter]
+    );
+
     const builderContext = React.useMemo(
       () => ({
-        addFocusedListener,
-        addStateGetter,
-        trackAction,
+        addListener,
+        addKeyedListener,
+        onDispatchAction,
+        onOptionsChange,
       }),
-      [addFocusedListener, trackAction, addStateGetter]
+      [addListener, addKeyedListener, onDispatchAction, onOptionsChange]
     );
 
     const scheduleContext = React.useMemo(
@@ -237,6 +247,10 @@ const BaseNavigationContainer = React.forwardRef(
       [scheduleUpdate, flushUpdates]
     );
 
+    const isInitialRef = React.useRef(true);
+
+    const getIsInitial = React.useCallback(() => isInitialRef.current, []);
+
     const context = React.useMemo(
       () => ({
         state,
@@ -244,48 +258,137 @@ const BaseNavigationContainer = React.forwardRef(
         setState,
         getKey,
         setKey,
+        getIsInitial,
+        addOptionsGetter,
       }),
-      [getKey, getState, setKey, setState, state]
+      [
+        state,
+        getState,
+        setState,
+        getKey,
+        setKey,
+        getIsInitial,
+        addOptionsGetter,
+      ]
     );
 
+    const onStateChangeRef = React.useRef(onStateChange);
+
+    React.useEffect(() => {
+      isInitialRef.current = false;
+      onStateChangeRef.current = onStateChange;
+    });
+
     React.useEffect(() => {
       if (process.env.NODE_ENV !== 'production') {
-        if (
-          state !== undefined &&
-          !isSerializable(state) &&
-          !hasWarnedForSerialization
-        ) {
-          hasWarnedForSerialization = true;
+        if (state !== undefined) {
+          const result = checkSerializable(state);
 
-          console.warn(
-            "Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details."
-          );
+          if (!result.serializable) {
+            const { location, reason } = result;
+
+            let path = '';
+            let pointer: Record<any, any> = state;
+            let params = false;
+
+            for (let i = 0; i < location.length; i++) {
+              const curr = location[i];
+              const prev = location[i - 1];
+
+              pointer = pointer[curr];
+
+              if (!params && curr === 'state') {
+                continue;
+              } else if (!params && curr === 'routes') {
+                if (path) {
+                  path += ' > ';
+                }
+              } else if (
+                !params &&
+                typeof curr === 'number' &&
+                prev === 'routes'
+              ) {
+                path += pointer?.name;
+              } else if (!params) {
+                path += ` > ${curr}`;
+                params = true;
+              } else {
+                if (typeof curr === 'number' || /^[0-9]+$/.test(curr)) {
+                  path += `[${curr}]`;
+                } else if (/^[a-z$_]+$/i.test(curr)) {
+                  path += `.${curr}`;
+                } else {
+                  path += `[${JSON.stringify(curr)}]`;
+                }
+              }
+            }
+
+            const message = `Non-serializable values were found in the navigation state. Check:\n\n${path} (${reason})\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`;
+
+            if (!serializableWarnings.includes(message)) {
+              serializableWarnings.push(message);
+              console.warn(message);
+            }
+          }
         }
       }
 
-      emitter.emit({
-        type: 'state',
-        data: { state },
-      });
+      emitter.emit({ type: 'state', data: { state } });
 
-      if (skipTrackingRef.current) {
-        skipTrackingRef.current = false;
-      } else {
-        trackState(getRootState);
-      }
-
-      if (!isFirstMountRef.current && onStateChange) {
-        onStateChange(getRootState());
+      if (!isFirstMountRef.current && onStateChangeRef.current) {
+        onStateChangeRef.current(getRootState());
       }
 
       isFirstMountRef.current = false;
-    }, [onStateChange, trackState, getRootState, emitter, state]);
+    }, [getRootState, emitter, state]);
+
+    const onUnhandledAction = React.useCallback((action: NavigationAction) => {
+      if (process.env.NODE_ENV === 'production') {
+        return;
+      }
+
+      const payload: Record<string, any> | undefined = action.payload;
+
+      let message = `The action '${action.type}'${
+        payload ? ` with payload ${JSON.stringify(action.payload)}` : ''
+      } was not handled by any navigator.`;
+
+      switch (action.type) {
+        case 'NAVIGATE':
+        case 'PUSH':
+        case 'REPLACE':
+        case 'JUMP_TO':
+          if (payload?.name) {
+            message += `\n\nDo you have a screen named '${payload.name}'?\n\nIf you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.`;
+          } else {
+            message += `\n\nYou need to pass the name of the screen to navigate to.\n\nSee https://reactnavigation.org/docs/navigation-actions for usage.`;
+          }
+
+          break;
+        case 'GO_BACK':
+        case 'POP':
+        case 'POP_TO_TOP':
+          message += `\n\nIs there any screen to go back to?`;
+          break;
+        case 'OPEN_DRAWER':
+        case 'CLOSE_DRAWER':
+        case 'TOGGLE_DRAWER':
+          message += `\n\nIs your screen inside a Drawer navigator?`;
+          break;
+      }
+
+      message += `\n\nThis is a development-only warning and won't be shown in production.`;
+
+      console.error(message);
+    }, []);
 
     return (
       <ScheduleUpdateContext.Provider value={scheduleContext}>
         <NavigationBuilderContext.Provider value={builderContext}>
           <NavigationStateContext.Provider value={context}>
-            <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+            <UnhandledActionContext.Provider value={onUnhandledAction}>
+              <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+            </UnhandledActionContext.Provider>
           </NavigationStateContext.Provider>
         </NavigationBuilderContext.Provider>
       </ScheduleUpdateContext.Provider>

packages/core/src/CurrentRenderContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+/**
+ * Context which holds the values for the current navigation tree.
+ * Intended for use in SSR. This is not safe to use on the client.
+ */
+const CurrentRenderContext = React.createContext<
+  { options?: object } | undefined
+>(undefined);
+
+export default CurrentRenderContext;

packages/core/src/NavigationBuilderContext.tsx

@@ -1,10 +1,31 @@
 import * as React from 'react';
-import {
+import type {
   NavigationAction,
   NavigationState,
   ParamListBase,
 } from '@react-navigation/routers';
-import { NavigationHelpers } from './types';
+import type { NavigationHelpers } from './types';
+
+export type ListenerMap = {
+  action: ChildActionListener;
+  focus: FocusedNavigationListener;
+};
+
+export type KeyedListenerMap = {
+  getState: GetStateListener;
+  beforeRemove: ChildBeforeRemoveListener;
+};
+
+export type AddListener = <T extends keyof ListenerMap>(
+  type: T,
+  listener: ListenerMap[T]
+) => void;
+
+export type AddKeyedListener = <T extends keyof KeyedListenerMap>(
+  type: T,
+  key: string,
+  listener: KeyedListenerMap[T]
+) => void;
 
 export type ChildActionListener = (
   action: NavigationAction,
@@ -19,7 +40,9 @@ export type FocusedNavigationListener = <T>(
   callback: FocusedNavigationCallback<T>
 ) => { handled: boolean; result: T };
 
-export type NavigatorStateGetter = () => NavigationState;
+export type GetStateListener = () => NavigationState;
+
+export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
 
 /**
  * Context which holds the required helpers needed to build nested navigators.
@@ -29,13 +52,14 @@ const NavigationBuilderContext = React.createContext<{
     action: NavigationAction,
     visitedNavigators?: Set<string>
   ) => boolean;
-  addActionListener?: (listener: ChildActionListener) => void;
-  addFocusedListener?: (listener: FocusedNavigationListener) => void;
+  addListener?: AddListener;
+  addKeyedListener?: AddKeyedListener;
   onRouteFocus?: (key: string) => void;
-  addStateGetter?: (key: string, getter: NavigatorStateGetter) => void;
-  trackAction: (action: NavigationAction) => void;
+  onDispatchAction: (action: NavigationAction, noop: boolean) => void;
+  onOptionsChange: (options: object) => void;
 }>({
-  trackAction: () => undefined,
+  onDispatchAction: () => undefined,
+  onOptionsChange: () => undefined,
 });
 
 export default NavigationBuilderContext;

packages/core/src/NavigationContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/routers';
-import { NavigationProp } from './types';
+import type { ParamListBase } from '@react-navigation/routers';
+import type { NavigationProp } from './types';
 
 /**
  * Context which holds the navigation prop for a screen.

packages/core/src/NavigationHelpersContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/routers';
-import { NavigationHelpers } from './types';
+import type { ParamListBase } from '@react-navigation/routers';
+import type { NavigationHelpers } from './types';
 
 /**
  * Context which holds the navigation helpers of the parent navigator.

packages/core/src/NavigationRouteContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Route } from '@react-navigation/routers';
+import type { Route } from '@react-navigation/routers';
 
 /**
  * Context which holds the route prop for a screen.

packages/core/src/NavigationStateContext.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+const MISSING_CONTEXT_ERROR =
+  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
+
+export default React.createContext<{
+  isDefault?: true;
+  state?: NavigationState | PartialState<NavigationState>;
+  getKey: () => string | undefined;
+  setKey: (key: string) => void;
+  getState: () => NavigationState | PartialState<NavigationState> | undefined;
+  setState: (
+    state: NavigationState | PartialState<NavigationState> | undefined
+  ) => void;
+  getIsInitial: () => boolean;
+  addOptionsGetter?: (
+    key: string,
+    getter: () => object | undefined | null
+  ) => void;
+}>({
+  isDefault: true,
+
+  get getKey(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get setKey(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get getState(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get setState(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get getIsInitial(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+});

packages/core/src/SceneView.tsx

@@ -1,20 +1,19 @@
 import * as React from 'react';
-import {
+import type {
   Route,
   ParamListBase,
   NavigationState,
   PartialState,
 } from '@react-navigation/routers';
-import { NavigationStateContext } from './BaseNavigationContainer';
-import NavigationContext from './NavigationContext';
-import NavigationRouteContext from './NavigationRouteContext';
+import NavigationStateContext from './NavigationStateContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
-import { NavigationProp, RouteConfig, EventMapBase } from './types';
+import useOptionsGetters from './useOptionsGetters';
+import type { NavigationProp, RouteConfig, EventMapBase } from './types';
 
 type Props<
   State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
   EventMap extends EventMapBase
 > = {
   screen: RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>;
@@ -24,6 +23,7 @@ type Props<
   };
   getState: () => State;
   setState: (state: State) => void;
+  options: object;
 };
 
 /**
@@ -32,7 +32,7 @@ type Props<
  */
 export default function SceneView<
   State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
   EventMap extends EventMapBase
 >({
   screen,
@@ -40,11 +40,17 @@ export default function SceneView<
   navigation,
   getState,
   setState,
+  options,
 }: Props<State, ScreenOptions, EventMap>) {
   const navigatorKeyRef = React.useRef<string | undefined>();
-
   const getKey = React.useCallback(() => navigatorKeyRef.current, []);
 
+  const { addOptionsGetter } = useOptionsGetters({
+    key: route.key,
+    options,
+    navigation,
+  });
+
   const setKey = React.useCallback((key: string) => {
     navigatorKeyRef.current = key;
   }, []);
@@ -70,6 +76,14 @@ export default function SceneView<
     [getState, route.key, setState]
   );
 
+  const isInitialRef = React.useRef(true);
+
+  React.useEffect(() => {
+    isInitialRef.current = false;
+  });
+
+  const getIsInitial = React.useCallback(() => isInitialRef.current, []);
+
   const context = React.useMemo(
     () => ({
       state: route.state,
@@ -77,33 +91,40 @@ export default function SceneView<
       setState: setCurrentState,
       getKey,
       setKey,
+      getIsInitial,
+      addOptionsGetter,
     }),
-    [getCurrentState, getKey, route.state, setCurrentState, setKey]
+    [
+      route.state,
+      getCurrentState,
+      setCurrentState,
+      getKey,
+      setKey,
+      getIsInitial,
+      addOptionsGetter,
+    ]
   );
 
+  const ScreenComponent = screen.getComponent
+    ? screen.getComponent()
+    : screen.component;
+
   return (
-    <NavigationContext.Provider value={navigation}>
-      <NavigationRouteContext.Provider value={route}>
-        <NavigationStateContext.Provider value={context}>
-          <EnsureSingleNavigator>
-            <StaticContainer
-              name={screen.name}
-              // @ts-ignore
-              render={screen.component || screen.children}
-              navigation={navigation}
-              route={route}
-            >
-              {'component' in screen && screen.component !== undefined ? (
-                // @ts-ignore
-                <screen.component navigation={navigation} route={route} />
-              ) : 'children' in screen && screen.children !== undefined ? (
-                // @ts-ignore
-                screen.children({ navigation, route })
-              ) : null}
-            </StaticContainer>
-          </EnsureSingleNavigator>
-        </NavigationStateContext.Provider>
-      </NavigationRouteContext.Provider>
-    </NavigationContext.Provider>
+    <NavigationStateContext.Provider value={context}>
+      <EnsureSingleNavigator>
+        <StaticContainer
+          name={screen.name}
+          render={ScreenComponent || screen.children}
+          navigation={navigation}
+          route={route}
+        >
+          {ScreenComponent !== undefined ? (
+            <ScreenComponent navigation={navigation} route={route} />
+          ) : screen.children !== undefined ? (
+            screen.children({ navigation, route })
+          ) : null}
+        </StaticContainer>
+      </EnsureSingleNavigator>
+    </NavigationStateContext.Provider>
   );
 }

packages/core/src/Screen.tsx

@@ -1,5 +1,5 @@
-import { ParamListBase, NavigationState } from '@react-navigation/routers';
-import { RouteConfig, EventMapBase } from './types';
+import type { ParamListBase, NavigationState } from '@react-navigation/routers';
+import type { RouteConfig, EventMapBase } from './types';
 
 /**
  * Empty component used for specifying route configuration.
@@ -8,7 +8,7 @@ export default function Screen<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList,
   State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
   EventMap extends EventMapBase
 >(_: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>) {
   /* istanbul ignore next */

packages/core/src/UnhandledActionContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { NavigationAction } from '@react-navigation/routers';
+
+const UnhandledActionContext = React.createContext<
+  ((action: NavigationAction) => void) | undefined
+>(undefined);
+
+export default UnhandledActionContext;

packages/core/src/__tests__/BaseNavigationContainer.test.tsx

@@ -4,14 +4,15 @@ import {
   DefaultRouterOptions,
   NavigationState,
   Router,
+  StackRouter,
+  TabRouter,
 } from '@react-navigation/routers';
-import BaseNavigationContainer, {
-  NavigationStateContext,
-} from '../BaseNavigationContainer';
+import BaseNavigationContainer from '../BaseNavigationContainer';
+import NavigationStateContext from '../NavigationStateContext';
 import MockRouter, { MockActions } from './__fixtures__/MockRouter';
 import useNavigationBuilder from '../useNavigationBuilder';
 import Screen from '../Screen';
-import { NavigationContainerRef } from '../types';
+import type { NavigationContainerRef } from '../types';
 
 it('throws when getState is accessed without a container', () => {
   expect.assertions(1);
@@ -365,6 +366,7 @@ it('handles getRootState', () => {
     type: 'test',
   });
 });
+
 it('emits state events when the state changes', () => {
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -400,6 +402,7 @@ it('emits state events when the state changes', () => {
     ref.current?.navigate('bar');
   });
 
+  expect(listener).toBeCalledTimes(1);
   expect(listener.mock.calls[0][0].data.state).toEqual({
     type: 'test',
     stale: false,
@@ -417,6 +420,7 @@ it('emits state events when the state changes', () => {
     ref.current?.navigate('baz', { answer: 42 });
   });
 
+  expect(listener).toBeCalledTimes(2);
   expect(listener.mock.calls[1][0].data.state).toEqual({
     type: 'test',
     stale: false,
@@ -431,6 +435,245 @@ it('emits state events when the state changes', () => {
   });
 });
 
+it('emits state events when new navigator mounts', () => {
+  jest.useFakeTimers();
+
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const NestedNavigator = () => {
+    const [isRendered, setIsRendered] = React.useState(false);
+
+    React.useEffect(() => {
+      setTimeout(() => setIsRendered(true), 100);
+    }, []);
+
+    if (!isRendered) {
+      return null;
+    }
+
+    return (
+      <TestNavigator>
+        <Screen name="baz">{() => null}</Screen>
+        <Screen name="bax">{() => null}</Screen>
+      </TestNavigator>
+    );
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar" component={NestedNavigator} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element).update(element);
+
+  const listener = jest.fn();
+
+  ref.current?.addListener('state', listener);
+
+  expect(listener).not.toHaveBeenCalled();
+  expect(onStateChange).not.toHaveBeenCalled();
+
+  act(() => {
+    jest.runAllTimers();
+  });
+
+  const resultState = {
+    stale: false,
+    type: 'test',
+    index: 0,
+    key: '10',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      {
+        key: 'bar',
+        name: 'bar',
+        state: {
+          stale: false,
+          type: 'test',
+          index: 0,
+          key: '11',
+          routeNames: ['baz', 'bax'],
+          routes: [
+            { key: 'baz', name: 'baz' },
+            { key: 'bax', name: 'bax' },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(listener).toBeCalledTimes(1);
+  expect(listener.mock.calls[0][0].data.state).toEqual(resultState);
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).lastCalledWith(resultState);
+});
+
+it('emits option events when options change with tab router', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(TabRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo" options={{ x: 1 }}>
+          {() => null}
+        </Screen>
+        <Screen name="bar" options={{ y: 2 }}>
+          {() => null}
+        </Screen>
+        <Screen name="baz" options={{ v: 3 }}>
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" options={{ g: 5 }}>
+                {() => null}
+              </Screen>
+              <Screen name="quxx" options={{ h: 9 }}>
+                {() => null}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const listener = jest.fn();
+
+  render(element).update(element);
+  ref.current?.addListener('options', listener);
+
+  act(() => {
+    ref.current?.navigate('bar');
+  });
+
+  expect(listener).toBeCalledTimes(1);
+  expect(listener.mock.calls[0][0].data.options).toEqual({ y: 2 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ y: 2 });
+
+  ref.current?.removeListener('options', listener);
+
+  const listener2 = jest.fn();
+
+  ref.current?.addListener('options', listener2);
+
+  act(() => {
+    ref.current?.navigate('baz');
+  });
+
+  expect(listener2).toBeCalledTimes(1);
+  expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ g: 5 });
+
+  act(() => {
+    ref.current?.navigate('quxx');
+  });
+
+  expect(listener2).toBeCalledTimes(2);
+  expect(listener2.mock.calls[1][0].data.options).toEqual({ h: 9 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ h: 9 });
+});
+
+it('emits option events when options change with stack router', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo" options={{ x: 1 }}>
+          {() => null}
+        </Screen>
+        <Screen name="bar" options={{ y: 2 }}>
+          {() => null}
+        </Screen>
+        <Screen name="baz" options={{ v: 3 }}>
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" options={{ g: 5 }}>
+                {() => null}
+              </Screen>
+              <Screen name="quxx" options={{ h: 9 }}>
+                {() => null}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const listener = jest.fn();
+
+  render(element).update(element);
+  ref.current?.addListener('options', listener);
+
+  act(() => {
+    ref.current?.navigate('bar');
+  });
+
+  expect(listener).toBeCalledTimes(1);
+  expect(listener.mock.calls[0][0].data.options).toEqual({ y: 2 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ y: 2 });
+
+  ref.current?.removeListener('options', listener);
+
+  const listener2 = jest.fn();
+
+  ref.current?.addListener('options', listener2);
+
+  act(() => {
+    ref.current?.navigate('baz');
+  });
+
+  expect(listener2).toBeCalledTimes(1);
+  expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ g: 5 });
+
+  act(() => {
+    ref.current?.navigate('quxx');
+  });
+
+  expect(listener2).toBeCalledTimes(2);
+  expect(listener2.mock.calls[1][0].data.options).toEqual({ h: 9 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ h: 9 });
+});
+
 it('throws if there is no navigator rendered', () => {
   expect.assertions(1);
 

packages/core/src/__tests__/checkSerializable.test.tsx

@@ -1,8 +1,8 @@
-import isSerializable from '../isSerializable';
+import checkSerializable from '../checkSerializable';
 
 it('returns true for serializable object', () => {
   expect(
-    isSerializable({
+    checkSerializable({
       index: 0,
       key: '7',
       routeNames: ['foo', 'bar'],
@@ -22,12 +22,12 @@ it('returns true for serializable object', () => {
         },
       ],
     })
-  ).toBe(true);
+  ).toEqual({ serializable: true });
 });
 
 it('returns false for non-serializable object', () => {
   expect(
-    isSerializable({
+    checkSerializable({
       index: 0,
       key: '7',
       routeNames: ['foo', 'bar'],
@@ -47,23 +47,56 @@ it('returns false for non-serializable object', () => {
         },
       ],
     })
-  ).toBe(false);
+  ).toEqual({
+    serializable: false,
+    location: ['routes', 0, 'state', 'routes', 0, 'params'],
+    reason: 'Function',
+  });
+
+  expect(
+    checkSerializable({
+      index: 0,
+      key: '7',
+      routeNames: ['foo', 'bar'],
+      routes: [
+        {
+          key: 'foo',
+          name: 'foo',
+          state: {
+            index: 0,
+            key: '8',
+            routeNames: ['qux', 'lex'],
+            routes: [
+              { key: 'qux', name: 'qux', params: { foo: Symbol('test') } },
+              { key: 'lex', name: 'lex' },
+            ],
+          },
+        },
+      ],
+    })
+  ).toEqual({
+    serializable: false,
+    location: ['routes', 0, 'state', 'routes', 0, 'params', 'foo'],
+    reason: 'Symbol(test)',
+  });
 });
 
 it('returns false for circular references', () => {
-  const x = {
+  const x: any = {
     a: 1,
     b: { b1: 1 },
   };
 
-  // @ts-ignore
   x.b.b2 = x;
-  // @ts-ignore
   x.c = x.b;
 
-  expect(isSerializable(x)).toBe(false);
+  expect(checkSerializable(x)).toEqual({
+    serializable: false,
+    location: ['b', 'b2'],
+    reason: 'Circular reference',
+  });
 
-  const y = [
+  const y: any = [
     {
       label: 'home',
       children: [{ label: 'product' }],
@@ -71,29 +104,34 @@ it('returns false for circular references', () => {
     { label: 'about', extend: {} },
   ];
 
-  // @ts-ignore
   y[0].children[0].parent = y[0];
-  // @ts-ignore
   y[1].extend.home = y[0].children[0];
 
-  expect(isSerializable(y)).toBe(false);
+  expect(checkSerializable(y)).toEqual({
+    serializable: false,
+    location: [0, 'children', 0, 'parent'],
+    reason: 'Circular reference',
+  });
 
-  const z = {
+  const z: any = {
     name: 'sun',
     child: [{ name: 'flower' }],
   };
 
-  // @ts-ignore
   z.child[0].parent = z;
 
-  expect(isSerializable(z)).toBe(false);
+  expect(checkSerializable(z)).toEqual({
+    serializable: false,
+    location: ['child', 0, 'parent'],
+    reason: 'Circular reference',
+  });
 });
 
 it("doesn't fail if same object used multiple times", () => {
   const o = { foo: 'bar' };
 
   expect(
-    isSerializable({
+    checkSerializable({
       baz: 'bax',
       first: o,
       second: o,
@@ -101,5 +139,5 @@ it("doesn't fail if same object used multiple times", () => {
         b: o,
       },
     })
-  ).toBe(true);
+  ).toEqual({ serializable: true });
 });

packages/core/src/__tests__/createNavigatorFactory.test.tsx

@@ -5,7 +5,7 @@ it('throws descriptive error if an argument is passed', () => {
 
   expect(() => createDummyNavigator()).not.toThrowError();
 
-  // @ts-ignore
+  // @ts-expect-error: we're explicitly passing invalid argument
   expect(() => createDummyNavigator({})).toThrowError(
     "Creating a navigator doesn't take an argument."
   );

packages/core/src/__tests__/getFocusedRouteNameFromRoute.test.tsx

@@ -0,0 +1,68 @@
+import getFocusedRouteNameFromRoute from '../getFocusedRouteNameFromRoute';
+
+it('gets undefined if there is no nested state', () => {
+  expect(getFocusedRouteNameFromRoute({ name: 'Home' })).toBe(undefined);
+});
+
+it('gets focused route name from nested state', () => {
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        routes: [{ name: 'Article' }],
+      },
+    })
+  ).toBe('Article');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        index: 1,
+        routes: [{ name: 'Article' }, { name: 'Chat' }, { name: 'Album' }],
+      },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        routes: [{ name: 'Article' }, { name: 'Chat' }],
+      },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        type: 'tab',
+        routes: [{ name: 'Article' }, { name: 'Chat' }],
+      },
+    })
+  ).toBe('Article');
+});
+
+it('gets nested screen in params if present', () => {
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      params: { screen: 'Chat' },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      params: { screen: 'Chat', initial: false },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      params: { screen: {} },
+    })
+  ).toBe(undefined);
+});

packages/core/src/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import { NavigationState } from '@react-navigation/routers';
+import type { NavigationState } from '@react-navigation/routers';
 import Screen from '../Screen';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigation from '../useNavigation';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
-import { NavigationContainerRef } from '../types';
+import type { NavigationContainerRef } from '../types';
 
 beforeEach(() => (MockRouterKey.current = 0));
 
@@ -75,7 +75,7 @@ it("doesn't crash when initialState is null", () => {
   const TestScreen = () => null;
 
   const element = (
-    // @ts-ignore
+    // @ts-expect-error: we're explicitly passing null for state
     <BaseNavigationContainer initialState={null}>
       <TestNavigator>
         <Screen name="foo" component={TestScreen} />
@@ -379,6 +379,8 @@ it("doesn't update state if action wasn't handled", () => {
 });
 
 it('cleans up state when the navigator unmounts', () => {
+  jest.useFakeTimers();
+
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
 
@@ -426,6 +428,8 @@ it('cleans up state when the navigator unmounts', () => {
     <BaseNavigationContainer onStateChange={onStateChange} children={null} />
   );
 
+  act(() => jest.runAllTimers());
+
   expect(onStateChange).toBeCalledTimes(2);
   expect(onStateChange).lastCalledWith(undefined);
 });
@@ -1399,6 +1403,7 @@ it('throws if both children and component are passed', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
+        {/* @ts-ignore */}
         <Screen name="foo" component={jest.fn()}>
           {jest.fn()}
         </Screen>
@@ -1411,6 +1416,48 @@ it('throws if both children and component are passed', () => {
   );
 });
 
+it('throws if both children and getComponent are passed', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Screen name="foo" getComponent={jest.fn()}>
+          {jest.fn()}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "Got both 'getComponent' and 'children' props for the screen 'foo'. You must pass only one of them."
+  );
+});
+
+it('throws if both component and getComponent are passed', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Screen name="foo" component={jest.fn()} getComponent={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "Got both 'component' and 'getComponent' props for the screen 'foo'. You must pass only one of them."
+  );
+});
+
 it('throws descriptive error for undefined screen component', () => {
   const TestNavigator = (props: any) => {
     useNavigationBuilder(MockRouter, props);
@@ -1426,7 +1473,7 @@ it('throws descriptive error for undefined screen component', () => {
   );
 
   expect(() => render(element).update(element)).toThrowError(
-    "Couldn't find a 'component' or 'children' prop for the screen 'foo'"
+    "Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'foo'"
   );
 });
 
@@ -1449,6 +1496,25 @@ it('throws descriptive error for invalid screen component', () => {
   );
 });
 
+it('throws descriptive error for invalid getComponent prop', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" getComponent={{} as any} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "Got an invalid value for 'getComponent' prop for the screen 'foo'. It must be a function returning a React Component."
+  );
+});
+
 it('throws descriptive error for invalid children', () => {
   const TestNavigator = (props: any) => {
     useNavigationBuilder(MockRouter, props);
@@ -1486,3 +1552,194 @@ it("doesn't throw if children is null", () => {
 
   expect(() => render(element).update(element)).not.toThrowError();
 });
+
+it('returns currently focused route with getCurrentRoute', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestScreen}
+                options={{ sample: 'data' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="xux" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentRoute()).toEqual({
+    key: 'bar-a',
+    name: 'bar-a',
+  });
+});
+
+it("returns focused screen's options with getCurrentOptions when focused screen is rendered", () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator
+              initialRouteName="bar-a"
+              screenOptions={() => ({ sample2: 'data' })}
+            >
+              <Screen
+                name="bar-a"
+                component={TestScreen}
+                options={{ sample: 'data' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestScreen}
+                options={{ sample3: 'data' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="xux" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample: 'data',
+    sample2: 'data',
+  });
+
+  act(() => navigation.current?.navigate('bar-b'));
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample2: 'data',
+    sample3: 'data',
+  });
+});
+
+it("returns focused screen's options with getCurrentOptions when all screens are rendered", () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return <>{state.routes.map((route) => descriptors[route.key].render())}</>;
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator
+              initialRouteName="bar-a"
+              screenOptions={() => ({ sample2: 'data' })}
+            >
+              <Screen
+                name="bar-a"
+                component={TestScreen}
+                options={{ sample: 'data' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestScreen}
+                options={{ sample3: 'data' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="xux" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample: 'data',
+    sample2: 'data',
+  });
+
+  act(() => navigation.current?.navigate('bar-b'));
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample2: 'data',
+    sample3: 'data',
+  });
+});
+
+it('does not throw if while getting current options with no options defined', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-b"
+                component={TestScreen}
+                options={{ wrongKey: true }}
+              />
+              <Screen name="bar-a" component={TestScreen} />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({});
+});
+
+it('does not throw if while getting current options with empty container', () => {
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation} children={null} />
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual(undefined);
+});

packages/core/src/__tests__/useDescriptors.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import {
+import type {
   DefaultRouterOptions,
   NavigationState,
   Router,

packages/core/src/__tests__/useEventEmitter.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import { Router, NavigationState } from '@react-navigation/routers';
+import type { Router, NavigationState } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';

packages/core/src/__tests__/useNavigationState.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import { NavigationState } from '@react-navigation/routers';
+import type { NavigationState } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigationState from '../useNavigationState';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/core/src/__tests__/useOnAction.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { render } from 'react-native-testing-library';
+import { act, render } from 'react-native-testing-library';
 import {
   Router,
   DefaultRouterOptions,
   NavigationState,
+  StackRouter,
 } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import BaseNavigationContainer from '../BaseNavigationContainer';
@@ -12,8 +13,19 @@ import MockRouter, {
   MockActions,
   MockRouterKey,
 } from './__fixtures__/MockRouter';
+import type { NavigationContainerRef } from '../types';
 
-beforeEach(() => (MockRouterKey.current = 0));
+jest.mock('nanoid/non-secure', () => {
+  const m = { nanoid: () => String(++m.__key), __key: 0 };
+
+  return m;
+});
+
+beforeEach(() => {
+  MockRouterKey.current = 0;
+
+  require('nanoid/non-secure').__key = 0;
+});
 
 it("lets parent handle the action if child didn't", () => {
   function CurrentRouter(options: DefaultRouterOptions) {
@@ -224,6 +236,147 @@ it("lets children handle the action if parent didn't", () => {
   });
 });
 
+it('action goes to correct navigator if target is specified', () => {
+  function CurrentTestRouter(options: DefaultRouterOptions) {
+    const CurrentMockRouter = MockRouter(options);
+    const TestRouter: Router<
+      NavigationState,
+      MockActions | { type: 'REVERSE' }
+    > = {
+      ...CurrentMockRouter,
+
+      shouldActionChangeFocus() {
+        return true;
+      },
+
+      getStateForAction(state, action, options) {
+        if (action.type === 'REVERSE') {
+          return {
+            ...state,
+            routes: state.routes.slice().reverse(),
+          };
+        }
+
+        return CurrentMockRouter.getStateForAction(state, action, options);
+      },
+    };
+    return TestRouter;
+  }
+
+  const ChildNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(
+      CurrentTestRouter,
+      props
+    );
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ParentNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(
+      CurrentTestRouter,
+      props
+    );
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const TestScreen = (props: any) => {
+    React.useEffect(() => {
+      props.navigation.dispatch({ type: 'REVERSE', target: '0' });
+    }, [props.navigation]);
+
+    return null;
+  };
+
+  const initialState = {
+    stale: false,
+    type: 'test',
+    index: 1,
+    key: '0',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          stale: false,
+          type: 'test',
+          index: 0,
+          key: '1',
+          routeNames: ['qux', 'lex'],
+          routes: [
+            { key: 'lex', name: 'lex' },
+            { key: 'qux', name: 'qux' },
+          ],
+        },
+      },
+      { key: 'bar', name: 'bar' },
+      { key: 'foo', name: 'foo' },
+    ],
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <BaseNavigationContainer
+      initialState={initialState}
+      onStateChange={onStateChange}
+    >
+      <ParentNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <ChildNavigator>
+              <Screen name="qux">{() => null}</Screen>
+              <Screen name="lex" component={TestScreen} />
+            </ChildNavigator>
+          )}
+        </Screen>
+      </ParentNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element).update(element);
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    stale: false,
+    type: 'test',
+    index: 1,
+    key: '0',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          stale: false,
+          type: 'test',
+          index: 0,
+          key: '1',
+          routeNames: ['qux', 'lex'],
+          routes: [
+            { key: 'lex', name: 'lex' },
+            { key: 'qux', name: 'qux' },
+          ],
+        },
+      },
+    ],
+  });
+});
+
 it("action doesn't bubble if target is specified", () => {
   const CurrentParentRouter = MockRouter;
 
@@ -379,3 +532,649 @@ it('logs error if no navigator handled the action', () => {
 
   spy.mockRestore();
 });
+
+it("prevents removing a screen with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar" component={TestScreen} />
+        <Screen name="baz">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('bar'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      { key: 'baz-5', name: 'baz' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(3);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = true;
+  shouldContinue = true;
+
+  act(() => ref.current?.navigate('bar'));
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(5);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
+
+it("prevents removing a child screen with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" component={TestScreen} />
+              <Screen name="lex">{() => null}</Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('bar'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-8', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-8', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(3);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = true;
+  shouldContinue = true;
+
+  act(() => ref.current?.navigate('bar'));
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(5);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
+
+it("prevents removing a grand child screen with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux">
+                {() => (
+                  <TestNavigator>
+                    <Screen name="lex" component={TestScreen} />
+                  </TestNavigator>
+                )}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('bar'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux'],
+          routes: [
+            {
+              key: 'qux-8',
+              name: 'qux',
+              state: {
+                index: 0,
+                key: 'stack-10',
+                routeNames: ['lex'],
+                routes: [{ key: 'lex-11', name: 'lex' }],
+                stale: false,
+                type: 'stack',
+              },
+            },
+          ],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux'],
+          routes: [
+            {
+              key: 'qux-8',
+              name: 'qux',
+              state: {
+                index: 0,
+                key: 'stack-10',
+                routeNames: ['lex'],
+                routes: [{ key: 'lex-11', name: 'lex' }],
+                stale: false,
+                type: 'stack',
+              },
+            },
+          ],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(3);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = true;
+  shouldContinue = true;
+
+  act(() => ref.current?.navigate('bar'));
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(5);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
+
+it("prevents removing by multiple screens with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = {
+    bar: jest.fn(),
+    baz: jest.fn(),
+    lex: jest.fn(),
+  };
+
+  const shouldPrevent = {
+    bar: true,
+    baz: true,
+    lex: true,
+  };
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          // @ts-expect-error: we should have the required mocks
+          onBeforeRemove[props.route.name]();
+          e.preventDefault();
+
+          // @ts-expect-error: we should have the required properties
+          if (!shouldPrevent[props.route.name]) {
+            props.navigation.dispatch(e.data.action);
+          }
+        }),
+      [props.navigation, props.route.name]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar" component={TestScreen} />
+        <Screen name="baz" component={TestScreen} />
+        <Screen name="bax">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux">
+                {() => (
+                  <TestNavigator>
+                    <Screen name="lex" component={TestScreen} />
+                  </TestNavigator>
+                )}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => {
+    ref.current?.navigate('bar');
+    ref.current?.navigate('baz');
+    ref.current?.navigate('bax');
+  });
+
+  const preventedState = {
+    index: 3,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz', 'bax'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      { key: 'baz-5', name: 'baz' },
+      {
+        key: 'bax-6',
+        name: 'bax',
+        state: {
+          index: 0,
+          key: 'stack-8',
+          routeNames: ['qux'],
+          routes: [
+            {
+              key: 'qux-9',
+              name: 'qux',
+              state: {
+                index: 0,
+                key: 'stack-11',
+                routeNames: ['lex'],
+                routes: [{ key: 'lex-12', name: 'lex' }],
+                stale: false,
+                type: 'stack',
+              },
+            },
+          ],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  };
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith(preventedState);
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove.lex).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual(preventedState);
+
+  shouldPrevent.lex = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove.baz).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual(preventedState);
+
+  shouldPrevent.baz = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove.bar).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual(preventedState);
+
+  shouldPrevent.bar = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz', 'bax'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});

packages/core/src/__tests__/useRoute.test.tsx

@@ -5,7 +5,7 @@ import useRoute from '../useRoute';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
 import MockRouter from './__fixtures__/MockRouter';
-import { RouteProp } from '../types';
+import type { RouteProp } from '../types';
 
 it('gets route prop from context', () => {
   expect.assertions(1);

packages/core/src/checkLegacyPathConfig.tsx

@@ -0,0 +1,36 @@
+import type { PathConfigMap } from './types';
+
+type Options = {
+  initialRouteName?: string;
+  screens: PathConfigMap;
+};
+
+export default function checkLegacyPathConfig(
+  config?: Options
+): [boolean, Options | undefined] {
+  let legacy = false;
+
+  if (config) {
+    // Assume legacy configuration if config has any other keys except `screens` and `initialRouteName`
+    legacy = Object.keys(config).some(
+      (key) => key !== 'screens' && key !== 'initialRouteName'
+    );
+
+    if (
+      legacy &&
+      (config.hasOwnProperty('screens') ||
+        config.hasOwnProperty('initialRouteName'))
+    ) {
+      throw new Error(
+        'Found invalid keys in the configuration object. See https://reactnavigation.org/docs/configuring-links/ for more details on the shape of the configuration object.'
+      );
+    }
+  }
+
+  if (legacy) {
+    // @ts-expect-error: we have incorrect type for config since we don't type legacy config
+    return [legacy, { screens: config }];
+  }
+
+  return [legacy, config];
+}

packages/core/src/checkSerializable.tsx

@@ -0,0 +1,74 @@
+const checkSerializableWithoutCircularReference = (
+  o: { [key: string]: any },
+  seen: Set<any>,
+  location: (string | number)[]
+):
+  | { serializable: true }
+  | {
+      serializable: false;
+      location: (string | number)[];
+      reason: string;
+    } => {
+  if (
+    o === undefined ||
+    o === null ||
+    typeof o === 'boolean' ||
+    typeof o === 'number' ||
+    typeof o === 'string'
+  ) {
+    return { serializable: true };
+  }
+
+  if (
+    Object.prototype.toString.call(o) !== '[object Object]' &&
+    !Array.isArray(o)
+  ) {
+    return {
+      serializable: false,
+      location,
+      reason: typeof o === 'function' ? 'Function' : String(o),
+    };
+  }
+
+  if (seen.has(o)) {
+    return {
+      serializable: false,
+      reason: 'Circular reference',
+      location,
+    };
+  }
+
+  seen.add(o);
+
+  if (Array.isArray(o)) {
+    for (let i = 0; i < o.length; i++) {
+      const childResult = checkSerializableWithoutCircularReference(
+        o[i],
+        new Set<any>(seen),
+        [...location, i]
+      );
+
+      if (!childResult.serializable) {
+        return childResult;
+      }
+    }
+  } else {
+    for (const key in o) {
+      const childResult = checkSerializableWithoutCircularReference(
+        o[key],
+        new Set<any>(seen),
+        [...location, key]
+      );
+
+      if (!childResult.serializable) {
+        return childResult;
+      }
+    }
+  }
+
+  return { serializable: true };
+};
+
+export default function checkSerializable(o: { [key: string]: any }) {
+  return checkSerializableWithoutCircularReference(o, new Set<any>(), []);
+}