chore: publish

- @react-navigation/stack@5.14.5

.circleci/config.yml

@@ -8,6 +8,12 @@ executors:
     environment:
       YARN_CACHE_FOLDER: "~/.cache/yarn"
 
+  playwright:
+    docker:
+    - image: mcr.microsoft.com/playwright:bionic
+      environment:
+        NODE_ENV: development
+
 commands:
   attach_project:
     steps:
@@ -61,18 +67,9 @@ jobs:
           destination: coverage
 
   integration-tests:
-    executor: default
+    executor: playwright
     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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug-report-bottom-tabs.md

@@ -1,38 +0,0 @@
----
-name: Bottom Tab Navigator
-about: Report an issue with Bottom Tab Navigator (@react-navigation/bottom-tabs)
-title: ''
-labels: bug, package:bottom-tabs
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                      | version |
-| ----------------------------- | ------- |
-| iOS or Android                |
-| @react-navigation/native      |
-| @react-navigation/bottom-tabs |
-| react-native-screens          |
-| react-native                  |
-| expo                          |
-| node                          |
-| npm or yarn                   |

.github/ISSUE_TEMPLATE/bug-report-drawer.md

@@ -1,41 +0,0 @@
----
-name: Drawer Navigator
-about: Report an issue with Drawer Navigator (@react-navigation/drawer)
-title: ''
-labels: bug, package:drawer
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                       | version |
-| ------------------------------ | ------- |
-| iOS or Android                 |
-| @react-navigation/native       |
-| @react-navigation/drawer       |
-| react-native-reanimated        |
-| react-native-gesture-handler   |
-| react-native-safe-area-context |
-| react-native-screens           |
-| react-native                   |
-| expo                           |
-| node                           |
-| npm or yarn                    |

.github/ISSUE_TEMPLATE/bug-report-material-bottom-tabs.md

@@ -1,38 +0,0 @@
----
-name: Material Bottom Tab Navigator
-about: Report an issue with Material Bottom Tab Navigator (@react-navigation/material-bottom-tabs)
-title: ''
-labels: bug, package:material-bottom-tabs
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                               | version |
-| -------------------------------------- | ------- |
-| iOS or Android                         |
-| @react-navigation/native               |
-| @react-navigation/material-bottom-tabs |
-| react-native-paper                     |
-| react-native                           |
-| expo                                   |
-| node                                   |
-| npm or yarn                            |

.github/ISSUE_TEMPLATE/bug-report-material-top-tabs.md

@@ -1,38 +0,0 @@
----
-name: Material Top Tab Navigator
-about: Report an issue with Material Top Tab Navigator (@react-navigation/material-top-tabs)
-title: ''
-labels: bug, package:material-top-tabs
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                            | version |
-| ----------------------------------- | ------- |
-| iOS or Android                      |
-| @react-navigation/native            |
-| @react-navigation/material-top-tabs |
-| react-native-tab-view               |
-| react-native                        |
-| expo                                |
-| node                                |
-| npm or yarn                         |

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

@@ -1,40 +0,0 @@
----
-name: Stack Navigator
-about: Report an issue with Stack Navigator (@react-navigation/stack)
-title: ''
-labels: bug, package:stack
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                       | version |
-| ------------------------------ | ------- |
-| iOS or Android                 |
-| @react-navigation/native       |
-| @react-navigation/stack        |
-| react-native-gesture-handler   |
-| react-native-safe-area-context |
-| react-native-screens           |
-| react-native                   |
-| expo                           |
-| node                           |
-| npm or yarn                    |

.github/ISSUE_TEMPLATE/bug-report-version-4.md

@@ -1,43 +0,0 @@
----
-name: React Navigation 4
-about: Report an issue with React Navigation 4
-title: ''
-labels: bug, version-4
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                       | version |
-| ------------------------------ | ------- |
-| iOS or Android                 |
-| react-navigation               |
-| react-navigation-stack         |
-| react-navigation-tabs          |
-| react-navigation-drawer        |
-| react-native-reanimated        |
-| react-native-gesture-handler   |
-| react-native-safe-area-context |
-| react-native-screens           |
-| react-native                   |
-| expo                           |
-| node                           |
-| npm or yarn                    |

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,36 +0,0 @@
----
-name: Other bugs
-about: Report an issue which is not about a specific navigator.
-title: ''
-labels: bug
-assignees: ''
----
-
-**Current Behavior**
-
-- What code are you running and what is happening?
-- Include a screenshot or video if it makes sense.
-
-**Expected Behavior**
-
-- What do you expect should be happening?
-- Include a screenshot or video if it makes sense.
-
-**How to reproduce**
-
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
-- Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
-- Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
-- Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
-- Before reporting an issue, make sure you are on latest version of the package.
-
-**Your Environment**
-
-| software                       | version |
-| ------------------------------ | ------- |
-| iOS or Android                 |
-| @react-navigation/native       |
-| react-native                   |
-| expo                           |
-| node                           |
-| npm or yarn                    |

.github/ISSUE_TEMPLATE/config.yml

@@ -1,20 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Troubleshooting
-    url: https://reactnavigation.org/docs/troubleshooting.html
-    about: Read how to troubleshoot and fix common issues and mistakes.
-  - name: Documentation
-    url: https://reactnavigation.org
-    about: Read the official documentation.
-  - name: Feature requests
-    url: https://react-navigation.canny.io/feature-requests
-    about: Post a feature request on Canny.
-  - name: StackOverflow
-    url: https://stackoverflow.com/questions/tagged/react-navigation
-    about: Ask and answer questions using the react-navigation label.
-  - name: Reactiflux
-    url: https://www.reactiflux.com/
-    about: Chat with other community members in the react-navigation channel.
-  - name: Write an RFC
-    url: https://github.com/react-navigation/rfcs
-    about: Write a RFC if you have ideas for how to implement a feature request.

.github/PULL_REQUEST.md

@@ -1,17 +0,0 @@
-Please provide enough information so that others can review your pull request:
-
-**Motivation**
-
-Explain the **motivation** for making this change. What existing problem does the pull request solve?
-
-**Test plan**
-
-Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.
-
-Make sure you test on both platforms if your change affects both platforms.
-
-The code must pass tests.
-
-**Code formatting**
-
-Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing.

.github/workflows/expo-preview.yml

@@ -1,69 +0,0 @@
-name: Expo Preview
-on: [pull_request]
-
-jobs:
-  publish:
-    name: Install and publish
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.head.repo.owner.login == 'react-navigation'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 10.x
-
-      - name: Setup Expo
-        uses: expo/expo-github-action@v5
-        with:
-          expo-version: 3.x
-          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
-          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
-          expo-cache: true
-
-      - name: Restore yarn cache
-        id: yarn-cache
-        uses: actions/cache@v2
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-
-      - name: Publish Expo app
-        working-directory: ./example
-        run: expo publish --release-channel=pr-${{ github.event.number }}
-        env:
-          EXPO_USE_DEV_SERVER: true
-
-      - name: Get expo link
-        id: expo
-        run: echo "::set-output name=path::@react-navigation/react-navigation-example?release-channel=pr-${{ github.event.number }}"
-
-      - name: Comment on PR
-        uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            const body = 'The Expo app for the example from this branch is ready!\n\n[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})\n\n<a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>';
-
-            const comments = await github.issues.listComments({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-            });
-
-            if (comments.data.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

@@ -1,41 +0,0 @@
-name: Expo Publish
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  publish:
-    name: Install and publish
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 10.x
-
-      - name: Setup Expo
-        uses: expo/expo-github-action@v5
-        with:
-          expo-version: 3.x
-          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
-          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
-          expo-cache: true
-
-      - name: Restore yarn cache
-        id: yarn-cache
-        uses: actions/cache@v2
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-
-      - name: Publish Expo app
-        working-directory: ./example
-        run: expo publish

.github/workflows/rebase.yml

@@ -1,28 +0,0 @@
-name: Automatic Rebase
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  rebase:
-    name: Rebase
-    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Automatic Rebase
-        uses: cirrus-actions/rebase@1.2
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-    # https://github.community/t5/GitHub-Actions/Workflow-is-failing-if-no-job-can-be-ran-due-to-condition/m-p/38186#M3250
-  always_job:
-    name: Always run job
-    runs-on: ubuntu-latest
-    steps:
-      - name: Always run
-        run: echo "This job is used to prevent the workflow to fail when all other jobs are skipped."

.github/workflows/triage.yml

@@ -1,125 +0,0 @@
-name: Triage
-on:
-  issues:
-    types: [labeled]
-
-jobs:
-  needs-more-info:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'needs more info'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help.\n\nMake sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.)."
-            })
-
-  needs-repro:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'needs repro'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible.\n\nThe easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then please provide the repro in a GitHub repository."
-            })
-
-  question:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'question'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question or an issue unrelated to this library. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel.\n\nIf you believe that this is actually a bug in the library, please open a new issue and fill the issue template with relevant information."
-            })
-
-  feature-request:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'feature-request'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. Seems you have a feature request. Please post the feature request on [Canny](https://react-navigation.canny.io/feature-requests). This lets other users upvote your feature request and helps us prioritize the most requested features.\n\nYou can also open a detailed proposal in our [RFC repo](https://github.com/react-navigation/rfcs) for discussion."
-            })
-
-  react-native-screens:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'library:react-native-screens'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `native-stack` navigator or `react-native-screens` library. Please post your issue in [this repo](https://github.com/software-mansion/react-native-screens) so that it's notified to the maintainers of that library."
-            })
-
-  react-native-reanimated:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'library:react-native-reanimated'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `react-native-reanimated` library. Please post your issue in [this repo](https://github.com/software-mansion/react-native-reanimated) so that it's notified to the maintainers of that library."
-            })
-
-  react-native-gesture-handler:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'library:react-native-gesture-handler'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `react-native-gesture-handler` library. Please post your issue in [this repo](https://github.com/software-mansion/react-native-gesture-handler) so that it's notified to the maintainers of that library."
-            })
-
-  react-native-safe-area-context:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'library:react-native-safe-area-context'
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `react-native-safe-area-context` library. Please post your issue in [this repo](https://github.com/th3rdwave/react-native-safe-area-context) so that it's notified to the maintainers of that library."
-            })

.github/workflows/versions.yml

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

example/app.json

@@ -4,7 +4,7 @@
   "expo": {
     "name": "React Navigation",
     "owner": "react-navigation",
-    "slug": "NavigationPlayground",
+    "slug": "react-navigation-example",
     "description": "Demonstrates the functionality and various capabilities of React Navigation.",
     "privacy": "public",
     "version": "1.0.0",

example/metro.config.js

@@ -8,12 +8,15 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const root = path.resolve(__dirname, '..');
 const packages = path.resolve(root, 'packages');
 
+// List all packages under `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));
+  .map((p) => path.join(packages, p))
+  .filter(
+    (p) =>
+      fs.statSync(p).isDirectory() &&
+      fs.existsSync(path.join(p, 'package.json'))
+  );
 
 // Get the list of dependencies for all packages in the monorepo
 const modules = ['@expo/vector-icons']
@@ -68,14 +71,9 @@ module.exports = {
     enhanceMiddleware: (middleware) => {
       return (req, res, next) => {
         // When an asset is imported outside the project root, it has wrong path on Android
-        // This happens for the back button in stack, so we fix the path to correct one
-        const assets = '/packages/stack/src/views/assets';
-
-        if (req.url.startsWith(assets)) {
-          req.url = req.url.replace(
-            assets,
-            '/assets/../packages/stack/src/views/assets'
-          );
+        // So we fix the path to correct one
+        if (/\/packages\/.+\.png\?.+$/.test(req.url)) {
+          req.url = `/assets/../${req.url}`;
         }
 
         return middleware(req, res, next);

example/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
+    "@react-native-async-storage/async-storage": "^1.13.1",
     "@react-native-community/masked-view": "0.1.10",
     "color": "^3.1.3",
     "expo": "^39.0.0",
@@ -55,7 +56,7 @@
     "mock-require-assets": "^0.0.1",
     "node-fetch": "^2.6.1",
     "nodemon": "^2.0.6",
-    "playwright": "^0.14.0",
+    "playwright": "^1.9.1",
     "serve": "^11.3.0",
     "typescript": "^4.0.3"
   }

example/src/AsyncStorage.native.tsx

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

example/src/AsyncStorage.tsx

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

example/src/Screens/AuthFlow.tsx

@@ -31,9 +31,11 @@ const AuthContext = React.createContext<{
 });
 
 const SplashScreen = () => {
+  const { colors } = useTheme();
+
   return (
     <View style={styles.content}>
-      <ActivityIndicator />
+      <ActivityIndicator color={colors.primary} />
     </View>
   );
 };

example/src/Screens/BottomTabs.tsx

@@ -5,6 +5,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {
   getFocusedRouteNameFromRoute,
   ParamListBase,
+  NavigatorScreenParams,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import {
@@ -15,7 +16,7 @@ import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
-import SimpleStackScreen from './SimpleStack';
+import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({
   color,
@@ -26,7 +27,7 @@ const getTabBarIcon = (name: string) => ({
 }) => <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {
-  Article: undefined;
+  Article: NavigatorScreenParams<SimpleStackParams>;
   Albums: undefined;
   Contacts: undefined;
   Chat: undefined;
@@ -85,12 +86,18 @@ export default function BottomTabsScreen({
     >
       <BottomTabs.Screen
         name="Article"
-        component={SimpleStackScreen}
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
         }}
-      />
+      >
+        {(props) => (
+          <SimpleStackScreen
+            {...props}
+            screenOptions={{ headerShown: false }}
+          />
+        )}
+      </BottomTabs.Screen>
       <BottomTabs.Screen
         name="Chat"
         component={Chat}

example/src/Screens/MaterialBottomTabs.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
+import type { NavigatorScreenParams } from '@react-navigation/native';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
-import SimpleStackScreen from './SimpleStack';
+import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
 type MaterialBottomTabParams = {
-  Article: undefined;
+  Article: NavigatorScreenParams<SimpleStackParams>;
   Albums: undefined;
   Contacts: undefined;
   Chat: undefined;
@@ -22,13 +23,19 @@ 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}
+            screenOptions={{ headerShown: false }}
+          />
+        )}
+      </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
         name="Chat"
         component={Chat}

example/src/Screens/ModalPresentationStack.tsx

@@ -93,7 +93,9 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
         cardOverlayEnabled: true,
         gestureEnabled: true,
         headerStatusBarHeight:
-          navigation.dangerouslyGetState().routes.indexOf(route) > 0
+          navigation
+            .dangerouslyGetState()
+            .routes.findIndex((r: any) => r.key === route.key) > 0
             ? 0
             : undefined,
       })}

example/src/Screens/PreventRemove.tsx

@@ -77,18 +77,28 @@ const InputScreen = ({
 
         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),
-            },
-          ]
-        );
+        if (Platform.OS === 'web') {
+          const discard = confirm(
+            'You have unsaved changes. Discard them and leave the screen?'
+          );
+
+          if (discard) {
+            navigation.dispatch(action);
+          }
+        } else {
+          Alert.alert(
+            'Discard changes?',
+            'You have unsaved changes. Discard them and leave the screen?',
+            [
+              { text: "Don't leave", style: 'cancel', onPress: () => {} },
+              {
+                text: 'Discard',
+                style: 'destructive',
+                onPress: () => navigation.dispatch(action),
+              },
+            ]
+          );
+        }
       }),
     [hasUnsavedChanges, navigation]
   );

example/src/Screens/SimpleStack.tsx

