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/check-repro.yml

@@ -1,42 +0,0 @@
-name: Check for repro
-on:
-  issues:
-    types: [opened, edited]
-  issue_comment:
-    types: [created, edited]
-
-jobs:
-  check-repro:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/github-script@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const body = context.payload.comment
-              ? context.payload.comment.body
-              : context.payload.issue.body
-
-            if (!/https?:\/\/((github\.com\/[^/]+\/[^/]+\/?[\s\n]+)|(snack\.expo\.io\/.+))/gm.test(body)) {
-              return
-            }
-
-            await github.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: ['repro provided'],
-            })
-
-            try {
-              await github.issues.removeLabel({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                name: 'needs repro',
-              })
-            } catch (error) {
-              if (!/Label does not exist/.test(error.message)) {
-                throw error
-              }
-            }

.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,42 +0,0 @@
-name: Expo Publish
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-
-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.). In addition, if you can provide a video or GIF demonstrating the issue, it will also be very helpful."
-            })
-
-  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. Seems that this issue issue related to `react-native-screens` library which is a dependency of React Navigation. Can you also 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? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
-            })
-
-  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. Seems that this issue issue related to `react-native-reanimated` library which is a dependency of React Navigation. Can you also 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? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
-            })
-
-  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. Seems that this issue issue related to `react-native-gesture-handler` library which is a dependency of React Navigation. Can you also 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? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
-            })
-
-  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. Seems that this issue issue related to `react-native-safe-area-context` library which is a dependency of React Navigation. Can you also 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? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
-            })

.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/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']

example/package.json

@@ -56,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/index.tsx

@@ -9,6 +9,7 @@ import {
   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 {
@@ -306,38 +307,42 @@ export default function App() {
                     <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>
                   )}
                 </Drawer.Screen>

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,89 @@
 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

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.11.2",
+  "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.10",
+    "@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/views/BottomTabBar.tsx

@@ -296,8 +296,9 @@ export default function BottomTabBar({
         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];

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

@@ -134,6 +134,7 @@ export default function BottomTabBarItem({
     onPress,
     to,
     accessibilityRole,
+    accessibilityState,
     ...rest
   }: BottomTabBarButtonProps) => {
     if (Platform.OS === 'web' && to) {
@@ -162,6 +163,7 @@ export default function BottomTabBarItem({
         <TouchableWithoutFeedback
           {...rest}
           accessibilityRole={accessibilityRole}
+          accessibilityState={accessibilityState}
           onPress={onPress}
         >
           <View style={style}>{children}</View>

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

@@ -13,7 +13,7 @@ import {
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
-import { ScreenContainer } from 'react-native-screens';
+import { ScreenContainer, screensEnabled } from 'react-native-screens';
 
 import SafeAreaProviderCompat, {
   initialSafeAreaInsets,
@@ -138,55 +138,54 @@ export default class BottomTabView extends React.Component<Props, State> {
     } = this.props;
     const { routes } = 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()}
-                      </BottomTabBarHeightContext.Provider>
-                    </SceneContent>
-                  </ResourceSavingScene>
-                );
-              })}
-            </ScreenContainer>
-            <BottomTabBarHeightCallbackContext.Provider
-              value={this.handleTabBarHeightChange}
-            >
-              {this.renderTabBar()}
-            </BottomTabBarHeightCallbackContext.Provider>
-          </View>
+                    <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+                      {descriptor.render()}
+                    </BottomTabBarHeightContext.Provider>
+                  </SceneContent>
+                </ResourceSavingScene>
+              );
+            })}
+          </ScreenContainer>
+          <BottomTabBarHeightCallbackContext.Provider
+            value={this.handleTabBarHeightChange}
+          >
+            {this.renderTabBar()}
+          </BottomTabBarHeightCallbackContext.Provider>
         </SafeAreaProviderCompat>
       </NavigationHelpersContext.Provider>
     );
@@ -198,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/compat/CHANGELOG.md

@@ -3,6 +3,46 @@
 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

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.10",
+  "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.10",
+    "@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/core/CHANGELOG.md

@@ -3,6 +3,49 @@
 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)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.14.4",
+  "version": "5.15.3",
   "keywords": [
     "react",
     "react-native",
@@ -35,26 +35,26 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.6.2",
+    "@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"
   },
   "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",
     "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/__tests__/getStateFromPath.test.tsx

@@ -2821,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__/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/getStateFromPath.tsx

