fixup! fix: flipper error #9850

- @react-navigation/native-stack@6.1.0

.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-version-4.yml

@@ -0,0 +1,92 @@
+name: React Navigation 4
+description: Report an issue with React Navigation 4
+labels: [bug, version-4]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+        If this is not a bug report, please use other relevant channels:
+
+        - [Post a feature request on Canny](https://react-navigation.canny.io/feature-requests)
+        - [Ask questions on StackOverflow using the react-navigation label](https://stackoverflow.com/questions/tagged/react-navigation)
+        - [Chat with others in the #help-react-native channel on Discord](https://www.reactiflux.com/)
+
+  - type: textarea
+    attributes:
+      label: Current behavior
+      description: |
+        What code are you running and what is happening? Include a screenshot or video if it's an UI related issue.
+      placeholder: Current behavior
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: |
+        What do you expect to happen instead?
+      placeholder: Expected behavior
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Reproduction
+      description: |
+        You must provide a way to reproduce the problem. If you don't provide a repro, the issue will be closed automatically after a specific period.
+
+        - Either re-create the bug on [Snack](https://snack.expo.dev) 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.
+        - 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.
+      placeholder: Link to repro
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Platform
+      description: |
+        What are the platforms where you see the issue?
+      options:
+        - label: Android
+        - label: iOS
+        - label: Web
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Packages
+      description: |
+        Which packages are affected by the issue?
+      options:
+        - label: 'react-navigation-drawer'
+        - label: 'react-navigation-stack'
+        - label: 'react-navigation-tabs'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Environment
+      description: |
+        What are the exact versions of packages that you are using?
+
+        When filling the table below, remove the packages that you're not using.
+      value: |
+        | package                                | version |
+        | -------------------------------------- | ------- |
+        | react-navigation                       |
+        | react-navigation-tabs                  |
+        | react-navigation-drawer                |
+        | react-navigation-stack                 |
+        | react-native-safe-area-context         |
+        | react-native-screens                   |
+        | react-native-gesture-handler           |
+        | react-native-reanimated                |
+        | react-native-tab-view                  |
+        | react-native                           |
+        | expo                                   |
+        | node                                   |
+        | npm or yarn                            |
+    validations:
+      required: true

.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/bug-report.yml

@@ -0,0 +1,101 @@
+name: React Navigation 6
+description: Report an issue with React Navigation 6
+labels: [bug]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+        If this is not a bug report, please use other relevant channels:
+
+        - [Post a feature request on Canny](https://react-navigation.canny.io/feature-requests)
+        - [Ask questions on StackOverflow using the react-navigation label](https://stackoverflow.com/questions/tagged/react-navigation)
+        - [Chat with others in the #help-react-native channel on Discord](https://www.reactiflux.com/)
+
+  - type: textarea
+    attributes:
+      label: Current behavior
+      description: |
+        What code are you running and what is happening? Include a screenshot or video if it's an UI related issue.
+      placeholder: Current behavior
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: |
+        What do you expect to happen instead?
+      placeholder: Expected behavior
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Reproduction
+      description: |
+        You must provide a way to reproduce the problem. If you don't provide a repro, the issue will be closed automatically after a specific period.
+
+        - Either re-create the bug on [Snack](https://snack.expo.dev) 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.
+        - 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.
+      placeholder: Link to repro
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Platform
+      description: |
+        What are the platforms where you see the issue?
+      options:
+        - label: Android
+        - label: iOS
+        - label: Web
+        - label: Windows
+        - label: MacOS
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Packages
+      description: |
+        Which packages are affected by the issue?
+      options:
+        - label: '@react-navigation/bottom-tabs'
+        - label: '@react-navigation/drawer'
+        - label: '@react-navigation/material-bottom-tabs'
+        - label: '@react-navigation/material-top-tabs'
+        - label: '@react-navigation/stack'
+        - label: '@react-navigation/native-stack'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Environment
+      description: |
+        What are the exact versions of packages that you are using?
+
+        When filling the table below, **please remove the packages** that you're not using.
+      value: |
+        | package                                | version |
+        | -------------------------------------- | ------- |
+        | @react-navigation/native               |
+        | @react-navigation/bottom-tabs          |
+        | @react-navigation/drawer               |
+        | @react-navigation/material-bottom-tabs |
+        | @react-navigation/material-top-tabs    |
+        | @react-navigation/stack                |
+        | @react-navigation/native-stack         |
+        | react-native-safe-area-context         |
+        | react-native-screens                   |
+        | react-native-gesture-handler           |
+        | react-native-reanimated                |
+        | react-native-tab-view                  |
+        | react-native-pager-view                |
+        | react-native                           |
+        | expo                                   |
+        | node                                   |
+        | npm or yarn                            |
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: Troubleshooting
-    url: https://reactnavigation.org/docs/troubleshooting.html
+    url: https://reactnavigation.org/docs/troubleshooting
     about: Read how to troubleshoot and fix common issues and mistakes.
   - name: Documentation
     url: https://reactnavigation.org
@@ -9,12 +9,12 @@ contact_links:
   - name: Feature requests
     url: https://react-navigation.canny.io/feature-requests
     about: Post a feature request on Canny.
+  - name: Discussions
+    url: https://github.com/react-navigation/react-navigation/discussions
+    about: Discuss questions, ideas etc. and share resources related to the library.
   - 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 help-react-native 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/workflows/check-labels.yml

@@ -0,0 +1,45 @@
+name: Check for labels
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  check-labels:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const body = context.payload.issue.body;
+
+            const packages = Array.from(
+              body.matchAll(/- \[x\] @react-navigation\/([\S]+)/gim)
+            )
+              .map((match) => match[1])
+              .filter((name) =>
+                [
+                  'bottom-tabs',
+                  'drawer',
+                  'material-bottom-tabs',
+                  'material-top-tabs',
+                  'stack',
+                  'native-stack',
+                ].includes(name)
+              )
+              .map((name) => `package:${name}`);
+
+            const platforms = Array.from(
+              body.matchAll(/- \[x\] (Android|iOS|Web|Windows|MacOS)/gim)
+            ).map((matches) => `platform:${matches[1].toLowerCase()}`);
+
+            const labels = [...packages, ...platforms];
+
+            if (labels.length) {
+              await github.issues.addLabels({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                labels,
+              });
+            }

.github/workflows/check-repro.yml

@@ -19,7 +19,7 @@ jobs:
               : context.payload.issue.body;
 
             const regex = new RegExp(
-              `https?:\\/\\/((github\\.com\\/${user}\\/[^/]+\\/?[\\s\\n]+)|(snack\\.expo\\.io\\/.+))`,
+              `https?:\\/\\/((github\\.com\\/${user}\\/[^/]+\\/?[\\s\\n]+)|(snack\\.expo\\.dev\\/.+))`,
               'gm'
             );
 
@@ -48,7 +48,7 @@ jobs:
                 return;
               }
 
-              const body = "Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a [snack.expo.io](https://snack.expo.io) link or link to a GitHub repo under your username).\n\nCan you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.";
+              const body = "Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a [snack.expo.dev](https://snack.expo.dev) link or link to a GitHub repo under your username).\n\nCan you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.";
 
               const comments = await github.issues.listComments({
                 issue_number: context.issue.number,

.github/workflows/expo-preview.yml

@@ -46,7 +46,7 @@ jobs:
         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 body = 'The Expo app for the example from this branch is ready!\n\n[expo.dev/${{ steps.expo.outputs.path }}](https://expo.dev/${{ 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,

.github/workflows/triage.yml

@@ -16,7 +16,7 @@ jobs:
               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."
+              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.dev](https://snack.expo.dev)) 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:
@@ -31,7 +31,7 @@ jobs:
               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 and make sure that we can run it without additional setup.\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."
+              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 and make sure that we can run it without additional setup.\n\nThe easiest way to provide a repro is on [snack.expo.dev](https://snack.expo.dev). If it's not possible to repro it on [snack.expo.dev](https://snack.expo.dev), then please provide the repro in a GitHub repository."
             })
 
   question:
@@ -124,6 +124,21 @@ jobs:
               body: "Hey! Thanks for opening the issue. Seems that this issue is 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."
             })
 
+  react-native-pager-view:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'library:react-native-pager-view'
+    steps:
+      - uses: actions/github-script@v3
+        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 is related to `react-native-pager-view` library which is a dependency of Material Top Tabs. Can you also post your issue in [this repo](https://github.com/callstack/react-native-pager-view) 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-paper:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'library:react-native-paper'
@@ -136,5 +151,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Seems that this issue is in `react-native-paper` library which is a dependency of Material Bottom Navigation. Can you also post your issue in [this repo](https://github.com/callstack/react-native-paper) 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."
+              body: "Hey! Thanks for opening the issue. Seems that this issue is in `react-native-paper` library which is a dependency of Material Bottom Tabs. Can you also post your issue in [this repo](https://github.com/callstack/react-native-paper) 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."
             })

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 This library is a community effort: it can only be great if we all help out in one way or another! If you feel like you aren't experienced enough using React Navigation to contribute, you can still make an impact by:
 
 - Responding to one of the open [issues](https://github.com/react-navigation/react-navigation/issues). Even if you can't resolve or fully answer a question, asking for more information or clarity on an issue is extremely beneficial for someone to come after you to resolve the issue.
-- Creating public example repositories or [Snacks](https://snack.expo.io/) of navigation problems you have solved and sharing the links.
+- Creating public example repositories or [Snacks](https://snack.expo.dev/) of navigation problems you have solved and sharing the links.
 - Answering questions on [Stack Overflow](https://stackoverflow.com/search?q=react-navigation).
 - Answering questions in our [Reactiflux](https://www.reactiflux.com/) channel.
 - Providing feedback on the open [PRs](https://github.com/react-navigation/react-navigation/pulls).
@@ -20,7 +20,7 @@ The project uses a monorepo structure for the packages managed by [yarn workspac
 yarn
 ```
 
-While developing, you can run the [example app](/example/) with [Expo](https://expo.io/) to test your changes:
+While developing, you can run the [example app](/example/) with [Expo](https://expo.dev/) to test your changes:
 
 ```sh
 yarn example start

README.md

@@ -1,4 +1,4 @@
-# React Navigation 5
+# React Navigation 6
 
 [![Build Status][build-badge]][build]
 [![Code Coverage][coverage-badge]][coverage]

example/README.md

@@ -4,6 +4,6 @@ If you want to run the example from the repo,
 
 - Clone the repository and run `yarn` in the project root
 - Run `yarn example start` to start the packager
-- Follow the instructions to open it with the [Expo app](https://expo.io/)
+- Follow the instructions to open it with the [Expo app](https://expo.dev/)
 
-You can also run the currently published [app on Expo](https://expo.io/@react-navigation/react-navigation-example) on your Android device or iOS simulator or the [web app](https://react-navigation-example.netlify.com/) in your browser.
+You can also run the currently published [app on Expo](https://expo.dev/@react-navigation/react-navigation-example) on your Android device or iOS simulator or the [web app](https://react-navigation-example.netlify.com/) in your browser.

example/package.json

@@ -36,7 +36,7 @@
     "react-native-reanimated": "~2.2.0",
     "react-native-safe-area-context": "~3.2.0",
     "react-native-screens": "~3.3.0",
-    "react-native-tab-view": "^3.0.1",
+    "react-native-tab-view": "^3.1.1",
     "react-native-unimodules": "~0.13.3",
     "react-native-vector-icons": "^8.1.0",
     "react-native-web": "~0.16.3"

example/src/Screens/BottomTabs.tsx

@@ -2,16 +2,17 @@ import {
   createBottomTabNavigator,
   useBottomTabBarHeight,
 } from '@react-navigation/bottom-tabs';
-import { HeaderBackButton } from '@react-navigation/elements';
+import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements';
 import {
   getFocusedRouteNameFromRoute,
   NavigatorScreenParams,
   ParamListBase,
+  useIsFocused,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import * as React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { ScrollView, StatusBar, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import Albums from '../Shared/Albums';
@@ -32,12 +33,22 @@ type BottomTabParams = {
 };
 
 const AlbumsScreen = () => {
+  const headerHeight = useHeaderHeight();
   const tabBarHeight = useBottomTabBarHeight();
+  const isFocused = useIsFocused();
 
   return (
-    <ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }}>
-      <Albums scrollEnabled={false} />
-    </ScrollView>
+    <>
+      {isFocused && <StatusBar barStyle="light-content" />}
+      <ScrollView
+        contentContainerStyle={{
+          paddingTop: headerHeight,
+          paddingBottom: tabBarHeight,
+        }}
+      >
+        <Albums scrollEnabled={false} />
+      </ScrollView>
+    </>
   );
 };
 
@@ -94,11 +105,25 @@ export default function BottomTabsScreen({
         component={AlbumsScreen}
         options={{
           title: 'Albums',
+          headerTintColor: '#fff',
+          headerTransparent: true,
+          headerBackground: () => (
+            <BlurView
+              tint="dark"
+              intensity={100}
+              style={StyleSheet.absoluteFill}
+            />
+          ),
           tabBarIcon: getTabBarIcon('image-album'),
-          tabBarStyle: { position: 'absolute' },
+          tabBarInactiveTintColor: 'rgba(255, 255, 255, 0.5)',
+          tabBarActiveTintColor: '#fff',
+          tabBarStyle: {
+            position: 'absolute',
+            borderTopColor: 'rgba(0, 0, 0, .2)',
+          },
           tabBarBackground: () => (
             <BlurView
-              tint="light"
+              tint="dark"
               intensity={100}
               style={StyleSheet.absoluteFill}
             />

example/src/Screens/NativeStack.tsx

@@ -154,7 +154,7 @@ export default function NativeStackScreen({
           title: 'Albums',
           presentation: 'modal',
           headerShadowVisible: true,
-          headerTranslucent: true,
+          headerTransparent: true,
           headerBlurEffect: 'light',
         }}
       />

example/src/Screens/PreventRemove.tsx

@@ -1,6 +1,5 @@
 import {
   CommonActions,
-  NavigationAction,
   ParamListBase,
   useTheme,
 } from '@react-navigation/native';
@@ -69,10 +68,7 @@ const InputScreen = ({
   React.useEffect(
     () =>
       navigation.addListener('beforeRemove', (e) => {
-        const action: NavigationAction & { payload?: { confirmed?: boolean } } =
-          e.data.action;
-
-        if (!hasUnsavedChanges || action.payload?.confirmed) {
+        if (!hasUnsavedChanges) {
           return;
         }
 
@@ -84,7 +80,7 @@ const InputScreen = ({
           );
 
           if (discard) {
-            navigation.dispatch(action);
+            navigation.dispatch(e.data.action);
           }
         } else {
           Alert.alert(
@@ -95,7 +91,7 @@ const InputScreen = ({
               {
                 text: 'Discard',
                 style: 'destructive',
-                onPress: () => navigation.dispatch(action),
+                onPress: () => navigation.dispatch(e.data.action),
               },
             ]
           );

lerna.json

@@ -11,7 +11,6 @@
       "allowBranch": "main",
       "conventionalCommits": true,
       "createRelease": "github",
-      "distTag": "next",
       "message": "chore: publish",
       "ignoreChanges": [
         "**/__fixtures__/**",

package.json

@@ -1,5 +1,5 @@
 {
-  "description": "Rethinking navigation",
+  "description": "Routing and navigation for your React Native apps",
   "private": true,
   "workspaces": {
     "packages": [

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.4...@react-navigation/bottom-tabs@6.0.5) (2021-08-17)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.3...@react-navigation/bottom-tabs@6.0.4) (2021-08-11)
+
+
+### Bug Fixes
+
+* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
+
+
+
+
+
+## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.2...@react-navigation/bottom-tabs@6.0.3) (2021-08-09)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.1...@react-navigation/bottom-tabs@6.0.2) (2021-08-07)
+
+
+### Bug Fixes
+
+* avoid blink when switching tab screens ([40dcbcf](https://github.com/react-navigation/react-navigation/commit/40dcbcf2fa48d5367d3121ef9f0ad6c1dd5933c6))
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0...@react-navigation/bottom-tabs@6.0.1) (2021-08-03)
+
+
+### Bug Fixes
+
+* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.22...@react-navigation/bottom-tabs@6.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* remove tabBarAdapative option ([5f4e124](https://github.com/react-navigation/react-navigation/commit/5f4e12403265d22a2e4d03f11a11746b01184116))
+
+
+
+
+
+# [6.0.0-next.22](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.21...@react-navigation/bottom-tabs@6.0.0-next.22) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [6.0.0-next.21](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.20...@react-navigation/bottom-tabs@6.0.0-next.21) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [6.0.0-next.20](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.18...@react-navigation/bottom-tabs@6.0.0-next.20) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [6.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.18...@react-navigation/bottom-tabs@6.0.0-next.19) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/README.md

@@ -2,4 +2,4 @@
 
 Bottom tab navigator for React Navigation following iOS design guidelines.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/bottom-tab-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/bottom-tab-navigator/).

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "6.0.0-next.19",
+  "version": "6.0.5",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.1.0",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^17.0.9",

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

@@ -54,8 +54,22 @@ function BottomTabNavigator({
       tabBarLabelStyle: tabBarOptions.labelStyle,
       tabBarIconStyle: tabBarOptions.iconStyle,
       tabBarItemStyle: tabBarOptions.tabStyle,
-      tabBarLabelPosition: tabBarOptions.labelPosition,
-      tabBarAdaptive: tabBarOptions.adaptive,
+      tabBarLabelPosition:
+        tabBarOptions.labelPosition ??
+        (tabBarOptions.adaptive === false ? 'below-icon' : undefined),
+      tabBarStyle: [
+        { display: tabBarOptions.tabBarVisible ? 'none' : 'flex' },
+        defaultScreenOptions.tabBarStyle,
+      ],
+    });
+
+    (
+      Object.keys(defaultScreenOptions) as (keyof BottomTabNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
     });
 
     warnOnce(
@@ -64,7 +78,7 @@ function BottomTabNavigator({
         defaultScreenOptions,
         null,
         2
-      )}\n\nSee https://reactnavigation.org/docs/6.x/bottom-tab-navigator#options for more details.`
+      )}\n\nSee https://reactnavigation.org/docs/bottom-tab-navigator#options for more details.`
     );
   }
 
@@ -73,7 +87,7 @@ function BottomTabNavigator({
 
     warnOnce(
       true,
-      `Bottom Tab Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.`
+      `Bottom Tab Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/bottom-tab-navigator/#lazy for more details.`
     );
   }
 

packages/bottom-tabs/src/types.tsx

@@ -86,23 +86,6 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    */
   title?: string;
 
-  /**
-   * Whether this screens should render the first time it's accessed. Defaults to `true`.
-   * Set it to `false` if you want to render the screen on initial render.
-   */
-  lazy?: boolean;
-
-  /**
-   * Function that given returns a React Element to display as a header.
-   */
-  header?: (props: BottomTabHeaderProps) => React.ReactNode;
-
-  /**
-   * Whether to show the header. Setting this to `false` hides the header.
-   * Defaults to `true`.
-   */
-  headerShown?: boolean;
-
   /**
    * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
@@ -117,6 +100,31 @@ export type BottomTabNavigationOptions = HeaderOptions & {
         position: LabelPosition;
       }) => React.ReactNode);
 
+  /**
+   * Whether the tab label should be visible. Defaults to `true`.
+   */
+  tabBarShowLabel?: boolean;
+
+  /**
+   * Whether the label is shown below the icon or beside the icon.
+   *
+   * - `below-icon`: the label is shown below the icon (typical for iPhones)
+   * - `beside-icon` the label is shown next to the icon (typical for iPad)
+   *
+   * By default, the position is chosen automatically based on device width.
+   */
+  tabBarLabelPosition?: LabelPosition;
+
+  /**
+   * Style object for the tab label.
+   */
+  tabBarLabelStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  tabBarAllowFontScaling?: boolean;
+
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
@@ -126,6 +134,11 @@ export type BottomTabNavigationOptions = HeaderOptions & {
     size: number;
   }) => React.ReactNode;
 
+  /**
+   * Style object for the tab icon.
+   */
+  tabBarIconStyle?: StyleProp<TextStyle>;
+
   /**
    * Text to show in a badge on the tab icon.
    */
@@ -148,17 +161,9 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    */
   tabBarTestID?: string;
 
-  /**
-   * Animation config for showing and hiding the tab bar.
-   */
-  tabBarVisibilityAnimationConfig?: {
-    show?: TabBarVisibilityAnimationConfig;
-    hide?: TabBarVisibilityAnimationConfig;
-  };
-
   /**
    * Function which returns a React element to render as the tab bar button.
-   * Renders `TouchableWithoutFeedback` by default.
+   * Renders `Pressable` by default.
    */
   tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
 
@@ -178,59 +183,35 @@ export type BottomTabNavigationOptions = HeaderOptions & {
   tabBarActiveBackgroundColor?: string;
 
   /**
-   * background color for the inactive tabs.
+   * Background color for the inactive tabs.
    */
   tabBarInactiveBackgroundColor?: string;
 
-  /**
-   * Whether label font should scale to respect Text Size accessibility settings.
-   */
-  tabBarAllowFontScaling?: boolean;
-
-  /**
-   * Whether the tab label should be visible. Defaults to `true`.
-   */
-  tabBarShowLabel?: boolean;
-
-  /**
-   * Style object for the tab label.
-   */
-  tabBarLabelStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Style object for the tab icon.
-   */
-  tabBarIconStyle?: StyleProp<TextStyle>;
-
   /**
    * Style object for the tab item container.
    */
   tabBarItemStyle?: StyleProp<ViewStyle>;
 
-  /**
-   * Whether the label is rendered below the icon or beside the icon.
-   * By default, the position is chosen automatically based on device width.
-   * In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
-   */
-  tabBarLabelPosition?: LabelPosition;
-
-  /**
-   * Whether the label position should adapt to the orientation.
-   */
-  tabBarAdaptive?: boolean;
-
   /**
    * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
    */
   tabBarHideOnKeyboard?: boolean;
 
+  /**
+   * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
+   */
+  tabBarVisibilityAnimationConfig?: {
+    show?: TabBarVisibilityAnimationConfig;
+    hide?: TabBarVisibilityAnimationConfig;
+  };
+
   /**
    * Style object for the tab bar container.
    */
   tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 
   /**
-   * Component to use as background for the tab bar.
+   * Function which returns a React Element to use as background for the tab bar.
    * You could render an image, a gradient, blur view etc.
    *
    * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
@@ -238,6 +219,23 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    */
   tabBarBackground?: () => React.ReactNode;
 
+  /**
+   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Set it to `false` if you want to render the screen on initial render.
+   */
+  lazy?: boolean;
+
+  /**
+   * Function that given returns a React Element to display as a header.
+   */
+  header?: (props: BottomTabHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header. Setting this to `false` hides the header.
+   * Defaults to `true`.
+   */
+  headerShown?: boolean;
+
   /**
    * Whether this screen should be unmounted when navigating away from it.
    * Defaults to `false`.

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

@@ -48,6 +48,8 @@ export default function Badge({
         setRendered(false);
       }
     });
+
+    return () => opacity.stopAnimation();
   }, [opacity, rendered, visible]);
 
   if (visible && !rendered) {

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

@@ -48,15 +48,16 @@ const shouldUseHorizontalLabels = ({
   layout,
   dimensions,
 }: Options) => {
-  const { tabBarLabelPosition, tabBarAdaptive = true } =
+  const { tabBarLabelPosition } =
     descriptors[state.routes[state.index].key].options;
 
   if (tabBarLabelPosition) {
-    return tabBarLabelPosition === 'beside-icon';
-  }
-
-  if (!tabBarAdaptive) {
-    return false;
+    switch (tabBarLabelPosition) {
+      case 'beside-icon':
+        return true;
+      case 'below-icon':
+        return false;
+    }
   }
 
   if (layout.width >= 768) {
@@ -144,6 +145,10 @@ export default function BottomTabBar({
     tabBarVisibilityAnimationConfig,
     tabBarStyle,
     tabBarBackground,
+    tabBarActiveTintColor,
+    tabBarInactiveTintColor,
+    tabBarActiveBackgroundColor,
+    tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
   const dimensions = useSafeAreaFrame();
@@ -201,6 +206,8 @@ export default function BottomTabBar({
         ...visibilityAnimationConfig?.hide?.config,
       }).start();
     }
+
+    return () => visible.stopAnimation();
   }, [visible, shouldShowTabBar]);
 
   const [layout, setLayout] = React.useState({
@@ -298,7 +305,7 @@ export default function BottomTabBar({
 
             if (!focused && !event.defaultPrevented) {
               navigation.dispatch({
-                ...CommonActions.navigate(route.name),
+                ...CommonActions.navigate({ name: route.name, merge: true }),
                 target: state.key,
               });
             }
@@ -341,12 +348,10 @@ export default function BottomTabBar({
                   to={buildLink(route.name, route.params)}
                   testID={options.tabBarTestID}
                   allowFontScaling={options.tabBarAllowFontScaling}
-                  activeTintColor={options.tabBarActiveTintColor}
-                  inactiveTintColor={options.tabBarInactiveTintColor}
-                  activeBackgroundColor={options.tabBarActiveBackgroundColor}
-                  inactiveBackgroundColor={
-                    options.tabBarInactiveBackgroundColor
-                  }
+                  activeTintColor={tabBarActiveTintColor}
+                  inactiveTintColor={tabBarInactiveTintColor}
+                  activeBackgroundColor={tabBarActiveBackgroundColor}
+                  inactiveBackgroundColor={tabBarInactiveBackgroundColor}
                   button={options.tabBarButton}
                   icon={
                     options.tabBarIcon ??

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

@@ -121,7 +121,7 @@ export default function BottomTabView(props: Props) {
           return (
             <MaybeScreen
               key={route.key}
-              style={StyleSheet.absoluteFill}
+              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
             >
@@ -131,6 +131,7 @@ export default function BottomTabView(props: Props) {
                   route={descriptor.route}
                   navigation={descriptor.navigation}
                   headerShown={descriptor.options.headerShown}
+                  headerTransparent={descriptor.options.headerTransparent}
                   headerStatusBarHeight={
                     descriptor.options.headerStatusBarHeight
                   }

packages/core/CHANGELOG.md

@@ -3,6 +3,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0...@react-navigation/core@6.0.1) (2021-08-03)
+
+
+### Bug Fixes
+
+* add merge to the navigate types ([#9777](https://github.com/react-navigation/react-navigation/issues/9777)) ([be8532c](https://github.com/react-navigation/react-navigation/commit/be8532c0867bdb0cff4b29c0892bdfe85c33e8e3))
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.17...@react-navigation/core@6.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* clear options set from a screen when it unmounts. closes [#9756](https://github.com/react-navigation/react-navigation/issues/9756) ([d2d7f8d](https://github.com/react-navigation/react-navigation/commit/d2d7f8d95e84e8d45b6807f59afcf4d0e64c3828))
+
+
+
+
+
+# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.16...@react-navigation/core@6.0.0-next.17) (2021-07-16)
+
+
+### Bug Fixes
+
+* use nested params for initial state only ([577d79e](https://github.com/react-navigation/react-navigation/commit/577d79e98c6d6f1c78e0f3232225b2b6b331340b))
+
+
+
+
+
+# [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.15...@react-navigation/core@6.0.0-next.16) (2021-07-16)
+
+
+### Bug Fixes
+
+* prevent navigation state updates after state cleanup ([#9688](https://github.com/react-navigation/react-navigation/issues/9688)) ([16f0e11](https://github.com/react-navigation/react-navigation/commit/16f0e11822b14aa5b1ba4b288fb38fcf15088419))
+* sort wildcard and :params  ([#9672](https://github.com/react-navigation/react-navigation/issues/9672)) ([4135d09](https://github.com/react-navigation/react-navigation/commit/4135d09c6f14030257b2da47658e102b083c7727))
+
+
+
+
+
+# [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.13...@react-navigation/core@6.0.0-next.15) (2021-07-01)
+
+
+### Bug Fixes
+
+* fix typechecking in linking config ([b1134c8](https://github.com/react-navigation/react-navigation/commit/b1134c8a34f96be2817cb780c4bd23b2025b4c35))
+
+
+### Features
+
+* show stack trace in the flipper plugin ([97772af](https://github.com/react-navigation/react-navigation/commit/97772affa3c8f26489f0bdbfb6872ef4377b8ed1))
+
+
+
+
+
 # [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.13...@react-navigation/core@6.0.0-next.14) (2021-06-10)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.0.0-next.14",
+  "version": "6.0.1",
   "keywords": [
     "react",
     "react-native",
@@ -35,7 +35,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.0.0-next.5",
+    "@react-navigation/routers": "^6.0.1",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.23",
     "query-string": "^7.0.0",

packages/core/src/BaseNavigationContainer.tsx

@@ -192,12 +192,13 @@ const BaseNavigationContainer = React.forwardRef(
           return acc;
         }, {}),
         ...emitter.create('root'),
-        resetRoot,
         dispatch,
+        resetRoot,
+        isFocused: () => true,
         canGoBack,
-        getRootState,
-        getState: () => stateRef.current,
         getParent: () => undefined,
+        getState: () => stateRef.current,
+        getRootState,
         getCurrentRoute,
         getCurrentOptions,
         isReady: () => listeners.focus[0] != null,

packages/core/src/SceneView.tsx

@@ -20,6 +20,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
   getState: () => State;
   setState: (state: State) => void;
   options: object;
+  clearOptions: () => void;
 };
 
 /**
@@ -37,6 +38,7 @@ export default function SceneView<
   getState,
   setState,
   options,
+  clearOptions,
 }: Props<State, ScreenOptions>) {
   const navigatorKeyRef = React.useRef<string | undefined>();
   const getKey = React.useCallback(() => navigatorKeyRef.current, []);
@@ -78,6 +80,12 @@ export default function SceneView<
     isInitialRef.current = false;
   });
 
+  // Clear options set by this screen when it is unmounted
+  React.useEffect(() => {
+    return clearOptions;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
   const context = React.useMemo(

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

@@ -0,0 +1,47 @@
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import BaseNavigationContainer from '../BaseNavigationContainer';
+import createNavigationContainerRef from '../createNavigationContainerRef';
+import Screen from '../Screen';
+import useNavigationBuilder from '../useNavigationBuilder';
+import MockRouter from './__fixtures__/MockRouter';
+
+it('adds the listener even if container is mounted later', () => {
+  const ref = createNavigationContainerRef<ParamListBase>();
+  const listener = jest.fn();
+
+  ref.addListener('state', listener);
+
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder<
+      NavigationState,
+      any,
+      {},
+      { title?: string },
+      any
+    >(MockRouter, props);
+    const { render, options } = descriptors[state.routes[state.index].key];
+
+    return (
+      <main>
+        <h1>{options.title}</h1>
+        <div>{render()}</div>
+      </main>
+    );
+  };
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element).update(element);
+
+  expect(listener).toHaveBeenCalledTimes(1);
+});

packages/core/src/createNavigationContainerRef.tsx

@@ -1,6 +1,10 @@
 import { CommonActions } from '@react-navigation/routers';
 
-import type { NavigationContainerRefWithCurrent } from './types';
+import type {
+  NavigationContainerEventMap,
+  NavigationContainerRef,
+  NavigationContainerRefWithCurrent,
+} from './types';
 
 export const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
@@ -14,6 +18,7 @@ export default function createNavigationContainerRef<
     'removeListener',
     'resetRoot',
     'dispatch',
+    'isFocused',
     'canGoBack',
     'getRootState',
     'getState',
@@ -22,26 +27,70 @@ export default function createNavigationContainerRef<
     'getCurrentOptions',
   ] as const;
 
+  const listeners: Record<string, ((...args: any[]) => void)[]> = {};
+
+  const removeListener = (
+    event: string,
+    callback: (...args: any[]) => void
+  ) => {
+    listeners[event] = listeners[event]?.filter((cb) => cb !== callback);
+  };
+
+  let current: NavigationContainerRef<ParamList> | null = null;
+
   const ref: NavigationContainerRefWithCurrent<ParamList> = {
+    get current() {
+      return current;
+    },
+    set current(value: NavigationContainerRef<ParamList> | null) {
+      current = value;
+
+      if (value != null) {
+        Object.entries(listeners).forEach(([event, callbacks]) => {
+          callbacks.forEach((callback) => {
+            value.addListener(
+              event as keyof NavigationContainerEventMap,
+              callback
+            );
+          });
+        });
+      }
+    },
+    isReady: () => {
+      if (current == null) {
+        return false;
+      }
+
+      return current.isReady();
+    },
     ...methods.reduce<any>((acc, name) => {
       acc[name] = (...args: any[]) => {
-        if (ref.current == null) {
-          console.error(NOT_INITIALIZED_ERROR);
+        if (current == null) {
+          switch (name) {
+            case 'addListener': {
+              const [event, callback] = args;
+
+              listeners[event] = listeners[event] || [];
+              listeners[event].push(callback);
+
+              return () => removeListener(event, callback);
+            }
+            case 'removeListener': {
+              const [event, callback] = args;
+
+              removeListener(event, callback);
+              break;
+            }
+            default:
+              console.error(NOT_INITIALIZED_ERROR);
+          }
         } else {
           // @ts-expect-error: this is ok
-          return ref.current[name](...args);
+          return current[name](...args);
         }
       };
       return acc;
     }, {}),
-    isReady: () => {
-      if (ref.current == null) {
-        return false;
-      }
-
-      return ref.current.isReady();
-    },
-    current: null,
   };
 
   return ref;

packages/core/src/createNavigatorFactory.tsx

@@ -27,7 +27,7 @@ export default function createNavigatorFactory<
   > {
     if (arguments[0] !== undefined) {
       throw new Error(
-        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/upgrading-from-4.x for migration guide."
+        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API? See https://reactnavigation.org/docs/hello-react-navigation for the latest API and guides."
       );
     }
 

packages/core/src/types.tsx

@@ -200,8 +200,13 @@ type NavigationHelpersCommon<
    */
   navigate<RouteName extends keyof ParamList>(
     options:
-      | { key: string; params?: ParamList[RouteName] }
-      | { name: RouteName; key?: string; params: ParamList[RouteName] }
+      | { key: string; params?: ParamList[RouteName]; merge?: boolean }
+      | {
+          name: RouteName;
+          key?: string;
+          params: ParamList[RouteName];
+          merge?: boolean;
+        }
   ): void;
 
   /**
@@ -632,10 +637,9 @@ export type PathConfig<ParamList extends {}> = {
 };
 
 export type PathConfigMap<ParamList extends {}> = {
-  [RouteName in keyof ParamList]?: ParamList[RouteName] extends NavigatorScreenParams<
-    infer T,
-    any
-  >
+  [RouteName in keyof ParamList]?: NonNullable<
+    ParamList[RouteName]
+  > extends NavigatorScreenParams<infer T, any>
     ? string | PathConfig<T>
     : string | Omit<PathConfig<{}>, 'screens' | 'initialRouteName'>;
 };

packages/core/src/useDescriptors.tsx

@@ -186,6 +186,17 @@ export default function useDescriptors<
       ...customOptions,
     };
 
+    const clearOptions = () =>
+      setOptions((o) => {
+        if (route.key in o) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { [route.key]: _, ...rest } = o;
+          return rest;
+        }
+
+        return o;
+      });
+
     acc[route.key] = {
       route,
       // @ts-expect-error: it's missing action helpers, fix later
@@ -203,6 +214,7 @@ export default function useDescriptors<
                   getState={getState}
                   setState={setState}
                   options={mergedOptions}
+                  clearOptions={clearOptions}
                 />
               </NavigationRouteContext.Provider>
             </NavigationContext.Provider>

packages/core/src/useNavigationBuilder.tsx

@@ -250,21 +250,7 @@ export default function useNavigationBuilder<
   const routeParamList = routeNames.reduce<Record<string, object | undefined>>(
     (acc, curr) => {
       const { initialParams } = screens[curr][1];
-      const initialParamsFromParams =
-        route?.params?.state == null &&
-        route?.params?.initial !== false &&
-        route?.params?.screen === curr
-          ? route.params.params
-          : undefined;
-
-      acc[curr] =
-        initialParams !== undefined || initialParamsFromParams !== undefined
-          ? {
-              ...initialParams,
-              ...initialParamsFromParams,
-            }
-          : undefined;
-
+      acc[curr] = initialParams;
       return acc;
     },
     {}
@@ -299,13 +285,55 @@ export default function useNavigationBuilder<
   const {
     state: currentState,
     getState: getCurrentState,
-    setState,
+    setState: setCurrentState,
     setKey,
     getKey,
     getIsInitial,
   } = React.useContext(NavigationStateContext);
 
+  const stateCleanedUp = React.useRef(false);
+
+  const cleanUpState = React.useCallback(() => {
+    setCurrentState(undefined);
+    stateCleanedUp.current = true;
+  }, [setCurrentState]);
+
+  const setState = React.useCallback(
+    (state: NavigationState | PartialState<NavigationState> | undefined) => {
+      if (stateCleanedUp.current) {
+        // State might have been already cleaned up due to unmount
+        // We do not want to expose API allowing to override this
+        // This would lead to old data preservation on main navigator unmount
+        return;
+      }
+      setCurrentState(state);
+    },
+    [setCurrentState]
+  );
+
   const [initializedState, isFirstStateInitialization] = React.useMemo(() => {
+    const initialRouteParamList = routeNames.reduce<
+      Record<string, object | undefined>
+    >((acc, curr) => {
+      const { initialParams } = screens[curr][1];
+      const initialParamsFromParams =
+        route?.params?.state == null &&
+        route?.params?.initial !== false &&
+        route?.params?.screen === curr
+          ? route.params.params
+          : undefined;
+
+      acc[curr] =
+        initialParams !== undefined || initialParamsFromParams !== undefined
+          ? {
+              ...initialParams,
+              ...initialParamsFromParams,
+            }
+          : undefined;
+
+      return acc;
+    }, {});
+
     // If the current state isn't initialized on first render, we initialize it
     // We also need to re-initialize it if the state passed from parent was changed (maybe due to reset)
     // Otherwise assume that the state was provided as initial state
@@ -317,7 +345,7 @@ export default function useNavigationBuilder<
       return [
         router.getInitialState({
           routeNames,
-          routeParamList,
+          routeParamList: initialRouteParamList,
           routeGetIdList,
         }),
         true,
@@ -328,16 +356,15 @@ export default function useNavigationBuilder<
           route?.params?.state ?? (currentState as PartialState<State>),
           {
             routeNames,
-            routeParamList,
+            routeParamList: initialRouteParamList,
             routeGetIdList,
           }
         ),
         false,
       ];
     }
-    // We explicitly don't include routeNames/routeParamList in the dep list
-    // below. We want to avoid forcing a new state to be calculated in cases
-    // where routeConfigs change without affecting routeNames/routeParamList.
+    // We explicitly don't include routeNames, route.params etc. in the dep list
+    // below. We want to avoid forcing a new state to be calculated in those cases
     // Instead, we handle changes to these in the nextState code below. Note
     // that some changes to routeConfigs are explicitly ignored, such as changes
     // to initialParams
@@ -444,7 +471,7 @@ export default function useNavigationBuilder<
       // Otherwise, our cleanup step will cleanup state for the other navigator and re-initialize it
       setTimeout(() => {
         if (getCurrentState() !== undefined && getKey() === navigatorKey) {
-          setState(undefined);
+          cleanUpState();
         }
       }, 0);
     };

packages/core/src/useNavigationHelpers.tsx

@@ -83,7 +83,7 @@ export default function useNavigationHelpers<
         );
       },
       getParent: () => parentNavigationHelpers as any,
-      getState: getState,
+      getState,
     } as NavigationHelpers<ParamListBase, EventMap> &
       (NavigationProp<ParamListBase, string, any, any, any> | undefined) &
       ActionHelpers;

packages/devtools/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0...@react-navigation/devtools@6.0.1) (2021-08-03)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.19...@react-navigation/devtools@6.0.0) (2021-08-01)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+# [6.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.18...@react-navigation/devtools@6.0.0-next.19) (2021-07-19)
+
+
+### Bug Fixes
+
+* ignore errors from symbolication in devtools ([f666059](https://github.com/react-navigation/react-navigation/commit/f666059d80e7888e50071b888e6f9a4afd00a71e))
+
+
+
+
+
+# [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.17...@react-navigation/devtools@6.0.0-next.18) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.16...@react-navigation/devtools@6.0.0-next.17) (2021-07-16)
+
+
+### Bug Fixes
+
+* fix devtools not sending new events if an error occured ([c333f40](https://github.com/react-navigation/react-navigation/commit/c333f4086ea04c879fdd46ccc206d3faf84fabca))
+
+
+
+
+
+# [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.14...@react-navigation/devtools@6.0.0-next.16) (2021-07-01)
+
+
+### Features
+
+* show stack trace in the flipper plugin ([97772af](https://github.com/react-navigation/react-navigation/commit/97772affa3c8f26489f0bdbfb6872ef4377b8ed1))
+
+
+
+
+
 # [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.14...@react-navigation/devtools@6.0.0-next.15) (2021-06-10)
 
 

packages/devtools/README.md

@@ -2,4 +2,4 @@
 
 Developer tools for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/devtools).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/devtools).

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "6.0.0-next.15",
+  "version": "6.0.1",
   "keywords": [
     "react",
     "react-native",
@@ -40,7 +40,7 @@
     "nanoid": "^3.1.23"
   },
   "devDependencies": {
-    "@react-navigation/core": "^6.0.0-next.14",
+    "@react-navigation/core": "^6.0.1",
     "@testing-library/react-native": "^7.2.0",
     "@types/deep-equal": "^1.0.1",
     "@types/react": "^17.0.9",

packages/devtools/src/useDevToolsBase.tsx

@@ -75,7 +75,7 @@ export default function useDevToolsBase(
       })
       .filter(Boolean) as StackFrame[];
 
-    const urlMatch = frames[0].file?.match(/^https?:\/\/.+(:\d+)?\//);
+    const urlMatch = frames[0]?.file?.match(/^https?:\/\/.+(:\d+)?\//);
 
     if (!urlMatch) {
       return stack;
@@ -103,15 +103,26 @@ export default function useDevToolsBase(
 
   const send = React.useCallback((data: ActionData) => {
     // We need to make sure that our callbacks executed in the same order
-    pendingPromiseRef.current = pendingPromiseRef.current.then(async () => {
-      if (data.stack) {
-        const stack = await symbolicate(data.stack);
+    // So we add check if the last promise is settled before sending the next one
+    pendingPromiseRef.current = pendingPromiseRef.current
+      .catch(() => {
+        // Ignore any errors from the last promise
+      })
+      .then(async () => {
+        if (data.stack) {
+          let stack: string | undefined;
 
-        callbackRef.current({ ...data, stack });
-      } else {
-        callbackRef.current(data);
-      }
-    });
+          try {
+            stack = await symbolicate(data.stack);
+          } catch (err) {
+            // Ignore errors from symbolicate
+          }
+
+          callbackRef.current({ ...data, stack });
+        } else {
+          callbackRef.current(data);
+        }
+      });
   }, []);
 
   React.useEffect(() => {

packages/drawer/CHANGELOG.md

@@ -3,6 +3,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.3...@react-navigation/drawer@6.1.4) (2021-08-17)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [6.1.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.2...@react-navigation/drawer@6.1.3) (2021-08-11)
+
+
+### Bug Fixes
+
+* use correct tint and background color from drawer items ([f8fddac](https://github.com/react-navigation/react-navigation/commit/f8fddac79d0f95aa4ece6b1c7645619f5497a112))
+
+
+
+
+
+## [6.1.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.1...@react-navigation/drawer@6.1.2) (2021-08-11)
+
+
+### Bug Fixes
+
+* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
+
+
+
+
+
+## [6.1.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.0...@react-navigation/drawer@6.1.1) (2021-08-09)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [6.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.1...@react-navigation/drawer@6.1.0) (2021-08-07)
+
+
+### Bug Fixes
+
+* blink while switching screens ([#9705](https://github.com/react-navigation/react-navigation/issues/9705)) ([99735e1](https://github.com/react-navigation/react-navigation/commit/99735e1b730a2f308ba00dcaef54d5ec14769a3d))
+
+
+### Features
+
+* use forwardRef with DrawerContentScrollView ([#9695](https://github.com/react-navigation/react-navigation/issues/9695)) ([ebb5f24](https://github.com/react-navigation/react-navigation/commit/ebb5f246645246b445b1fd22d8ae8fe87d3d7c52)), closes [#9350](https://github.com/react-navigation/react-navigation/issues/9350)
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0...@react-navigation/drawer@6.0.1) (2021-08-03)
+
+
+### Bug Fixes
+
+* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.21...@react-navigation/drawer@6.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* add deprecation warning for openByDefault ([9506ad1](https://github.com/react-navigation/react-navigation/commit/9506ad1f001b3ed295a36c6744ed17459fa193e4))
+
+
+
+
+
+# [6.0.0-next.21](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.20...@react-navigation/drawer@6.0.0-next.21) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [6.0.0-next.20](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.19...@react-navigation/drawer@6.0.0-next.20) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [6.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.17...@react-navigation/drawer@6.0.0-next.19) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 # [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.17...@react-navigation/drawer@6.0.0-next.18) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/README.md

@@ -2,4 +2,4 @@
 
 Drawer navigator for React Navigation following Material Design guidelines.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/drawer-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/drawer-navigator/).

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "6.0.0-next.18",
+  "version": "6.1.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,12 +41,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.1.0",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -34,6 +34,8 @@ function DrawerNavigator({
   children,
   screenListeners,
   screenOptions,
+  // @ts-expect-error: openByDefault is deprecated
+  openByDefault,
   // @ts-expect-error: lazy is deprecated
   lazy,
   // @ts-expect-error: drawerContentOptions is deprecated
@@ -55,13 +57,22 @@ function DrawerNavigator({
       gestureHandlerProps: drawerContentOptions.gestureHandlerProps,
     });
 
+    (
+      Object.keys(defaultScreenOptions) as (keyof DrawerNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
+    });
+
     warnOnce(
       drawerContentOptions,
       `Drawer Navigator: 'drawerContentOptions' is deprecated. Migrate the options to 'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep current behavior:\n\n${JSON.stringify(
         defaultScreenOptions,
         null,
         2
-      )}\n\nSee https://reactnavigation.org/docs/6.x/drawer-navigator#options for more details.`
+      )}\n\nSee https://reactnavigation.org/docs/drawer-navigator#options for more details.`
     );
   }
 
@@ -70,7 +81,14 @@ function DrawerNavigator({
 
     warnOnce(
       true,
-      `Drawer Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.`
+      `Drawer Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#lazy for more details.`
+    );
+  }
+
+  if (typeof openByDefault === 'boolean') {
+    warnOnce(
+      true,
+      `Drawer Navigator: 'openByDefault' is deprecated. Use 'defaultStatus' and set it to 'open' or 'closed' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#defaultstatus for more details.`
     );
   }
 
@@ -83,7 +101,12 @@ function DrawerNavigator({
       DrawerNavigationEventMap
     >(DrawerRouter, {
       initialRouteName,
-      defaultStatus,
+      defaultStatus:
+        defaultStatus !== undefined
+          ? defaultStatus
+          : openByDefault
+          ? 'open'
+          : 'closed',
       backBehavior,
       children,
       screenListeners,

packages/drawer/src/views/DrawerContent.tsx

@@ -9,8 +9,11 @@ export default function DrawerContent({
   state,
   ...rest
 }: DrawerContentComponentProps) {
-  const { drawerContentStyle, drawerContentContainerStyle } =
-    descriptors[state.routes[state.index].key].options;
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
+
+  const { drawerContentStyle, drawerContentContainerStyle } = focusedOptions;
 
   return (
     <DrawerContentScrollView

packages/drawer/src/views/DrawerContentScrollView.tsx

@@ -13,12 +13,10 @@ type Props = ScrollViewProps & {
   children: React.ReactNode;
 };
 
-export default function DrawerContentScrollView({
-  contentContainerStyle,
-  style,
-  children,
-  ...rest
-}: Props) {
+function DrawerContentScrollView(
+  { contentContainerStyle, style, children, ...rest }: Props,
+  ref?: React.Ref<ScrollView>
+) {
   const drawerPosition = React.useContext(DrawerPositionContext);
   const insets = useSafeAreaInsets();
 
@@ -29,6 +27,7 @@ export default function DrawerContentScrollView({
   return (
     <ScrollView
       {...rest}
+      ref={ref}
       contentContainerStyle={[
         {
           paddingTop: insets.top + 4,
@@ -44,6 +43,8 @@ export default function DrawerContentScrollView({
   );
 }
 
+export default React.forwardRef(DrawerContentScrollView);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/drawer/src/views/DrawerItemList.tsx

@@ -26,16 +26,23 @@ export default function DrawerItemList({
 }: Props) {
   const buildLink = useLinkBuilder();
 
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
+
+  const {
+    drawerActiveTintColor,
+    drawerInactiveTintColor,
+    drawerActiveBackgroundColor,
+    drawerInactiveBackgroundColor,
+  } = focusedOptions;
+
   return state.routes.map((route, i) => {
     const focused = i === state.index;
     const {
       title,
       drawerLabel,
       drawerIcon,
-      drawerActiveTintColor,
-      drawerInactiveTintColor,
-      drawerActiveBackgroundColor,
-      drawerInactiveBackgroundColor,
       drawerLabelStyle,
       drawerItemStyle,
     } = descriptors[route.key].options;
@@ -63,7 +70,7 @@ export default function DrawerItemList({
           navigation.dispatch({
             ...(focused
               ? DrawerActions.closeDrawer()
-              : CommonActions.navigate(route.name)),
+              : CommonActions.navigate({ name: route.name, merge: true })),
             target: state.key,
           });
         }}

packages/drawer/src/views/DrawerView.tsx

@@ -225,7 +225,7 @@ function DrawerViewBase({
           return (
             <MaybeScreen
               key={route.key}
-              style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
+              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
             >
@@ -234,6 +234,7 @@ function DrawerViewBase({
                 route={descriptor.route}
                 navigation={descriptor.navigation}
                 headerShown={descriptor.options.headerShown}
+                headerTransparent={descriptor.options.headerTransparent}
                 headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
                 header={header({
                   layout: dimensions,

packages/elements/CHANGELOG.md

@@ -3,6 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.4...@react-navigation/elements@1.1.0) (2021-08-17)
+
+
+### Features
+
+* **elements:** add style to SafeAreaProviderCompat props ([#9793](https://github.com/react-navigation/react-navigation/issues/9793)) ([f73aa55](https://github.com/react-navigation/react-navigation/commit/f73aa55fb2b7e7ca65d5f66269a43281f7ce0680))
+
+
+
+
+
+## [1.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.3...@react-navigation/elements@1.0.4) (2021-08-11)
+
+
+### Bug Fixes
+
+* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
+
+
+
+
+
+## [1.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.2...@react-navigation/elements@1.0.3) (2021-08-09)
+
+
+### Bug Fixes
+
+* avoid overflowing long titles ([bacdbbd](https://github.com/react-navigation/react-navigation/commit/bacdbbdd7c5df73b84aa1ed8c0329c9525d0fdba))
+* pass onlayout to headerTitle ([#9808](https://github.com/react-navigation/react-navigation/issues/9808)) ([a79ce57](https://github.com/react-navigation/react-navigation/commit/a79ce57aa7f9be3a47a09728e920c0d4a805f5aa))
+
+
+
+
+
+## [1.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.1...@react-navigation/elements@1.0.2) (2021-08-07)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
+## [1.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0...@react-navigation/elements@1.0.1) (2021-08-03)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
+# [1.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.21...@react-navigation/elements@1.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* match native iOS header height in stack ([51b636d](https://github.com/react-navigation/react-navigation/commit/51b636d7268fc05a8a9aca9e6aad0161674f238e))
+
+
+### Features
+
+* basic web implementation for native stack ([de84458](https://github.com/react-navigation/react-navigation/commit/de8445896021da4865089ba44e95afffbcee0919))
+* expose header height in native-stack ([#9774](https://github.com/react-navigation/react-navigation/issues/9774)) ([20abccd](https://github.com/react-navigation/react-navigation/commit/20abccda0d5074f61b2beb555b881a2087d27bb0))
+
+
+
+
+
+# [1.0.0-next.21](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.20...@react-navigation/elements@1.0.0-next.21) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
+# [1.0.0-next.20](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.19...@react-navigation/elements@1.0.0-next.20) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
+# [1.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.17...@react-navigation/elements@1.0.0-next.19) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/elements
+
+
+
+
+
 # [1.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.17...@react-navigation/elements@1.0.0-next.18) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/elements

packages/elements/README.md

@@ -2,4 +2,4 @@
 
 UI Components for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/elements/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/elements/).

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.0.0-next.18",
+  "version": "1.1.0",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "^0.2.4",
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/elements/src/Header/Header.tsx

@@ -12,6 +12,10 @@ import HeaderShownContext from './HeaderShownContext';
 import HeaderTitle from './HeaderTitle';
 
 type Props = HeaderOptions & {
+  /**
+   * Whether the header is in a modal
+   */
+  modal?: boolean;
   /**
    * Layout of the screen.
    */
@@ -28,7 +32,7 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
 
     if (styleProp === 'position' && value === 'absolute') {
       console.warn(
-        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' navigationOption."
+        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option."
       );
     } else if (value !== undefined) {
       console.warn(
@@ -46,6 +50,7 @@ export default function Header(props: Props) {
 
   const {
     layout = frame,
+    modal = false,
     title,
     headerTitle: customTitle,
     headerTitleAlign = Platform.select({
@@ -53,6 +58,7 @@ export default function Header(props: Props) {
       default: 'left',
     }),
     headerLeft,
+    headerLeftLabelVisible,
     headerTransparent,
     headerTintColor,
     headerBackground,
@@ -69,7 +75,11 @@ export default function Header(props: Props) {
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
   } = props;
 
-  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+  const defaultHeight = getDefaultHeaderHeight(
+    layout,
+    modal,
+    headerStatusBarHeight
+  );
 
   const {
     height = defaultHeight,
@@ -170,6 +180,7 @@ export default function Header(props: Props) {
         tintColor: headerTintColor,
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
+        labelVisible: headerLeftLabelVisible,
       })
     : null;
 
@@ -223,7 +234,28 @@ export default function Header(props: Props) {
           </Animated.View>
           <Animated.View
             pointerEvents="box-none"
-            style={[{ marginHorizontal: 16 }, titleContainerStyle]}
+            style={[
+              styles.title,
+              {
+                // Avoid the title from going offscreen or overlapping buttons
+                maxWidth:
+                  headerTitleAlign === 'center'
+                    ? layout.width -
+                      ((leftButton
+                        ? headerLeftLabelVisible !== false
+                          ? 80
+                          : 32
+                        : 16) +
+                        Math.max(insets.left, insets.right)) *
+                        2
+                    : layout.width -
+                      ((leftButton ? 72 : 16) +
+                        (rightButton ? 72 : 16) +
+                        insets.left -
+                        insets.right),
+              },
+              titleContainerStyle,
+            ]}
           >
             {headerTitle({
               children: title,
@@ -253,7 +285,10 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'stretch',
+  },
+  title: {
+    marginHorizontal: 16,
     justifyContent: 'center',
   },
   left: {

packages/elements/src/Header/HeaderBackButton.tsx

@@ -20,7 +20,7 @@ export default function HeaderBackButton({
   backImage,
   label,
   labelStyle,
-  labelVisible = Platform.OS === 'ios',
+  labelVisible,
   onLabelLayout,
   onPress,
   pressColor,
@@ -171,6 +171,7 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     flexDirection: 'row',
+    minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
     ...Platform.select({
       ios: null,
       default: {

packages/elements/src/Header/getDefaultHeaderHeight.tsx

@@ -4,17 +4,30 @@ import type { Layout } from '../types';
 
 export default function getDefaultHeaderHeight(
   layout: Layout,
+  modalPresentation: boolean,
   statusBarHeight: number
 ): number {
-  const isLandscape = layout.width > layout.height;
-
   let headerHeight;
 
+  const isLandscape = layout.width > layout.height;
+
   if (Platform.OS === 'ios') {
-    if (isLandscape && !Platform.isPad) {
-      headerHeight = 32;
+    if (Platform.isPad) {
+      if (modalPresentation) {
+        headerHeight = 56;
+      } else {
+        headerHeight = 50;
+      }
     } else {
-      headerHeight = 44;
+      if (isLandscape) {
+        headerHeight = 32;
+      } else {
+        if (modalPresentation) {
+          headerHeight = 56;
+        } else {
+          headerHeight = 44;
+        }
+      }
     }
   } else if (Platform.OS === 'android') {
     headerHeight = 56;

packages/elements/src/Header/getHeaderTitle.tsx

@@ -1,7 +1,7 @@
 import type { HeaderOptions } from '../types';
 
 export default function getHeaderTitle(
-  options: HeaderOptions & { title?: string },
+  options: { title?: string; headerTitle?: HeaderOptions['headerTitle'] },
   fallback: string
 ): string {
   return typeof options.headerTitle === 'string'

packages/elements/src/SafeAreaProviderCompat.tsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { Dimensions, Platform } from 'react-native';
+import {
+  Dimensions,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 import {
   initialWindowMetrics,
   SafeAreaInsetsContext,
@@ -8,6 +15,7 @@ import {
 
 type Props = {
   children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
 };
 
 const { width = 0, height = 0 } = Dimensions.get('window');
@@ -23,7 +31,7 @@ const initialMetrics =
       }
     : initialWindowMetrics;
 
-export default function SafeAreaProviderCompat({ children }: Props) {
+export default function SafeAreaProviderCompat({ children, style }: Props) {
   return (
     <SafeAreaInsetsContext.Consumer>
       {(insets) => {
@@ -31,11 +39,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
           // If we already have insets, don't wrap the stack in another safe area provider
           // This avoids an issue with updates at the cost of potentially incorrect values
           // https://github.com/react-navigation/react-navigation/issues/174
-          return children;
+          return <View style={[styles.container, style]}>{children}</View>;
         }
 
         return (
-          <SafeAreaProvider initialMetrics={initialMetrics}>
+          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
             {children}
           </SafeAreaProvider>
         );
@@ -45,3 +53,9 @@ export default function SafeAreaProviderCompat({ children }: Props) {
 }
 
 SafeAreaProviderCompat.initialMetrics = initialMetrics;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

packages/elements/src/Screen.tsx

@@ -19,11 +19,13 @@ import HeaderShownContext from './Header/HeaderShownContext';
 
 type Props = {
   focused: boolean;
+  modal?: boolean;
   navigation: NavigationProp<ParamListBase>;
   route: RouteProp<ParamListBase>;
   header: React.ReactNode;
   headerShown?: boolean;
   headerStatusBarHeight?: number;
+  headerTransparent?: boolean;
   style?: StyleProp<ViewStyle>;
   children: React.ReactNode;
 };
@@ -37,8 +39,10 @@ export default function Screen(props: Props) {
 
   const {
     focused,
+    modal = false,
     header,
     headerShown = true,
+    headerTransparent,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     navigation,
     route,
@@ -47,7 +51,7 @@ export default function Screen(props: Props) {
   } = props;
 
   const [headerHeight, setHeaderHeight] = React.useState(() =>
-    getDefaultHeaderHeight(dimensions, headerStatusBarHeight)
+    getDefaultHeaderHeight(dimensions, modal, headerStatusBarHeight)
   );
 
   return (
@@ -61,7 +65,7 @@ export default function Screen(props: Props) {
           value={isParentHeaderShown || headerShown !== false}
         >
           <HeaderHeightContext.Provider
-            value={headerShown ? headerHeight : parentHeaderHeight}
+            value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
           >
             {children}
           </HeaderHeightContext.Provider>
@@ -76,6 +80,7 @@ export default function Screen(props: Props) {
 
                 setHeaderHeight(height);
               }}
+              style={headerTransparent ? styles.absolute : null}
             >
               {header}
             </View>
@@ -95,4 +100,10 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
 });

packages/elements/src/types.tsx

@@ -16,26 +16,7 @@ export type HeaderOptions = {
    * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.
    */
-  headerTitle?:
-    | string
-    | ((props: {
-        /**
-         * The title text of the header.
-         */
-        children: string;
-        /**
-         * Whether title font should scale to respect Text Size accessibility settings.
-         */
-        allowFontScaling?: boolean;
-        /**
-         * Tint color for the header.
-         */
-        tintColor?: string;
-        /**
-         * Style object for the title element.
-         */
-        style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-      }) => React.ReactNode);
+  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
   /**
    * How to align the the header title.
    * Defaults to `center` on iOS and `left` on Android.
@@ -60,7 +41,12 @@ export type HeaderOptions = {
     tintColor?: string;
     pressColor?: string;
     pressOpacity?: number;
+    labelVisible?: boolean;
   }) => React.ReactNode;
+  /**
+   * Whether a label is visible in the left button. Used to add extra padding.
+   */
+  headerLeftLabelVisible?: boolean;
   /**
    * Style object for the container of the `headerLeft` element`.
    */
@@ -121,6 +107,29 @@ export type HeaderOptions = {
   headerStatusBarHeight?: number;
 };
 
+export type HeaderTitleProps = {
+  /**
+   * The title text of the header.
+   */
+  children: string;
+  /**
+   * Whether title font should scale to respect Text Size accessibility settings.
+   */
+  allowFontScaling?: boolean;
+  /**
+   * Tint color for the header.
+   */
+  tintColor?: string;
+  /**
+   * Callback to trigger when the size of the title element changes.
+   */
+  onLayout?: (e: LayoutChangeEvent) => void;
+  /**
+   * Style object for the title element.
+   */
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
 export type HeaderBackButtonProps = {
   /**
    * Whether the button is disabled.

packages/flipper-plugin-react-navigation/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.
 
+## [1.3.4](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.3.3...flipper-plugin-react-navigation@1.3.4) (2021-08-03)
+
+**Note:** Version bump only for package flipper-plugin-react-navigation
+
+
+
+
+
+## [1.3.3](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.3.2...flipper-plugin-react-navigation@1.3.3) (2021-08-01)
+
+**Note:** Version bump only for package flipper-plugin-react-navigation
+
+
+
+
+
+## [1.3.2](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.3.1...flipper-plugin-react-navigation@1.3.2) (2021-07-16)
+
+**Note:** Version bump only for package flipper-plugin-react-navigation
+
+
+
+
+
+## [1.3.1](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.3.0...flipper-plugin-react-navigation@1.3.1) (2021-07-16)
+
+**Note:** Version bump only for package flipper-plugin-react-navigation
+
+
+
+
+
+# [1.3.0](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.1.4...flipper-plugin-react-navigation@1.3.0) (2021-07-01)
+
+
+### Features
+
+* show stack trace in the flipper plugin ([97772af](https://github.com/react-navigation/react-navigation/commit/97772affa3c8f26489f0bdbfb6872ef4377b8ed1))
+
+
+
+
+
 # [1.2.0](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.1.4...flipper-plugin-react-navigation@1.2.0) (2021-06-10)
 
 

packages/flipper-plugin-react-navigation/README.md

@@ -2,4 +2,17 @@
 
 Flipper plugin with developer tools for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/devtools).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/devtools).
+
+
+## Development
+
+Edit `~/.flipper/config.json` (while flipper is not opened)
+
+```json
+{
+  "pluginPaths": ["/path/to/react-navigation/packages"]
+}
+```
+
+and run `yarn watch` in `flipper-plugin-react-navigation`

packages/flipper-plugin-react-navigation/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
   "name": "flipper-plugin-react-navigation",
   "description": "Developer tools for React Navigation",
-  "version": "1.2.0",
+  "version": "1.3.4",
   "main": "dist/bundle.js",
   "license": "MIT",
   "keywords": [
@@ -34,13 +34,13 @@
     "@ant-design/icons": "^4.6.2",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@react-navigation/core": "^6.0.0-next.14",
+    "@react-navigation/core": "^6.0.1",
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
     "antd": "^4.16.1",
-    "flipper": "^0.92.0",
-    "flipper-pkg": "^0.92.0",
-    "flipper-plugin": "^0.92.0",
+    "flipper": "^0.112.0",
+    "flipper-pkg": "^0.112.0",
+    "flipper-plugin": "^0.112.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

packages/flipper-plugin-react-navigation/src/Logs.tsx

@@ -1,6 +1,5 @@
 import { CompassOutlined } from '@ant-design/icons';
-import { DetailSidebar, styled, VirtualList } from 'flipper';
-import { theme } from 'flipper-plugin';
+import { DataList, DetailSidebar, styled, theme } from 'flipper-plugin';
 import * as React from 'react';
 
 import { Sidebar } from './Sidebar';
@@ -19,10 +18,10 @@ export function Logs({ active, logs, index, resetTo }: Props) {
 
   return logs.length ? (
     <>
-      <VirtualList
-        data={logs}
-        rowHeight={51}
-        renderRow={({ id, action }, i) => (
+      <DataList
+        style={{ height: '100%' }}
+        items={logs}
+        onRenderItem={({ id, action }, _, i) => (
           <Row
             key={id}
             selected={selectedItem?.id === id}

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.4...@react-navigation/material-bottom-tabs@6.0.5) (2021-08-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.3...@react-navigation/material-bottom-tabs@6.0.4) (2021-08-11)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.2...@react-navigation/material-bottom-tabs@6.0.3) (2021-08-09)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.1...@react-navigation/material-bottom-tabs@6.0.2) (2021-08-07)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0...@react-navigation/material-bottom-tabs@6.0.1) (2021-08-03)
+
+
+### Bug Fixes
+
+* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.18...@react-navigation/material-bottom-tabs@6.0.0) (2021-08-01)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.17...@react-navigation/material-bottom-tabs@6.0.0-next.18) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.16...@react-navigation/material-bottom-tabs@6.0.0-next.17) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.14...@react-navigation/material-bottom-tabs@6.0.0-next.16) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.14...@react-navigation/material-bottom-tabs@6.0.0-next.15) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/README.md

@@ -2,4 +2,4 @@
 
 React Navigation integration for [bottom navigation](https://material.io/components/bottom-navigation) component from [`react-native-paper`](https://callstack.github.io/react-native-paper/bottom-navigation.html).
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/material-bottom-tab-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/material-bottom-tab-navigator/).

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": "6.0.0-next.15",
+  "version": "6.0.5",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,10 +41,10 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18"
+    "@react-navigation/elements": "^1.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

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

@@ -1,9 +1,9 @@
 import { SafeAreaProviderCompat } from '@react-navigation/elements';
 import {
+  CommonActions,
   Link,
   ParamListBase,
   Route,
-  TabActions,
   TabNavigationState,
   useLinkBuilder,
   useTheme,
@@ -106,7 +106,10 @@ function MaterialBottomTabViewInner({
       navigationState={state}
       onIndexChange={(index: number) =>
         navigation.dispatch({
-          ...TabActions.jumpTo(state.routes[index].name),
+          ...CommonActions.navigate({
+            name: state.routes[index].name,
+            merge: true,
+          }),
           target: state.key,
         })
       }

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.1...@react-navigation/material-top-tabs@6.0.2) (2021-08-07)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0...@react-navigation/material-top-tabs@6.0.1) (2021-08-03)
+
+
+### Bug Fixes
+
+* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.18...@react-navigation/material-top-tabs@6.0.0) (2021-08-01)
+
+
+### Features
+
+* add tabBarBadge and tabBarIndicator options for material top tabs ([fdb3ede](https://github.com/react-navigation/react-navigation/commit/fdb3ede3e0eb1e43c4be30c810663880e2f5467c))
+* move some props to screenOptions in material top tabs ([5bfc396](https://github.com/react-navigation/react-navigation/commit/5bfc39668bb5dce8bd872e5ff87f4b3fd683cf62))
+
+
+
+
+
+# [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.17...@react-navigation/material-top-tabs@6.0.0-next.18) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.16...@react-navigation/material-top-tabs@6.0.0-next.17) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.14...@react-navigation/material-top-tabs@6.0.0-next.16) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 # [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.14...@react-navigation/material-top-tabs@6.0.0-next.15) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/README.md

@@ -2,4 +2,4 @@
 
 React Navigation integration for animated tab view component from [`react-native-tab-view`](https://github.com/satya164/react-native-tab-view).
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/material-top-tab-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/material-top-tab-navigator/).

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": "6.0.0-next.15",
+  "version": "6.0.2",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",
@@ -54,7 +54,7 @@
     "react-native": "~0.63.4",
     "react-native-builder-bob": "^0.18.1",
     "react-native-pager-view": "^5.1.10",
-    "react-native-tab-view": "^3.0.1",
+    "react-native-tab-view": "^3.1.1",
     "typescript": "^4.3.2"
   },
   "peerDependencies": {

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -33,7 +33,15 @@ function MaterialTopTabNavigator({
   children,
   screenListeners,
   screenOptions,
+  // @ts-expect-error: swipeEnabled is deprecated
+  swipeEnabled,
+  // @ts-expect-error: lazy is deprecated
   lazy,
+  // @ts-expect-error: lazyPlaceholder is deprecated
+  lazyPlaceholder,
+  // @ts-expect-error: lazyPreloadDistance is deprecated
+  lazyPreloadDistance,
+  // @ts-expect-error: tabBarOptions is deprecated
   tabBarOptions,
   ...rest
 }: Props) {
@@ -53,30 +61,53 @@ function MaterialTopTabNavigator({
       tabBarIconStyle: tabBarOptions.iconStyle,
       tabBarLabelStyle: tabBarOptions.labelStyle,
       tabBarItemStyle: tabBarOptions.tabStyle,
+      tabBarBadge: tabBarOptions.renderBadge,
+      tabBarIndicator: tabBarOptions.renderIndicator,
       tabBarIndicatorStyle: tabBarOptions.indicatorStyle,
       tabBarIndicatorContainerStyle: tabBarOptions.indicatorContainerStyle,
       tabBarContentContainerStyle: tabBarOptions.contentContainerStyle,
       tabBarStyle: tabBarOptions.style,
     });
 
+    (
+      Object.keys(
+        defaultScreenOptions
+      ) as (keyof MaterialTopTabNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
+    });
+
     warnOnce(
       tabBarOptions,
       `Material Top Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep current behavior:\n\n${JSON.stringify(
         defaultScreenOptions,
         null,
         2
-      )}\n\nSee https://reactnavigation.org/docs/6.x/material-top-tab-navigator#options for more details.`
+      )}\n\nSee https://reactnavigation.org/docs/material-top-tab-navigator#options for more details.`
     );
   }
 
-  if (typeof lazy === 'boolean') {
-    defaultScreenOptions.lazy = lazy;
+  const deprecatedProps = {
+    swipeEnabled,
+    lazy,
+    lazyPlaceholder,
+    lazyPreloadDistance,
+  } as const;
 
-    warnOnce(
-      true,
-      `Material Top Tab Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.`
-    );
-  }
+  Object.entries(deprecatedProps).forEach(([propName, propValue]) => {
+    if (propValue !== undefined) {
+      // @ts-expect-error: Object.entries doesn't return strict types
+      defaultScreenOptions[propName] = propValue;
+
+      warnOnce(
+        true,
+        `Material Top Tab Navigator: '${propName}' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/material-top-tab-navigator#${propName.toLowerCase()} for more details.`
+      );
+    }
+  });
 
   const { state, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
@@ -91,6 +122,7 @@ function MaterialTopTabNavigator({
       children,
       screenListeners,
       screenOptions,
+      defaultScreenOptions,
     });
 
   return (

packages/material-top-tabs/src/types.tsx

@@ -8,8 +8,13 @@ import type {
   TabActionHelpers,
   TabNavigationState,
 } from '@react-navigation/native';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { SceneRendererProps, TabViewProps } from 'react-native-tab-view';
+import type {
+  SceneRendererProps,
+  TabBar,
+  TabViewProps,
+} from 'react-native-tab-view';
 
 export type MaterialTopTabNavigationEventMap = {
   /**
@@ -62,21 +67,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   title?: string;
 
-  /**
-   * Whether this screens should render the first time it's accessed. Defaults to `false`.
-   */
-  lazy?: boolean;
-
-  /**
-   * Function that returns a React element to render if this screen hasn't been rendered yet.
-   * The `lazy` option also needs to be enabled for this to work.
-   *
-   * This view is usually only shown for a split second. Keep it lightweight.
-   *
-   * By default, this renders null.
-   */
-  lazyPlaceholder?: () => React.ReactNode;
-
   /**
    * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
@@ -87,16 +77,56 @@ export type MaterialTopTabNavigationOptions = {
     | string
     | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
+  /**
+   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   * It's recommended to set this if you don't have a label for the tab.
+   */
+  tabBarAccessibilityLabel?: string;
+
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  tabBarAllowFontScaling?: boolean;
+
+  /**
+   * Whether the tab label should be visible. Defaults to `true`.
+   */
+  tabBarShowLabel?: boolean;
+
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
   tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
 
   /**
-   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
-   * It's recommended to set this if you don't have a label for the tab.
+   * Whether the tab icon should be visible. Defaults to `false`.
    */
-  tabBarAccessibilityLabel?: string;
+  tabBarShowIcon?: boolean;
+
+  /**
+   * Function that returns a React element to use as a badge for the tab.
+   */
+  tabBarBadge?: () => React.ReactNode;
+
+  /**
+   * Function that returns a React element as the tab bar indicator.
+   */
+  tabBarIndicator?: (
+    props: Omit<
+      Parameters<React.ComponentProps<typeof TabBar>['renderIndicator']>[0],
+      'navigationState'
+    > & { state: TabNavigationState<ParamListBase> }
+  ) => React.ReactNode;
+
+  /**
+   * Style object for the tab bar indicator.
+   */
+  tabBarIndicatorStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the view containing the tab bar indicator.
+   */
+  tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
 
   /**
    * ID to locate this tab button in tests.
@@ -123,21 +153,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarPressOpacity?: number;
 
-  /**
-   * Whether the tab label should be visible. Defaults to `true`.
-   */
-  tabBarShowLabel?: boolean;
-
-  /**
-   * Whether the tab icon should be visible. Defaults to `false`.
-   */
-  tabBarShowIcon?: boolean;
-
-  /**
-   * Whether label font should scale to respect Text Size accessibility settings.
-   */
-  tabBarAllowFontScaling?: boolean;
-
   /**
    * Boolean indicating whether the tab bar bounces when overscrolling.
    */
@@ -165,16 +180,6 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarItemStyle?: StyleProp<ViewStyle>;
 
-  /**
-   * Style object for the tab bar indicator.
-   */
-  tabBarIndicatorStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style object for the view containing the tab bar indicator.
-   */
-  tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
-
   /**
    * Style object for the view containing the tab items.
    */
@@ -184,6 +189,42 @@ export type MaterialTopTabNavigationOptions = {
    * Style object for the the tab bar.
    */
   tabBarStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether to enable swipe gestures when this screen is focused.
+   * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
+   * but the user can still switch tabs by pressing the tab bar.
+   */
+  swipeEnabled?: boolean;
+
+  /**
+   * Whether this screen should be lazily rendered. When this is set to `true`,
+   * the screen will be rendered as it comes into the viewport.
+   * By default all screens are rendered to provide a smoother swipe experience.
+   * But you might want to defer the rendering of screens out of the viewport until the user sees them.
+   * To enable lazy rendering for this screen, set `lazy` to `true`.
+   *
+   * When you enable `lazy`, the lazy loaded screens will usually take some time to render
+   * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
+   * what the user sees during this short period.
+   */
+  lazy?: boolean;
+
+  /**
+   * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.
+   * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
+   */
+  lazyPreloadDistance?: number;
+
+  /**
+   * Function that returns a React element to render if this screen hasn't been rendered yet.
+   * The `lazy` option also needs to be enabled for this to work.
+   *
+   * This view is usually only shown for a split second. Keep it lightweight.
+   *
+   * By default, this renders `null`.
+   */
+  lazyPlaceholder?: () => React.ReactNode;
 };
 
 export type MaterialTopTabDescriptor = Descriptor<
@@ -206,7 +247,10 @@ export type MaterialTopTabNavigationConfig = Omit<
   | 'renderScene'
   | 'renderTabBar'
   | 'renderLazyPlaceholder'
+  | 'swipeEnabled'
   | 'lazy'
+  | 'lazyPreloadDistance'
+  | 'lazyPlaceholder'
 > & {
   /**
    * Function that returns a React element to display as the tab bar.

packages/material-top-tabs/src/views/MaterialTopTabBar.tsx

@@ -1,8 +1,13 @@
-import { Route, useTheme } from '@react-navigation/native';
+import {
+  ParamListBase,
+  Route,
+  TabNavigationState,
+  useTheme,
+} from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { TabBar } from 'react-native-tab-view';
+import { TabBar, TabBarIndicator } from 'react-native-tab-view';
 
 import type { MaterialTopTabBarProps } from '../types';
 
@@ -104,6 +109,21 @@ export default function TabBarTop({
 
         return label({ focused, color });
       }}
+      renderBadge={({ route }) => {
+        const { tabBarBadge } = descriptors[route.key].options;
+
+        return tabBarBadge?.() ?? null;
+      }}
+      renderIndicator={({ navigationState: state, ...rest }) => {
+        return focusedOptions.tabBarIndicator ? (
+          focusedOptions.tabBarIndicator({
+            state: state as TabNavigationState<ParamListBase>,
+            ...rest,
+          })
+        ) : (
+          <TabBarIndicator navigationState={state} {...rest} />
+        );
+      }}
     />
   );
 }

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -1,7 +1,7 @@
 import {
+  CommonActions,
   ParamListBase,
   Route,
-  TabActions,
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
@@ -41,12 +41,17 @@ export default function MaterialTopTabView({
     });
   };
 
+  const focusedOptions = descriptors[state.routes[state.index].key].options;
+
   return (
     <TabView<Route<string>>
       {...rest}
       onIndexChange={(index) =>
         navigation.dispatch({
-          ...TabActions.jumpTo(state.routes[index].name),
+          ...CommonActions.navigate({
+            name: state.routes[index].name,
+            merge: true,
+          }),
           target: state.key,
         })
       }
@@ -57,6 +62,8 @@ export default function MaterialTopTabView({
         descriptors[route.key].options.lazyPlaceholder?.() ?? null
       }
       lazy={({ route }) => descriptors[route.key].options.lazy === true}
+      lazyPreloadDistance={focusedOptions.lazyPreloadDistance}
+      swipeEnabled={focusedOptions.swipeEnabled}
       onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
       onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
       sceneContainerStyle={[

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.6...@react-navigation/native-stack@6.1.0) (2021-08-18)
+
+
+### Bug Fixes
+
+* content container in native web stack should fill parent ([#9832](https://github.com/react-navigation/react-navigation/issues/9832)) ([ec0d113](https://github.com/react-navigation/react-navigation/commit/ec0d113eb25c39ef9defb6c7215640f44e3569ae))
+
+
+### Features
+
+* add headerTitleAlign prop in native stack. closes [#9829](https://github.com/react-navigation/react-navigation/issues/9829) ([fe692c2](https://github.com/react-navigation/react-navigation/commit/fe692c2f564f4fc72c18c19b8e5830ab69bcd58c))
+
+
+
+
+
+## [6.0.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.5...@react-navigation/native-stack@6.0.6) (2021-08-17)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.4...@react-navigation/native-stack@6.0.5) (2021-08-11)
+
+
+### Bug Fixes
+
+* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
+
+
+
+
+
+## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.3...@react-navigation/native-stack@6.0.4) (2021-08-09)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.2...@react-navigation/native-stack@6.0.3) (2021-08-07)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.1...@react-navigation/native-stack@6.0.2) (2021-08-05)
+
+
+### Bug Fixes
+
+* fix incorrect name for headerTransparent ([1da575e](https://github.com/react-navigation/react-navigation/commit/1da575e0e74c9510d6a57d473500cf84668c3824))
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0...@react-navigation/native-stack@6.0.1) (2021-08-03)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.11...@react-navigation/native-stack@6.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* show error when beforeRemove is used to prevent action in naive stack ([6d518a4](https://github.com/react-navigation/react-navigation/commit/6d518a46b89496f4a3bfd2da24245fe344f97290))
+
+
+### Features
+
+* add custom header option to native-stack ([1a39632](https://github.com/react-navigation/react-navigation/commit/1a3963265648e6f0672a2f49f3d647f9acfa6597))
+* basic web implementation for native stack ([de84458](https://github.com/react-navigation/react-navigation/commit/de8445896021da4865089ba44e95afffbcee0919))
+* expose header height in native-stack ([#9774](https://github.com/react-navigation/react-navigation/issues/9774)) ([20abccd](https://github.com/react-navigation/react-navigation/commit/20abccda0d5074f61b2beb555b881a2087d27bb0))
+
+
+
+
+
+# [6.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.10...@react-navigation/native-stack@6.0.0-next.11) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.9...@react-navigation/native-stack@6.0.0-next.10) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.7...@react-navigation/native-stack@6.0.0-next.9) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 # [6.0.0-next.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.7...@react-navigation/native-stack@6.0.0-next.8) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "6.0.0-next.8",
+  "version": "6.1.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,11 +41,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.1.0",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/native-stack/src/types.tsx

@@ -4,12 +4,18 @@ import type {
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
+  Route,
   RouteProp,
   StackActionHelpers,
   StackNavigationState,
   StackRouterOptions,
 } from '@react-navigation/native';
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type {
+  ImageSourcePropType,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type {
   ScreenProps,
   ScreenStackHeaderConfigProps,
@@ -55,16 +61,48 @@ export type NativeStackNavigationHelpers = NavigationHelpers<
 // We want it to be an empty object because navigator does not have any additional props
 export type NativeStackNavigationConfig = {};
 
+export type NativeStackHeaderProps = {
+  /**
+   * Options for the back button.
+   */
+  back?: {
+    /**
+     * Title of the previous screen.
+     */
+    title: string;
+  };
+  /**
+   * Options for the current screen.
+   */
+  options: NativeStackNavigationOptions;
+  /**
+   * Route object for the current screen.
+   */
+  route: Route<string>;
+  /**
+   * Navigation prop for the header.
+   */
+  navigation: NativeStackNavigationProp<ParamListBase>;
+};
+
 export type NativeStackNavigationOptions = {
   /**
    * String that can be displayed in the header as a fallback for `headerTitle`.
    */
   title?: string;
+  /**
+   * Function that given `HeaderProps` returns a React Element to display as a header.
+   */
+  header?: (props: NativeStackHeaderProps) => React.ReactNode;
   /**
    * Whether the back button is visible in the header.
    * You can use it to show a back button alongside `headerLeft` if you have specified it.
    *
    * This will have no effect on the first screen in the stack.
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
    */
   headerBackVisible?: boolean;
   /**
@@ -133,6 +171,10 @@ export type NativeStackNavigationOptions = {
   headerLargeTitle?: boolean;
   /**
    * Whether drop shadow of header is visible when a large title is shown.
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
    */
   headerLargeTitleShadowVisible?: boolean;
   /**
@@ -173,9 +215,10 @@ export type NativeStackNavigationOptions = {
    * Setting this to `true` makes the header absolutely positioned,
    * and changes the background color to `transparent` unless specified in `headerStyle`.
    */
-  headerTranslucent?: boolean;
+  headerTransparent?: boolean;
   /**
    * Blur effect for the translucent header.
+   * The `headerTransparent` option needs to be set to `true` for this to work.
    *
    * Only supported on iOS.
    *
@@ -216,6 +259,13 @@ export type NativeStackNavigationOptions = {
          */
         tintColor?: string;
       }) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `left` on platforms other than iOS.
+   *
+   * Not supported on iOS. It's always `center` on iOS and cannot be changed.
+   */
+  headerTitleAlign?: 'left' | 'center';
   /**
    * Style object for header title. Supported properties:
    * - fontFamily
@@ -223,12 +273,11 @@ export type NativeStackNavigationOptions = {
    * - fontWeight
    * - color
    */
-  headerTitleStyle?: StyleProp<{
-    fontFamily?: string;
-    fontSize?: number;
-    fontWeight?: string;
-    color?: string;
-  }>;
+  headerTitleStyle?: StyleProp<
+    Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight'> & {
+      color?: string;
+    }
+  >;
   /**
    * Options to render a native search bar on iOS.
    *
@@ -279,6 +328,8 @@ export type NativeStackNavigationOptions = {
    * Supported values:
    * - "push": the new screen will perform push animation.
    * - "pop": the new screen will perform pop animation.
+   *
+   * Only supported on iOS and Android.
    */
   animationTypeForReplace?: ScreenProps['replaceAnimation'];
   /**
@@ -291,6 +342,8 @@ export type NativeStackNavigationOptions = {
    * - "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS)
    * - "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
    * - "none": don't animate the screen
+   *
+   * Only supported on iOS and Android.
    */
   animation?: ScreenProps['stackAnimation'];
   /**
@@ -304,6 +357,8 @@ export type NativeStackNavigationOptions = {
    * - "containedTransparentModal": will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
    * - "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
    * - "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
+   *
+   * Only supported on iOS and Android.
    */
   presentation?: Exclude<ScreenProps['stackPresentation'], 'push'> | 'card';
   /**
@@ -318,6 +373,8 @@ export type NativeStackNavigationOptions = {
    * - "landscape": landscape orientations are permitted.
    * - "landscape_left": landscape-left orientation is permitted.
    * - "landscape_right": landscape-right orientation is permitted.
+   *
+   * Only supported on iOS and Android.
    */
   orientation?: ScreenProps['screenOrientation'];
 };

packages/native-stack/src/views/HeaderConfig.tsx

@@ -38,8 +38,9 @@ export default function HeaderConfig({
   headerBlurEffect,
   headerTintColor,
   headerTitle,
+  headerTitleAlign,
   headerTitleStyle,
-  headerTranslucent,
+  headerTransparent,
   route,
   headerSearchBarOptions,
   title,
@@ -69,6 +70,8 @@ export default function HeaderConfig({
     ]);
 
   const titleText = title !== undefined ? title : route.name;
+  const titleColor =
+    headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
 
   const headerLeftElement = headerLeft?.({ tintColor });
   const headerRightElement = headerRight?.({ tintColor });
@@ -101,7 +104,7 @@ export default function HeaderConfig({
       backButtonInCustomView={backButtonInCustomView}
       backgroundColor={
         headerStyleFlattened.backgroundColor ??
-        (headerTranslucent ? 'transparent' : colors.card)
+        (headerTransparent ? 'transparent' : colors.card)
       }
       backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
       backTitleFontFamily={backTitleFontFamily}
@@ -120,16 +123,14 @@ export default function HeaderConfig({
       largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
       largeTitleHideShadow={headerLargeTitleShadowVisible === false}
       title={typeof headerTitle === 'string' ? headerTitle : titleText}
-      titleColor={
-        headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text
-      }
+      titleColor={titleColor}
       titleFontFamily={titleFontFamily}
       titleFontSize={headerTitleStyleFlattened.fontSize}
       titleFontWeight={headerTitleStyleFlattened.fontWeight}
       topInsetEnabled={insets.top !== 0}
       translucent={
         // This defaults to `true`, so we can't pass `undefined`
-        headerTranslucent === true
+        headerTransparent === true
       }
     >
       {Platform.OS === 'ios' ? (
@@ -151,21 +152,33 @@ export default function HeaderConfig({
             <ScreenStackHeaderLeftView>
               <View style={styles.row}>
                 {headerLeftElement}
-                {typeof headerTitle === 'function' ? (
-                  headerTitleElement
-                ) : (
-                  <HeaderTitle tintColor={tintColor}>{titleText}</HeaderTitle>
-                )}
+                {headerTitleAlign !== 'center' ? (
+                  typeof headerTitle === 'function' ? (
+                    headerTitleElement
+                  ) : (
+                    <HeaderTitle tintColor={tintColor} style={headerTitleStyle}>
+                      {titleText}
+                    </HeaderTitle>
+                  )
+                ) : null}
               </View>
             </ScreenStackHeaderLeftView>
           ) : null}
+          {headerTitleAlign === 'center' ? (
+            <ScreenStackHeaderCenterView>
+              {typeof headerTitle === 'function' ? (
+                headerTitleElement
+              ) : (
+                <HeaderTitle tintColor={tintColor} style={headerTitleStyle}>
+                  {titleText}
+                </HeaderTitle>
+              )}
+            </ScreenStackHeaderCenterView>
+          ) : null}
         </>
       )}
       {headerBackImageSource !== undefined ? (
-        <ScreenStackHeaderBackButtonImage
-          key="backImage"
-          source={headerBackImageSource}
-        />
+        <ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
       ) : null}
       {headerRightElement != null ? (
         <ScreenStackHeaderRightView>

packages/native-stack/src/views/NativeStackView.native.tsx

@@ -0,0 +1,330 @@
+import {
+  getDefaultHeaderHeight,
+  getHeaderTitle,
+  HeaderHeightContext,
+  HeaderShownContext,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements';
+import {
+  ParamListBase,
+  Route,
+  StackActions,
+  StackNavigationState,
+  useTheme,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { Platform, PlatformIOSStatic, StyleSheet } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import {
+  Screen,
+  ScreenStack,
+  StackPresentationTypes,
+} from 'react-native-screens';
+import warnOnce from 'warn-once';
+
+import type {
+  NativeStackDescriptor,
+  NativeStackDescriptorMap,
+  NativeStackNavigationHelpers,
+  NativeStackNavigationOptions,
+} from '../types';
+import DebugContainer from './DebugContainer';
+import HeaderConfig from './HeaderConfig';
+
+const isAndroid = Platform.OS === 'android';
+
+const MaybeNestedStack = ({
+  options,
+  route,
+  presentation,
+  children,
+}: {
+  options: NativeStackNavigationOptions;
+  route: Route<string>;
+  presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
+  children: React.ReactNode;
+}) => {
+  const { colors } = useTheme();
+  const { header, headerShown = true, contentStyle } = options;
+
+  const isHeaderInModal = isAndroid
+    ? false
+    : presentation !== 'card' && headerShown === true && header === undefined;
+
+  const headerShownPreviousRef = React.useRef(headerShown);
+
+  React.useEffect(() => {
+    warnOnce(
+      !isAndroid &&
+        presentation !== 'card' &&
+        headerShownPreviousRef.current !== headerShown,
+      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`
+    );
+
+    headerShownPreviousRef.current = headerShown;
+  }, [headerShown, presentation, route.name]);
+
+  const content = (
+    <DebugContainer
+      style={[
+        styles.container,
+        presentation !== 'transparentModal' &&
+          presentation !== 'containedTransparentModal' && {
+            backgroundColor: colors.background,
+          },
+        contentStyle,
+      ]}
+      stackPresentation={presentation === 'card' ? 'push' : presentation}
+    >
+      {children}
+    </DebugContainer>
+  );
+
+  const insets = useSafeAreaInsets();
+  const dimensions = useSafeAreaFrame();
+  // landscape is meaningful only for iPhone
+  const isLandscape =
+    dimensions.width > dimensions.height &&
+    !(Platform as PlatformIOSStatic).isPad &&
+    !(Platform as PlatformIOSStatic).isTVOS;
+  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const isFullScreenModal =
+    presentation !== 'modal' && presentation !== 'formSheet';
+  const topInset = isFullScreenModal && !isLandscape ? insets.top : 0;
+  const headerHeight = getDefaultHeaderHeight(
+    dimensions,
+    !isFullScreenModal,
+    topInset
+  );
+
+  if (isHeaderInModal) {
+    return (
+      <ScreenStack style={styles.container}>
+        <Screen enabled style={StyleSheet.absoluteFill}>
+          <HeaderShownContext.Provider value>
+            <HeaderHeightContext.Provider value={headerHeight}>
+              <HeaderConfig {...options} route={route} />
+              {content}
+            </HeaderHeightContext.Provider>
+          </HeaderShownContext.Provider>
+        </Screen>
+      </ScreenStack>
+    );
+  }
+
+  return content;
+};
+
+type SceneViewProps = {
+  index: number;
+  descriptor: NativeStackDescriptor;
+  previousDescriptor?: NativeStackDescriptor;
+  onWillDisappear: () => void;
+  onAppear: () => void;
+  onDisappear: () => void;
+  onDismissed: () => void;
+};
+
+const SceneView = ({
+  descriptor,
+  previousDescriptor,
+  index,
+  onWillDisappear,
+  onAppear,
+  onDisappear,
+  onDismissed,
+}: SceneViewProps) => {
+  const { route, navigation, options, render } = descriptor;
+  const {
+    gestureEnabled,
+    header,
+    headerShown,
+    animationTypeForReplace = 'pop',
+    animation,
+    orientation,
+    statusBarAnimation,
+    statusBarHidden,
+    statusBarStyle,
+  } = options;
+
+  let { presentation = 'card' } = options;
+
+  if (index === 0) {
+    // first screen should always be treated as `card`, it resolves problems with no header animation
+    // for navigator with first screen as `modal` and the next as `card`
+    presentation = 'card';
+  }
+
+  const isHeaderInPush = isAndroid
+    ? headerShown
+    : presentation === 'card' && headerShown !== false;
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const insets = useSafeAreaInsets();
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const headerHeight = getDefaultHeaderHeight(
+    useSafeAreaFrame(),
+    false,
+    insets.top
+  );
+
+  return (
+    <Screen
+      key={route.key}
+      enabled
+      style={StyleSheet.absoluteFill}
+      gestureEnabled={
+        isAndroid
+          ? // This prop enables handling of system back gestures on Android
+            // Since we handle them in JS side, we disable this
+            false
+          : gestureEnabled
+      }
+      replaceAnimation={animationTypeForReplace}
+      stackPresentation={presentation === 'card' ? 'push' : presentation}
+      stackAnimation={animation}
+      screenOrientation={orientation}
+      statusBarAnimation={statusBarAnimation}
+      statusBarHidden={statusBarHidden}
+      statusBarStyle={statusBarStyle}
+      onWillDisappear={onWillDisappear}
+      onAppear={onAppear}
+      onDisappear={onDisappear}
+      onDismissed={onDismissed}
+    >
+      <HeaderShownContext.Provider
+        value={isParentHeaderShown || isHeaderInPush !== false}
+      >
+        <HeaderHeightContext.Provider
+          value={
+            isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
+          }
+        >
+          {header !== undefined && headerShown !== false ? (
+            // TODO: expose custom header height
+            header({
+              back: previousDescriptor
+                ? {
+                    title: getHeaderTitle(
+                      previousDescriptor.options,
+                      previousDescriptor.route.name
+                    ),
+                  }
+                : undefined,
+              options,
+              route,
+              navigation,
+            })
+          ) : (
+            <HeaderConfig
+              {...options}
+              route={route}
+              headerShown={isHeaderInPush}
+            />
+          )}
+          <MaybeNestedStack
+            options={options}
+            route={route}
+            presentation={presentation}
+          >
+            {render()}
+          </MaybeNestedStack>
+        </HeaderHeightContext.Provider>
+      </HeaderShownContext.Provider>
+    </Screen>
+  );
+};
+
+type Props = {
+  state: StackNavigationState<ParamListBase>;
+  navigation: NativeStackNavigationHelpers;
+  descriptors: NativeStackDescriptorMap;
+};
+
+function NativeStackViewInner({ state, navigation, descriptors }: Props) {
+  const [nextDismissedKey, setNextDismissedKey] =
+    React.useState<string | null>(null);
+
+  const dismissedRouteName = nextDismissedKey
+    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
+    : null;
+
+  React.useEffect(() => {
+    if (dismissedRouteName) {
+      const message =
+        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
+        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
+        `Consider using 'gestureEnabled: false' to prevent back gesture and use a custom back button with 'headerLeft' option to override the native behavior.`;
+
+      console.error(message);
+    }
+  }, [dismissedRouteName]);
+
+  return (
+    <ScreenStack style={styles.container}>
+      {state.routes.map((route, index) => {
+        const descriptor = descriptors[route.key];
+        const previousKey = state.routes[index - 1]?.key;
+        const previousDescriptor = previousKey
+          ? descriptors[previousKey]
+          : undefined;
+
+        return (
+          <SceneView
+            key={route.key}
+            index={index}
+            descriptor={descriptor}
+            previousDescriptor={previousDescriptor}
+            onWillDisappear={() => {
+              navigation.emit({
+                type: 'transitionStart',
+                data: { closing: true },
+                target: route.key,
+              });
+            }}
+            onAppear={() => {
+              navigation.emit({
+                type: 'transitionEnd',
+                data: { closing: false },
+                target: route.key,
+              });
+            }}
+            onDisappear={() => {
+              navigation.emit({
+                type: 'transitionEnd',
+                data: { closing: true },
+                target: route.key,
+              });
+            }}
+            onDismissed={() => {
+              navigation.dispatch({
+                ...StackActions.pop(),
+                source: route.key,
+                target: state.key,
+              });
+
+              setNextDismissedKey(route.key);
+            }}
+          />
+        );
+      })}
+    </ScreenStack>
+  );
+}
+
+export default function NativeStackView(props: Props) {
+  return (
+    <SafeAreaProviderCompat>
+      <NativeStackViewInner {...props} />
+    </SafeAreaProviderCompat>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

packages/native-stack/src/views/NativeStackView.tsx

@@ -1,203 +1,152 @@
-import { SafeAreaProviderCompat } from '@react-navigation/elements';
 import {
+  getHeaderTitle,
+  Header,
+  HeaderBackButton,
+  SafeAreaProviderCompat,
+  Screen,
+} from '@react-navigation/elements';
+import type {
   ParamListBase,
-  Route,
-  StackActions,
   StackNavigationState,
-  useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
-import {
-  Screen,
-  ScreenStack,
-  StackPresentationTypes,
-} from 'react-native-screens';
-import warnOnce from 'warn-once';
+import { Image, StyleSheet, View } from 'react-native';
 
 import type {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
-  NativeStackNavigationOptions,
 } from '../types';
-import DebugContainer from './DebugContainer';
-import HeaderConfig from './HeaderConfig';
-
-const isAndroid = Platform.OS === 'android';
-
-const MaybeNestedStack = ({
-  options,
-  route,
-  presentation,
-  children,
-}: {
-  options: NativeStackNavigationOptions;
-  route: Route<string>;
-  presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
-  children: React.ReactNode;
-}) => {
-  const { colors } = useTheme();
-  const { headerShown = true, contentStyle } = options;
-
-  const isHeaderInModal = isAndroid
-    ? false
-    : presentation !== 'card' && headerShown === true;
-
-  const headerShownPreviousRef = React.useRef(headerShown);
-
-  React.useEffect(() => {
-    warnOnce(
-      !isAndroid &&
-        presentation !== 'card' &&
-        headerShownPreviousRef.current !== headerShown,
-      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`
-    );
-
-    headerShownPreviousRef.current = headerShown;
-  }, [headerShown, presentation, route.name]);
-
-  const content = (
-    <DebugContainer
-      style={[
-        styles.container,
-        presentation !== 'transparentModal' &&
-          presentation !== 'containedTransparentModal' && {
-            backgroundColor: colors.background,
-          },
-        contentStyle,
-      ]}
-      stackPresentation={presentation === 'card' ? 'push' : presentation}
-    >
-      {children}
-    </DebugContainer>
-  );
-
-  if (isHeaderInModal) {
-    return (
-      <ScreenStack style={styles.container}>
-        <Screen enabled style={StyleSheet.absoluteFill}>
-          <HeaderConfig {...options} route={route} />
-          {content}
-        </Screen>
-      </ScreenStack>
-    );
-  }
-
-  return content;
-};
 
 type Props = {
   state: StackNavigationState<ParamListBase>;
+  // This is used for the native implementation of the stack.
+  // eslint-disable-next-line react/no-unused-prop-types
   navigation: NativeStackNavigationHelpers;
   descriptors: NativeStackDescriptorMap;
 };
 
-function NativeStackViewInner({ state, navigation, descriptors }: Props) {
-  return (
-    <ScreenStack style={styles.container}>
-      {state.routes.map((route, index) => {
-        const { options, render: renderScene } = descriptors[route.key];
-        const {
-          gestureEnabled,
-          headerShown,
-          animationTypeForReplace = 'pop',
-          animation,
-          orientation,
-          statusBarAnimation,
-          statusBarHidden,
-          statusBarStyle,
-        } = options;
-
-        let { presentation = 'card' } = options;
-
-        if (index === 0) {
-          // first screen should always be treated as `card`, it resolves problems with no header animation
-          // for navigator with first screen as `modal` and the next as `card`
-          presentation = 'card';
-        }
-
-        const isHeaderInPush = isAndroid
-          ? headerShown
-          : presentation === 'card' && headerShown !== false;
-
-        return (
-          <Screen
-            key={route.key}
-            enabled
-            style={StyleSheet.absoluteFill}
-            gestureEnabled={
-              isAndroid
-                ? // This prop enables handling of system back gestures on Android
-                  // Since we handle them in JS side, we disable this
-                  false
-                : gestureEnabled
-            }
-            replaceAnimation={animationTypeForReplace}
-            stackPresentation={presentation === 'card' ? 'push' : presentation}
-            stackAnimation={animation}
-            screenOrientation={orientation}
-            statusBarAnimation={statusBarAnimation}
-            statusBarHidden={statusBarHidden}
-            statusBarStyle={statusBarStyle}
-            onWillAppear={() => {
-              navigation.emit({
-                type: 'transitionStart',
-                data: { closing: false },
-                target: route.key,
-              });
-            }}
-            onWillDisappear={() => {
-              navigation.emit({
-                type: 'transitionStart',
-                data: { closing: true },
-                target: route.key,
-              });
-            }}
-            onAppear={() => {
-              navigation.emit({
-                type: 'transitionEnd',
-                data: { closing: false },
-                target: route.key,
-              });
-            }}
-            onDisappear={() => {
-              navigation.emit({
-                type: 'transitionEnd',
-                data: { closing: true },
-                target: route.key,
-              });
-            }}
-            onDismissed={() => {
-              navigation.dispatch({
-                ...StackActions.pop(),
-                source: route.key,
-                target: state.key,
-              });
-            }}
-          >
-            <HeaderConfig
-              {...options}
-              route={route}
-              headerShown={isHeaderInPush}
-            />
-            <MaybeNestedStack
-              options={options}
-              route={route}
-              presentation={presentation}
-            >
-              {renderScene()}
-            </MaybeNestedStack>
-          </Screen>
-        );
-      })}
-    </ScreenStack>
-  );
-}
-
-export default function NativeStackView(props: Props) {
+export default function NativeStackView({ state, descriptors }: Props) {
   return (
     <SafeAreaProviderCompat>
-      <NativeStackViewInner {...props} />
+      <View style={styles.container}>
+        {state.routes.map((route, i) => {
+          const isFocused = state.index === i;
+          const canGoBack = i !== 0;
+          const previousKey = state.routes[i - 1]?.key;
+          const previousDescriptor = previousKey
+            ? descriptors[previousKey]
+            : undefined;
+          const { options, navigation, render } = descriptors[route.key];
+
+          const {
+            header,
+            headerShown,
+            headerTintColor,
+            headerBackImageSource,
+            headerLeft,
+            headerRight,
+            headerTitle,
+            headerTitleAlign,
+            headerTitleStyle,
+            headerStyle,
+            headerShadowVisible,
+            headerTransparent,
+            contentStyle,
+          } = options;
+
+          return (
+            <Screen
+              key={route.key}
+              focused={isFocused}
+              route={route}
+              navigation={navigation}
+              headerShown={headerShown}
+              headerTransparent={headerTransparent}
+              header={
+                header !== undefined ? (
+                  header({
+                    back: previousDescriptor
+                      ? {
+                          title: getHeaderTitle(
+                            previousDescriptor.options,
+                            previousDescriptor.route.name
+                          ),
+                        }
+                      : undefined,
+                    options,
+                    route,
+                    navigation,
+                  })
+                ) : (
+                  <Header
+                    title={getHeaderTitle(options, route.name)}
+                    headerTintColor={headerTintColor}
+                    headerLeft={
+                      typeof headerLeft === 'function'
+                        ? ({ tintColor }) => headerLeft({ tintColor })
+                        : headerLeft === undefined && canGoBack
+                        ? ({ tintColor }) => (
+                            <HeaderBackButton
+                              tintColor={tintColor}
+                              backImage={
+                                headerBackImageSource !== undefined
+                                  ? () => (
+                                      <Image
+                                        source={headerBackImageSource}
+                                        style={[
+                                          styles.backImage,
+                                          { tintColor },
+                                        ]}
+                                      />
+                                    )
+                                  : undefined
+                              }
+                              onPress={navigation.goBack}
+                              canGoBack={canGoBack}
+                            />
+                          )
+                        : headerLeft
+                    }
+                    headerRight={
+                      typeof headerRight === 'function'
+                        ? ({ tintColor }) => headerRight({ tintColor })
+                        : headerRight
+                    }
+                    headerTitle={
+                      typeof headerTitle === 'function'
+                        ? ({ children, tintColor }) =>
+                            headerTitle({ children, tintColor })
+                        : headerTitle
+                    }
+                    headerTitleAlign={headerTitleAlign}
+                    headerTitleStyle={headerTitleStyle}
+                    headerStyle={[
+                      headerTransparent
+                        ? {
+                            position: 'absolute',
+                            backgroundColor: 'transparent',
+                          }
+                        : null,
+                      headerStyle,
+                      headerShadowVisible === false
+                        ? { shadowOpacity: 0, borderBottomWidth: 0 }
+                        : null,
+                    ]}
+                  />
+                )
+              }
+              style={[
+                StyleSheet.absoluteFill,
+                { display: isFocused ? 'flex' : 'none' },
+              ]}
+            >
+              <View style={[styles.contentContainer, contentStyle]}>
+                {render()}
+              </View>
+            </Screen>
+          );
+        })}
+      </View>
     </SafeAreaProviderCompat>
   );
 }
@@ -206,4 +155,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  contentContainer: {
+    flex: 1,
+  },
+  backImage: {
+    height: 24,
+    width: 24,
+    margin: 3,
+    resizeMode: 'contain',
+  },
 });

packages/native/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.1...@react-navigation/native@6.0.2) (2021-08-07)
+
+
+### Bug Fixes
+
+* fix crash in useLinkTo when passing an object ([#9800](https://github.com/react-navigation/react-navigation/issues/9800)) ([dfd0cc7](https://github.com/react-navigation/react-navigation/commit/dfd0cc78fe4531ba7c957f826bc556829e231735))
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0...@react-navigation/native@6.0.1) (2021-08-03)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.17...@react-navigation/native@6.0.0) (2021-08-01)
+
+
+### Features
+
+* add a way to filter out deep links from being handled ([c322b05](https://github.com/react-navigation/react-navigation/commit/c322b0501c6a9941a033471aed9e5b486b3ace7e))
+
+
+
+
+
+# [6.0.0-next.17](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.16...@react-navigation/native@6.0.0-next.17) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [6.0.0-next.16](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.15...@react-navigation/native@6.0.0-next.16) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [6.0.0-next.15](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.13...@react-navigation/native@6.0.0-next.15) (2021-07-01)
+
+
+### Bug Fixes
+
+* disable duplicate linking check for independent containers ([20b8ebd](https://github.com/react-navigation/react-navigation/commit/20b8ebd40547d93ccf626fcd9dad327fe1807b52))
+
+
+
+
+
 # [6.0.0-next.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.13...@react-navigation/native@6.0.0-next.14) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/README.md

@@ -2,4 +2,4 @@
 
 React Native integration for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/getting-started/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/getting-started/).

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "6.0.0-next.14",
+  "version": "6.0.2",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.0-next.14",
+    "@react-navigation/core": "^6.0.1",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.23"
   },

packages/native/src/NavigationContainer.tsx

@@ -74,6 +74,7 @@ function NavigationContainerInner(
   useDocumentTitle(refContainer, documentTitle);
 
   const { getInitialState } = useLinking(refContainer, {
+    independent: rest.independent,
     enabled: isLinkingEnabled,
     prefixes: [],
     ...linking,

packages/native/src/types.tsx

@@ -27,7 +27,8 @@ export type LinkingOptions<ParamList extends {}> = {
   /**
    * The prefixes are stripped from the URL before parsing them.
    * Usually they are the `scheme` + `host` (e.g. `myapp://chat?user=jane`)
-   * Only applicable on Android and iOS.
+   *
+   * This is not supported on Web.
    *
    * @example
    * ```js
@@ -41,6 +42,24 @@ export type LinkingOptions<ParamList extends {}> = {
    * ```
    */
   prefixes: string[];
+  /**
+   * Optional function which takes an incoming URL returns a boolean
+   * indicating whether React Navigation should handle it.
+   *
+   * This can be used to disable deep linking for specific URLs.
+   * e.g. URLs used for authentication, and not for deep linking to screens.
+   *
+   * This is not supported on Web.
+   *
+   * @example
+   * ```js
+   * {
+   *   // Filter out URLs used by expo-auth-session
+   *   filter: (url) => !url.includes('+expo-auth-session')
+   * }
+   * ```
+   */
+  filter?: (url: string) => boolean;
   /**
    * Config to fine-tune how to parse the path.
    *
@@ -61,7 +80,8 @@ export type LinkingOptions<ParamList extends {}> = {
   /**
    * Custom function to get the initial URL used for linking.
    * Uses `Linking.getInitialURL()` by default.
-   * Not supported on Web.
+   *
+   * This is not supported on Web.
    *
    * @example
    * ```js
@@ -78,7 +98,8 @@ export type LinkingOptions<ParamList extends {}> = {
   /**
    * Custom function to get subscribe to URL updates.
    * Uses `Linking.addEventListener('url', callback)` by default.
-   * Not supported on Web.
+   *
+   * This is not supported on Web.
    *
    * @example
    * ```js

packages/native/src/useLinkTo.tsx

@@ -38,7 +38,7 @@ export default function useLinkTo<
 
       if (typeof to !== 'string') {
         // @ts-expect-error: This is fine
-        root.navigate(to.screen, to.params);
+        navigation.navigate(to.screen, to.params);
         return;
       }
 

packages/native/src/useLinking.native.tsx

@@ -12,13 +12,19 @@ import type { LinkingOptions } from './types';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
+type Options = LinkingOptions<ParamListBase> & {
+  independent?: boolean;
+};
+
 let isUsingLinking = false;
 
 export default function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
+    independent,
     enabled = true,
     prefixes,
+    filter,
     config,
     getInitialURL = () =>
       Promise.race([
@@ -47,9 +53,13 @@ export default function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: LinkingOptions<ParamListBase>
+  }: Options
 ) {
   React.useEffect(() => {
+    if (independent) {
+      return undefined;
+    }
+
     if (enabled !== false && isUsingLinking) {
       throw new Error(
         [
@@ -77,6 +87,7 @@ export default function useLinking(
   // Not re-creating `getInitialState` is important coz it makes it easier for the user to use in an effect
   const enabledRef = React.useRef(enabled);
   const prefixesRef = React.useRef(prefixes);
+  const filterRef = React.useRef(filter);
   const configRef = React.useRef(config);
   const getInitialURLRef = React.useRef(getInitialURL);
   const getStateFromPathRef = React.useRef(getStateFromPath);
@@ -85,12 +96,28 @@ export default function useLinking(
   React.useEffect(() => {
     enabledRef.current = enabled;
     prefixesRef.current = prefixes;
+    filterRef.current = filter;
     configRef.current = config;
     getInitialURLRef.current = getInitialURL;
     getStateFromPathRef.current = getStateFromPath;
     getActionFromStateRef.current = getActionFromState;
   });
 
+  const getStateFromURL = React.useCallback(
+    (url: string | null | undefined) => {
+      if (!url || (filterRef.current && !filterRef.current(url))) {
+        return undefined;
+      }
+
+      const path = extractPathFromURL(prefixesRef.current, url);
+
+      return path
+        ? getStateFromPathRef.current(path, configRef.current)
+        : undefined;
+    },
+    []
+  );
+
   const getInitialState = React.useCallback(() => {
     let state: ResultState | undefined;
 
@@ -99,21 +126,13 @@ export default function useLinking(
 
       if (url != null && typeof url !== 'string') {
         return url.then((url) => {
-          const path = url
-            ? extractPathFromURL(prefixesRef.current, url)
-            : null;
+          const state = getStateFromURL(url);
 
-          return path
-            ? getStateFromPathRef.current(path, configRef.current)
-            : undefined;
+          return state;
         });
       }
 
-      const path = url ? extractPathFromURL(prefixesRef.current, url) : null;
-
-      state = path
-        ? getStateFromPathRef.current(path, configRef.current)
-        : undefined;
+      state = getStateFromURL(url);
     }
 
     const thenable = {
@@ -126,7 +145,7 @@ export default function useLinking(
     };
 
     return thenable as PromiseLike<ResultState | undefined>;
-  }, []);
+  }, [getStateFromURL]);
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -134,50 +153,41 @@ export default function useLinking(
         return;
       }
 
-      const path = extractPathFromURL(prefixesRef.current, url);
       const navigation = ref.current;
+      const state = navigation ? getStateFromURL(url) : undefined;
 
-      if (navigation && path) {
-        const state = getStateFromPathRef.current(path, configRef.current);
+      if (navigation && state) {
+        // Make sure that the routes in the state exist in the root navigator
+        // Otherwise there's an error in the linking configuration
+        const rootState = navigation.getRootState();
 
-        if (state) {
-          // Make sure that the routes in the state exist in the root navigator
-          // Otherwise there's an error in the linking configuration
-          const rootState = navigation.getRootState();
-
-          if (
-            state.routes.some((r) => !rootState?.routeNames.includes(r.name))
-          ) {
-            console.warn(
-              "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
-            );
-            return;
-          }
-
-          const action = getActionFromStateRef.current(
-            state,
-            configRef.current
+        if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
+          console.warn(
+            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
           );
+          return;
+        }
 
-          if (action !== undefined) {
-            try {
-              navigation.dispatch(action);
-            } catch (e) {
-              // Ignore any errors from deep linking.
-              // This could happen in case of malformed links, navigation object not being initialized etc.
-              console.warn(
-                `An error occurred when trying to handle the link '${path}': ${e.message}`
-              );
-            }
-          } else {
-            navigation.resetRoot(state);
+        const action = getActionFromStateRef.current(state, configRef.current);
+
+        if (action !== undefined) {
+          try {
+            navigation.dispatch(action);
+          } catch (e) {
+            // Ignore any errors from deep linking.
+            // This could happen in case of malformed links, navigation object not being initialized etc.
+            console.warn(
+              `An error occurred when trying to handle the link '${url}': ${e.message}`
+            );
           }
+        } else {
+          navigation.resetRoot(state);
         }
       }
     };
 
     return subscribe(listener);
-  }, [enabled, ref, subscribe]);
+  }, [enabled, getStateFromURL, ref, subscribe]);
 
   return {
     getInitialState,

packages/native/src/useLinking.tsx

@@ -289,17 +289,26 @@ const series = (cb: () => Promise<void>) => {
 
 let isUsingLinking = false;
 
+type Options = LinkingOptions<ParamListBase> & {
+  independent?: boolean;
+};
+
 export default function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
+    independent,
     enabled = true,
     config,
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: LinkingOptions<ParamListBase>
+  }: Options
 ) {
   React.useEffect(() => {
+    if (independent) {
+      return undefined;
+    }
+
     if (enabled !== false && isUsingLinking) {
       throw new Error(
         [

packages/routers/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@6.0.0...@react-navigation/routers@6.0.1) (2021-08-03)
+
+
+### Reverts
+
+* Revert "fix: don't merge initial params when merge !== true" ([8086772](https://github.com/react-navigation/react-navigation/commit/80867722c5891b786e8c47f18135419b7cb915b3))
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@6.0.0-next.6...@react-navigation/routers@6.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* don't merge initial params when merge !== true ([54b215b](https://github.com/react-navigation/react-navigation/commit/54b215b9d3192d11c4c28bd469dd217d90d6c5c5))
+
+
+
+
+
+# [6.0.0-next.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@6.0.0-next.4...@react-navigation/routers@6.0.0-next.6) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 # [6.0.0-next.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@6.0.0-next.4...@react-navigation/routers@6.0.0-next.5) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/README.md

@@ -14,4 +14,4 @@ yarn add @react-navigation/routers
 
 ## Usage
 
-Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/custom-routers/).
+Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/custom-routers/).

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "6.0.0-next.5",
+  "version": "6.0.1",
   "keywords": [
     "react",
     "react-native",

packages/stack/CHANGELOG.md

@@ -3,6 +3,123 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.6...@react-navigation/stack@6.0.7) (2021-08-17)
+
+
+### Bug Fixes
+
+* add check when accessing next descriptor ([#9824](https://github.com/react-navigation/react-navigation/issues/9824)) ([5bcf79c](https://github.com/react-navigation/react-navigation/commit/5bcf79c722e62403d8398874fd0b2b673f840aa3))
+* don't try to parse header tint color if not a string ([ece03d7](https://github.com/react-navigation/react-navigation/commit/ece03d7177731d8eabcc082f34b674776dffc4ce)), closes [#9822](https://github.com/react-navigation/react-navigation/issues/9822)
+* fix status bar handling with modal presentation ([651d8e5](https://github.com/react-navigation/react-navigation/commit/651d8e5726d9abab2e4572bd0fad550e926cc9b4))
+* handle statusbar height for stack nested in modal. closes [#9790](https://github.com/react-navigation/react-navigation/issues/9790) ([f54cafb](https://github.com/react-navigation/react-navigation/commit/f54cafbb3333763ec86e4b2cab46cbb2ae99b627))
+
+
+
+
+
+## [6.0.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.5...@react-navigation/stack@6.0.6) (2021-08-11)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.4...@react-navigation/stack@6.0.5) (2021-08-11)
+
+
+### Bug Fixes
+
+* show deprecation warning for 'keyboardHandlingEnabled' prop ([8c89c45](https://github.com/react-navigation/react-navigation/commit/8c89c45be45396024271bb5be33760e3c06a09be))
+
+
+
+
+
+## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.3...@react-navigation/stack@6.0.4) (2021-08-09)
+
+
+### Bug Fixes
+
+* avoid overflowing long titles ([bacdbbd](https://github.com/react-navigation/react-navigation/commit/bacdbbdd7c5df73b84aa1ed8c0329c9525d0fdba))
+* pass all props to custom headerLeft ([#9806](https://github.com/react-navigation/react-navigation/issues/9806)) ([22799fc](https://github.com/react-navigation/react-navigation/commit/22799fc96ee689cad97ee051c24816f86ac912d1)), closes [#9805](https://github.com/react-navigation/react-navigation/issues/9805)
+* pass onlayout to headerTitle ([#9808](https://github.com/react-navigation/react-navigation/issues/9808)) ([a79ce57](https://github.com/react-navigation/react-navigation/commit/a79ce57aa7f9be3a47a09728e920c0d4a805f5aa))
+
+
+
+
+
+## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.2...@react-navigation/stack@6.0.3) (2021-08-09)
+
+
+### Bug Fixes
+
+* consider all next headers instead of immediate next ([4d8a7ee](https://github.com/react-navigation/react-navigation/commit/4d8a7ee7e422c9d0eeb7aa0557eb288ef62b1f30)), closes [#9797](https://github.com/react-navigation/react-navigation/issues/9797)
+
+
+
+
+
+## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.1...@react-navigation/stack@6.0.2) (2021-08-07)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0...@react-navigation/stack@6.0.1) (2021-08-03)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.29...@react-navigation/stack@6.0.0) (2021-08-01)
+
+
+### Bug Fixes
+
+* match native iOS header height in stack ([51b636d](https://github.com/react-navigation/react-navigation/commit/51b636d7268fc05a8a9aca9e6aad0161674f238e))
+* remove dep on react-native-iphonex-helper ([8a95fb5](https://github.com/react-navigation/react-navigation/commit/8a95fb588bd1f8a72fc4ef4e847f06e103ed55fe))
+
+
+### Features
+
+* expose header height in native-stack ([#9774](https://github.com/react-navigation/react-navigation/issues/9774)) ([20abccd](https://github.com/react-navigation/react-navigation/commit/20abccda0d5074f61b2beb555b881a2087d27bb0))
+
+
+
+
+
+# [6.0.0-next.29](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.28...@react-navigation/stack@6.0.0-next.29) (2021-07-16)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [6.0.0-next.28](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.27...@react-navigation/stack@6.0.0-next.28) (2021-07-16)
+
+
+### Bug Fixes
+
+* update isClosing in stack card ([#9738](https://github.com/react-navigation/react-navigation/issues/9738)) ([ee12690](https://github.com/react-navigation/react-navigation/commit/ee12690a823694fa19a3216f97676870f2999719))
+
+
+
+
+
+# [6.0.0-next.27](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.25...@react-navigation/stack@6.0.0-next.27) (2021-07-01)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
 # [6.0.0-next.26](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.25...@react-navigation/stack@6.0.0-next.26) (2021-06-10)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/README.md

@@ -2,4 +2,4 @@
 
 Stack navigator for React Navigation.
 
-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/stack-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/stack-navigator/).

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": "6.0.0-next.26",
+  "version": "6.0.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,13 +40,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.0.0-next.18",
+    "@react-navigation/elements": "^1.1.0",
     "color": "^3.1.3",
-    "react-native-iphone-x-helper": "^1.3.0",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.0-next.14",
+    "@react-navigation/native": "^6.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^17.0.9",

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,5 +1,4 @@
-import { Animated } from 'react-native';
-import { isIphoneX } from 'react-native-iphone-x-helper';
+import { Animated, Platform } from 'react-native';
 
 import type {
   StackCardInterpolatedStyle,
@@ -99,6 +98,11 @@ export function forModalPresentationIOS({
   layouts: { screen },
   insets,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const hasNotchIos =
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    !Platform.isTVOS &&
+    insets.top > 20;
   const isLandscape = screen.width > screen.height;
   const topOffset = isLandscape ? 0 : 10;
   const statusBarHeight = insets.top;
@@ -154,7 +158,7 @@ export function forModalPresentationIOS({
     : isFirst
     ? progress.interpolate({
         inputRange: [0, 1, 1.0001, 2],
-        outputRange: [0, 0, isIphoneX() ? 38 : 0, 10],
+        outputRange: [0, 0, hasNotchIos ? 38 : 0, 10],
       })
     : 10;
 
@@ -165,8 +169,8 @@ export function forModalPresentationIOS({
       borderTopRightRadius: borderRadius,
       // We don't need these for the animation
       // But different border radius for corners improves animation perf
-      borderBottomLeftRadius: isIphoneX() ? borderRadius : 0,
-      borderBottomRightRadius: isIphoneX() ? borderRadius : 0,
+      borderBottomLeftRadius: hasNotchIos ? borderRadius : 0,
+      borderBottomRightRadius: hasNotchIos ? borderRadius : 0,
       marginTop: isFirst ? 0 : statusBarHeight,
       marginBottom: isFirst ? 0 : topOffset,
       transform: [{ translateY }, { scale }],