@@ -4,13 +4,14 @@ import { Button } from 'react-native-paper';
 import type { ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
+  StackNavigationOptions,
   StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import NewsFeed from '../Shared/NewsFeed';
 
-type SimpleStackParams = {
+export type SimpleStackParams = {
   Article: { author: string } | undefined;
   NewsFeed: { date: number };
   Albums: undefined;
@@ -105,7 +106,10 @@ const SimpleStack = createStackNavigator<SimpleStackParams>();
 
 export default function SimpleStackScreen({
   navigation,
-}: StackScreenProps<ParamListBase>) {
+  screenOptions,
+}: StackScreenProps<ParamListBase> & {
+  screenOptions?: StackNavigationOptions;
+}) {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: false,
@@ -113,7 +117,7 @@ export default function SimpleStackScreen({
   }, [navigation]);
 
   return (
-    <SimpleStack.Navigator>
+    <SimpleStack.Navigator screenOptions={screenOptions}>
       <SimpleStack.Screen
         name="Article"
         component={ArticleScreen}

example/src/index.tsx

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import {
   ScrollView,
-  YellowBox,
   Platform,
   StatusBar,
   I18nManager,
   Dimensions,
   ScaledSize,
   Linking,
+  LogBox,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {
   Provider as PaperProvider,
   DefaultTheme as PaperLightTheme,
   DarkTheme as PaperDarkTheme,
-  Appbar,
   List,
   Divider,
   Text,
@@ -28,19 +28,16 @@ import {
   PathConfigMap,
   NavigationContainerRef,
 } from '@react-navigation/native';
-import {
-  createDrawerNavigator,
-  DrawerScreenProps,
-} from '@react-navigation/drawer';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStackNavigator,
   StackScreenProps,
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { restartApp } from './Restart';
-import AsyncStorage from './AsyncStorage';
 import LinkingPrefixes from './LinkingPrefixes';
 import SettingsItem from './Shared/SettingsItem';
 import SimpleStack from './Screens/SimpleStack';
@@ -58,13 +55,14 @@ import PreventRemove from './Screens/PreventRemove';
 import CompatAPI from './Screens/CompatAPI';
 import LinkComponent from './Screens/LinkComponent';
 
-YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
+if (Platform.OS !== 'web') {
+  LogBox.ignoreLogs(['Require cycle:']);
+}
 
 enableScreens();
 
 type RootDrawerParamList = {
-  Root: undefined;
-  Another: undefined;
+  Examples: undefined;
 };
 
 const SCREENS = {
@@ -229,50 +227,49 @@ export default function App() {
           // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
           prefixes: LinkingPrefixes,
           config: {
-            screens: {
-              Root: {
-                path: '',
-                initialRouteName: 'Home',
-                screens: Object.keys(SCREENS).reduce<PathConfigMap>(
-                  (acc, name) => {
-                    // Convert screen names such as SimpleStack to kebab case (simple-stack)
-                    const path = name
-                      .replace(/([A-Z]+)/g, '-$1')
-                      .replace(/^-/, '')
-                      .toLowerCase();
+            initialRouteName: 'Home',
+            screens: Object.keys(SCREENS).reduce<PathConfigMap>(
+              (acc, name) => {
+                // Convert screen names such as SimpleStack to kebab case (simple-stack)
+                const path = name
+                  .replace(/([A-Z]+)/g, '-$1')
+                  .replace(/^-/, '')
+                  .toLowerCase();
 
-                    acc[name] = {
-                      path,
-                      screens: {
-                        Article: {
-                          path: 'article/:author?',
-                          parse: {
-                            author: (author) =>
-                              author.charAt(0).toUpperCase() +
-                              author.slice(1).replace(/-/g, ' '),
-                          },
-                          stringify: {
-                            author: (author: string) =>
-                              author.toLowerCase().replace(/\s/g, '-'),
-                          },
-                        },
-                        Albums: 'music',
-                        Chat: 'chat',
-                        Contacts: 'people',
-                        NewsFeed: 'feed',
-                        Dialog: 'dialog',
+                acc[name] = {
+                  path,
+                  screens: {
+                    Article: {
+                      path: 'article/:author?',
+                      parse: {
+                        author: (author) =>
+                          author.charAt(0).toUpperCase() +
+                          author.slice(1).replace(/-/g, ' '),
                       },
-                    };
-
-                    return acc;
+                      stringify: {
+                        author: (author: string) =>
+                          author.toLowerCase().replace(/\s/g, '-'),
+                      },
+                    },
+                    Albums: 'music',
+                    Chat: 'chat',
+                    Contacts: 'people',
+                    NewsFeed: 'feed',
+                    Dialog: 'dialog',
                   },
-                  {
-                    Home: '',
-                    NotFound: '*',
-                  }
-                ),
+                };
+
+                return acc;
               },
-            },
+              {
+                Home: {
+                  screens: {
+                    Examples: '',
+                  },
+                },
+                NotFound: '*',
+              }
+            ),
           },
         }}
         fallback={<Text>Loading…</Text>}
@@ -281,95 +278,91 @@ export default function App() {
             `${options?.title ?? route?.name} - React Navigation Example`,
         }}
       >
-        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
-          <Drawer.Screen
-            name="Root"
+        <Stack.Navigator
+          screenOptions={{
+            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+          }}
+        >
+          <Stack.Screen
+            name="Home"
             options={{
-              title: 'Examples',
-              drawerIcon: ({ size, color }) => (
-                <MaterialIcons size={size} color={color} name="folder" />
-              ),
+              headerShown: false,
             }}
           >
-            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
-              <Stack.Navigator
-                screenOptions={{
-                  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
-                }}
+            {() => (
+              <Drawer.Navigator
+                drawerType={isLargeScreen ? 'permanent' : undefined}
+                screenOptions={{ headerShown: true }}
               >
-                <Stack.Screen
-                  name="Home"
+                <Drawer.Screen
+                  name="Examples"
                   options={{
                     title: 'Examples',
-                    headerLeft: isLargeScreen
-                      ? undefined
-                      : () => (
-                          <Appbar.Action
-                            color={theme.colors.text}
-                            icon="menu"
-                            onPress={() => navigation.toggleDrawer()}
-                          />
-                        ),
+                    drawerIcon: ({ size, color }) => (
+                      <MaterialIcons size={size} color={color} name="folder" />
+                    ),
                   }}
                 >
                   {({ navigation }: StackScreenProps<RootStackParamList>) => (
                     <ScrollView
                       style={{ backgroundColor: theme.colors.background }}
                     >
-                      <SettingsItem
-                        label="Right to left"
-                        value={I18nManager.isRTL}
-                        onValueChange={() => {
-                          I18nManager.forceRTL(!I18nManager.isRTL);
-                          restartApp();
-                        }}
-                      />
-                      <Divider />
-                      <SettingsItem
-                        label="Dark theme"
-                        value={theme.dark}
-                        onValueChange={() => {
-                          AsyncStorage.setItem(
-                            THEME_PERSISTENCE_KEY,
-                            theme.dark ? 'light' : 'dark'
-                          );
+                      <SafeAreaView edges={['right', 'bottom', 'left']}>
+                        <SettingsItem
+                          label="Right to left"
+                          value={I18nManager.isRTL}
+                          onValueChange={() => {
+                            I18nManager.forceRTL(!I18nManager.isRTL);
+                            restartApp();
+                          }}
+                        />
+                        <Divider />
+                        <SettingsItem
+                          label="Dark theme"
+                          value={theme.dark}
+                          onValueChange={() => {
+                            AsyncStorage.setItem(
+                              THEME_PERSISTENCE_KEY,
+                              theme.dark ? 'light' : 'dark'
+                            );
 
-                          setTheme((t) => (t.dark ? DefaultTheme : DarkTheme));
-                        }}
-                      />
-                      <Divider />
-                      {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
-                        (name) => (
-                          <List.Item
-                            key={name}
-                            testID={name}
-                            title={SCREENS[name].title}
-                            onPress={() => navigation.navigate(name)}
-                          />
-                        )
-                      )}
+                            setTheme((t) =>
+                              t.dark ? DefaultTheme : DarkTheme
+                            );
+                          }}
+                        />
+                        <Divider />
+                        {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
+                          (name) => (
+                            <List.Item
+                              key={name}
+                              testID={name}
+                              title={SCREENS[name].title}
+                              onPress={() => navigation.navigate(name)}
+                            />
+                          )
+                        )}
+                      </SafeAreaView>
                     </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}
-                      getComponent={() => SCREENS[name].component}
-                      options={{ title: SCREENS[name].title }}
-                    />
-                  )
-                )}
-              </Stack.Navigator>
+                </Drawer.Screen>
+              </Drawer.Navigator>
             )}
-          </Drawer.Screen>
-        </Drawer.Navigator>
+          </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}
+              getComponent={() => SCREENS[name].component}
+              options={{ title: SCREENS[name].title }}
+            />
+          ))}
+        </Stack.Navigator>
       </NavigationContainer>
     </PaperProvider>
   );