@@ -26,7 +26,7 @@ type RouteConfig = {
 
 type InitialRouteConfig = {
   initialRouteName: string;
-  connectedRoutes: string[];
+  parentScreens: string[];
 };
 
 type ResultState = PartialState<NavigationState> & {
@@ -70,7 +70,7 @@ export default function getStateFromPath(
   if (compatOptions?.initialRouteName) {
     initialRoutes.push({
       initialRouteName: compatOptions.initialRouteName,
-      connectedRoutes: Object.keys(compatOptions.screens),
+      parentScreens: [],
     });
   }
 
@@ -115,7 +115,8 @@ export default function getStateFromPath(
           key,
           screens as PathConfigMap,
           [],
-          initialRoutes
+          initialRoutes,
+          []
         )
       )
     )
@@ -368,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') {
@@ -423,7 +427,7 @@ const createNormalizedConfigs = (
       if (config.initialRouteName) {
         initials.push({
           initialRouteName: config.initialRouteName,
-          connectedRoutes: Object.keys(config.screens),
+          parentScreens,
         });
       }
 
@@ -434,6 +438,7 @@ const createNormalizedConfigs = (
           config.screens as PathConfigMap,
           routeNames,
           initials,
+          [...parentScreens],
           pattern ?? parentPattern
         );
 
@@ -506,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;
@@ -556,7 +571,11 @@ const createNestedStateObject = (
 ) => {
   let state: InitialState;
   let route = routes.shift() as ParsedRoute;
-  let initialRoute = findInitialRoute(route.name, initialRoutes);
+  const parentScreens: string[] = [];
+
+  let initialRoute = findInitialRoute(route.name, parentScreens, initialRoutes);
+
+  parentScreens.push(route.name);
 
   state = createStateObject(initialRoute, route, routes.length === 0);
 
@@ -564,7 +583,7 @@ const createNestedStateObject = (
     let nestedState = state;
 
     while ((route = routes.shift() as ParsedRoute)) {
-      initialRoute = findInitialRoute(route.name, initialRoutes);
+      initialRoute = findInitialRoute(route.name, parentScreens, initialRoutes);
 
       const nestedStateIndex =
         nestedState.index || nestedState.routes.length - 1;
@@ -579,6 +598,8 @@ const createNestedStateObject = (
         nestedState = nestedState.routes[nestedStateIndex]
           .state as InitialState;
       }
+
+      parentScreens.push(route.name);
     }
   }
 

packages/core/src/types.tsx

@@ -388,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.
    */

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/useNavigationBuilder.tsx

@@ -7,6 +7,7 @@ import {
   ParamListBase,
   Router,
   RouterFactory,
+  RouterConfigOptions,
   PartialState,
   NavigationAction,
   Route,
@@ -257,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(
@@ -297,6 +307,7 @@ export default function useNavigationBuilder<
         router.getInitialState({
           routeNames,
           routeParamList,
+          routeGetIdList,
         }),
         true,
       ];
@@ -307,6 +318,7 @@ export default function useNavigationBuilder<
           {
             routeNames,
             routeParamList,
+            routeGetIdList,
           }
         ),
         false,
@@ -336,6 +348,7 @@ export default function useNavigationBuilder<
     nextState = router.getStateForRouteNamesChange(state, {
       routeNames,
       routeParamList,
+      routeGetIdList,
     });
   }
 
@@ -372,6 +385,7 @@ export default function useNavigationBuilder<
       ? router.getStateForAction(nextState, action, {
           routeNames,
           routeParamList,
+          routeGetIdList,
         })
       : null;
 
@@ -380,6 +394,7 @@ export default function useNavigationBuilder<
         ? router.getRehydratedState(updatedState, {
             routeNames,
             routeParamList,
+            routeGetIdList,
           })
         : nextState;
   }
@@ -501,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/devtools/CHANGELOG.md

@@ -3,6 +3,38 @@
 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

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "5.1.18",
+  "version": "5.1.22",
   "keywords": [
     "react",
     "react-native",
@@ -36,22 +36,22 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.14.4",
+    "@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,85 @@
 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

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.11.4",
+  "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.10",
+    "@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/views/Drawer.tsx

@@ -116,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,
@@ -172,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);

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,9 +5,8 @@ import {
   I18nManager,
   Platform,
   BackHandler,
-  NativeEventSubscription,
 } from 'react-native';
-import { ScreenContainer } from 'react-native-screens';
+import { ScreenContainer, screensEnabled } from 'react-native-screens';
 import {
   NavigationHelpersContext,
   NavigationContext,
@@ -112,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;
 
@@ -157,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;
@@ -184,7 +204,7 @@ export default function DrawerView({
               key={route.key}
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               isVisible={isFocused}
-              enabled={detachInactiveScreens}
+              enabled={isScreensEnabled}
             >
               {headerShown ? (
                 <NavigationContext.Provider value={descriptor.navigation}>

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,52 @@
 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

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.10",
+  "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.10",
+    "@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,46 @@
 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

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.10",
+  "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.10",
+    "@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,60 @@
 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

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.8.10",
+  "version": "5.9.4",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,12 +37,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.14.4",
+    "@react-navigation/core": "^5.15.3",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.15"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
@@ -51,13 +50,14 @@
     "react": "~16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "~0.63.2",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/native/src/LinkingContext.tsx

@@ -5,4 +5,6 @@ const LinkingContext = React.createContext<{
   options: LinkingOptions | undefined;
 }>({ options: undefined });
 
+LinkingContext.displayName = 'LinkingContext';
+
 export default LinkingContext;

packages/native/src/__tests__/extractPathFromURL.test.tsx

@@ -0,0 +1,318 @@
+import extractPathFromURL from '../extractPathFromURL';
+
+it('extracts path from URL with protocol', () => {
+  expect(extractPathFromURL(['scheme://'], 'scheme://some/path')).toBe(
+    'some/path'
+  );
+
+  expect(extractPathFromURL(['scheme://'], 'scheme:some/path')).toBe(
+    'some/path'
+  );
+
+  expect(extractPathFromURL(['scheme://'], 'scheme:///some/path')).toBe(
+    'some/path'
+  );
+
+  expect(extractPathFromURL(['scheme:///'], 'scheme:some/path')).toBe(
+    'some/path'
+  );
+
+  expect(extractPathFromURL(['scheme:'], 'scheme:some/path')).toBe('some/path');
+
+  expect(extractPathFromURL(['scheme:'], 'scheme://some/path')).toBe(
+    'some/path'
+  );
+
+  expect(extractPathFromURL(['scheme:'], 'scheme:///some/path')).toBe(
+    'some/path'
+  );
+});
+
+it('extracts path from URL with protocol and host', () => {
+  expect(
+    extractPathFromURL(
+      ['scheme://example.com'],
+      'scheme://example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(['scheme://example.com'], 'scheme:example.com/some/path')
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme://example.com'],
+      'scheme:///example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:///example.com'],
+      'scheme:example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(['scheme:example.com'], 'scheme:example.com/some/path')
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(['scheme:example.com'], 'scheme://example.com/some/path')
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com'],
+      'scheme:///example.com/some/path'
+    )
+  ).toBe('/some/path');
+});
+
+it('extracts path from URL with protocol and host with wildcard', () => {
+  expect(
+    extractPathFromURL(
+      ['scheme://*.example.com'],
+      'scheme://test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme://*.example.com'],
+      'scheme:test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme://*.example.com'],
+      'scheme:///test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:///*.example.com'],
+      'scheme:test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:*.example.com'],
+      'scheme:test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:*.example.com'],
+      'scheme://test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:*.example.com'],
+      'scheme:///test.example.com/some/path'
+    )
+  ).toBe('/some/path');
+});
+
+it('extracts path from URL with protocol, host and path', () => {
+  expect(
+    extractPathFromURL(
+      ['scheme://example.com/test'],
+      'scheme://example.com/test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(['scheme://example.com'], 'scheme:example.com/some/path')
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme://example.com/test'],
+      'scheme:///example.com/test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:///example.com/test'],
+      'scheme:example.com/test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com/test'],
+      'scheme:example.com/test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com/test'],
+      'scheme://example.com/test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com/test'],
+      'scheme:///example.com/test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com/test'],
+      'scheme:///example.com//test/some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com/test'],
+      'scheme:///example.com/test//some/path'
+    )
+  ).toBe('/some/path');
+
+  expect(
+    extractPathFromURL(
+      ['scheme:example.com/test'],
+      'scheme:///example.com/test/some//path'
+    )
+  ).toBe('/some/path');
+});
+
+it('returns undefined for non-matching protocol', () => {
+  expect(extractPathFromURL(['scheme://'], 'foo://some/path')).toBe(undefined);
+
+  expect(extractPathFromURL(['scheme://'], 'foo:some/path')).toBe(undefined);
+
+  expect(extractPathFromURL(['scheme://'], 'foo:///some/path')).toBe(undefined);
+
+  expect(extractPathFromURL(['scheme:///'], 'foo:some/path')).toBe(undefined);
+
+  expect(extractPathFromURL(['scheme:'], 'foo:some/path')).toBe(undefined);
+
+  expect(extractPathFromURL(['scheme:'], 'foo://some/path')).toBe(undefined);
+
+  expect(extractPathFromURL(['scheme:'], 'foo:///some/path')).toBe(undefined);
+});
+
+it('returns undefined for non-matching path', () => {
+  expect(extractPathFromURL(['scheme://foo'], 'scheme://some/path')).toBe(
+    undefined
+  );
+
+  expect(extractPathFromURL(['scheme://foo'], 'scheme:some/path')).toBe(
+    undefined
+  );
+
+  expect(extractPathFromURL(['scheme://foo'], 'scheme:///some/path')).toBe(
+    undefined
+  );
+
+  expect(extractPathFromURL(['scheme:///foo'], 'scheme:some/path')).toBe(
+    undefined
+  );
+
+  expect(extractPathFromURL(['scheme:foo'], 'scheme:some/path')).toBe(
+    undefined
+  );
+
+  expect(extractPathFromURL(['scheme:foo'], 'scheme://some/path')).toBe(
+    undefined
+  );
+
+  expect(extractPathFromURL(['scheme:foo'], 'scheme:///some/path')).toBe(
+    undefined
+  );
+});
+
+it('returns undefined for non-matching host', () => {
+  expect(
+    extractPathFromURL(['scheme://example.com'], 'scheme://foo.com/some/path')
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(['scheme://example.com'], 'scheme:foo.com/some/path')
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(['scheme://example.com'], 'scheme:///foo.com/some/path')
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(['scheme:///example.com'], 'scheme:foo.com/some/path')
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(['scheme:example.com'], 'scheme:foo.com/some/path')
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(['scheme:example.com'], 'scheme://foo.com/some/path')
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(['scheme:example.com'], 'scheme:///foo.com/some/path')
+  ).toBe(undefined);
+});
+
+it('returns undefined for non-matching host with wildcard', () => {
+  expect(
+    extractPathFromURL(
+      ['scheme://*.example.com'],
+      'scheme://test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(
+      ['scheme://*.example.com'],
+      'scheme:test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(
+      ['scheme://*.example.com'],
+      'scheme:///test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(
+      ['scheme:///*.example.com'],
+      'scheme:test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(
+      ['scheme:*.example.com'],
+      'scheme:test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(
+      ['scheme:*.example.com'],
+      'scheme://test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+
+  expect(
+    extractPathFromURL(
+      ['scheme:*.example.com'],
+      'scheme:///test.foo.com/some/path'
+    )
+  ).toBe(undefined);
+});

packages/native/src/extractPathFromURL.tsx

@@ -0,0 +1,26 @@
+import escapeStringRegexp from 'escape-string-regexp';
+
+export default function extractPathFromURL(prefixes: string[], url: string) {
+  for (const prefix of prefixes) {
+    const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
+    const host = prefix
+      .replace(new RegExp(`^${escapeStringRegexp(protocol)}`), '')
+      .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
+      .replace(/^\//, ''); // Remove extra leading slash
+
+    const prefixRegex = new RegExp(
+      `^${escapeStringRegexp(protocol)}(/)*${host
+        .split('.')
+        .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
+        .join('\\.')}`
+    );
+
+    const normalizedURL = url.replace(/\/+/g, '/');
+
+    if (prefixRegex.test(normalizedURL)) {
+      return normalizedURL.replace(prefixRegex, '');
+    }
+  }
+
+  return undefined;
+}

packages/native/src/theming/ThemeContext.tsx

@@ -4,4 +4,6 @@ import type { Theme } from '../types';
 
 const ThemeContext = React.createContext<Theme>(DefaultTheme);
 
+ThemeContext.displayName = 'ThemeContext';
+
 export default ThemeContext;

packages/native/src/types.tsx

@@ -1,6 +1,7 @@
 import type {
   getStateFromPath as getStateFromPathDefault,
   getPathFromState as getPathFromStateDefault,
+  getActionFromState as getActionFromStateDefault,
   PathConfigMap,
   Route,
 } from '@react-navigation/core';
@@ -66,7 +67,11 @@ export type LinkingOptions = {
    * }
    * ```
    */
-  getInitialURL?: () => Promise<string | null | undefined>;
+  getInitialURL?: () =>
+    | string
+    | null
+    | undefined
+    | Promise<string | null | undefined>;
   /**
    * Custom function to get subscribe to URL updates.
    * Uses `Linking.addEventListener('url', callback)` by default.
@@ -90,11 +95,18 @@ export type LinkingOptions = {
   ) => undefined | void | (() => void);
   /**
    * Custom function to parse the URL to a valid navigation state (advanced).
+   * This state object will be passed as `initialState` for initial URL,
+   * and converted to an action object to `dispatch` for subsequent URLs.
    */
   getStateFromPath?: typeof getStateFromPathDefault;
+  /**
+   * Custom function to convert the state object to an action to dispatch (advanced).
+   * By default, the state is converted to a `NAVIGATE` action.
+   */
+  getActionFromState?: typeof getActionFromStateDefault;
   /**
    * Custom function to convert the state object to a valid URL (advanced).
-   * Only applicable on Web.
+   * Used for creating links for navigation, primarily useful on Web.
    */
   getPathFromState?: typeof getPathFromStateDefault;
 };

packages/native/src/useLinking.native.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 import {
-  getActionFromState,
+  getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
   NavigationContainerRef,
 } from '@react-navigation/core';
+import extractPathFromURL from './extractPathFromURL';
 import type { LinkingOptions } from './types';
-import escapeStringRegexp from 'escape-string-regexp';
+
+type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
 let isUsingLinking = false;
 
@@ -28,11 +30,21 @@ export default function useLinking(
     subscribe = (listener) => {
       const callback = ({ url }: { url: string }) => listener(url);
 
-      Linking.addEventListener('url', callback);
+      const subscription = Linking.addEventListener('url', callback) as
+        | { remove(): void }
+        | undefined;
 
-      return () => Linking.removeEventListener('url', callback);
+      return () => {
+        // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
+        if (subscription?.remove) {
+          subscription.remove();
+        } else {
+          Linking.removeEventListener('url', callback);
+        }
+      };
     },
     getStateFromPath = getStateFromPathDefault,
+    getActionFromState = getActionFromStateDefault,
   }: LinkingOptions
 ) {
   React.useEffect(() => {
@@ -66,6 +78,7 @@ export default function useLinking(
   const configRef = React.useRef(config);
   const getInitialURLRef = React.useRef(getInitialURL);
   const getStateFromPathRef = React.useRef(getStateFromPath);
+  const getActionFromStateRef = React.useRef(getActionFromState);
 
   React.useEffect(() => {
     enabledRef.current = enabled;
@@ -73,48 +86,53 @@ export default function useLinking(
     configRef.current = config;
     getInitialURLRef.current = getInitialURL;
     getStateFromPathRef.current = getStateFromPath;
-  }, [config, enabled, prefixes, getInitialURL, getStateFromPath]);
+    getActionFromStateRef.current = getActionFromState;
+  });
 
-  const extractPathFromURL = React.useCallback((url: string) => {
-    for (const prefix of prefixesRef.current) {
-      const protocol = prefix.match(/^[^:]+:\/\//)?.[0] ?? '';
-      const host = prefix.replace(protocol, '');
-      const prefixRegex = new RegExp(
-        `^${escapeStringRegexp(protocol)}${host
-          .split('.')
-          .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
-          .join('\\.')}`
-      );
-      if (prefixRegex.test(url)) {
-        return url.replace(prefixRegex, '');
+  const getInitialState = React.useCallback(() => {
+    let state: ResultState | undefined;
+
+    if (enabledRef.current) {
+      const url = getInitialURLRef.current();
+
+      if (url != null && typeof url !== 'string') {
+        return url.then((url) => {
+          const path = url
+            ? extractPathFromURL(prefixesRef.current, url)
+            : null;
+
+          return path
+            ? getStateFromPathRef.current(path, configRef.current)
+            : undefined;
+        });
       }
+
+      const path = url ? extractPathFromURL(prefixesRef.current, url) : null;
+
+      state = path
+        ? getStateFromPathRef.current(path, configRef.current)
+        : undefined;
     }
 
-    return undefined;
+    const thenable = {
+      then(onfulfilled?: (state: ResultState | undefined) => void) {
+        return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
+      },
+      catch() {
+        return thenable;
+      },
+    };
+
+    return thenable as PromiseLike<ResultState | undefined>;
   }, []);
 
-  const getInitialState = React.useCallback(async () => {
-    if (!enabledRef.current) {
-      return undefined;
-    }
-
-    const url = await getInitialURLRef.current();
-    const path = url ? extractPathFromURL(url) : null;
-
-    if (path) {
-      return getStateFromPathRef.current(path, configRef.current);
-    } else {
-      return undefined;
-    }
-  }, [extractPathFromURL]);
-
   React.useEffect(() => {
     const listener = (url: string) => {
       if (!enabled) {
         return;
       }
 
-      const path = extractPathFromURL(url);
+      const path = extractPathFromURL(prefixesRef.current, url);
       const navigation = ref.current;
 
       if (navigation && path) {
@@ -134,7 +152,10 @@ export default function useLinking(
             return;
           }
 
-          const action = getActionFromState(state, configRef.current);
+          const action = getActionFromStateRef.current(
+            state,
+            configRef.current
+          );
 
           if (action !== undefined) {
             try {
@@ -154,7 +175,7 @@ export default function useLinking(
     };
 
     return subscribe(listener);
-  }, [enabled, ref, subscribe, extractPathFromURL]);
+  }, [enabled, ref, subscribe]);
 
   return {
     getInitialState,

packages/native/src/useLinking.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import {
   getStateFromPath as getStateFromPathDefault,
   getPathFromState as getPathFromStateDefault,
+  getActionFromState as getActionFromStateDefault,
   NavigationContainerRef,
   NavigationState,
-  getActionFromState,
 } from '@react-navigation/core';
 import { nanoid } from 'nanoid/non-secure';
 import ServerContext from './ServerContext';
@@ -134,7 +134,7 @@ const createMemoryHistory = () => {
       // - There's history to go back, `history.go` is called, and `popstate` fires
       // - `history.go` is called multiple times, we need to resolve on respective `popstate`
       // - No history to go back, but `history.go` was called, browser has no API to detect it
-      return new Promise((resolve, reject) => {
+      return new Promise<void>((resolve, reject) => {
         const done = (interrupted?: boolean) => {
           clearTimeout(timer);
 
@@ -293,6 +293,7 @@ export default function useLinking(
     config,
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
+    getActionFromState = getActionFromStateDefault,
   }: LinkingOptions
 ) {
   React.useEffect(() => {
@@ -323,14 +324,16 @@ export default function useLinking(
   const enabledRef = React.useRef(enabled);
   const configRef = React.useRef(config);
   const getStateFromPathRef = React.useRef(getStateFromPath);
+  const getActionFromStateRef = React.useRef(getActionFromState);
   const getPathFromStateRef = React.useRef(getPathFromState);
 
   React.useEffect(() => {
     enabledRef.current = enabled;
     configRef.current = config;
     getStateFromPathRef.current = getStateFromPath;
+    getActionFromStateRef.current = getActionFromState;
     getPathFromStateRef.current = getPathFromState;
-  }, [config, enabled, getPathFromState, getStateFromPath]);
+  });
 
   const server = React.useContext(ServerContext);
 
@@ -349,7 +352,6 @@ export default function useLinking(
       }
     }
 
-    // Make it a thenable to keep consistent with the native impl
     const thenable = {
       then(onfulfilled?: (state: ResultState | undefined) => void) {
         return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
@@ -412,7 +414,10 @@ export default function useLinking(
         }
 
         if (index > previousIndex) {
-          const action = getActionFromState(state, configRef.current);
+          const action = getActionFromStateRef.current(
+            state,
+            configRef.current
+          );
 
           if (action !== undefined) {
             try {

packages/routers/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.7.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.7.1...@react-navigation/routers@5.7.2) (2021-02-21)
+
+
+### Bug Fixes
+
+* fix getId being called for incorrect routes. closes [#9343](https://github.com/react-navigation/react-navigation/issues/9343) ([3728390](https://github.com/react-navigation/react-navigation/commit/3728390b60814ba414bd15cc5b7e5b51baa1f026))
+
+
+
+
+
+## [5.7.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.7.0...@react-navigation/routers@5.7.1) (2021-01-21)
+
+
+### Bug Fixes
+
+* fix StackRouter incorrectly handling invalid route if key is present ([d3a9639](https://github.com/react-navigation/react-navigation/commit/d3a9639060631b06551daf0eac191ec1a442e298))
+
+
+
+
+
+# [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.2...@react-navigation/routers@5.7.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* consider openByDefault prop when rehydrating drawer state ([#9099](https://github.com/react-navigation/react-navigation/issues/9099)) ([2ad61a6](https://github.com/react-navigation/react-navigation/commit/2ad61a67357242fc4663ecad62ab311facbaf1be))
+
+
+### Features
+
+* add a new backBehavior: firstRoute for TabRouter ([3c87419](https://github.com/react-navigation/react-navigation/commit/3c874191ffbd24b953ded5b62f606c4cc47e5651))
+* add a way to specify an unique ID for screens ([b19f76b](https://github.com/react-navigation/react-navigation/commit/b19f76bfffe623759e67d925bfd067c753a453bf))
+
+
+
+
+
 ## [5.6.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.6.1...@react-navigation/routers@5.6.2) (2020-11-09)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "5.6.2",
+  "version": "5.7.2",
   "keywords": [
     "react",
     "react-native",
@@ -39,11 +39,11 @@
     "nanoid": "^3.1.15"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "del-cli": "^3.0.1",
+    "react-native-builder-bob": "^0.17.0",
     "typescript": "^4.0.3"
   },
-  "@react-native-community/bob": {
+  "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [

packages/routers/src/DrawerRouter.tsx

@@ -120,8 +120,12 @@ export default function DrawerRouter({
 
     type: 'drawer',
 
-    getInitialState({ routeNames, routeParamList }) {
-      let state = router.getInitialState({ routeNames, routeParamList });
+    getInitialState({ routeNames, routeParamList, routeGetIdList }) {
+      let state = router.getInitialState({
+        routeNames,
+        routeParamList,
+        routeGetIdList,
+      });
 
       if (openByDefault) {
         state = openDrawer(state);
@@ -135,7 +139,10 @@ export default function DrawerRouter({
       };
     },
 
-    getRehydratedState(partialState, { routeNames, routeParamList }) {
+    getRehydratedState(
+      partialState,
+      { routeNames, routeParamList, routeGetIdList }
+    ) {
       if (partialState.stale === false) {
         return partialState;
       }
@@ -143,9 +150,10 @@ export default function DrawerRouter({
       let state = router.getRehydratedState(partialState, {
         routeNames,
         routeParamList,
+        routeGetIdList,
       });
 
-      if (isDrawerOpen(partialState)) {
+      if (partialState.history ? isDrawerOpen(partialState) : openByDefault) {
         state = openDrawer(state);
       }
 

packages/routers/src/StackRouter.tsx

@@ -258,6 +258,9 @@ export default function StackRouter(options: StackRouterOptions) {
 
         case 'PUSH':
           if (state.routeNames.includes(action.payload.name)) {
+            const getId = options.routeGetIdList[action.payload.name];
+            const id = getId?.({ params: action.payload.params });
+
             const route =
               action.payload.name && action.payload.key
                 ? state.routes.find(
@@ -265,34 +268,34 @@ export default function StackRouter(options: StackRouterOptions) {
                       route.name === action.payload.name &&
                       route.key === action.payload.key
                   )
+                : id
+                ? state.routes.find(
+                    (route) =>
+                      route.name === action.payload.name &&
+                      id === getId?.({ params: route.params })
+                  )
                 : undefined;
 
             let routes: Route<string>[];
 
             if (route) {
               routes = state.routes.filter((r) => r.key !== route.key);
-              routes.push(
-                action.payload.params
-                  ? {
-                      ...route,
-                      params:
-                        action.payload.params !== undefined
-                          ? {
-                              ...route.params,
-                              ...action.payload.params,
-                            }
-                          : route.params,
-                    }
-                  : route
-              );
+              routes.push({
+                ...route,
+                params:
+                  action.payload.params !== undefined
+                    ? {
+                        ...route.params,
+                        ...action.payload.params,
+                      }
+                    : route.params,
+              });
             } else {
               routes = [
                 ...state.routes,
                 {
                   key:
-                    action.payload.key === undefined
-                      ? `${action.payload.name}-${nanoid()}`
-                      : action.payload.key,
+                    action.payload.key ?? `${action.payload.name}-${nanoid()}`,
                   name: action.payload.name,
                   params:
                     routeParamList[action.payload.name] !== undefined
@@ -348,14 +351,31 @@ export default function StackRouter(options: StackRouterOptions) {
 
         case 'NAVIGATE':
           if (
-            action.payload.key ||
-            (action.payload.name &&
-              state.routeNames.includes(action.payload.name))
+            action.payload.name !== undefined &&
+            !state.routeNames.includes(action.payload.name)
           ) {
+            return null;
+          }
+
+          if (action.payload.key || action.payload.name) {
             // If the route already exists, navigate to that
             let index = -1;
 
-            if (
+            const getId =
+              // `getId` and `key` can't be used together
+              action.payload.key === undefined &&
+              action.payload.name !== undefined
+                ? options.routeGetIdList[action.payload.name]
+                : undefined;
+            const id = getId?.({ params: action.payload.params });
+
+            if (id) {
+              index = state.routes.findIndex(
+                (route) =>
+                  route.name === action.payload.name &&
+                  id === getId?.({ params: route.params })
+              );
+            } else if (
               (state.routes[state.index].name === action.payload.name &&
                 action.payload.key === undefined) ||
               state.routes[state.index].key === action.payload.key
@@ -383,18 +403,27 @@ export default function StackRouter(options: StackRouterOptions) {
             }
 
             if (index === -1 && action.payload.name !== undefined) {
-              return router.getStateForAction(
-                state,
+              const routes = [
+                ...state.routes,
                 {
-                  type: 'PUSH',
-                  payload: {
-                    key: action.payload.key,
-                    name: action.payload.name,
-                    params: action.payload.params,
-                  },
+                  key:
+                    action.payload.key ?? `${action.payload.name}-${nanoid()}`,
+                  name: action.payload.name,
+                  params:
+                    routeParamList[action.payload.name] !== undefined
+                      ? {
+                          ...routeParamList[action.payload.name],
+                          ...action.payload.params,
+                        }
+                      : action.payload.params,
                 },
-                options
-              );
+              ];
+
+              return {
+                ...state,
+                routes,
+                index: routes.length - 1,
+              };
             }
 
             const route = state.routes[index];

packages/routers/src/TabRouter.tsx

@@ -17,7 +17,12 @@ export type TabActionType = {
   target?: string;
 };
 
-export type BackBehavior = 'initialRoute' | 'order' | 'history' | 'none';
+export type BackBehavior =
+  | 'initialRoute'
+  | 'firstRoute'
+  | 'history'
+  | 'order'
+  | 'none';
 
 export type TabRouterOptions = DefaultRouterOptions & {
   backBehavior?: BackBehavior;
@@ -74,13 +79,21 @@ const getRouteHistory = (
         history.unshift({ type: TYPE_ROUTE, key: routes[i - 1].key });
       }
       break;
+    case 'firstRoute':
+      if (index !== 0) {
+        history.unshift({
+          type: TYPE_ROUTE,
+          key: routes[0].key,
+        });
+      }
+      break;
     case 'initialRoute':
       initialRouteIndex = routes.findIndex(
         (route) => route.name === initialRouteName
       );
       initialRouteIndex = initialRouteIndex === -1 ? 0 : initialRouteIndex;
 
-      if (initialRouteIndex !== index) {
+      if (index !== initialRouteIndex) {
         history.unshift({
           type: TYPE_ROUTE,
           key: routes[initialRouteIndex].key,

packages/routers/src/__tests__/DrawerRouter.test.tsx

@@ -4,6 +4,7 @@ import {
   DrawerActions,
   DrawerNavigationState,
   ParamListBase,
+  RouterConfigOptions,
 } from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
@@ -18,6 +19,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 1,
@@ -44,6 +46,7 @@ it('gets initial state from route names and params without initialRouteName', ()
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -60,15 +63,43 @@ it('gets initial state from route names and params without initialRouteName', ()
   });
 });
 
+it('gets initial state from route names and params with openByDefault', () => {
+  const router = DrawerRouter({ openByDefault: true });
+
+  expect(
+    router.getInitialState({
+      routeNames: ['bar', 'baz', 'qux'],
+      routeParamList: {
+        baz: { answer: 42 },
+        qux: { name: 'Jane' },
+      },
+      routeGetIdList: {},
+    })
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ type: 'route', key: 'bar-test' }, { type: 'drawer' }],
+    stale: false,
+    type: 'drawer',
+  });
+});
+
 it('gets rehydrated state from partial state', () => {
   const router = DrawerRouter({});
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {
       baz: { answer: 42 },
       qux: { name: 'Jane' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -218,15 +249,87 @@ it("doesn't rehydrate state if it's not stale", () => {
     router.getRehydratedState(state, {
       routeNames: [],
       routeParamList: {},
+      routeGetIdList: {},
     })
   ).toBe(state);
 });
 
+it('respects openByDefault when rehydrating', () => {
+  const router = DrawerRouter({ openByDefault: true });
+
+  const options: RouterConfigOptions = {
+    routeNames: ['bar', 'baz', 'qux'],
+    routeParamList: {
+      baz: { answer: 42 },
+      qux: { name: 'Jane' },
+    },
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 0,
+        key: 'drawer-test',
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ key: 'bar-test', type: 'route' }, { type: 'drawer' }],
+    stale: false,
+    type: 'drawer',
+  });
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 0,
+        key: 'drawer-test',
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+        history: [{ type: 'route', key: 'bar-test' }],
+      },
+      options
+    )
+  ).toEqual({
+    index: 0,
+    key: 'drawer-test',
+    routeNames: ['bar', 'baz', 'qux'],
+    routes: [
+      { key: 'bar-test', name: 'bar' },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+    ],
+    history: [{ type: 'route', key: 'bar-test' }],
+    stale: false,
+    type: 'drawer',
+  });
+});
+
 it('handles navigate action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -265,9 +368,10 @@ it('handles navigate action', () => {
 
 it('handles navigate action with open drawer', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -306,9 +410,10 @@ it('handles navigate action with open drawer', () => {
 
 it('handles open drawer action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -361,9 +466,10 @@ it('handles open drawer action', () => {
 
 it('handles close drawer action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -419,9 +525,10 @@ it('handles close drawer action', () => {
 
 it('handles toggle drawer action', () => {
   const router = DrawerRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(

packages/routers/src/__tests__/StackRouter.test.tsx

@@ -1,4 +1,9 @@
-import { CommonActions, StackRouter, StackActions } from '..';
+import {
+  CommonActions,
+  StackRouter,
+  StackActions,
+  RouterConfigOptions,
+} from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
 
@@ -12,6 +17,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -33,6 +39,7 @@ it('gets initial state from route names and params without initialRouteName', ()
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -47,12 +54,13 @@ it('gets initial state from route names and params without initialRouteName', ()
 it('gets rehydrated state from partial state', () => {
   const router = StackRouter({});
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {
       baz: { answer: 42 },
       qux: { name: 'Jane' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -136,6 +144,7 @@ it("doesn't rehydrate state if it's not stale", () => {
     router.getRehydratedState(state, {
       routeNames: [],
       routeParamList: {},
+      routeGetIdList: {},
     })
   ).toBe(state);
 });
@@ -163,6 +172,7 @@ it('gets state on route names change', () => {
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -195,6 +205,7 @@ it('gets state on route names change', () => {
         routeParamList: {
           baz: { name: 'John' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -228,6 +239,7 @@ it('gets state on route names change with initialRouteName', () => {
         routeParamList: {
           baz: { name: 'John' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -242,9 +254,10 @@ it('gets state on route names change with initialRouteName', () => {
 
 it('handles navigate action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -427,11 +440,230 @@ it('handles navigate action', () => {
   });
 });
 
-it('handles go back action', () => {
+it("doesn't navigate to nonexistent screen", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+      },
+      CommonActions.navigate('far', { answer: 42 }),
+      options
+    )
+  ).toBe(null);
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+      },
+      CommonActions.navigate({
+        name: 'far',
+        key: 'test',
+        params: { answer: 42 },
+      }),
+      options
+    )
+  ).toBe(null);
+});
+
+it('ensures unique ID for navigate', () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {
+      bar: ({ params }) => params?.foo,
+      qux: ({ params }) => params?.fux,
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      CommonActions.navigate('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate('bar', { foo: 'b' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+      { key: 'bar-test', name: 'bar', params: { foo: 'b' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate({
+        key: 'test',
+        name: 'bar',
+        params: { foo: 'a' },
+      }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+      { key: 'test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+});
+
+it('ensure unique ID is only per route name for navigate', () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {
+      baz: ({ params }) => params?.foo,
+      bar: ({ params }) => params?.foo,
+      qux: ({ params }) => params?.test,
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'qux-test', name: 'qux', params: { test: 'a' } },
+          { key: 'baz-test', name: 'baz', params: { foo: 'a' } },
+        ],
+      },
+      CommonActions.navigate('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'qux-test', name: 'qux', params: { test: 'a' } },
+      { key: 'baz-test', name: 'baz', params: { foo: 'a' } },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+});
+
+it('handles go back action', () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -477,9 +709,10 @@ it('handles go back action', () => {
 
 it('handles pop action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -650,9 +883,10 @@ it('handles pop action', () => {
 
 it('handles pop to top action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -684,9 +918,10 @@ it('handles pop to top action', () => {
 
 it('replaces focused screen with replace', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -722,9 +957,10 @@ it('replaces focused screen with replace', () => {
 
 it('replaces active screen with replace', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -763,9 +999,10 @@ it('replaces active screen with replace', () => {
 
 it("doesn't handle replace if source key isn't present", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -794,9 +1031,10 @@ it("doesn't handle replace if source key isn't present", () => {
 
 it("doesn't handle replace if screen to replace with isn't present", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -824,11 +1062,12 @@ it("doesn't handle replace if screen to replace with isn't present", () => {
 
 it('handles push action', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {
       baz: { foo: 21 },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -895,6 +1134,152 @@ it('handles push action', () => {
       options
     )
   ).toBe(null);
+});
+
+it("doesn't push nonexistent screen", () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+      },
+      StackActions.push('far', { answer: 42 }),
+      options
+    )
+  ).toBe(null);
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+      },
+      {
+        type: 'PUSH',
+        payload: {
+          name: 'far',
+          key: 'test',
+          params: { answer: 42 },
+        },
+      },
+      options
+    )
+  ).toBe(null);
+});
+
+it('ensures unique ID for push', () => {
+  const router = StackRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {
+      bar: ({ params }) => params?.foo,
+      qux: ({ params }) => params?.fux,
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 0,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [{ key: 'bar', name: 'bar' }],
+      },
+      StackActions.push('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      StackActions.push('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar', name: 'bar' },
+          { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+        ],
+      },
+      StackActions.push('bar', { foo: 'b' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar', name: 'bar' },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+      { key: 'bar-test', name: 'bar', params: { foo: 'b' } },
+    ],
+  });
 
   expect(
     router.getStateForAction(
@@ -964,57 +1349,54 @@ it('handles push action', () => {
   });
 });
 
-it('changes index on focus change', () => {
+it('ensure unique ID is only per route name for push', () => {
   const router = StackRouter({});
-
-  expect(
-    router.getStateForRouteFocus(
-      {
-        index: 2,
-        key: 'stack-test',
-        routeNames: ['bar', 'baz', 'qux'],
-        routes: [
-          { key: 'bar-0', name: 'bar' },
-          { key: 'baz-0', name: 'baz' },
-          { key: 'qux-0', name: 'qux' },
-        ],
-        stale: false,
-        type: 'stack',
-      },
-      'baz-0'
-    )
-  ).toEqual({
-    index: 1,
-    key: 'stack-test',
-    routeNames: ['bar', 'baz', 'qux'],
-    routes: [
-      { key: 'bar-0', name: 'bar' },
-      { key: 'baz-0', name: 'baz' },
-    ],
-    stale: false,
-    type: 'stack',
-  });
-
-  const state = {
-    index: 0,
-    key: 'stack-test',
-    routeNames: ['bar', 'baz', 'qux'],
-    routes: [
-      { key: 'bar-0', name: 'bar' },
-      { key: 'baz-0', name: 'baz' },
-    ],
-    stale: false as const,
-    type: 'stack' as const,
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {
+      baz: ({ params }) => params?.foo,
+      bar: ({ params }) => params?.foo,
+      qux: ({ params }) => params?.test,
+    },
   };
 
-  expect(router.getStateForRouteFocus(state, 'qux-0')).toEqual(state);
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'qux-test', name: 'qux', params: { test: 'a' } },
+          { key: 'baz-test', name: 'baz', params: { foo: 'a' } },
+        ],
+      },
+      StackActions.push('bar', { foo: 'a' }),
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'qux-test', name: 'qux', params: { test: 'a' } },
+      { key: 'baz-test', name: 'baz', params: { foo: 'a' } },
+      { key: 'bar-test', name: 'bar', params: { foo: 'a' } },
+    ],
+  });
 });
 
 it('merges params on navigate to an existing screen', () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -1077,11 +1459,12 @@ it('merges params on navigate to an existing screen', () => {
 
 it("doesn't merge params on navigate to an existing screen if merge: false", () => {
   const router = StackRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {
       baz: { foo: 12 },
     },
+    routeGetIdList: {},
   };
 
   expect(

packages/routers/src/__tests__/TabRouter.test.tsx

@@ -4,6 +4,7 @@ import {
   TabActions,
   TabNavigationState,
   ParamListBase,
+  RouterConfigOptions,
 } from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
@@ -18,6 +19,7 @@ it('gets initial state from route names and params with initialRouteName', () =>
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 1,
@@ -44,6 +46,7 @@ it('gets initial state from route names and params without initialRouteName', ()
         baz: { answer: 42 },
         qux: { name: 'Jane' },
       },
+      routeGetIdList: {},
     })
   ).toEqual({
     index: 0,
@@ -63,12 +66,13 @@ it('gets initial state from route names and params without initialRouteName', ()
 it('gets rehydrated state from partial state', () => {
   const router = TabRouter({});
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {
       baz: { answer: 42 },
       qux: { name: 'Jane' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -241,6 +245,7 @@ it("doesn't rehydrate state if it's not stale", () => {
     router.getRehydratedState(state, {
       routeNames: [],
       routeParamList: {},
+      routeGetIdList: {},
     })
   ).toBe(state);
 });
@@ -248,9 +253,10 @@ it("doesn't rehydrate state if it's not stale", () => {
 it('restores correct history on rehydrating with backBehavior: order', () => {
   const router = TabRouter({ backBehavior: 'order' });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -289,9 +295,10 @@ it('restores correct history on rehydrating with backBehavior: order', () => {
 it('restores correct history on rehydrating with backBehavior: history', () => {
   const router = TabRouter({ backBehavior: 'history' });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -323,12 +330,16 @@ it('restores correct history on rehydrating with backBehavior: history', () => {
   });
 });
 
-it('restores correct history on rehydrating with backBehavior: initialRoute', () => {
-  const router = TabRouter({ backBehavior: 'initialRoute' });
+it('restores correct history on rehydrating with backBehavior: firstRoute', () => {
+  const router = TabRouter({
+    backBehavior: 'firstRoute',
+    initialRouteName: 'bar',
+  });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -363,12 +374,57 @@ it('restores correct history on rehydrating with backBehavior: initialRoute', ()
   });
 });
 
+it('restores correct history on rehydrating with backBehavior: initialRoute', () => {
+  const router = TabRouter({
+    backBehavior: 'initialRoute',
+    initialRouteName: 'bar',
+  });
+
+  const options: RouterConfigOptions = {
+    routeNames: ['foo', 'bar', 'baz', 'qux'],
+    routeParamList: {},
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getRehydratedState(
+      {
+        index: 2,
+        routes: [
+          { key: 'foo-0', name: 'foo' },
+          { key: 'bar-0', name: 'bar' },
+          { key: 'baz-0', name: 'baz' },
+          { key: 'qux-0', name: 'qux' },
+        ],
+      },
+      options
+    )
+  ).toEqual({
+    key: 'tab-test',
+    index: 2,
+    routeNames: ['foo', 'bar', 'baz', 'qux'],
+    routes: [
+      { key: 'foo-0', name: 'foo' },
+      { key: 'bar-0', name: 'bar' },
+      { key: 'baz-0', name: 'baz' },
+      { key: 'qux-0', name: 'qux' },
+    ],
+    history: [
+      { key: 'bar-0', type: 'route' },
+      { key: 'baz-0', type: 'route' },
+    ],
+    stale: false,
+    type: 'tab',
+  });
+});
+
 it('restores correct history on rehydrating with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['foo', 'bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -424,6 +480,7 @@ it('gets state on route names change', () => {
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -458,6 +515,7 @@ it('gets state on route names change', () => {
       {
         routeNames: ['foo', 'fiz'],
         routeParamList: {},
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -498,6 +556,7 @@ it('preserves focused route on route names change', () => {
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -540,6 +599,7 @@ it('falls back to first route if route is removed on route names change', () =>
           qux: { name: 'John' },
           fiz: { fruit: 'apple' },
         },
+        routeGetIdList: {},
       }
     )
   ).toEqual({
@@ -559,9 +619,10 @@ it('falls back to first route if route is removed on route names change', () =>
 
 it('handles navigate action', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -647,11 +708,63 @@ it('handles navigate action', () => {
   ).toBe(null);
 });
 
+it("doesn't navigate to nonexistent screen", () => {
+  const router = TabRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'tab',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+        history: [{ type: 'route', key: 'bar' }],
+      },
+      CommonActions.navigate('foo', { answer: 42 }),
+      options
+    )
+  ).toBe(null);
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'tab',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+        history: [{ type: 'route', key: 'bar' }],
+      },
+      CommonActions.navigate({
+        name: 'foo',
+        key: 'test',
+        params: { answer: 42 },
+      }),
+      options
+    )
+  ).toBe(null);
+});
+
 it('handles jump to action', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -688,11 +801,40 @@ it('handles jump to action', () => {
   });
 });
 
+it("doesn't jump to nonexistent screen", () => {
+  const router = TabRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar'],
+    routeParamList: {},
+    routeGetIdList: {},
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'tab',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+        ],
+        history: [{ type: 'route', key: 'bar' }],
+      },
+      TabActions.jumpTo('foo', { answer: 42 }),
+      options
+    )
+  ).toBe(null);
+});
+
 it('handles back action with backBehavior: history', () => {
   const router = TabRouter({ backBehavior: 'history' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -776,9 +918,10 @@ it('handles back action with backBehavior: history', () => {
 
 it('handles back action with backBehavior: order', () => {
   const router = TabRouter({ backBehavior: 'order' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -847,9 +990,10 @@ it('handles back action with backBehavior: order', () => {
 
 it('handles back action with backBehavior: initialRoute', () => {
   const router = TabRouter({ backBehavior: 'initialRoute' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -919,9 +1063,10 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
     initialRouteName: 'baz',
   });
 
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -987,9 +1132,10 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
 
 it('handles back action with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state = router.getInitialState(options);
@@ -1007,9 +1153,10 @@ it('handles back action with backBehavior: none', () => {
 
 it('updates route key history on navigate and jump to', () => {
   const router = TabRouter({ backBehavior: 'history' });
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['bar', 'baz', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   let state: TabNavigationState<ParamListBase> = {
@@ -1110,9 +1257,10 @@ it('updates route key history on focus change', () => {
 
 it('merges params on navigate to an existing screen', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(
@@ -1193,6 +1341,7 @@ it("doesn't merge params on navigate to an existing screen if merge: false", ()
     routeParamList: {
       qux: { color: 'indigo' },
     },
+    routeGetIdList: {},
   };
 
   expect(
@@ -1235,6 +1384,17 @@ it("doesn't merge params on navigate to an existing screen if merge: false", ()
       { type: 'route', key: 'bar' },
     ],
   });
+});
+
+it('merges params on navigate to an existing screen if merge: true', () => {
+  const router = TabRouter({});
+  const options: RouterConfigOptions = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {
+      qux: { color: 'indigo' },
+    },
+    routeGetIdList: {},
+  };
 
   expect(
     router.getStateForAction(
@@ -1323,9 +1483,10 @@ it("doesn't merge params on navigate to an existing screen if merge: false", ()
 
 it('merges params on jump to an existing screen', () => {
   const router = TabRouter({});
-  const options = {
+  const options: RouterConfigOptions = {
     routeNames: ['baz', 'bar', 'qux'],
     routeParamList: {},
+    routeGetIdList: {},
   };
 
   expect(

packages/routers/src/types.tsx

@@ -132,6 +132,11 @@ export type RouterFactory<
 export type RouterConfigOptions = {
   routeNames: string[];
   routeParamList: ParamListBase;
+  routeGetIdList: Record<
+    string,
+    | ((options: { params?: Record<string, any> }) => string | undefined)
+    | undefined
+  >;
 };
 
 export type Router<

packages/stack/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.14.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.14.4...@react-navigation/stack@5.14.5) (2021-05-09)
+
+
+### Bug Fixes
+
+* pressOpacity for ios Touchable ([9fb4202](https://github.com/react-navigation/react-navigation/commit/9fb420259758405efa819bf6d01636f46f7f5033))
+
+
+
+
+
+## [5.14.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.14.3...@react-navigation/stack@5.14.4) (2021-04-04)
+
+
+### Bug Fixes
+
+* check for screens enabled in ScreenContainer ([493956e](https://github.com/react-navigation/react-navigation/commit/493956ef717a03bd8c3533a2949434e83718c5e4))
+
+
+
+
+
+## [5.14.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.14.2...@react-navigation/stack@5.14.3) (2021-02-21)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+## [5.14.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.14.1...@react-navigation/stack@5.14.2) (2021-01-25)
+
+
+### Bug Fixes
+
+* fix transparent modal on web ([38d6808](https://github.com/react-navigation/react-navigation/commit/38d680833e31e62736da19f79328aec553ced814))
+
+
+
+
+
+## [5.14.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.14.0...@react-navigation/stack@5.14.1) (2021-01-22)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.14.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.13.0...@react-navigation/stack@5.14.0) (2021-01-21)
+
+
+### 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.13.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.8...@react-navigation/stack@5.13.0) (2021-01-14)
+
+
+### Bug Fixes
+
+* enable detachInactiveScreens by default on web for better a11y ([dd87fa4](https://github.com/react-navigation/react-navigation/commit/dd87fa49a43ad8db105a62418243339e4150fadf))
+
+
+### Features
+
+* export TransitionPreset for custom TransitionPresets ([#9173](https://github.com/react-navigation/react-navigation/issues/9173)) ([9633c4d](https://github.com/react-navigation/react-navigation/commit/9633c4d35fe2f9cb4f37a7629872e436a4528238))
+
+
+
+
+
+## [5.12.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.7...@react-navigation/stack@5.12.8) (2020-11-21)
+
+
+### Bug Fixes
+
+* force dismiss keyboard if there was no gesture ([3e069b7](https://github.com/react-navigation/react-navigation/commit/3e069b718d60f5381957f2d3838ee04ee9384779)), closes [#9078](https://github.com/react-navigation/react-navigation/issues/9078)
+
+
+
+
+
 ## [5.12.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.6...@react-navigation/stack@5.12.7) (2020-11-20)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.12.7",
+  "version": "5.14.5",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -44,9 +44,8 @@
     "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.16.2",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/native": "^5.9.4",
     "@testing-library/react-native": "^7.1.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
@@ -54,6 +53,7 @@
     "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-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
@@ -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/stack/src/index.tsx

@@ -61,4 +61,5 @@ export type {
   StackHeaderInterpolatedStyle,
   StackHeaderInterpolationProps,
   StackHeaderStyleInterpolator,
+  TransitionPreset,
 } from './types';

packages/stack/src/views/BorderlessButton.tsx

@@ -5,7 +5,7 @@ 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';
@@ -27,7 +27,7 @@ export default class BorderlessButton 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/stack/src/views/KeyboardManager.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { TextInput, Platform, Keyboard } from 'react-native';
+import { TextInput, Keyboard, HostComponent } from 'react-native';
 
 type Props = {
   enabled: boolean;
   children: (props: {
     onPageChangeStart: () => void;
-    onPageChangeConfirm: () => void;
+    onPageChangeConfirm: (force: boolean) => void;
     onPageChangeCancel: () => void;
   }) => React.ReactNode;
 };
 
+type InputRef = React.ElementRef<HostComponent<unknown>> | undefined;
+
 export default class KeyboardManager extends React.Component<Props> {
   componentWillUnmount() {
     this.clearKeyboardTimeout();
@@ -17,7 +19,7 @@ export default class KeyboardManager extends React.Component<Props> {
 
   // Numeric id of the previously focused text input
   // When a gesture didn't change the tab, we can restore the focused input with this
-  private previouslyFocusedTextInput: any | null = null;
+  private previouslyFocusedTextInput: InputRef = undefined;
   private startTimestamp: number = 0;
   private keyboardTimeout: any;
 
@@ -35,7 +37,8 @@ export default class KeyboardManager extends React.Component<Props> {
 
     this.clearKeyboardTimeout();
 
-    const input: any = TextInput.State.currentlyFocusedInput
+    // @ts-expect-error: blurTextInput accepts both number and ref, but types say only ref
+    const input: InputRef = TextInput.State.currentlyFocusedInput
       ? TextInput.State.currentlyFocusedInput()
       : TextInput.State.currentlyFocusedField();
 
@@ -49,25 +52,30 @@ export default class KeyboardManager extends React.Component<Props> {
     this.startTimestamp = Date.now();
   };
 
-  private handlePageChangeConfirm = () => {
+  private handlePageChangeConfirm = (force: boolean) => {
     if (!this.props.enabled) {
       return;
     }
 
     this.clearKeyboardTimeout();
 
-    const input = this.previouslyFocusedTextInput;
+    if (force) {
+      // Always dismiss input, even if we don't have a ref to it
+      // We might not have the ref if onPageChangeStart was never called
+      // This can happen if page change was not from a gesture
+      Keyboard.dismiss();
+    } else {
+      const input = this.previouslyFocusedTextInput;
 
-    if (input) {
-      if (Platform.OS === 'android') {
-        Keyboard.dismiss();
-      } else {
+      if (input) {
+        // Dismiss the keyboard only if an input was a focused before
+        // This makes sure we don't dismiss input on going back and focusing an input
         TextInput.State.blurTextInput(input);
       }
     }
 
     // Cleanup the ID on successful page change
-    this.previouslyFocusedTextInput = null;
+    this.previouslyFocusedTextInput = undefined;
   };
 
   private handlePageChangeCancel = () => {
@@ -91,11 +99,11 @@ export default class KeyboardManager extends React.Component<Props> {
       if (Date.now() - this.startTimestamp < 100) {
         this.keyboardTimeout = setTimeout(() => {
           TextInput.State.focusTextInput(input);
-          this.previouslyFocusedTextInput = null;
+          this.previouslyFocusedTextInput = undefined;
         }, 100);
       } else {
         TextInput.State.focusTextInput(input);
-        this.previouslyFocusedTextInput = null;
+        this.previouslyFocusedTextInput = undefined;
       }
     }
   };

packages/stack/src/views/Stack/Card.tsx

@@ -41,7 +41,7 @@ type Props = ViewProps & {
   gestureDirection: GestureDirection;
   onOpen: () => void;
   onClose: () => void;
-  onTransitionStart?: (props: { closing: boolean }) => void;
+  onTransition?: (props: { closing: boolean; gesture: boolean }) => void;
   onGestureBegin?: () => void;
   onGestureCanceled?: () => void;
   onGestureEnd?: () => void;
@@ -178,7 +178,7 @@ export default class Card extends React.Component<Props> {
       transitionSpec,
       onOpen,
       onClose,
-      onTransitionStart,
+      onTransition,
     } = this.props;
 
     const toValue = this.getAnimateToValue({
@@ -198,7 +198,7 @@ export default class Card extends React.Component<Props> {
 
     clearTimeout(this.pendingGestureCallback);
 
-    onTransitionStart?.({ closing });
+    onTransition?.({ closing, gesture: velocity !== undefined });
     animation(gesture, {
       ...spec.config,
       velocity,

packages/stack/src/views/Stack/CardContainer.tsx

@@ -46,7 +46,7 @@ type Props = TransitionPreset & {
   ) => void;
   onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
   onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
+  onPageChangeConfirm?: (force: boolean) => void;
   onPageChangeCancel?: () => void;
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -116,42 +116,58 @@ function CardContainer({
   scene,
   transitionSpec,
 }: Props) {
-  React.useEffect(() => {
-    onPageChangeConfirm?.();
-  }, [active, onPageChangeConfirm]);
-
   const handleOpen = () => {
-    onTransitionEnd?.({ route: scene.route }, false);
-    onOpenRoute({ route: scene.route });
+    const { route } = scene;
+
+    onTransitionEnd?.({ route }, false);
+    onOpenRoute({ route });
   };
 
   const handleClose = () => {
-    onTransitionEnd?.({ route: scene.route }, true);
-    onCloseRoute({ route: scene.route });
+    const { route } = scene;
+
+    onTransitionEnd?.({ route }, true);
+    onCloseRoute({ route });
   };
 
   const handleGestureBegin = () => {
+    const { route } = scene;
+
     onPageChangeStart?.();
-    onGestureStart?.({ route: scene.route });
+    onGestureStart?.({ route });
   };
 
   const handleGestureCanceled = () => {
+    const { route } = scene;
+
     onPageChangeCancel?.();
-    onGestureCancel?.({ route: scene.route });
+    onGestureCancel?.({ route });
   };
 
   const handleGestureEnd = () => {
-    onGestureEnd?.({ route: scene.route });
+    const { route } = scene;
+
+    onGestureEnd?.({ route });
   };
 
-  const handleTransitionStart = ({ closing }: { closing: boolean }) => {
-    if (active && closing) {
-      onPageChangeConfirm?.();
+  const handleTransition = ({
+    closing,
+    gesture,
+  }: {
+    closing: boolean;
+    gesture: boolean;
+  }) => {
+    const { route } = scene;
+
+    if (!gesture) {
+      onPageChangeConfirm?.(true);
+    } else if (active && closing) {
+      onPageChangeConfirm?.(false);
     } else {
       onPageChangeCancel?.();
     }
 
-    onTransitionStart?.({ route: scene.route }, closing);
+    onTransitionStart?.({ route }, closing);
   };
 
   const insets = {
@@ -201,7 +217,7 @@ function CardContainer({
       overlay={cardOverlay}
       overlayEnabled={cardOverlayEnabled}
       shadowEnabled={cardShadowEnabled}
-      onTransitionStart={handleTransitionStart}
+      onTransition={handleTransition}
       onGestureBegin={handleGestureBegin}
       onGestureCanceled={handleGestureCanceled}
       onGestureEnd={handleGestureEnd}

packages/stack/src/views/Stack/CardStack.tsx

@@ -4,6 +4,7 @@ import {
   StyleSheet,
   LayoutChangeEvent,
   Dimensions,
+  Platform,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 import type {
@@ -11,6 +12,7 @@ import type {
   Route,
   StackNavigationState,
 } from '@react-navigation/native';
+import { screensEnabled } from 'react-native-screens';
 
 import {
   MaybeScreenContainer,
@@ -65,7 +67,7 @@ type Props = {
   ) => void;
   onTransitionEnd: (props: { route: Route<string> }, closing: boolean) => void;
   onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
+  onPageChangeConfirm?: (force: boolean) => void;
   onPageChangeCancel?: () => void;
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -398,7 +400,7 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureCancel,
       // Enable on new versions of `react-native-screens`
       // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction.
-      detachInactiveScreens = shouldUseActivityState,
+      detachInactiveScreens = Platform.OS === 'web' || shouldUseActivityState,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;
@@ -488,11 +490,13 @@ export default class CardStack extends React.Component<Props, State> {
         </React.Fragment>
       ) : null;
 
+    const isScreensEnabled = screensEnabled?.() && detachInactiveScreens;
+
     return (
       <React.Fragment>
         {isFloatHeaderAbsolute ? null : floatingHeader}
         <MaybeScreenContainer
-          enabled={detachInactiveScreens}
+          enabled={isScreensEnabled}
           style={styles.container}
           onLayout={this.handleLayout}
         >
@@ -507,7 +511,7 @@ export default class CardStack extends React.Component<Props, State> {
             // For the old implementation, it stays the same it was
             let isScreenActive: Animated.AnimatedInterpolation | 2 | 1 | 0 = 1;
 
-            if (shouldUseActivityState) {
+            if (shouldUseActivityState || Platform.OS === 'web') {
               if (index < self.length - activeScreensLimit - 1) {
                 // screen should be inactive because it is too deep in the stack
                 isScreenActive = STATE_INACTIVE;
@@ -612,7 +616,7 @@ export default class CardStack extends React.Component<Props, State> {
               <MaybeScreen
                 key={route.key}
                 style={StyleSheet.absoluteFill}
-                enabled={detachInactiveScreens}
+                enabled={isScreensEnabled}
                 active={isScreenActive}
                 pointerEvents="box-none"
               >

packages/stack/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();