lerna.json

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

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,176 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.11.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.9...@react-navigation/bottom-tabs@5.11.10) (2021-04-16)
+
+
+### Bug Fixes
+
+* update tab bar height correctly. fixes [#9296](https://github.com/react-navigation/react-navigation/issues/9296) ([12398ce](https://github.com/react-navigation/react-navigation/commit/12398ce98c28a1b5710a144e6138b91031bffa91))
+
+
+
+
+
+## [5.11.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.8...@react-navigation/bottom-tabs@5.11.9) (2021-04-04)
+
+
+### Bug Fixes
+
+* check for screens enabled in ScreenContainer ([493956e](https://github.com/react-navigation/react-navigation/commit/493956ef717a03bd8c3533a2949434e83718c5e4))
+* don't pass accessibilityState to link. closes [#9418](https://github.com/react-navigation/react-navigation/issues/9418) ([699ea0c](https://github.com/react-navigation/react-navigation/commit/699ea0cc5052f190acc7ce8bc0328bb052d7cf26))
+
+
+
+
+
+## [5.11.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.7...@react-navigation/bottom-tabs@5.11.8) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.11.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.6...@react-navigation/bottom-tabs@5.11.7) (2021-01-25)
+
+
+### Bug Fixes
+
+* fix drawer screen content not being interactable on Android ([87b5147](https://github.com/react-navigation/react-navigation/commit/87b51476d0bce8f2dae793416c2976da30a1a5f7))
+
+
+
+
+
+## [5.11.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.5...@react-navigation/bottom-tabs@5.11.6) (2021-01-22)
+
+
+### Bug Fixes
+
+* fix pointerEvents in ResourceSavingScene ([60fe0db](https://github.com/react-navigation/react-navigation/commit/60fe0dbb0ae443fdb21016d368c919b933cb64e7)), closes [#9241](https://github.com/react-navigation/react-navigation/issues/9241) [#9242](https://github.com/react-navigation/react-navigation/issues/9242)
+
+
+
+
+
+## [5.11.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.4...@react-navigation/bottom-tabs@5.11.5) (2021-01-22)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.11.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.3...@react-navigation/bottom-tabs@5.11.4) (2021-01-21)
+
+
+### Bug Fixes
+
+* fix drawer and bottom tabs not being visible on web. closes [#9225](https://github.com/react-navigation/react-navigation/issues/9225) ([d88cbcb](https://github.com/react-navigation/react-navigation/commit/d88cbcb52d46de26edaa9ce6bfb06badb1b1de64))
+
+
+
+
+
+## [5.11.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.2...@react-navigation/bottom-tabs@5.11.3) (2021-01-14)
+
+
+### Bug Fixes
+
+* enable detachInactiveScreens by default on web for better a11y ([dd87fa4](https://github.com/react-navigation/react-navigation/commit/dd87fa49a43ad8db105a62418243339e4150fadf))
+
+
+
+
+
+## [5.11.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.1...@react-navigation/bottom-tabs@5.11.2) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.11.0...@react-navigation/bottom-tabs@5.11.1) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.7...@react-navigation/bottom-tabs@5.11.0) (2020-11-09)
+
+
+### Features
+
+* add a hook to get bottom tab bar height ([e08c91f](https://github.com/react-navigation/react-navigation/commit/e08c91ff0a3df13dc6e6096a3e95f60722e6946b)), closes [#8037](https://github.com/react-navigation/react-navigation/issues/8037) [#8536](https://github.com/react-navigation/react-navigation/issues/8536)
+* add a tabBarBadgeStyle option to customize the badge ([6ac4d40](https://github.com/react-navigation/react-navigation/commit/6ac4d40140189a29d857c4d1203bced6929f7baf))
+
+
+
+
+
+## [5.10.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.6...@react-navigation/bottom-tabs@5.10.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.5...@react-navigation/bottom-tabs@5.10.6) (2020-11-04)
+
+
+### Bug Fixes
+
+* disable react-native-screens on iOS for older versions ([ce7d20e](https://github.com/react-navigation/react-navigation/commit/ce7d20e3366415b07a537e01ee0b17ce7e72cad6))
+
+
+
+
+
+## [5.10.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.4...@react-navigation/bottom-tabs@5.10.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.3...@react-navigation/bottom-tabs@5.10.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.2...@react-navigation/bottom-tabs@5.10.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.1...@react-navigation/bottom-tabs@5.10.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.0...@react-navigation/bottom-tabs@5.10.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.10.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.9.2...@react-navigation/bottom-tabs@5.10.0) (2020-10-24)
 
 

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.10.0",
+  "version": "5.11.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,8 +40,7 @@
     "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.0",
+    "@react-navigation/native": "^5.9.4",
     "@testing-library/react-native": "^7.1.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -49,6 +48,7 @@
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
     "typescript": "^4.0.3"
@@ -60,7 +60,7 @@
     "react-native-safe-area-context": ">= 0.6.0",
     "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/bottom-tabs/src/index.tsx

@@ -9,6 +9,13 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
 export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';
 
+/**
+ * Utilities
+ */
+export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+
+export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+
 /**
  * Types
  */

packages/bottom-tabs/src/types.tsx

@@ -109,6 +109,12 @@ export type BottomTabNavigationOptions = {
    */
   tabBarBadge?: number | string;
 
+  /**
+   * Custom style for the tab bar badge.
+   * You can specify a background color or text color here.
+   */
+  tabBarBadgeStyle?: StyleProp<TextStyle>;
+
   /**
    * 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.
@@ -174,7 +180,7 @@ export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
   /**
    * Whether inactive screens should be detached from the view hierarchy to save memory.
    * Make sure to call `enableScreens` from `react-native-screens` to make it work.
-   * Defaults to `true`.
+   * Defaults to `true` on Android.
    */
   detachInactiveScreens?: boolean;
   /**

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default React.createContext<((height: number) => void) | undefined>(
+  undefined
+);

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<number | undefined>(undefined);

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import BottomTabBarHeightContext from './BottomTabBarHeightContext';
+
+export default function useFloatingBottomTabBarHeight() {
+  const height = React.useContext(BottomTabBarHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?"
+    );
+  }
+
+  return height;
+}

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

@@ -5,20 +5,25 @@ import {
   StyleSheet,
   Platform,
   LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 import {
   NavigationContext,
   NavigationRouteContext,
+  TabNavigationState,
+  ParamListBase,
   CommonActions,
   useTheme,
   useLinkBuilder,
 } from '@react-navigation/native';
-import { useSafeArea } from 'react-native-safe-area-context';
+import { useSafeArea, EdgeInsets } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
 import useWindowDimensions from '../utils/useWindowDimensions';
 import useIsKeyboardShown from '../utils/useIsKeyboardShown';
-import type { BottomTabBarProps } from '../types';
+import type { BottomTabBarProps, LabelPosition } from '../types';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
@@ -31,13 +36,93 @@ const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 const useNativeDriver = Platform.OS !== 'web';
 
+type Options = {
+  state: TabNavigationState<ParamListBase>;
+  layout: { height: number; width: number };
+  dimensions: { height: number; width: number };
+  tabStyle: StyleProp<ViewStyle>;
+  labelPosition: LabelPosition | undefined;
+  adaptive: boolean | undefined;
+};
+
+const shouldUseHorizontalLabels = ({
+  state,
+  layout,
+  dimensions,
+  adaptive = true,
+  labelPosition,
+  tabStyle,
+}: Options) => {
+  if (labelPosition) {
+    return labelPosition === 'beside-icon';
+  }
+
+  if (!adaptive) {
+    return false;
+  }
+
+  if (layout.width >= 768) {
+    // Screen size matches a tablet
+    let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
+
+    const flattenedStyle = StyleSheet.flatten(tabStyle);
+
+    if (flattenedStyle) {
+      if (typeof flattenedStyle.width === 'number') {
+        maxTabItemWidth = flattenedStyle.width;
+      } else if (typeof flattenedStyle.maxWidth === 'number') {
+        maxTabItemWidth = flattenedStyle.maxWidth;
+      }
+    }
+
+    return state.routes.length * maxTabItemWidth <= layout.width;
+  } else {
+    return dimensions.width > dimensions.height;
+  }
+};
+
+const getPaddingBottom = (insets: EdgeInsets) =>
+  Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
+
+export const getTabBarHeight = ({
+  dimensions,
+  insets,
+  style,
+  ...rest
+}: Options & {
+  insets: EdgeInsets;
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+}) => {
+  // @ts-ignore
+  const customHeight = StyleSheet.flatten(style)?.height;
+
+  if (typeof customHeight === 'number') {
+    return customHeight;
+  }
+
+  const isLandscape = dimensions.width > dimensions.height;
+  const horizontalLabels = shouldUseHorizontalLabels({ dimensions, ...rest });
+  const paddingBottom = getPaddingBottom(insets);
+
+  if (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    isLandscape &&
+    horizontalLabels
+  ) {
+    return COMPACT_TABBAR_HEIGHT + paddingBottom;
+  }
+
+  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
+};
+
 export default function BottomTabBar({
   state,
   navigation,
   descriptors,
   activeBackgroundColor,
   activeTintColor,
-  adaptive = true,
+  adaptive,
   allowFontScaling,
   inactiveBackgroundColor,
   inactiveTintColor,
@@ -60,6 +145,8 @@ export default function BottomTabBar({
   const dimensions = useWindowDimensions();
   const isKeyboardShown = useIsKeyboardShown();
 
+  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
+
   const shouldShowTabBar =
     focusedOptions.tabBarVisible !== false &&
     !(keyboardHidesTabBar && isKeyboardShown);
@@ -120,11 +207,19 @@ export default function BottomTabBar({
     width: dimensions.width,
   });
 
-  const isLandscape = () => dimensions.width > dimensions.height;
-
   const handleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
 
+    const topBorderWidth =
+      // @ts-ignore
+      StyleSheet.flatten([styles.tabBar, style])?.borderTopWidth;
+
+    onHeightChange?.(
+      height +
+        paddingBottom +
+        (typeof topBorderWidth === 'number' ? topBorderWidth : 0)
+    );
+
     setLayout((layout) => {
       if (height === layout.height && width === layout.width) {
         return layout;
@@ -138,34 +233,6 @@ export default function BottomTabBar({
   };
 
   const { routes } = state;
-  const shouldUseHorizontalLabels = () => {
-    if (labelPosition) {
-      return labelPosition === 'beside-icon';
-    }
-
-    if (!adaptive) {
-      return false;
-    }
-
-    if (layout.width >= 768) {
-      // Screen size matches a tablet
-      let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
-
-      const flattenedStyle = StyleSheet.flatten(tabStyle);
-
-      if (flattenedStyle) {
-        if (typeof flattenedStyle.width === 'number') {
-          maxTabItemWidth = flattenedStyle.width;
-        } else if (typeof flattenedStyle.maxWidth === 'number') {
-          maxTabItemWidth = flattenedStyle.maxWidth;
-        }
-      }
-
-      return routes.length * maxTabItemWidth <= layout.width;
-    } else {
-      return isLandscape();
-    }
-  };
 
   const defaultInsets = useSafeArea();
 
@@ -176,22 +243,26 @@ export default function BottomTabBar({
     left: safeAreaInsets?.left ?? defaultInsets.left,
   };
 
-  const paddingBottom = Math.max(
-    insets.bottom - Platform.select({ ios: 4, default: 0 }),
-    0
-  );
+  const paddingBottom = getPaddingBottom(insets);
+  const tabBarHeight = getTabBarHeight({
+    state,
+    insets,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+    style,
+  });
 
-  const getDefaultTabBarHeight = () => {
-    if (
-      Platform.OS === 'ios' &&
-      !Platform.isPad &&
-      isLandscape() &&
-      shouldUseHorizontalLabels()
-    ) {
-      return COMPACT_TABBAR_HEIGHT;
-    }
-    return DEFAULT_TABBAR_HEIGHT;
-  };
+  const hasHorizontalLabels = shouldUseHorizontalLabels({
+    state,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+  });
 
   return (
     <Animated.View
@@ -218,15 +289,16 @@ export default function BottomTabBar({
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
-          height: getDefaultTabBarHeight() + paddingBottom,
+          height: tabBarHeight,
           paddingBottom,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}
       pointerEvents={isTabBarHidden ? 'none' : 'auto'}
+      onLayout={handleLayout}
     >
-      <View style={styles.content} onLayout={handleLayout}>
+      <View style={styles.content}>
         {routes.map((route, index) => {
           const focused = index === state.index;
           const { options } = descriptors[route.key];
@@ -276,7 +348,7 @@ export default function BottomTabBar({
                 <BottomTabItem
                   route={route}
                   focused={focused}
-                  horizontal={shouldUseHorizontalLabels()}
+                  horizontal={hasHorizontalLabels}
                   onPress={onPress}
                   onLongPress={onLongPress}
                   accessibilityLabel={accessibilityLabel}
@@ -290,6 +362,7 @@ export default function BottomTabBar({
                   button={options.tabBarButton}
                   icon={options.tabBarIcon}
                   badge={options.tabBarBadge}
+                  badgeStyle={options.tabBarBadgeStyle}
                   label={label}
                   showLabel={showLabel}
                   labelStyle={labelStyle}

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

@@ -47,6 +47,10 @@ type Props = {
    * Text to show in a badge on the tab icon.
    */
   badge?: number | string;
+  /**
+   * Custom style for the badge.
+   */
+  badgeStyle?: StyleProp<TextStyle>;
   /**
    * URL to use for the link to the tab.
    */
@@ -122,6 +126,7 @@ export default function BottomTabBarItem({
   label,
   icon,
   badge,
+  badgeStyle,
   to,
   button = ({
     children,
@@ -129,6 +134,7 @@ export default function BottomTabBarItem({
     onPress,
     to,
     accessibilityRole,
+    accessibilityState,
     ...rest
   }: BottomTabBarButtonProps) => {
     if (Platform.OS === 'web' && to) {
@@ -157,6 +163,7 @@ export default function BottomTabBarItem({
         <TouchableWithoutFeedback
           {...rest}
           accessibilityRole={accessibilityRole}
+          accessibilityState={accessibilityState}
           onPress={onPress}
         >
           <View style={style}>{children}</View>
@@ -235,6 +242,7 @@ export default function BottomTabBarItem({
         route={route}
         horizontal={horizontal}
         badge={badge}
+        badgeStyle={badgeStyle}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
         activeTintColor={activeTintColor}

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import {
   NavigationHelpersContext,
@@ -7,11 +13,15 @@ import {
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
-import { ScreenContainer } from 'react-native-screens';
+import { ScreenContainer, screensEnabled } from 'react-native-screens';
 
-import SafeAreaProviderCompat from './SafeAreaProviderCompat';
+import SafeAreaProviderCompat, {
+  initialSafeAreaInsets,
+} from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
-import BottomTabBar from './BottomTabBar';
+import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
+import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
 import type {
   BottomTabNavigationConfig,
   BottomTabDescriptorMap,
@@ -27,6 +37,7 @@ type Props = BottomTabNavigationConfig & {
 
 type State = {
   loaded: string[];
+  tabBarHeight: number;
 };
 
 function SceneContent({
@@ -67,9 +78,28 @@ export default class BottomTabView extends React.Component<Props, State> {
     };
   }
 
-  state: State = {
-    loaded: [this.props.state.routes[this.props.state.index].key],
-  };
+  constructor(props: Props) {
+    super(props);
+
+    const { state, tabBarOptions } = this.props;
+
+    const dimensions = Dimensions.get('window');
+    const tabBarHeight = getTabBarHeight({
+      state,
+      dimensions,
+      layout: { width: dimensions.width, height: 0 },
+      insets: initialSafeAreaInsets,
+      adaptive: tabBarOptions?.adaptive,
+      labelPosition: tabBarOptions?.labelPosition,
+      tabStyle: tabBarOptions?.tabStyle,
+      style: tabBarOptions?.style,
+    });
+
+    this.state = {
+      loaded: [state.routes[state.index].key],
+      tabBarHeight: tabBarHeight,
+    };
+  }
 
   private renderTabBar = () => {
     const {
@@ -87,6 +117,16 @@ export default class BottomTabView extends React.Component<Props, State> {
     });
   };
 
+  private handleTabBarHeightChange = (height: number) => {
+    this.setState((state) => {
+      if (state.tabBarHeight !== height) {
+        return { tabBarHeight: height };
+      }
+
+      return null;
+    });
+  };
+
   render() {
     const {
       state,
@@ -97,50 +137,55 @@ export default class BottomTabView extends React.Component<Props, State> {
       sceneContainerStyle,
     } = this.props;
     const { routes } = state;
-    const { loaded } = this.state;
+    const { loaded, tabBarHeight } = this.state;
+    const isScreensEnabled = screensEnabled?.() && detachInactiveScreens;
 
     return (
       <NavigationHelpersContext.Provider value={navigation}>
         <SafeAreaProviderCompat>
-          <View style={styles.container}>
-            <ScreenContainer
-              // @ts-ignore
-              enabled={detachInactiveScreens}
-              style={styles.pages}
-            >
-              {routes.map((route, index) => {
-                const descriptor = descriptors[route.key];
-                const { unmountOnBlur } = descriptor.options;
-                const isFocused = state.index === index;
+          <ScreenContainer
+            // @ts-ignore
+            enabled={isScreensEnabled}
+            style={styles.container}
+          >
+            {routes.map((route, index) => {
+              const descriptor = descriptors[route.key];
+              const { unmountOnBlur } = descriptor.options;
+              const isFocused = state.index === index;
 
-                if (unmountOnBlur && !isFocused) {
-                  return null;
-                }
+              if (unmountOnBlur && !isFocused) {
+                return null;
+              }
 
-                if (lazy && !loaded.includes(route.key) && !isFocused) {
-                  // Don't render a screen if we've never navigated to it
-                  return null;
-                }
+              if (lazy && !loaded.includes(route.key) && !isFocused) {
+                // Don't render a screen if we've never navigated to it
+                return null;
+              }
 
-                return (
-                  <ResourceSavingScene
-                    key={route.key}
-                    style={StyleSheet.absoluteFill}
-                    isVisible={isFocused}
-                    enabled={detachInactiveScreens}
+              return (
+                <ResourceSavingScene
+                  key={route.key}
+                  style={StyleSheet.absoluteFill}
+                  isVisible={isFocused}
+                  enabled={isScreensEnabled}
+                >
+                  <SceneContent
+                    isFocused={isFocused}
+                    style={sceneContainerStyle}
                   >
-                    <SceneContent
-                      isFocused={isFocused}
-                      style={sceneContainerStyle}
-                    >
+                    <BottomTabBarHeightContext.Provider value={tabBarHeight}>
                       {descriptor.render()}
-                    </SceneContent>
-                  </ResourceSavingScene>
-                );
-              })}
-            </ScreenContainer>
+                    </BottomTabBarHeightContext.Provider>
+                  </SceneContent>
+                </ResourceSavingScene>
+              );
+            })}
+          </ScreenContainer>
+          <BottomTabBarHeightCallbackContext.Provider
+            value={this.handleTabBarHeightChange}
+          >
             {this.renderTabBar()}
-          </View>
+          </BottomTabBarHeightCallbackContext.Provider>
         </SafeAreaProviderCompat>
       </NavigationHelpersContext.Provider>
     );
@@ -152,9 +197,6 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
-  pages: {
-    flex: 1,
-  },
   content: {
     flex: 1,
   },

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

@@ -16,36 +16,56 @@ type Props = {
 
 const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
 
-export default class ResourceSavingScene extends React.Component<Props> {
-  render() {
-    // react-native-screens is buggy on web
-    if (screensEnabled?.() && Platform.OS !== 'web') {
-      const { isVisible, ...rest } = this.props;
-
-      if (shouldUseActivityState) {
-        return (
-          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen activityState={isVisible ? 2 : 0} {...rest} />
-        );
-      } else {
-        return (
-          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen active={isVisible ? 1 : 0} {...rest} />
-        );
-      }
+export default function ResourceSavingScene({
+  isVisible,
+  children,
+  style,
+  ...rest
+}: Props) {
+  // react-native-screens is buggy on web
+  if (screensEnabled?.() && Platform.OS !== 'web') {
+    if (shouldUseActivityState) {
+      return (
+        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+        <Screen activityState={isVisible ? 2 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
+      );
+    } else {
+      return (
+        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+        <Screen active={isVisible ? 1 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
+      );
     }
+  }
 
-    const { isVisible, children, style, ...rest } = this.props;
-
+  if (Platform.OS === 'web') {
     return (
       <View
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!isVisible}
         style={[
+          { display: isVisible ? 'flex' : 'none' },
           styles.container,
-          Platform.OS === 'web'
-            ? { display: isVisible ? 'flex' : 'none' }
-            : null,
           style,
         ]}
+        pointerEvents={isVisible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, style]}
+      // box-none doesn't seem to work properly on Android
+      pointerEvents={isVisible ? 'auto' : 'none'}
+    >
+      <View
         collapsable={false}
         removeClippedSubviews={
           // On iOS, set removeClippedSubviews to true only when not focused
@@ -53,14 +73,12 @@ export default class ResourceSavingScene extends React.Component<Props> {
           Platform.OS === 'ios' ? !isVisible : true
         }
         pointerEvents={isVisible ? 'auto' : 'none'}
-        {...rest}
+        style={isVisible ? styles.attached : styles.detached}
       >
-        <View style={isVisible ? styles.attached : styles.detached}>
-          {children}
-        </View>
+        {children}
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

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

@@ -12,7 +12,7 @@ import {
 // The provider component for safe area initializes asynchornously
 // Until the insets are available, there'll be blank screen
 // To avoid the blank screen, we specify some initial values
-const initialSafeAreaInsets = {
+export const initialSafeAreaInsets = {
   // Approximate values which are good enough for most cases
   top: getStatusBarHeight(true),
   bottom: getBottomSpace(),

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

@@ -1,5 +1,11 @@
 import React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type { Route } from '@react-navigation/native';
 import Badge from './Badge';
 
@@ -7,6 +13,7 @@ type Props = {
   route: Route<string>;
   horizontal: boolean;
   badge?: string | number;
+  badgeStyle?: StyleProp<TextStyle>;
   activeOpacity: number;
   inactiveOpacity: number;
   activeTintColor: string;
@@ -22,6 +29,7 @@ type Props = {
 export default function TabBarIcon({
   horizontal,
   badge,
+  badgeStyle,
   activeOpacity,
   inactiveOpacity,
   activeTintColor,
@@ -56,6 +64,7 @@ export default function TabBarIcon({
         style={[
           styles.badge,
           horizontal ? styles.badgeHorizontal : styles.badgeVertical,
+          badgeStyle,
         ]}
         size={(size * 3) / 4}
       >

packages/compat/CHANGELOG.md

@@ -3,6 +3,126 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.14...@react-navigation/compat@5.3.15) (2021-04-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.13...@react-navigation/compat@5.3.14) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.12...@react-navigation/compat@5.3.13) (2021-01-22)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.11...@react-navigation/compat@5.3.12) (2021-01-21)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.10...@react-navigation/compat@5.3.11) (2021-01-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.9...@react-navigation/compat@5.3.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.8...@react-navigation/compat@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.7...@react-navigation/compat@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.6...@react-navigation/compat@5.3.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.5...@react-navigation/compat@5.3.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.4...@react-navigation/compat@5.3.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.3...@react-navigation/compat@5.3.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.2...@react-navigation/compat@5.3.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.1...@react-navigation/compat@5.3.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.0...@react-navigation/compat@5.3.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.3.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.8...@react-navigation/compat@5.3.0) (2020-10-24)
 
 

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.3.0",
+  "version": "5.3.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,17 +31,17 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.0",
+    "@react-navigation/native": "^5.9.4",
     "@types/react": "^16.9.53",
     "react": "~16.13.1",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",
     "react": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/compat/src/createCompatNavigationProp.tsx

@@ -147,7 +147,6 @@ export default function createCompatNavigationProp<
       }
     },
     state: {
-      // @ts-expect-error: these properties may actually exist
       key: state.key,
       // @ts-expect-error
       routeName: state.name,
@@ -202,7 +201,6 @@ export default function createCompatNavigationProp<
 
       const { routes } = navigation.dangerouslyGetState();
 
-      // @ts-expect-error
       return routes[0].key === state.key;
     },
     dangerouslyGetParent() {

packages/core/CHANGELOG.md

@@ -3,6 +3,167 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.15.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.15.2...@react-navigation/core@5.15.3) (2021-04-04)
+
+
+### Bug Fixes
+
+* properly resolve initialRouteNames ([976178d](https://github.com/react-navigation/react-navigation/commit/976178d0986a90697931ab9cc2c297eb7938e28b))
+
+
+
+
+
+## [5.15.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.15.1...@react-navigation/core@5.15.2) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+## [5.15.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.15.0...@react-navigation/core@5.15.1) (2021-01-21)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.15.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.4...@react-navigation/core@5.15.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* print an error when passing a second argument to useFocusEffect ([2317633](https://github.com/react-navigation/react-navigation/commit/23176336528f98924d19f321d41cb70f13300edd))
+
+
+### Features
+
+* add a way to specify an unique ID for screens ([b19f76b](https://github.com/react-navigation/react-navigation/commit/b19f76bfffe623759e67d925bfd067c753a453bf))
+
+
+
+
+
+## [5.14.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.3...@react-navigation/core@5.14.4) (2020-11-20)
+
+
+### Bug Fixes
+
+* fix incorrect state change events in independent nested container ([95b2599](https://github.com/react-navigation/react-navigation/commit/95b2599877f5ceedf753e399e0586bb4af54cb87)), closes [#9080](https://github.com/react-navigation/react-navigation/issues/9080)
+
+
+
+
+
+## [5.14.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.2...@react-navigation/core@5.14.3) (2020-11-10)
+
+
+### Bug Fixes
+
+* improve the error message for incorrect screen configuration ([8f764d8](https://github.com/react-navigation/react-navigation/commit/8f764d8b0809604716d5d92ea33cc1beee02e804))
+
+
+
+
+
+## [5.14.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.1...@react-navigation/core@5.14.2) (2020-11-09)
+
+
+### Bug Fixes
+
+* throw if the same pattern resolves to multiple screens ([48b2e77](https://github.com/react-navigation/react-navigation/commit/48b2e777307908e8b3fcb49d8555b610dc0e38f2))
+
+
+
+
+
+## [5.14.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.14.0...@react-navigation/core@5.14.1) (2020-11-08)
+
+
+### Bug Fixes
+
+* tweak error message when navigator has non-screen children ([360b0e9](https://github.com/react-navigation/react-navigation/commit/360b0e995835990c55b75898757ebdd120d52446))
+
+
+
+
+
+# [5.14.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.5...@react-navigation/core@5.14.0) (2020-11-04)
+
+
+### Bug Fixes
+
+* always respect key in the route object when generating action ([cb2e744](https://github.com/react-navigation/react-navigation/commit/cb2e744dcebf7f71ddaa5462d393a6dbfd971fcd))
+
+
+### Features
+
+* add a NavigatorScreenParams type. closes [#6931](https://github.com/react-navigation/react-navigation/issues/6931) ([e3e58c2](https://github.com/react-navigation/react-navigation/commit/e3e58c2d890e7fab75d78371e349aea55a402fcd))
+* add warning on accessing the state object on route prop ([ec7b02a](https://github.com/react-navigation/react-navigation/commit/ec7b02af2ca835122b9000799e2366d7009da6e3))
+
+
+
+
+
+## [5.13.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.4...@react-navigation/core@5.13.5) (2020-11-04)
+
+
+### Bug Fixes
+
+* don't use use-subscription to avoid peer dep related errors ([66f3a4a](https://github.com/react-navigation/react-navigation/commit/66f3a4a0bb39475434668bc94fb1750dbe618ee0)), closes [/github.com/react-navigation/react-navigation/issues/9021#issuecomment-721679760](https://github.com//github.com/react-navigation/react-navigation/issues/9021/issues/issuecomment-721679760)
+* use useDebugValue in more places ([b20f2d1](https://github.com/react-navigation/react-navigation/commit/b20f2d1f7ccb82db70df9cddf5746557912daa99))
+
+
+
+
+
+## [5.13.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.3...@react-navigation/core@5.13.4) (2020-11-03)
+
+
+### Bug Fixes
+
+* fix nested navigation not working the first time ([ebc7f9e](https://github.com/react-navigation/react-navigation/commit/ebc7f9ea75bbf6e3b6303027cfa023d7c97342ff))
+
+
+
+
+
+## [5.13.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.2...@react-navigation/core@5.13.3) (2020-11-03)
+
+
+### Bug Fixes
+
+* handle navigating to same screen again for nested screens ([0945689](https://github.com/react-navigation/react-navigation/commit/0945689b70d71a4b5d766c61d57009761c460bf6))
+
+
+
+
+
+## [5.13.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.1...@react-navigation/core@5.13.2) (2020-10-30)
+
+
+### Bug Fixes
+
+* fix params from for the root screen when creating action ([e8515f9](https://github.com/react-navigation/react-navigation/commit/e8515f9cd94a912c107a407dea3d953c4172393f)), closes [#9006](https://github.com/react-navigation/react-navigation/issues/9006)
+* trim routes if an index is specified in state ([fb7ac96](https://github.com/react-navigation/react-navigation/commit/fb7ac960c8e1ffca200ecb12696ce5531a139e50))
+
+
+
+
+
+## [5.13.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.0...@react-navigation/core@5.13.1) (2020-10-28)
+
+
+### Bug Fixes
+
+* improve types for route prop in screenOptions ([d26bcc0](https://github.com/react-navigation/react-navigation/commit/d26bcc057ef31f8950f909adf83e263171a42d74))
+
+
+
+
+
 # [5.13.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.5...@react-navigation/core@5.13.0) (2020-10-24)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.13.0",
+  "version": "5.15.3",
   "keywords": [
     "react",
     "react-native",
@@ -35,28 +35,26 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.5.0",
+    "@react-navigation/routers": "^5.7.2",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.15",
     "query-string": "^6.13.6",
-    "react-is": "^16.13.0",
-    "use-subscription": "^1.5.0"
+    "react-is": "^16.13.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-is": "^16.7.1",
-    "@types/use-subscription": "^1.0.0",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
+    "react-native-builder-bob": "^0.17.0",
     "react-test-renderer": "~16.13.1",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/core/src/BaseNavigationContainer.tsx

@@ -8,9 +8,11 @@ import {
   NavigationAction,
 } from '@react-navigation/routers';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
+import UnhandledActionContext from './UnhandledActionContext';
 import NavigationBuilderContext from './NavigationBuilderContext';
 import NavigationStateContext from './NavigationStateContext';
-import UnhandledActionContext from './UnhandledActionContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import NavigationContext from './NavigationContext';
 import { ScheduleUpdateContext } from './useScheduleUpdate';
 import useChildListeners from './useChildListeners';
 import useKeyedChildListeners from './useKeyedChildListeners';
@@ -160,9 +162,20 @@ const BaseNavigationContainer = React.forwardRef(
 
     const resetRoot = React.useCallback(
       (state?: PartialState<NavigationState> | NavigationState) => {
-        setState(state);
+        const target = state?.key ?? keyedListeners.getState.root?.().key;
+
+        if (target == null) {
+          throw new Error(NOT_INITIALIZED_ERROR);
+        }
+
+        listeners.focus[0]((navigation) =>
+          navigation.dispatch({
+            ...CommonActions.reset(state),
+            target,
+          })
+        );
       },
-      [setState]
+      [keyedListeners.getState, listeners.focus]
     );
 
     const getRootState = React.useCallback(() => {
@@ -386,7 +399,7 @@ const BaseNavigationContainer = React.forwardRef(
       []
     );
 
-    return (
+    let element = (
       <ScheduleUpdateContext.Provider value={scheduleContext}>
         <NavigationBuilderContext.Provider value={builderContext}>
           <NavigationStateContext.Provider value={context}>
@@ -399,6 +412,19 @@ const BaseNavigationContainer = React.forwardRef(
         </NavigationBuilderContext.Provider>
       </ScheduleUpdateContext.Provider>
     );
+
+    if (independent) {
+      // We need to clear any existing contexts for nested independent container to work correctly
+      element = (
+        <NavigationRouteContext.Provider value={undefined}>
+          <NavigationContext.Provider value={undefined}>
+            {element}
+          </NavigationContext.Provider>
+        </NavigationRouteContext.Provider>
+      );
+    }
+
+    return element;
   }
 );
 

packages/core/src/SceneView.tsx

@@ -18,9 +18,8 @@ type Props<
 > = {
   screen: RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>;
   navigation: NavigationProp<ParamListBase, string, State, ScreenOptions>;
-  route: Route<string> & {
-    state?: NavigationState | PartialState<NavigationState>;
-  };
+  route: Route<string>;
+  routeState: NavigationState | PartialState<NavigationState> | undefined;
   getState: () => State;
   setState: (state: State) => void;
   options: object;
@@ -38,6 +37,7 @@ export default function SceneView<
   screen,
   route,
   navigation,
+  routeState,
   getState,
   setState,
   options,
@@ -86,7 +86,7 @@ export default function SceneView<
 
   const context = React.useMemo(
     () => ({
-      state: route.state,
+      state: routeState,
       getState: getCurrentState,
       setState: setCurrentState,
       getKey,
@@ -95,7 +95,7 @@ export default function SceneView<
       addOptionsGetter,
     }),
     [
-      route.state,
+      routeState,
       getCurrentState,
       setCurrentState,
       getKey,

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

@@ -757,3 +757,67 @@ it('invokes the unhandled action listener with the unhandled action', () => {
     type: 'NAVIGATE',
   });
 });
+
+it('works with state change events in independent nested container', () => {
+  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 onStateChange = jest.fn();
+
+  render(
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <BaseNavigationContainer
+              independent
+              ref={ref}
+              onStateChange={onStateChange}
+            >
+              <TestNavigator>
+                <Screen name="qux">{() => null}</Screen>
+                <Screen name="lex">{() => null}</Screen>
+              </TestNavigator>
+            </BaseNavigationContainer>
+          )}
+        </Screen>
+        <Screen name="bar">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  act(() => ref.current?.navigate('lex'));
+
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: '15',
+    routeNames: ['qux', 'lex'],
+    routes: [
+      { key: 'qux', name: 'qux' },
+      { key: 'lex', name: 'lex' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 1,
+    key: '15',
+    routeNames: ['qux', 'lex'],
+    routes: [
+      { key: 'qux', name: 'qux' },
+      { key: 'lex', name: 'lex' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+});

packages/core/src/__tests__/__fixtures__/MockRouter.tsx

@@ -132,6 +132,17 @@ export default function MockRouter(options: DefaultRouterOptions) {
           };
         }
 
+        case 'GO_BACK': {
+          if (state.index === 0) {
+            return null;
+          }
+
+          return {
+            ...state,
+            index: state.index - 1,
+          };
+        }
+
         default:
           return BaseRouter.getStateForAction(state, action);
       }

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

@@ -45,6 +45,249 @@ it('gets navigate action from state', () => {
   });
 });
 
+it('gets navigate action from state for top-level screen', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: { answer: 42 },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets reset action from state with 1 route with key at root', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        key: 'test',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    key: 'test',
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      routes: [
+        {
+          key: 'test',
+          name: 'foo',
+          state: {
+            routes: [
+              {
+                name: 'bar',
+                state: {
+                  routes: [
+                    { key: 'test', name: 'qux', params: { author: 'jane' } },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets reset action from state for top-level screen with 2 screens', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      routes: [
+        {
+          name: 'foo',
+          params: { answer: 42 },
+        },
+        {
+          name: 'bar',
+          params: { author: 'jane' },
+        },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets reset action from state for top-level screen with more than 2 screens with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+      { name: 'baz' },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      routes: [
+        {
+          name: 'foo',
+          params: { answer: 42 },
+        },
+        {
+          name: 'bar',
+          params: { author: 'jane' },
+        },
+        { name: 'baz' },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets reset action from state for top-level screen with 2 screens with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        key: 'test',
+        params: { author: 'jane' },
+      },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      routes: [
+        {
+          name: 'foo',
+          params: { answer: 42 },
+        },
+        {
+          name: 'bar',
+          key: 'test',
+          params: { author: 'jane' },
+        },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets navigate action from state for top-level screen with 2 screens with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'bar',
+      params: { author: 'jane' },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state for top-level screen with more than 2 screens with config with lower index', () => {
+  const state = {
+    index: 1,
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+      { name: 'baz' },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'bar',
+      params: { author: 'jane' },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
 it('gets navigate action from state with 2 screens', () => {
   const state = {
     routes: [
@@ -95,6 +338,51 @@ it('gets navigate action from state with 2 screens', () => {
   });
 });
 
+it('gets navigate action from state with 2 screens with lower index', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                index: 0,
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        screen: 'bar',
+        initial: true,
+        params: {
+          screen: 'qux',
+          initial: true,
+          params: {
+            author: 'jane',
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
 it('gets navigate action from state with more than 2 screens', () => {
   const state = {
     routes: [
@@ -205,6 +493,37 @@ it('gets navigate action from state with config', () => {
   });
 });
 
+it('gets navigate action from state for top-level screen with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      initialRouteName: 'bar',
+      foo: {
+        path: 'some-path/:answer',
+        parse: {
+          answer: Number,
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: { answer: 42 },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
 it('gets navigate action from state with 2 screens including initial route and with config', () => {
   const state = {
     routes: [
@@ -322,7 +641,7 @@ it('gets navigate action from state with 2 screens without initial route and wit
   });
 });
 
-it('gets navigate action from state with 2 screens including route with key and with config', () => {
+it('gets navigate action from state with 2 screens including route with key on initial route and with config', () => {
   const state = {
     routes: [
       {
@@ -387,6 +706,75 @@ it('gets navigate action from state with 2 screens including route with key and
   });
 });
 
+it('gets navigate action from state with 2 screens including route with key on 2nd route and with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  {
+                    key: 'test',
+                    name: 'quz',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'qux',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        initial: true,
+        screen: 'bar',
+        params: {
+          state: {
+            routes: [
+              {
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              {
+                key: 'test',
+                name: 'quz',
+              },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
 it('gets navigate action from state with more than 2 screens and with config', () => {
   const state = {
     routes: [
@@ -452,11 +840,70 @@ it('gets navigate action from state with more than 2 screens and with config', (
   });
 });
 
+it('gets navigate action from state with more than 2 screens with lower index', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                index: 1,
+                routes: [
+                  { name: 'quu' },
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'quu',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        screen: 'bar',
+        initial: true,
+        params: {
+          screen: 'qux',
+          initial: false,
+          params: {
+            author: 'jane',
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
 it("doesn't return action if no routes are provided'", () => {
   expect(getActionFromState({ routes: [] })).toBe(undefined);
 });
 
-it('gets reset action from state', () => {
+it('gets undefined action from state', () => {
   const state = {
     routes: [
       {

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

@@ -2673,6 +2673,47 @@ it('uses nearest parent wildcard match for unmatched paths', () => {
   );
 });
 
+it('throws if two screens map to the same pattern', () => {
+  const path = '/bar/42/baz/test';
+
+  expect(() =>
+    getStateFromPath(path, {
+      screens: {
+        Foo: {
+          screens: {
+            Bar: {
+              path: '/bar/:id/',
+              screens: {
+                Baz: 'baz',
+              },
+            },
+            Bax: '/bar/:id/baz',
+          },
+        },
+      },
+    })
+  ).toThrow(
+    "Found conflicting screens with the same pattern. The pattern 'bar/:id/baz' resolves to both 'Foo > Bax' and 'Foo > Bar > Baz'. Patterns must be unique and cannot resolve to more than one screen."
+  );
+
+  expect(() =>
+    getStateFromPath(path, {
+      screens: {
+        Foo: {
+          screens: {
+            Bar: {
+              path: '/bar/:id/',
+              screens: {
+                Baz: '',
+              },
+            },
+          },
+        },
+      },
+    })
+  ).not.toThrow();
+});
+
 it('throws if wildcard is specified with legacy config', () => {
   const path = '/bar/42/baz/test';
   const config = {
@@ -2780,3 +2821,117 @@ it("throws when using 'initialRouteName' or 'screens' with legacy config", () =>
     })
   ).toThrow('Found invalid keys in the configuration object.');
 });
+
+it('correctly applies initialRouteName for config with similar route names', () => {
+  const path = '/weekly-earnings';
+
+  const config = {
+    screens: {
+      RootTabs: {
+        screens: {
+          HomeTab: {
+            screens: {
+              Home: '',
+              WeeklyEarnings: 'weekly-earnings',
+              EventDetails: 'event-details/:eventId',
+            },
+          },
+          EarningsTab: {
+            initialRouteName: 'Earnings',
+            path: 'earnings',
+            screens: {
+              Earnings: '',
+              WeeklyEarnings: 'weekly-earnings',
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'RootTabs',
+        state: {
+          routes: [
+            {
+              name: 'HomeTab',
+              state: {
+                routes: [
+                  {
+                    name: 'WeeklyEarnings',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
+});
+
+it('correctly applies initialRouteName for config with similar route names v2', () => {
+  const path = '/earnings/weekly-earnings';
+
+  const config = {
+    screens: {
+      RootTabs: {
+        screens: {
+          HomeTab: {
+            initialRouteName: 'Home',
+            screens: {
+              Home: '',
+              WeeklyEarnings: 'weekly-earnings',
+            },
+          },
+          EarningsTab: {
+            initialRouteName: 'Earnings',
+            path: 'earnings',
+            screens: {
+              Earnings: '',
+              WeeklyEarnings: 'weekly-earnings',
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'RootTabs',
+        state: {
+          routes: [
+            {
+              name: 'EarningsTab',
+              state: {
+                index: 1,
+                routes: [
+                  {
+                    name: 'Earnings',
+                  },
+                  {
+                    name: 'WeeklyEarnings',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getStateFromPath(path, config)).toEqual(state);
+  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
+    state
+  );
+});

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

@@ -735,6 +735,20 @@ it('navigates to nested child in a navigator', () => {
   expect(element).toMatchInlineSnapshot(
     `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
   );
+
+  act(() => navigation.current?.navigate('bar', { screen: 'bar-b' }));
+
+  act(() => navigation.current?.goBack());
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
+  );
+
+  act(() => navigation.current?.navigate('bar', { screen: 'bar-b' }));
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42,\\"whoa\\":\\"test\\"}]"`
+  );
 });
 
 it('navigates to nested child in a navigator with initial: false', () => {
@@ -1448,6 +1462,51 @@ it('throws when Screen is not the direct children', () => {
   );
 });
 
+it('throws when undefined component is a direct children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const Undefined = undefined;
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Undefined name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  spy.mockRestore();
+
+  expect(() => render(element).update(element)).toThrowError(
+    "A navigator can only contain 'Screen' components as its direct children (found 'undefined' for the screen 'foo')"
+  );
+});
+
+it('throws when a tag is a direct children', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <screen name="foo" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "A navigator can only contain 'Screen' components as its direct children (found 'screen' for the screen 'foo')"
+  );
+});
+
 it('throws when a React Element is not the direct children', () => {
   const TestNavigator = (props: any) => {
     useNavigationBuilder(MockRouter, props);

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

@@ -239,3 +239,135 @@ it('runs cleanup when component is unmounted', () => {
   expect(focusEffect).toBeCalledTimes(1);
   expect(focusEffectCleanup).toBeCalledTimes(1);
 });
+
+it('prints error when a dependency array is passed', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(() => {}, []);
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "You passed a second argument to 'useFocusEffect', but it only accepts one argument."
+  );
+
+  spy.mockRestore();
+});
+
+it('prints error when the effect returns a value', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(() => 42);
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "An effect function must not return anything besides a function, which is used for clean-up. You returned '42'."
+  );
+
+  spy.mockRestore();
+});
+
+it('prints error when the effect returns null', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(() => null);
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "An effect function must not return anything besides a function, which is used for clean-up. You returned 'null'. If your effect does not require clean-up, return 'undefined' (or nothing)."
+  );
+
+  spy.mockRestore();
+});
+
+it('prints error when the effect is an async function', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const Test = () => {
+    // @ts-ignore
+    useFocusEffect(async () => {});
+
+    return null;
+  };
+
+  const App = () => (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="test" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<App />);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "An effect function must not return anything besides a function, which is used for clean-up.\n\nIt looks like you wrote 'useFocusEffect(async () => ...)' or returned a Promise."
+  );
+
+  spy.mockRestore();
+});

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

@@ -1178,3 +1178,149 @@ it("prevents removing by multiple screens with 'beforeRemove' event", () => {
     type: 'stack',
   });
 });
+
+it("prevents removing a child screen with 'beforeRemove' event with 'resetRoot'", () => {
+  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('baz'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      {
+        key: 'baz-4',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-6',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-7', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() =>
+    ref.current?.resetRoot({
+      index: 0,
+      key: 'stack-2',
+      routeNames: ['foo', 'bar', 'baz'],
+      routes: [{ key: 'foo-3', name: 'foo' }],
+      stale: false,
+      type: 'stack',
+    })
+  );
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      {
+        key: 'baz-4',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-6',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-7', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() =>
+    ref.current?.resetRoot({
+      index: 0,
+      key: 'stack-2',
+      routeNames: ['foo', 'bar', 'baz'],
+      routes: [{ key: 'foo-3', name: 'foo' }],
+      stale: false,
+      type: 'stack',
+    })
+  );
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});

packages/core/src/getActionFromState.tsx

@@ -1,10 +1,12 @@
 import type {
   Route,
   PartialRoute,
+  ParamListBase,
   NavigationState,
   PartialState,
+  CommonActions,
 } from '@react-navigation/routers';
-import type { PathConfig, PathConfigMap, NestedNavigateParams } from './types';
+import type { PathConfig, PathConfigMap, NavigatorScreenParams } from './types';
 
 type ConfigItem = {
   initialRouteName?: string;
@@ -17,66 +19,99 @@ type NavigateAction<State extends NavigationState> = {
   type: 'NAVIGATE';
   payload: {
     name: string;
-    params?: NestedNavigateParams<State>;
+    params?: NavigatorScreenParams<State>;
   };
 };
 
 export default function getActionFromState(
   state: PartialState<NavigationState>,
   options?: Options
-): NavigateAction<NavigationState> | undefined {
+): NavigateAction<NavigationState> | CommonActions.Action | undefined {
   // Create a normalized configs object which will be easier to use
   const normalizedConfig = options ? createNormalizedConfigItem(options) : {};
 
-  let payload;
-  let current: PartialState<NavigationState> | undefined = state;
-  let config: ConfigItem | undefined = normalizedConfig;
-  let params: NestedNavigateParams<NavigationState> = {};
+  const routes =
+    state.index != null ? state.routes.slice(0, state.index + 1) : state.routes;
+
+  if (routes.length === 0) {
+    return undefined;
+  }
+
+  if (
+    !(
+      (routes.length === 1 && routes[0].key === undefined) ||
+      (routes.length === 2 &&
+        routes[0].key === undefined &&
+        routes[0].name === normalizedConfig?.initialRouteName &&
+        routes[1].key === undefined)
+    )
+  ) {
+    return {
+      type: 'RESET',
+      payload: state,
+    };
+  }
+
+  const route = state.routes[state.index ?? state.routes.length - 1];
+
+  let current: PartialState<NavigationState> | undefined = route?.state;
+  let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
+  let params = { ...route.params } as NavigatorScreenParams<
+    ParamListBase,
+    NavigationState
+  >;
+
+  let payload = route ? { name: route.name, params } : undefined;
 
   while (current) {
     if (current.routes.length === 0) {
       return undefined;
     }
 
-    const route: Route<string> | PartialRoute<Route<string>> =
-      current.routes[current.routes.length - 1];
+    const routes =
+      current.index != null
+        ? current.routes.slice(0, current.index + 1)
+        : current.routes;
 
-    if (current.routes.length === 1) {
+    const route: Route<string> | PartialRoute<Route<string>> =
+      routes[routes.length - 1];
+
+    // Explicitly set to override existing value when merging params
+    Object.assign(params, {
+      initial: undefined,
+      screen: undefined,
+      params: undefined,
+      state: undefined,
+    });
+
+    if (routes.length === 1 && routes[0].key === undefined) {
       params.initial = true;
       params.screen = route.name;
-      params.state = undefined; // Explicitly set to override existing value when merging params
     } else if (
-      current.routes.length === 2 &&
-      current.routes[0].key === undefined &&
-      current.routes[0].name === config?.initialRouteName
+      routes.length === 2 &&
+      routes[0].key === undefined &&
+      routes[0].name === config?.initialRouteName &&
+      routes[1].key === undefined
     ) {
       params.initial = false;
       params.screen = route.name;
-      params.state = undefined;
     } else {
-      params.initial = undefined;
-      params.screen = undefined;
-      params.params = undefined;
       params.state = current;
       break;
     }
 
     if (route.state) {
       params.params = { ...route.params };
-      params = params.params;
+      params = params.params as NavigatorScreenParams<
+        ParamListBase,
+        NavigationState
+      >;
     } else {
       params.params = route.params;
     }
 
     current = route.state;
     config = config?.screens?.[route.name];
-
-    if (!payload) {
-      payload = {
-        name: route.name,
-        params,
-      };
-    }
   }
 
   if (!payload) {

packages/core/src/getFocusedRouteNameFromRoute.tsx

@@ -3,11 +3,17 @@ import type {
   PartialState,
   NavigationState,
 } from '@react-navigation/routers';
+import { SUPPRESS_STATE_ACCESS_WARNING } from './useRouteCache';
 
 export default function getFocusedRouteNameFromRoute(
   route: Partial<Route<string>> & { state?: PartialState<NavigationState> }
 ): string | undefined {
+  SUPPRESS_STATE_ACCESS_WARNING.value = true;
+
   const state = route.state;
+
+  SUPPRESS_STATE_ACCESS_WARNING.value = false;
+
   const params = route.params as { screen?: unknown } | undefined;
 
   const routeName = state

packages/core/src/getPathFromState.tsx

@@ -239,6 +239,10 @@ export default function getPathFromState(
 // Object.fromEntries is not available in older iOS versions
 const fromEntries = <K extends string, V>(entries: (readonly [K, V])[]) =>
   entries.reduce((acc, [k, v]) => {
+    if (acc.hasOwnProperty(k)) {
+      throw new Error(`A value for key '${k}' already exists in the object.`);
+    }
+
     acc[k] = v;
     return acc;
   }, {} as Record<K, V>);

packages/core/src/getStateFromPath.tsx

@@ -26,13 +26,18 @@ type RouteConfig = {
 
 type InitialRouteConfig = {
   initialRouteName: string;
-  connectedRoutes: string[];
+  parentScreens: string[];
 };
 
 type ResultState = PartialState<NavigationState> & {
   state?: ResultState;
 };
 
+type ParsedRoute = {
+  name: string;
+  params?: Record<string, any> | undefined;
+};
+
 /**
  * Utility to parse a path string to initial state object accepted by the container.
  * This is useful for deep linking when we need to handle the incoming URL.
@@ -65,7 +70,7 @@ export default function getStateFromPath(
   if (compatOptions?.initialRouteName) {
     initialRoutes.push({
       initialRouteName: compatOptions.initialRouteName,
-      connectedRoutes: Object.keys(compatOptions.screens),
+      parentScreens: [],
     });
   }
 
@@ -110,7 +115,8 @@ export default function getStateFromPath(
           key,
           screens as PathConfigMap,
           [],
-          initialRoutes
+          initialRoutes,
+          []
         )
       )
     )
@@ -119,6 +125,12 @@ export default function getStateFromPath(
       // - the most exhaustive ones are always at the beginning
       // - patterns with wildcard are always at the end
 
+      // If 2 patterns are same, move the one with less route names up
+      // This is an error state, so it's only useful for consistent error messages
+      if (a.pattern === b.pattern) {
+        return b.routeNames.join('>').localeCompare(a.routeNames.join('>'));
+      }
+
       // If one of the patterns starts with the other, it's more exhaustive
       // So move it up
       if (a.pattern.startsWith(b.pattern)) {
@@ -155,6 +167,35 @@ export default function getStateFromPath(
       return bWildcardIndex - aWildcardIndex;
     });
 
+  // Check for duplicate patterns in the config
+  configs.reduce<Record<string, RouteConfig>>((acc, config) => {
+    if (acc[config.pattern]) {
+      const a = acc[config.pattern].routeNames;
+      const b = config.routeNames;
+
+      // It's not a problem if the path string omitted from a inner most screen
+      // For example, it's ok if a path resolves to `A > B > C` or `A > B`
+      const intersects =
+        a.length > b.length
+          ? b.every((it, i) => a[i] === it)
+          : a.every((it, i) => b[i] === it);
+
+      if (!intersects) {
+        throw new Error(
+          `Found conflicting screens with the same pattern. The pattern '${
+            config.pattern
+          }' resolves to both '${a.join(' > ')}' and '${b.join(
+            ' > '
+          )}'. Patterns must be unique and cannot resolve to more than one screen.`
+        );
+      }
+    }
+
+    return Object.assign(acc, {
+      [config.pattern]: config,
+    });
+  }, {});
+
   if (remaining === '/') {
     // We need to add special handling of empty path so navigation to empty path also works
     // When handling empty path, we should only look at the root level config
@@ -189,7 +230,7 @@ export default function getStateFromPath(
   if (legacy === false) {
     // If we're not in legacy mode,, we match the whole path against the regex instead of segments
     // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-    const { routeNames, allParams, remainingPath } = matchAgainstConfigs(
+    const { routes, remainingPath } = matchAgainstConfigs(
       remaining,
       configs.map((c) => ({
         ...c,
@@ -198,39 +239,30 @@ export default function getStateFromPath(
       }))
     );
 
-    if (routeNames !== undefined) {
+    if (routes !== undefined) {
       // This will always be empty if full path matched
+      current = createNestedStateObject(routes, initialRoutes);
       remaining = remainingPath;
-      current = createNestedStateObject(
-        createRouteObjects(configs, routeNames, allParams),
-        initialRoutes
-      );
       result = current;
     }
   } else {
     // In legacy mode, we divide the path into segments and match piece by piece
     // This preserves the legacy behaviour, but we should remove it in next major
     while (remaining) {
-      let { routeNames, allParams, remainingPath } = matchAgainstConfigs(
-        remaining,
-        configs
-      );
+      let { routes, remainingPath } = matchAgainstConfigs(remaining, configs);
 
       remaining = remainingPath;
 
       // If we hadn't matched any segments earlier, use the path as route name
-      if (routeNames === undefined) {
+      if (routes === undefined) {
         const segments = remaining.split('/');
 
-        routeNames = [decodeURIComponent(segments[0])];
+        routes = [{ name: decodeURIComponent(segments[0]) }];
         segments.shift();
         remaining = segments.join('/');
       }
 
-      const state = createNestedStateObject(
-        createRouteObjects(configs, routeNames, allParams),
-        initialRoutes
-      );
+      const state = createNestedStateObject(routes, initialRoutes);
 
       if (current) {
         // The state should be nested inside the deepest route we parsed before
@@ -274,8 +306,7 @@ const joinPaths = (...paths: string[]): string =>
     .join('/');
 
 const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
-  let routeNames: string[] | undefined;
-  let allParams: Record<string, any> | undefined;
+  let routes: ParsedRoute[] | undefined;
   let remainingPath = remaining;
 
   // Go through all configs, and see if the next path segment matches our regex
@@ -288,21 +319,40 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      routeNames = [...config.routeNames];
+      const matchedParams = config.pattern
+        ?.split('/')
+        .filter((p) => p.startsWith(':'))
+        .reduce<Record<string, any>>(
+          (acc, p, i) =>
+            Object.assign(acc, {
+              // The param segments appear every second item starting from 2 in the regex match result
+              [p]: match![(i + 1) * 2].replace(/\//, ''),
+            }),
+          {}
+        );
 
-      const paramPatterns = config.pattern
-        .split('/')
-        .filter((p) => p.startsWith(':'));
+      routes = config.routeNames.map((name) => {
+        const config = configs.find((c) => c.screen === name);
+        const params = config?.path
+          ?.split('/')
+          .filter((p) => p.startsWith(':'))
+          .reduce<Record<string, any>>((acc, p) => {
+            const value = matchedParams[p];
 
-      if (paramPatterns.length) {
-        allParams = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
-          const value = match![(i + 1) * 2].replace(/\//, ''); // The param segments appear every second item starting from 2 in the regex match result
+            if (value) {
+              const key = p.replace(/^:/, '').replace(/\?$/, '');
+              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
+            }
 
-          acc[p] = value;
+            return acc;
+          }, {});
 
-          return acc;
-        }, {});
-      }
+        if (params && Object.keys(params).length) {
+          return { name, params };
+        }
+
+        return { name };
+      });
 
       remainingPath = remainingPath.replace(match[1], '');
 
@@ -310,7 +360,7 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
     }
   }
 
-  return { routeNames, allParams, remainingPath };
+  return { routes, remainingPath };
 };
 
 const createNormalizedConfigs = (
@@ -319,12 +369,15 @@ const createNormalizedConfigs = (
   routeConfig: PathConfigMap,
   routeNames: string[] = [],
   initials: InitialRouteConfig[],
+  parentScreens: string[],
   parentPattern?: string
 ): RouteConfig[] => {
   const configs: RouteConfig[] = [];
 
   routeNames.push(screen);
 
+  parentScreens.push(screen);
+
   const config = routeConfig[screen];
 
   if (typeof config === 'string') {
@@ -374,7 +427,7 @@ const createNormalizedConfigs = (
       if (config.initialRouteName) {
         initials.push({
           initialRouteName: config.initialRouteName,
-          connectedRoutes: Object.keys(config.screens),
+          parentScreens,
         });
       }
 
@@ -385,6 +438,7 @@ const createNormalizedConfigs = (
           config.screens as PathConfigMap,
           routeNames,
           initials,
+          [...parentScreens],
           pattern ?? parentPattern
         );
 
@@ -457,13 +511,23 @@ const findParseConfigForRoute = (
 // Try to find an initial route connected with the one passed
 const findInitialRoute = (
   routeName: string,
+  parentScreens: string[],
   initialRoutes: InitialRouteConfig[]
 ): string | undefined => {
   for (const config of initialRoutes) {
-    if (config.connectedRoutes.includes(routeName)) {
-      return config.initialRouteName === routeName
-        ? undefined
-        : config.initialRouteName;
+    if (parentScreens.length === config.parentScreens.length) {
+      let sameParents = true;
+      for (let i = 0; i < parentScreens.length; i++) {
+        if (parentScreens[i].localeCompare(config.parentScreens[i]) !== 0) {
+          sameParents = false;
+          break;
+        }
+      }
+      if (sameParents) {
+        return routeName !== config.initialRouteName
+          ? config.initialRouteName
+          : undefined;
+      }
     }
   }
   return undefined;
@@ -473,66 +537,60 @@ const findInitialRoute = (
 // it is the end of state and if there is initialRoute for this level
 const createStateObject = (
   initialRoute: string | undefined,
-  routeName: string,
-  params: Record<string, any> | undefined,
+  route: ParsedRoute,
   isEmpty: boolean
 ): InitialState => {
   if (isEmpty) {
     if (initialRoute) {
       return {
         index: 1,
-        routes: [{ name: initialRoute }, { name: routeName as string, params }],
+        routes: [{ name: initialRoute }, route],
       };
     } else {
       return {
-        routes: [{ name: routeName as string, params }],
+        routes: [route],
       };
     }
   } else {
     if (initialRoute) {
       return {
         index: 1,
-        routes: [
-          { name: initialRoute },
-          { name: routeName as string, params, state: { routes: [] } },
-        ],
+        routes: [{ name: initialRoute }, { ...route, state: { routes: [] } }],
       };
     } else {
       return {
-        routes: [{ name: routeName as string, params, state: { routes: [] } }],
+        routes: [{ ...route, state: { routes: [] } }],
       };
     }
   }
 };
 
 const createNestedStateObject = (
-  routes: { name: string; params?: object }[],
+  routes: ParsedRoute[],
   initialRoutes: InitialRouteConfig[]
 ) => {
   let state: InitialState;
-  let route = routes.shift() as { name: string; params?: object };
-  let initialRoute = findInitialRoute(route.name, initialRoutes);
+  let route = routes.shift() as ParsedRoute;
+  const parentScreens: string[] = [];
 
-  state = createStateObject(
-    initialRoute,
-    route.name,
-    route.params,
-    routes.length === 0
-  );
+  let initialRoute = findInitialRoute(route.name, parentScreens, initialRoutes);
+
+  parentScreens.push(route.name);
+
+  state = createStateObject(initialRoute, route, routes.length === 0);
 
   if (routes.length > 0) {
     let nestedState = state;
 
-    while ((route = routes.shift() as { name: string; params?: object })) {
-      initialRoute = findInitialRoute(route.name, initialRoutes);
+    while ((route = routes.shift() as ParsedRoute)) {
+      initialRoute = findInitialRoute(route.name, parentScreens, initialRoutes);
 
       const nestedStateIndex =
         nestedState.index || nestedState.routes.length - 1;
 
       nestedState.routes[nestedStateIndex].state = createStateObject(
         initialRoute,
-        route.name,
-        route.params,
+        route,
         routes.length === 0
       );
 
@@ -540,52 +598,14 @@ const createNestedStateObject = (
         nestedState = nestedState.routes[nestedStateIndex]
           .state as InitialState;
       }
+
+      parentScreens.push(route.name);
     }
   }
 
   return state;
 };
 
-const createRouteObjects = (
-  configs: RouteConfig[],
-  routeNames: string[],
-  allParams?: Record<string, any>
-) =>
-  routeNames.map((name) => {
-    const config = configs.find((c) => c.screen === name);
-
-    let params: object | undefined;
-
-    if (allParams && config?.path) {
-      const pattern = config.path;
-
-      if (pattern) {
-        const paramPatterns = pattern
-          .split('/')
-          .filter((p) => p.startsWith(':'));
-
-        if (paramPatterns.length) {
-          params = paramPatterns.reduce<Record<string, any>>((acc, p) => {
-            const key = p.replace(/^:/, '').replace(/\?$/, '');
-            const value = allParams![p];
-
-            if (value) {
-              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
-            }
-
-            return acc;
-          }, {});
-        }
-      }
-    }
-
-    if (params && Object.keys(params).length) {
-      return { name, params };
-    }
-
-    return { name };
-  });
-
 const findFocusedRoute = (state: InitialState) => {
   let current: InitialState | undefined = state;
 

packages/core/src/types.tsx

@@ -10,8 +10,9 @@ import type {
 } from '@react-navigation/routers';
 
 export type DefaultNavigatorOptions<
-  ScreenOptions extends {}
-> = DefaultRouterOptions & {
+  ScreenOptions extends {},
+  ParamList extends ParamListBase = ParamListBase
+> = DefaultRouterOptions<Extract<keyof ParamList, string>> & {
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen` components are supported as children.
@@ -23,7 +24,7 @@ export type DefaultNavigatorOptions<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamListBase, string>;
+        route: RouteProp<ParamList, keyof ParamList>;
         navigation: any;
       }) => ScreenOptions);
 };
@@ -387,6 +388,14 @@ export type RouteConfig<
         navigation: any;
       }) => ScreenListeners<State, EventMap>);
 
+  /**
+   * Function to return an unique ID for this screen.
+   * Receives an object with the route params.
+   * For a given screen name, there will always be only one screen corresponding to an ID.
+   * If `undefined` is returned, it acts same as no `getId` being specified.
+   */
+  getId?: ({ params }: { params: ParamList[RouteName] }) => string | undefined;
+
   /**
    * Initial params object for the route.
    */
@@ -489,14 +498,11 @@ export type TypedNavigator<
    * Navigator component which manages the child screens.
    */
   Navigator: React.ComponentType<
-    Omit<React.ComponentProps<Navigator>, keyof DefaultNavigatorOptions<any>> &
-      Omit<DefaultNavigatorOptions<ScreenOptions>, 'initialRouteName'> & {
-        /**
-         * Name of the route to focus by on initial render.
-         * If not specified, usually the first route is used.
-         */
-        initialRouteName?: keyof ParamList;
-      }
+    Omit<
+      React.ComponentProps<Navigator>,
+      keyof DefaultNavigatorOptions<any, any>
+    > &
+      DefaultNavigatorOptions<ScreenOptions, ParamList>
   >;
   /**
    * Component used for specifying route configuration.
@@ -506,19 +512,31 @@ export type TypedNavigator<
   ) => null;
 };
 
-export type NestedNavigateParams<State extends NavigationState> =
-  | {
-      screen?: string;
-      params?: object;
-      initial?: boolean;
-      state?: never;
-    }
+export type NavigatorScreenParams<
+  ParamList,
+  State extends NavigationState = NavigationState
+> =
   | {
       screen?: never;
       params?: never;
       initial?: never;
-      state?: PartialState<State> | State;
-    };
+      state: PartialState<State> | State | undefined;
+    }
+  | {
+      [RouteName in keyof ParamList]: undefined extends ParamList[RouteName]
+        ? {
+            screen: RouteName;
+            params?: ParamList[RouteName];
+            initial?: boolean;
+            state?: never;
+          }
+        : {
+            screen: RouteName;
+            params: ParamList[RouteName];
+            initial?: boolean;
+            state?: never;
+          };
+    }[keyof ParamList];
 
 export type PathConfig = {
   path?: string;

packages/core/src/useDescriptors.tsx

@@ -12,6 +12,7 @@ import NavigationBuilderContext, {
 } from './NavigationBuilderContext';
 import type { NavigationEventEmitter } from './useEventEmitter';
 import useNavigationCache from './useNavigationCache';
+import useRouteCache from './useRouteCache';
 import NavigationContext from './NavigationContext';
 import NavigationRouteContext from './NavigationRouteContext';
 import type {
@@ -113,9 +114,11 @@ export default function useDescriptors<
     emitter,
   });
 
-  return state.routes.reduce<
+  const routes = useRouteCache(state.routes);
+
+  return routes.reduce<
     Record<string, Descriptor<ParamListBase, string, State, ScreenOptions>>
-  >((acc, route) => {
+  >((acc, route, i) => {
     const screen = screens[route.name];
     const navigation = navigations[route.key];
 
@@ -151,6 +154,7 @@ export default function useDescriptors<
                   navigation={navigation}
                   route={route}
                   screen={screen}
+                  routeState={state.routes[i].state}
                   getState={getState}
                   setState={setState}
                   options={routeOptions}

packages/core/src/useFocusEffect.tsx

@@ -13,6 +13,20 @@ type EffectCallback = () => undefined | void | (() => void);
 export default function useFocusEffect(effect: EffectCallback) {
   const navigation = useNavigation();
 
+  if (arguments[1] !== undefined) {
+    const message =
+      "You passed a second argument to 'useFocusEffect', but it only accepts one argument. " +
+      "If you want to pass a dependency array, you can use 'React.useCallback':\n\n" +
+      'useFocusEffect(\n' +
+      '  React.useCallback(() => {\n' +
+      '    // Your code here\n' +
+      '  }, [depA, depB])\n' +
+      ');\n\n' +
+      'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
+
+    console.error(message);
+  }
+
   React.useEffect(() => {
     let isFocused = false;
     let cleanup: undefined | void | (() => void);
@@ -45,10 +59,10 @@ export default function useFocusEffect(effect: EffectCallback) {
             '    }\n\n' +
             '    fetchData();\n' +
             '  }, [someId])\n' +
-            '};\n\n' +
+            ');\n\n' +
             'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
         } else {
-          message += ` You returned: '${JSON.stringify(destroy)}'`;
+          message += ` You returned '${JSON.stringify(destroy)}'.`;
         }
 
         console.error(message);

packages/core/src/useIsFocused.tsx

@@ -1,32 +1,42 @@
 import * as React from 'react';
-import { useSubscription } from 'use-subscription';
+import { useState } from 'react';
 import useNavigation from './useNavigation';
 
 /**
  * Hook to get the current focus state of the screen. Returns a `true` if screen is focused, otherwise `false`.
  * This can be used if a component needs to render something based on the focus state.
- * It uses `use-subscription` under the hood for safer use in concurrent mode.
  */
 export default function useIsFocused(): boolean {
   const navigation = useNavigation();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const getCurrentValue = React.useCallback(navigation.isFocused, [navigation]);
-  const subscribe = React.useCallback(
-    (callback: () => void) => {
-      const unsubscribeFocus = navigation.addListener('focus', callback);
+  const [isFocused, setIsFocused] = useState(navigation.isFocused);
 
-      const unsubscribeBlur = navigation.addListener('blur', callback);
+  const valueToReturn = navigation.isFocused();
 
-      return () => {
-        unsubscribeFocus();
-        unsubscribeBlur();
-      };
-    },
-    [navigation]
-  );
+  if (isFocused !== valueToReturn) {
+    // If the value has changed since the last render, we need to update it.
+    // This could happen if we missed an update from the event listeners during re-render.
+    // React will process this update immediately, so the old subscription value won't be committed.
+    // It is still nice to avoid returning a mismatched value though, so let's override the return value.
+    // This is the same logic as in https://github.com/facebook/react/tree/master/packages/use-subscription
+    setIsFocused(valueToReturn);
+  }
 
-  return useSubscription({
-    getCurrentValue,
-    subscribe,
-  });
+  React.useEffect(() => {
+    const unsubscribeFocus = navigation.addListener('focus', () =>
+      setIsFocused(true)
+    );
+
+    const unsubscribeBlur = navigation.addListener('blur', () =>
+      setIsFocused(false)
+    );
+
+    return () => {
+      unsubscribeFocus();
+      unsubscribeBlur();
+    };
+  }, [navigation]);
+
+  React.useDebugValue(valueToReturn);
+
+  return valueToReturn;
 }

packages/core/src/useNavigationBuilder.tsx

@@ -7,6 +7,7 @@ import {
   ParamListBase,
   Router,
   RouterFactory,
+  RouterConfigOptions,
   PartialState,
   NavigationAction,
   Route,
@@ -34,7 +35,7 @@ import {
   PrivateValueStore,
   EventMapBase,
   EventMapCore,
-  NestedNavigateParams,
+  NavigatorScreenParams,
 } from './types';
 
 // This is to make TypeScript compiler happy
@@ -43,7 +44,7 @@ PrivateValueStore;
 
 type NavigatorRoute<State extends NavigationState> = {
   key: string;
-  params?: NestedNavigateParams<State>;
+  params?: NavigatorScreenParams<ParamListBase, State>;
 };
 
 /**
@@ -90,10 +91,17 @@ const getRouteConfigsFromChildren = <
     }
 
     throw new Error(
-      `A navigator can only contain 'Screen' components as its direct children (found '${
-        // @ts-expect-error: child can be any type and we're accessing it safely, but TS doesn't understand it
-        child.type?.name ? child.type.name : String(child)
-      }')`
+      `A navigator can only contain 'Screen' components as its direct children (found ${
+        React.isValidElement(child)
+          ? `'${
+              typeof child.type === 'string' ? child.type : child.type?.name
+            }'${
+              child.props?.name ? ` for the screen '${child.props.name}'` : ''
+            }`
+          : typeof child === 'object'
+          ? JSON.stringify(child)
+          : `'${String(child)}'`
+      }). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`
     );
   }, []);
 
@@ -250,6 +258,15 @@ export default function useNavigationBuilder<
     },
     {}
   );
+  const routeGetIdList = routeNames.reduce<
+    RouterConfigOptions['routeGetIdList']
+  >(
+    (acc, curr) =>
+      Object.assign(acc, {
+        [curr]: screens[curr].getId,
+      }),
+    {}
+  );
 
   if (!routeNames.length) {
     throw new Error(
@@ -290,6 +307,7 @@ export default function useNavigationBuilder<
         router.getInitialState({
           routeNames,
           routeParamList,
+          routeGetIdList,
         }),
         true,
       ];
@@ -300,6 +318,7 @@ export default function useNavigationBuilder<
           {
             routeNames,
             routeParamList,
+            routeGetIdList,
           }
         ),
         false,
@@ -329,6 +348,7 @@ export default function useNavigationBuilder<
     nextState = router.getStateForRouteNamesChange(state, {
       routeNames,
       routeParamList,
+      routeGetIdList,
     });
   }
 
@@ -353,9 +373,9 @@ export default function useNavigationBuilder<
     } else if (
       typeof route.params.screen === 'string' &&
       ((route.params.initial === false && isFirstStateInitialization) ||
-        route.params.screen !== previousParams?.screen ||
-        route.params.params !== previousParams?.params)
+        route.params !== previousParams)
     ) {
+      // FIXME: Since params are merged, `route.params.params` might contain params from an older route
       // If the route was updated with new screen name and/or params, we should navigate there
       action = CommonActions.navigate(route.params.screen, route.params.params);
     }
@@ -365,6 +385,7 @@ export default function useNavigationBuilder<
       ? router.getStateForAction(nextState, action, {
           routeNames,
           routeParamList,
+          routeGetIdList,
         })
       : null;
 
@@ -373,6 +394,7 @@ export default function useNavigationBuilder<
         ? router.getRehydratedState(updatedState, {
             routeNames,
             routeParamList,
+            routeGetIdList,
           })
         : nextState;
   }
@@ -494,6 +516,7 @@ export default function useNavigationBuilder<
     routerConfigOptions: {
       routeNames,
       routeParamList,
+      routeGetIdList,
     },
     emitter,
   });

packages/core/src/useNavigationHelpers.tsx

@@ -78,6 +78,7 @@ export default function useNavigationHelpers<
           router.getStateForAction(state, CommonActions.goBack() as Action, {
             routeNames: state.routeNames,
             routeParamList: {},
+            routeGetIdList: {},
           }) !== null ||
           parentNavigationHelpers?.canGoBack() ||
           false

packages/core/src/useOnAction.tsx

@@ -90,18 +90,11 @@ export default function useOnAction({
           onDispatchAction(action, state === result);
 
           if (state !== result) {
-            const nextRouteKeys = (result.routes as any[]).map(
-              (route: { key?: string }) => route.key
-            );
-
-            const removedRoutes = state.routes.filter(
-              (route) => !nextRouteKeys.includes(route.key)
-            );
-
             const isPrevented = shouldPreventRemove(
               emitter,
               beforeRemoveListeners,
-              removedRoutes,
+              state.routes,
+              result.routes,
               action
             );
 

packages/core/src/useOnPreventRemove.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type {
   NavigationState,
-  Route,
   NavigationAction,
 } from '@react-navigation/routers';
 import NavigationBuilderContext, {
@@ -22,11 +21,16 @@ const VISITED_ROUTE_KEYS = Symbol('VISITED_ROUTE_KEYS');
 export const shouldPreventRemove = (
   emitter: NavigationEventEmitter<EventMapCore<any>>,
   beforeRemoveListeners: Record<string, ChildBeforeRemoveListener | undefined>,
-  routes: Route<string>[],
+  currentRoutes: { key: string }[],
+  nextRoutes: { key?: string | undefined }[],
   action: NavigationAction
 ) => {
+  const nextRouteKeys = nextRoutes.map((route) => route.key);
+
   // Call these in reverse order so last screens handle the event first
-  const reversedRoutes = [...routes].reverse();
+  const removedRoutes = currentRoutes
+    .filter((route) => !nextRouteKeys.includes(route.key))
+    .reverse();
 
   const visitedRouteKeys: Set<string> =
     // @ts-expect-error: add this property to mark that we've already emitted this action
@@ -37,7 +41,7 @@ export const shouldPreventRemove = (
     [VISITED_ROUTE_KEYS]: visitedRouteKeys,
   };
 
-  for (const route of reversedRoutes) {
+  for (const route of removedRoutes) {
     if (visitedRouteKeys.has(route.key)) {
       // Skip if we've already emitted this action for this screen
       continue;
@@ -85,6 +89,7 @@ export default function useOnPreventRemove({
           emitter,
           beforeRemoveListeners,
           state.routes,
+          [],
           action
         );
       });

packages/core/src/useRouteCache.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import type {
+  ParamListBase,
+  NavigationState,
+  Route,
+} from '@react-navigation/routers';
+import type { RouteProp } from './types';
+
+type RouteCache = Map<Route<string>, RouteProp<ParamListBase, string>>;
+
+/**
+ * Utilites such as `getFocusedRouteNameFromRoute` need to access state.
+ * So we need a way to suppress the warning for those use cases.
+ * This is fine since they are internal utilities and this is not public API.
+ */
+export const SUPPRESS_STATE_ACCESS_WARNING = { value: false };
+
+/**
+ * Hook to cache route props for each screen in the navigator.
+ * This lets add warnings and modifications to the route object but keep references between renders.
+ */
+export default function useRouteCache<State extends NavigationState>(
+  routes: State['routes']
+) {
+  // Cache object which holds route objects for each screen
+  const cache = React.useMemo(() => ({ current: new Map() as RouteCache }), []);
+
+  if (process.env.NODE_ENV === 'production') {
+    // We don't want the overhead of creating extra maps every render in prod
+    return routes;
+  }
+
+  cache.current = routes.reduce((acc, route) => {
+    const previous = cache.current.get(route);
+
+    if (previous) {
+      // If a cached route object already exists, reuse it
+      acc.set(route, previous);
+    } else {
+      const proxy = { ...route };
+
+      Object.defineProperty(proxy, 'state', {
+        get() {
+          if (!SUPPRESS_STATE_ACCESS_WARNING.value) {
+            console.warn(
+              "Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state"
+            );
+          }
+
+          return route.state;
+        },
+      });
+
+      acc.set(route, proxy);
+    }
+
+    return acc;
+  }, new Map() as RouteCache);
+
+  return Array.from(cache.current.values());
+}

packages/core/src/useSyncState.tsx

@@ -68,5 +68,7 @@ export default function useSyncState<T>(initialState?: (() => T) | T) {
 
   const state = stateRef.current;
 
+  React.useDebugValue(state);
+
   return [state, getState, setState, scheduleUpdate, flushUpdates] as const;
 }

packages/devtools/CHANGELOG.md

@@ -3,6 +3,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.22](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.21...@react-navigation/devtools@5.1.22) (2021-04-04)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.21](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.20...@react-navigation/devtools@5.1.21) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.20](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.19...@react-navigation/devtools@5.1.20) (2021-01-21)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.18...@react-navigation/devtools@5.1.19) (2021-01-14)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.17...@react-navigation/devtools@5.1.18) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.16...@react-navigation/devtools@5.1.17) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.15...@react-navigation/devtools@5.1.16) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.14...@react-navigation/devtools@5.1.15) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.13...@react-navigation/devtools@5.1.14) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.12...@react-navigation/devtools@5.1.13) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.11...@react-navigation/devtools@5.1.12) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.10...@react-navigation/devtools@5.1.11) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.9...@react-navigation/devtools@5.1.10) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.8...@react-navigation/devtools@5.1.9) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
 ## [5.1.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.7...@react-navigation/devtools@5.1.8) (2020-10-24)
 
 **Note:** Version bump only for package @react-navigation/devtools

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "5.1.8",
+  "version": "5.1.22",
   "keywords": [
     "react",
     "react-native",
@@ -36,22 +36,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.13.0",
+    "@react-navigation/core": "^5.15.3",
     "deep-equal": "^2.0.4"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/deep-equal": "^1.0.1",
     "@types/react": "^16.9.53",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/drawer/CHANGELOG.md

@@ -3,6 +3,196 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.12.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.12.4...@react-navigation/drawer@5.12.5) (2021-04-04)
+
+
+### Bug Fixes
+
+* check for screens enabled in ScreenContainer ([493956e](https://github.com/react-navigation/react-navigation/commit/493956ef717a03bd8c3533a2949434e83718c5e4))
+* don't handle back button with permanent drawer ([a63f9da](https://github.com/react-navigation/react-navigation/commit/a63f9da8c1efe5d34567517ac2653608c6bbdeba))
+* don't pass accessibilityState to link. closes [#9418](https://github.com/react-navigation/react-navigation/issues/9418) ([699ea0c](https://github.com/react-navigation/react-navigation/commit/699ea0cc5052f190acc7ce8bc0328bb052d7cf26))
+* only handle back button in drawer when focused ([cceaa67](https://github.com/react-navigation/react-navigation/commit/cceaa6780d588b2a2ffa3a2039f65f9e60a33bf9))
+
+
+
+
+
+## [5.12.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.12.3...@react-navigation/drawer@5.12.4) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.12.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.12.2...@react-navigation/drawer@5.12.3) (2021-01-25)
+
+
+### Bug Fixes
+
+* fix drawer screen content not being interactable on Android ([87b5147](https://github.com/react-navigation/react-navigation/commit/87b51476d0bce8f2dae793416c2976da30a1a5f7))
+
+
+
+
+
+## [5.12.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.12.1...@react-navigation/drawer@5.12.2) (2021-01-22)
+
+
+### Bug Fixes
+
+* fix pointerEvents in ResourceSavingScene ([60fe0db](https://github.com/react-navigation/react-navigation/commit/60fe0dbb0ae443fdb21016d368c919b933cb64e7)), closes [#9241](https://github.com/react-navigation/react-navigation/issues/9241) [#9242](https://github.com/react-navigation/react-navigation/issues/9242)
+
+
+
+
+
+## [5.12.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.12.0...@react-navigation/drawer@5.12.1) (2021-01-22)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.12.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.5...@react-navigation/drawer@5.12.0) (2021-01-21)
+
+
+### Bug Fixes
+
+* fix drawer and bottom tabs not being visible on web. closes [#9225](https://github.com/react-navigation/react-navigation/issues/9225) ([d88cbcb](https://github.com/react-navigation/react-navigation/commit/d88cbcb52d46de26edaa9ce6bfb06badb1b1de64))
+
+
+### Features
+
+* add pressColor and pressOpacity props to drawerItem ([#8834](https://github.com/react-navigation/react-navigation/issues/8834)) ([bae4019](https://github.com/react-navigation/react-navigation/commit/bae4019995062c682f0213c121b7927ab8006c1e))
+
+
+
+
+
+## [5.11.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.4...@react-navigation/drawer@5.11.5) (2021-01-14)
+
+
+### Bug Fixes
+
+* enable detachInactiveScreens by default on web for better a11y ([dd87fa4](https://github.com/react-navigation/react-navigation/commit/dd87fa49a43ad8db105a62418243339e4150fadf))
+
+
+
+
+
+## [5.11.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.3...@react-navigation/drawer@5.11.4) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.11.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.2...@react-navigation/drawer@5.11.3) (2020-11-16)
+
+
+### Bug Fixes
+
+* hide drawer's header by default ([794339e](https://github.com/react-navigation/react-navigation/commit/794339eeed7c0d3b0e8b1752e494fbb4608ddfad))
+
+
+
+
+
+## [5.11.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.1...@react-navigation/drawer@5.11.2) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.11.0...@react-navigation/drawer@5.11.1) (2020-11-09)
+
+
+### Bug Fixes
+
+* provide correct context to drawe header ([18bbd17](https://github.com/react-navigation/react-navigation/commit/18bbd177d91ccc4308516208a8b9f1a34ca5cc41))
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.7...@react-navigation/drawer@5.11.0) (2020-11-09)
+
+
+### Bug Fixes
+
+* try fixing drawer blink on Android ([5217245](https://github.com/react-navigation/react-navigation/commit/52172453dfb71822c2fb0f5947d00bac4a840d07))
+
+
+### Features
+
+* add a getIsDrawerOpenFromState utility to drawer ([5bd682f](https://github.com/react-navigation/react-navigation/commit/5bd682f0bf6b28a95fb3e7fc9e1974057a877cb0))
+* add option to show a header in drawer navigator screens ([dbe961b](https://github.com/react-navigation/react-navigation/commit/dbe961ba5bb243e8da4d889c3c7dd6ed1de287c4))
+
+
+
+
+
+## [5.10.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.6...@react-navigation/drawer@5.10.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.5...@react-navigation/drawer@5.10.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.4...@react-navigation/drawer@5.10.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.3...@react-navigation/drawer@5.10.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.2...@react-navigation/drawer@5.10.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.1...@react-navigation/drawer@5.10.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.0...@react-navigation/drawer@5.10.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [5.10.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.9.3...@react-navigation/drawer@5.10.0) (2020-10-24)
 
 

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.10.0",
+  "version": "5.12.5",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,14 +45,14 @@
     "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.0",
+    "@react-navigation/native": "^5.9.4",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
@@ -68,7 +68,7 @@
     "react-native-safe-area-context": ">= 0.6.0",
     "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/drawer/src/index.tsx

@@ -17,6 +17,7 @@ export { default as DrawerContentScrollView } from './views/DrawerContentScrollV
  */
 export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
 
+export { default as getIsDrawerOpenFromState } from './utils/getIsDrawerOpenFromState';
 export { default as useIsDrawerOpen } from './utils/useIsDrawerOpen';
 
 /**

packages/drawer/src/types.tsx

@@ -18,6 +18,8 @@ export type Scene = {
   color?: string;
 };
 
+export type Layout = { width: number; height: number };
+
 export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   /**
    * Position of the drawer on the screen. Defaults to `left`.
@@ -94,12 +96,95 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   detachInactiveScreens?: boolean;
 };
 
-export type DrawerNavigationOptions = {
+export type DrawerHeaderOptions = {
+  /**
+   * String or a function that returns a React Element to be used by the header.
+   * Defaults to scene `title`.
+   * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
+   * The title string is passed in `children`.
+   */
+  headerTitle?:
+    | string
+    | ((props: {
+        /**
+         * Whether title font should scale to respect Text Size accessibility settings.
+         */
+        allowFontScaling?: boolean;
+        /**
+         * Tint color for the header.
+         */
+        tintColor?: string;
+        /**
+         * Content of the title element. Usually the title string.
+         */
+        children?: string;
+        /**
+         * Style object for the title element.
+         */
+        style?: StyleProp<TextStyle>;
+      }) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `center` on iOS and `left` on Android.
+   */
+  headerTitleAlign?: 'left' | 'center';
+  /**
+   * Style object for the title component.
+   */
+  headerTitleStyle?: StyleProp<TextStyle>;
+  /**
+   * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
+   */
+  headerTitleAllowFontScaling?: boolean;
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   */
+  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Accessibility label for the header left button.
+   */
+  headerLeftAccessibilityLabel?: string;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  headerPressColorAndroid?: string;
+  /**
+   * Tint color for the header.
+   */
+  headerTintColor?: string;
+  /**
+   * Style object for the header. You can specify a custom background color here, for example.
+   */
+  headerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Extra padding to add at the top of header to account for translucent status bar.
+   * By default, it uses the top value from the safe area insets of the device.
+   * Pass 0 or a custom value to disable the default behaviour, and customize the height.
+   */
+  headerStatusBarHeight?: number;
+};
+
+export type DrawerNavigationOptions = DrawerHeaderOptions & {
   /**
    * Title text for the screen.
    */
   title?: string;
 
+  /**
+   * Function that given `HeaderProps` returns a React Element to display as a header.
+   */
+  header?: (props: DrawerHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header. The header is not shown by default.
+   * Setting this to `true` shows the header.
+   */
+  headerShown?: boolean;
+
   /**
    * Title string of a screen displayed in the drawer
    * or a function that given { focused: boolean, color: string } returns a React.Node
@@ -187,6 +272,20 @@ export type DrawerContentOptions = {
   style?: StyleProp<ViewStyle>;
 };
 
+export type DrawerHeaderProps = {
+  /**
+   * Layout of the screen.
+   */
+  layout: Layout;
+  /**
+   * Object representing the current scene, such as the route object and descriptor.
+   */
+  scene: {
+    route: Route<string>;
+    descriptor: DrawerDescriptor;
+  };
+};
+
 export type DrawerNavigationEventMap = {
   /**
    * Event which fires when the drawer opens.

packages/drawer/src/utils/getIsDrawerOpenFromState.tsx

@@ -0,0 +1,16 @@
+import type {
+  DrawerNavigationState,
+  ParamListBase,
+} from '@react-navigation/native';
+
+export default function getIsDrawerOpenFromState(
+  state: DrawerNavigationState<ParamListBase>
+): boolean {
+  if (state.history == null) {
+    throw new Error(
+      "Couldn't find the drawer status in the state object. Is it a valid state object of drawer navigator?"
+    );
+  }
+
+  return state.history.some((it) => it.type === 'drawer');
+}

packages/drawer/src/views/Drawer.tsx

@@ -57,9 +57,10 @@ const DIRECTION_LEFT = 1;
 const DIRECTION_RIGHT = -1;
 
 const SWIPE_DISTANCE_THRESHOLD_DEFAULT = 60;
-
 const SWIPE_DISTANCE_MINIMUM = 5;
 
+const DEFAULT_DRAWER_WIDTH = '80%';
+
 const SPRING_CONFIG = {
   stiffness: 1000,
   damping: 500,
@@ -115,12 +116,6 @@ export default class DrawerView extends React.Component<Props> {
     statusBarAnimation: 'slide',
   };
 
-  componentDidMount() {
-    if (Platform.OS === 'web') {
-      document?.body?.addEventListener?.('keyup', this.handleEscape);
-    }
-  }
-
   componentDidUpdate(prevProps: Props) {
     const {
       open,
@@ -171,22 +166,8 @@ export default class DrawerView extends React.Component<Props> {
   componentWillUnmount() {
     this.toggleStatusBar(false);
     this.handleEndInteraction();
-
-    if (Platform.OS === 'web') {
-      document?.body?.removeEventListener?.('keyup', this.handleEscape);
-    }
   }
 
-  private handleEscape = (e: KeyboardEvent) => {
-    const { open, onClose } = this.props;
-
-    if (e.key === 'Escape') {
-      if (open) {
-        onClose();
-      }
-    }
-  };
-
   private handleEndInteraction = () => {
     if (this.interactionHandle !== undefined) {
       InteractionManager.clearInteractionHandle(this.interactionHandle);
@@ -202,7 +183,8 @@ export default class DrawerView extends React.Component<Props> {
 
   private getDrawerWidth = (): number => {
     const { drawerStyle, dimensions } = this.props;
-    const { width } = StyleSheet.flatten(drawerStyle);
+    const { width = DEFAULT_DRAWER_WIDTH } =
+      StyleSheet.flatten(drawerStyle) || {};
 
     if (typeof width === 'string' && width.endsWith('%')) {
       // Try to calculate width if a percentage is given
@@ -246,7 +228,7 @@ export default class DrawerView extends React.Component<Props> {
   private containerWidth = new Value<number>(this.props.dimensions.width);
   private drawerWidth = new Value<number>(this.initialDrawerWidth);
   private drawerOpacity = new Value<number>(
-    this.initialDrawerWidth || this.props.drawerType === 'permanent' ? 1 : 0
+    this.props.drawerType === 'permanent' ? 1 : 0
   );
   private drawerPosition = new Value<number>(
     this.props.drawerPosition === 'right' ? DIRECTION_RIGHT : DIRECTION_LEFT
@@ -730,7 +712,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     bottom: 0,
-    width: '80%',
+    width: DEFAULT_DRAWER_WIDTH,
   },
   content: {
     flex: 1,

packages/drawer/src/views/DrawerItem.tsx

@@ -56,6 +56,20 @@ type Props = {
    * Background color for item when its inactive.
    */
   inactiveBackgroundColor?: string;
+  /**
+   * Color of the touchable effect on press.
+   * Only supported on Android.
+   *
+   * @platform android
+   */
+  pressColor?: string;
+  /**
+   * Opacity of the touchable effect on press.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  pressOpacity?: string;
   /**
    * Style object for the label element.
    */
@@ -72,6 +86,7 @@ const Touchable = ({
   onPress,
   to,
   accessibilityRole,
+  accessibilityState,
   delayPressIn,
   ...rest
 }: TouchableWithoutFeedbackProps & {
@@ -105,6 +120,7 @@ const Touchable = ({
       <TouchableItem
         {...rest}
         accessibilityRole={accessibilityRole}
+        accessibilityState={accessibilityState}
         delayPressIn={delayPressIn}
         onPress={onPress}
       >
@@ -132,6 +148,8 @@ export default function DrawerItem(props: Props) {
     inactiveBackgroundColor = 'transparent',
     style,
     onPress,
+    pressColor,
+    pressOpacity,
     ...rest
   } = props;
 
@@ -159,6 +177,8 @@ export default function DrawerItem(props: Props) {
         accessibilityState={{ selected: focused }}
         // @ts-expect-error: keep for compatibility with older React Native versions
         accessibilityStates={focused ? ['selected'] : []}
+        pressColor={pressColor}
+        pressOpacity={pressOpacity}
         to={to}
       >
         <React.Fragment>

packages/drawer/src/views/DrawerView.tsx

@@ -5,11 +5,12 @@ import {
   I18nManager,
   Platform,
   BackHandler,
-  NativeEventSubscription,
 } from 'react-native';
-import { ScreenContainer } from 'react-native-screens';
+import { ScreenContainer, screensEnabled } from 'react-native-screens';
 import {
   NavigationHelpersContext,
+  NavigationContext,
+  NavigationRouteContext,
   DrawerNavigationState,
   DrawerActions,
   useTheme,
@@ -19,16 +20,19 @@ import {
 import { GestureHandlerRootView } from './GestureHandler';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
+import Header from './Header';
 import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
 import DrawerOpenContext from '../utils/DrawerOpenContext';
 import DrawerPositionContext from '../utils/DrawerPositionContext';
 import useWindowDimensions from '../utils/useWindowDimensions';
+import getIsDrawerOpenFromState from '../utils/getIsDrawerOpenFromState';
 import type {
   DrawerDescriptorMap,
   DrawerNavigationConfig,
   DrawerNavigationHelpers,
   DrawerContentComponentProps,
+  DrawerHeaderProps,
 } from '../types';
 
 type Props = DrawerNavigationConfig & {
@@ -90,7 +94,7 @@ export default function DrawerView({
 
   const { colors } = useTheme();
 
-  const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
+  const isDrawerOpen = getIsDrawerOpenFromState(state);
 
   const handleDrawerOpen = React.useCallback(() => {
     navigation.dispatch({
@@ -107,29 +111,48 @@ export default function DrawerView({
   }, [navigation, state.key]);
 
   React.useEffect(() => {
-    if (isDrawerOpen) {
-      navigation.emit({ type: 'drawerOpen' });
-    } else {
-      navigation.emit({ type: 'drawerClose' });
-    }
-  }, [isDrawerOpen, navigation]);
-
-  React.useEffect(() => {
-    let subscription: NativeEventSubscription | undefined;
-
-    if (isDrawerOpen) {
-      // We only add the subscription when drawer opens
-      // This way we can make sure that the subscription is added as late as possible
-      // This will make sure that our handler will run first when back button is pressed
-      subscription = BackHandler.addEventListener('hardwareBackPress', () => {
-        handleDrawerClose();
-
-        return true;
-      });
+    if (!isDrawerOpen || drawerType === 'permanent') {
+      return;
     }
 
-    return () => subscription?.remove();
-  }, [handleDrawerClose, isDrawerOpen, navigation, state.key]);
+    const handleClose = () => {
+      // We shouldn't handle the back button if the parent screen isn't focused
+      // This will avoid the drawer overriding event listeners from a focused screen
+      if (!navigation.isFocused()) {
+        return false;
+      }
+
+      handleDrawerClose();
+
+      return true;
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleClose();
+      }
+    };
+
+    // We only add the listeners when drawer opens
+    // This way we can make sure that the listener is added as late as possible
+    // This will make sure that our handler will run first when back button is pressed
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handleClose
+    );
+
+    if (Platform.OS === 'web') {
+      document?.body?.addEventListener?.('keyup', handleEscape);
+    }
+
+    return () => {
+      subscription.remove();
+
+      if (Platform.OS === 'web') {
+        document?.body?.removeEventListener?.('keyup', handleEscape);
+      }
+    };
+  }, [drawerType, handleDrawerClose, isDrawerOpen, navigation]);
 
   const focusedRouteKey = state.routes[state.index].key;
 
@@ -152,9 +175,11 @@ export default function DrawerView({
   };
 
   const renderContent = () => {
+    const isScreensEnabled = screensEnabled?.() && detachInactiveScreens;
+
     return (
       // @ts-ignore
-      <ScreenContainer enabled={detachInactiveScreens} style={styles.content}>
+      <ScreenContainer enabled={isScreensEnabled} style={styles.content}>
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
           const { unmountOnBlur } = descriptor.options;
@@ -169,13 +194,28 @@ export default function DrawerView({
             return null;
           }
 
+          const {
+            header = (props: DrawerHeaderProps) => <Header {...props} />,
+            headerShown = false,
+          } = descriptor.options;
+
           return (
             <ResourceSavingScene
               key={route.key}
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               isVisible={isFocused}
-              enabled={detachInactiveScreens}
+              enabled={isScreensEnabled}
             >
+              {headerShown ? (
+                <NavigationContext.Provider value={descriptor.navigation}>
+                  <NavigationRouteContext.Provider value={route}>
+                    {header({
+                      layout: dimensions,
+                      scene: { route, descriptor },
+                    })}
+                  </NavigationRouteContext.Provider>
+                </NavigationContext.Provider>
+              ) : null}
               {descriptor.render()}
             </ResourceSavingScene>
           );

packages/drawer/src/views/Header.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { Text, View, Image, StyleSheet, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DrawerActions, useTheme } from '@react-navigation/native';
+import TouchableItem from './TouchableItem';
+import type { Layout, DrawerHeaderProps } from '../types';
+
+export const getDefaultHeaderHeight = (
+  layout: Layout,
+  statusBarHeight: number
+): number => {
+  const isLandscape = layout.width > layout.height;
+
+  let headerHeight;
+
+  if (Platform.OS === 'ios') {
+    if (isLandscape && !Platform.isPad) {
+      headerHeight = 32;
+    } else {
+      headerHeight = 44;
+    }
+  } else if (Platform.OS === 'android') {
+    headerHeight = 56;
+  } else {
+    headerHeight = 64;
+  }
+
+  return headerHeight + statusBarHeight;
+};
+
+export default function HeaderSegment({ scene, layout }: DrawerHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const { colors } = useTheme();
+
+  const {
+    title,
+    headerTitle,
+    headerTitleAlign = Platform.select({
+      ios: 'center',
+      default: 'left',
+    }),
+    headerLeft,
+    headerLeftAccessibilityLabel,
+    headerRight,
+    headerTitleAllowFontScaling,
+    headerTitleStyle,
+    headerTintColor,
+    headerPressColorAndroid,
+    headerStyle,
+    headerStatusBarHeight = insets.top,
+  } = scene.descriptor.options;
+
+  const currentTitle =
+    typeof headerTitle !== 'function' && headerTitle !== undefined
+      ? headerTitle
+      : title !== undefined
+      ? title
+      : scene.route.name;
+
+  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+
+  const leftButton = headerLeft ? (
+    headerLeft({ tintColor: headerTintColor })
+  ) : (
+    <TouchableItem
+      accessible
+      accessibilityRole="button"
+      accessibilityComponentType="button"
+      accessibilityLabel={headerLeftAccessibilityLabel}
+      accessibilityTraits="button"
+      delayPressIn={0}
+      onPress={() =>
+        scene.descriptor.navigation.dispatch(DrawerActions.toggleDrawer())
+      }
+      style={styles.touchable}
+      pressColor={headerPressColorAndroid}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+      borderless
+    >
+      <Image
+        style={[
+          styles.icon,
+          headerTintColor ? { tintColor: headerTintColor } : null,
+        ]}
+        source={require('./assets/toggle-drawer-icon.png')}
+        fadeDuration={0}
+      />
+    </TouchableItem>
+  );
+  const rightButton = headerRight
+    ? headerRight({ tintColor: headerTintColor })
+    : null;
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[
+        {
+          height: defaultHeight,
+          backgroundColor: colors.card,
+          borderBottomColor: colors.border,
+          shadowColor: colors.border,
+        },
+        styles.container,
+        headerStyle,
+      ]}
+    >
+      <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+      <View pointerEvents="box-none" style={styles.content}>
+        {leftButton ? (
+          <View
+            pointerEvents="box-none"
+            style={[styles.left, { left: insets.left }]}
+          >
+            {leftButton}
+          </View>
+        ) : null}
+        <View
+          pointerEvents="box-none"
+          style={[
+            headerTitleAlign === 'left'
+              ? {
+                  position: 'absolute',
+                  left: (leftButton ? 72 : 16) + insets.left,
+                  right: (rightButton ? 72 : 16) + insets.right,
+                }
+              : {
+                  marginHorizontal:
+                    (leftButton ? 32 : 16) +
+                    Math.max(insets.left, insets.right),
+                },
+          ]}
+        >
+          {typeof headerTitle === 'function' ? (
+            headerTitle({
+              children: currentTitle,
+              allowFontScaling: headerTitleAllowFontScaling,
+              tintColor: headerTintColor,
+              style: headerTitleStyle,
+            })
+          ) : (
+            <Text
+              accessibilityRole="header"
+              aria-level="1"
+              numberOfLines={1}
+              allowFontScaling={headerTitleAllowFontScaling}
+              style={[
+                styles.title,
+                { color: headerTintColor ?? colors.text },
+                styles.title,
+                headerTitleStyle,
+              ]}
+            >
+              {currentTitle}
+            </Text>
+          )}
+        </View>
+        {rightButton ? (
+          <View
+            pointerEvents="box-none"
+            style={[styles.right, { right: insets.right }]}
+          >
+            {rightButton}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowOpacity: 0.85,
+        shadowRadius: 0,
+        shadowOffset: {
+          width: 0,
+          height: StyleSheet.hairlineWidth,
+        },
+      },
+      default: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+    }),
+    zIndex: 1,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: Platform.select({
+    ios: {
+      fontSize: 17,
+      fontWeight: '600',
+    },
+    android: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    default: {
+      fontSize: 18,
+      fontWeight: '500',
+    },
+  }),
+  icon: {
+    height: 24,
+    width: 24,
+    margin: 3,
+    resizeMode: 'contain',
+  },
+  touchable: {
+    marginHorizontal: 11,
+  },
+  left: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  right: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+});

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -16,36 +16,56 @@ type Props = {
 
 const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
 
-export default class ResourceSavingScene extends React.Component<Props> {
-  render() {
-    // react-native-screens is buggy on web
-    if (screensEnabled?.() && Platform.OS !== 'web') {
-      const { isVisible, ...rest } = this.props;
-
-      if (shouldUseActivityState) {
-        return (
-          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen activityState={isVisible ? 2 : 0} {...rest} />
-        );
-      } else {
-        return (
-          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-          <Screen active={isVisible ? 1 : 0} {...rest} />
-        );
-      }
+export default function ResourceSavingScene({
+  isVisible,
+  children,
+  style,
+  ...rest
+}: Props) {
+  // react-native-screens is buggy on web
+  if (screensEnabled?.() && Platform.OS !== 'web') {
+    if (shouldUseActivityState) {
+      return (
+        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+        <Screen activityState={isVisible ? 2 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
+      );
+    } else {
+      return (
+        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+        <Screen active={isVisible ? 1 : 0} style={style} {...rest}>
+          {children}
+        </Screen>
+      );
     }
+  }
 
-    const { isVisible, children, style, ...rest } = this.props;
-
+  if (Platform.OS === 'web') {
     return (
       <View
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!isVisible}
         style={[
+          { display: isVisible ? 'flex' : 'none' },
           styles.container,
-          Platform.OS === 'web'
-            ? { display: isVisible ? 'flex' : 'none' }
-            : { overflow: 'hidden' },
           style,
         ]}
+        pointerEvents={isVisible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, style]}
+      // box-none doesn't seem to work properly on Android
+      pointerEvents={isVisible ? 'auto' : 'none'}
+    >
+      <View
         collapsable={false}
         removeClippedSubviews={
           // On iOS, set removeClippedSubviews to true only when not focused
@@ -53,14 +73,12 @@ export default class ResourceSavingScene extends React.Component<Props> {
           Platform.OS === 'ios' ? !isVisible : true
         }
         pointerEvents={isVisible ? 'auto' : 'none'}
-        {...rest}
+        style={isVisible ? styles.attached : styles.detached}
       >
-        <View style={isVisible ? styles.attached : styles.detached}>
-          {children}
-        </View>
+        {children}
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

packages/drawer/src/views/TouchableItem.ios.tsx

@@ -5,14 +5,14 @@ import { BaseButton } from 'react-native-gesture-handler';
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
 type Props = React.ComponentProps<typeof BaseButton> & {
-  activeOpacity: number;
+  pressOpacity: number;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
 
 export default class TouchableItem extends React.Component<Props> {
   static defaultProps = {
-    activeOpacity: 0.3,
+    pressOpacity: 0.3,
     borderless: true,
     enabled: true,
   };
@@ -27,7 +27,7 @@ export default class TouchableItem extends React.Component<Props> {
       overshootClamping: true,
       restDisplacementThreshold: 0.01,
       restSpeedThreshold: 0.01,
-      toValue: active ? this.props.activeOpacity : 1,
+      toValue: active ? this.props.pressOpacity : 1,
       useNativeDriver,
     }).start();
 

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,132 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.14...@react-navigation/material-bottom-tabs@5.3.15) (2021-04-04)
+
+
+### Bug Fixes
+
+* don't pass accessibilityState to link. closes [#9418](https://github.com/react-navigation/react-navigation/issues/9418) ([699ea0c](https://github.com/react-navigation/react-navigation/commit/699ea0cc5052f190acc7ce8bc0328bb052d7cf26))
+
+
+
+
+
+## [5.3.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.13...@react-navigation/material-bottom-tabs@5.3.14) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.12...@react-navigation/material-bottom-tabs@5.3.13) (2021-01-22)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.11...@react-navigation/material-bottom-tabs@5.3.12) (2021-01-21)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.10...@react-navigation/material-bottom-tabs@5.3.11) (2021-01-14)
+
+
+### Bug Fixes
+
+* handle fallback for MaterialCommunityIcons better ([26074a2](https://github.com/react-navigation/react-navigation/commit/26074a28f768ba01743e2ca3b3cb9873a04c9d9c))
+
+
+
+
+
+## [5.3.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.9...@react-navigation/material-bottom-tabs@5.3.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.8...@react-navigation/material-bottom-tabs@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.7...@react-navigation/material-bottom-tabs@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.6...@react-navigation/material-bottom-tabs@5.3.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.5...@react-navigation/material-bottom-tabs@5.3.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.4...@react-navigation/material-bottom-tabs@5.3.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.3...@react-navigation/material-bottom-tabs@5.3.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.2...@react-navigation/material-bottom-tabs@5.3.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.1...@react-navigation/material-bottom-tabs@5.3.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.0...@react-navigation/material-bottom-tabs@5.3.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.3.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.19...@react-navigation/material-bottom-tabs@5.3.0) (2020-10-24)
 
 

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.3.0",
+  "version": "5.3.15",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,8 +41,7 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.0",
+    "@react-navigation/native": "^5.9.4",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
@@ -50,6 +49,7 @@
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-paper": "^4.2.0",
     "react-native-vector-icons": "^7.0.0",
     "typescript": "^4.0.3"
@@ -61,7 +61,7 @@
     "react-native-paper": ">= 3.0.0",
     "react-native-vector-icons": ">= 6.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Platform } from 'react-native';
+import { Text, StyleSheet, Platform } from 'react-native';
 import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
 import {
   NavigationHelpersContext,
@@ -28,44 +28,48 @@ type Scene = { route: { key: string } };
 
 // Optionally require vector-icons referenced from react-native-paper:
 // https://github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx#L14
-let MaterialCommunityIcons: any;
+let MaterialCommunityIcons: React.ComponentType<React.ComponentProps<
+  typeof import('react-native-vector-icons/MaterialCommunityIcons').default
+>>;
 
 try {
   // Optionally require vector-icons
   MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons')
     .default;
 } catch (e) {
-  // @ts-expect-error
-  if (global.__expo?.Icon?.MaterialCommunityIcons) {
-    // Snack doesn't properly bundle vector icons from sub-path
-    // Use icons from the __expo global if available
-    // @ts-expect-error
-    MaterialCommunityIcons = global.__expo.Icon.MaterialCommunityIcons;
-  } else {
-    let isErrorLogged = false;
+  let isErrorLogged = false;
 
-    // Fallback component for icons
-    MaterialCommunityIcons = () => {
-      if (!isErrorLogged) {
-        if (
-          !/(Cannot find module|Module not found|Cannot resolve module)/.test(
-            e.message
-          )
-        ) {
-          console.error(e);
-        }
-
-        console.warn(
-          `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons' could not be loaded.`,
-          `To remove this warning, try installing 'react-native-vector-icons' or use another method.`
-        );
-
-        isErrorLogged = true;
+  // Fallback component for icons
+  MaterialCommunityIcons = ({
+    name,
+    color,
+    size,
+    selectionColor: _,
+    ...rest
+  }) => {
+    if (!isErrorLogged) {
+      if (
+        !/(Cannot find module|Module not found|Cannot resolve module)/.test(
+          e.message
+        )
+      ) {
+        console.error(e);
       }
 
-      return null;
-    };
-  }
+      console.warn(
+        `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`,
+        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://reactnavigation.org/docs/material-bottom-tab-navigator/#tabbaricon.`
+      );
+
+      isErrorLogged = true;
+    }
+
+    return (
+      <Text {...rest} style={[styles.icon, { color, fontSize: size }]}>
+        □
+      </Text>
+    );
+  };
 }
 
 function MaterialBottomTabViewInner({
@@ -107,10 +111,13 @@ function MaterialBottomTabViewInner({
           ? ({
               onPress,
               route,
-              accessibilityRole: _0,
-              borderless: _1,
-              centered: _2,
-              rippleColor: _3,
+              /* eslint-disable @typescript-eslint/no-unused-vars */
+              accessibilityRole,
+              accessibilityState,
+              borderless,
+              centered,
+              rippleColor,
+              /* eslint-enable @typescript-eslint/no-unused-vars */
               style,
               ...rest
             }) => {

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,126 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.14...@react-navigation/material-top-tabs@5.3.15) (2021-04-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.13...@react-navigation/material-top-tabs@5.3.14) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.12...@react-navigation/material-top-tabs@5.3.13) (2021-01-22)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.11...@react-navigation/material-top-tabs@5.3.12) (2021-01-21)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.10...@react-navigation/material-top-tabs@5.3.11) (2021-01-14)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.9...@react-navigation/material-top-tabs@5.3.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.8...@react-navigation/material-top-tabs@5.3.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.7...@react-navigation/material-top-tabs@5.3.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.6...@react-navigation/material-top-tabs@5.3.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.5...@react-navigation/material-top-tabs@5.3.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.4...@react-navigation/material-top-tabs@5.3.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.3...@react-navigation/material-top-tabs@5.3.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.2...@react-navigation/material-top-tabs@5.3.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.1...@react-navigation/material-top-tabs@5.3.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.0...@react-navigation/material-top-tabs@5.3.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [5.3.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.19...@react-navigation/material-top-tabs@5.3.0) (2020-10-24)
 
 

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.3.0",
+  "version": "5.3.15",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -44,14 +44,14 @@
     "color": "^3.1.3"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.8.0",
+    "@react-navigation/native": "^5.9.4",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-tab-view": "^2.15.2",
@@ -65,7 +65,7 @@
     "react-native-reanimated": ">= 1.0.0",
     "react-native-tab-view": ">= 2.0.0"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/native/CHANGELOG.md

@@ -3,6 +3,146 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.9.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.9.3...@react-navigation/native@5.9.4) (2021-04-04)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.9.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.9.2...@react-navigation/native@5.9.3) (2021-02-21)
+
+
+### Bug Fixes
+
+* address breaking change in react-native for Linking ([a8342aa](https://github.com/react-navigation/react-navigation/commit/a8342aaf3d1ba8fb29faa91c7b63ed25f11745e5))
+
+
+
+
+
+## [5.9.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.9.1...@react-navigation/native@5.9.2) (2021-01-22)
+
+
+### Bug Fixes
+
+* normalize prefix when parsing. fixes [#9081](https://github.com/react-navigation/react-navigation/issues/9081) ([4ca2d2d](https://github.com/react-navigation/react-navigation/commit/4ca2d2d22bc9eccf87451b15c823174d98cbd0a2))
+
+
+
+
+
+## [5.9.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.9.0...@react-navigation/native@5.9.1) (2021-01-21)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.9.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.10...@react-navigation/native@5.9.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* support sync getInitialURL in native useLinking ([b26b907](https://github.com/react-navigation/react-navigation/commit/b26b90706fe0a0d914d4a868df1310d2dc3a7623))
+
+
+### Features
+
+* expose getActionForState in linking ([c9a5d45](https://github.com/react-navigation/react-navigation/commit/c9a5d4532406c6bfdac0c675a3fe4db5430e9a55))
+
+
+
+
+
+## [5.8.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.9...@react-navigation/native@5.8.10) (2020-11-20)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.8...@react-navigation/native@5.8.9) (2020-11-10)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.7...@react-navigation/native@5.8.8) (2020-11-09)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.6...@react-navigation/native@5.8.7) (2020-11-08)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.5...@react-navigation/native@5.8.6) (2020-11-04)
+
+
+### Bug Fixes
+
+* ignore any errors from deep linking ([4c2379c](https://github.com/react-navigation/react-navigation/commit/4c2379cec1e661aa132002fd1c50909ea64cb983))
+
+
+
+
+
+## [5.8.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.4...@react-navigation/native@5.8.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.3...@react-navigation/native@5.8.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.2...@react-navigation/native@5.8.3) (2020-11-03)
+
+
+### Bug Fixes
+
+* make sure that invalid linking config doesn't work if app is open ([52451d1](https://github.com/react-navigation/react-navigation/commit/52451d11094b8551e3c6950b3e005d68225c7da9))
+
+
+
+
+
+## [5.8.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.1...@react-navigation/native@5.8.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.0...@react-navigation/native@5.8.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 # [5.8.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.7.6...@react-navigation/native@5.8.0) (2020-10-24)