chore: publish

- @react-navigation/example@5.1.0
 - @react-navigation/bottom-tabs@5.4.7
 - @react-navigation/compat@5.1.23
 - @react-navigation/core@5.8.1
 - @react-navigation/drawer@5.7.7
 - @react-navigation/material-bottom-tabs@5.2.7
 - @react-navigation/material-top-tabs@5.2.7
 - @react-navigation/native@5.4.2
 - @react-navigation/routers@5.4.6
 - @react-navigation/stack@5.3.9

.circleci/config.yml

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

.github/workflows/triage.yml

@@ -13,7 +13,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          args: comment "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (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.)."
+          args: comment "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.)."
 
   needs-repro:
     runs-on: ubuntu-latest
@@ -24,7 +24,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          args: comment "Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then you can also provide the repro in a GitHub repository."
+          args: comment "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then you can also provide the repro in a GitHub repository."
 
   question:
     runs-on: ubuntu-latest

.github/workflows/versions.yml

@@ -0,0 +1,27 @@
+name: Check versions
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  check-versions:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: react-navigation/check-versions-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          packages: |
+            @react-navigation/bottom-tabs
+            @react-navigation/compat
+            @react-navigation/core
+            @react-navigation/drawer
+            @react-navigation/material-bottom-tabs
+            @react-navigation/material-top-tabs
+            @react-navigation/native
+            @react-navigation/routers
+            @react-navigation/stack
+            react-navigation-animated-switch
+            react-navigation-drawer
+            react-navigation-material-bottom-tabs
+            react-navigation-stack
+            react-navigation-tabs

example/CHANGELOG.md

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

example/app.json

@@ -7,7 +7,7 @@
     "slug": "react-navigation-example",
     "description": "Demo app to showcase various functionality of React Navigation",
     "privacy": "public",
-    "sdkVersion": "36.0.0",
+    "sdkVersion": "37.0.0",
     "platforms": [
       "ios",
       "android",

example/e2e/.eslintrc.json

@@ -1,10 +0,0 @@
-{
-  "settings": {
-    "import/core-modules": [
-      "detox",
-      "detox/runners/jest/adapter",
-      "detox/runners/jest/specReporter"
-    ]
-  },
-  "env": { "jest": true, "jasmine": true }
-}

example/e2e/__integration_tests__/Link.test.tsx

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

example/e2e/__integration_tests__/index.test.js

@@ -1,9 +0,0 @@
-import { by, element, expect, device } from 'detox';
-
-beforeEach(async () => {
-  await device.reloadReactNative();
-});
-
-it('has dark theme toggle', async () => {
-  await expect(element(by.text('Dark theme'))).toBeVisible();
-});

example/e2e/__integration_tests__/index.test.tsx

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

example/e2e/config.json

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

example/e2e/config/setup-playwright.tsx

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

example/e2e/config/setup-server.tsx

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

example/e2e/config/teardown-server.tsx

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

example/e2e/init.js

@@ -1,28 +0,0 @@
-/* eslint-disable jest/no-jasmine-globals, import/no-commonjs */
-
-const detox = require('detox');
-const config = require('../../package.json').detox;
-const adapter = require('detox/runners/jest/adapter');
-const specReporter = require('detox/runners/jest/specReporter');
-
-// Set the default timeout
-jest.setTimeout(120000);
-
-jasmine.getEnv().addReporter(adapter);
-
-// This takes care of generating status logs on a per-spec basis. By default, jest only reports at file-level.
-// This is strictly optional.
-jasmine.getEnv().addReporter(specReporter);
-
-beforeAll(async () => {
-  await detox.init(config);
-}, 300000);
-
-beforeEach(async () => {
-  await adapter.beforeEach();
-});
-
-afterAll(async () => {
-  await adapter.afterAll();
-  await detox.cleanup();
-});

example/jest.config.js

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

example/package.json

@@ -1,42 +1,47 @@
 {
   "name": "@react-navigation/example",
   "description": "Demo app to showcase various functionality of React Navigation",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "private": true,
   "scripts": {
     "start": "expo start",
     "web": "expo start:web",
     "native": "react-native start",
     "android": "react-native run-android",
-    "ios": "react-native run-ios"
+    "ios": "react-native run-ios",
+    "test": "jest"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "0.1.7",
-    "@types/react-native-restart": "^0.0.0",
+    "@expo/vector-icons": "^10.2.0",
+    "@react-native-community/masked-view": "^0.1.10",
     "color": "^3.1.2",
-    "expo": "^36.0.2",
-    "expo-asset": "~8.0.0",
-    "expo-blur": "^8.0.0",
+    "expo": "^37.0.8",
+    "expo-asset": "~8.1.3",
+    "expo-blur": "~8.1.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.6.0",
-    "react-native-paper": "^3.6.0",
-    "react-native-reanimated": "^1.7.0",
-    "react-native-restart": "^0.0.14",
+    "react-native-paper": "^3.10.1",
+    "react-native-reanimated": "^1.8.0",
+    "react-native-restart": "^0.0.15",
     "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.3.0",
-    "react-native-tab-view": "2.13.0",
-    "react-native-unimodules": "^0.7.0",
+    "react-native-screens": "^2.7.0",
+    "react-native-tab-view": "2.14.0",
+    "react-native-unimodules": "~0.9.1",
     "react-native-web": "^0.11.7"
   },
   "devDependencies": {
-    "@expo/webpack-config": "^0.11.7",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
-    "babel-preset-expo": "^8.0.0",
-    "expo-cli": "^3.13.8",
-    "typescript": "^3.7.5"
+    "@expo/webpack-config": "^0.11.19",
+    "@types/jest-dev-server": "^4.2.0",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.7",
+    "babel-preset-expo": "^8.1.0",
+    "expo-cli": "^3.20.1",
+    "jest": "^26.0.1",
+    "jest-dev-server": "^4.4.0",
+    "playwright": "^0.14.0",
+    "serve": "^11.3.0",
+    "typescript": "^3.8.3"
   }
 }

example/src/AsyncStorage.native.tsx

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

example/src/AsyncStorage.tsx

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

example/src/Screens/BottomTabs.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Platform } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import TouchableBounce from '../Shared/TouchableBounce';
@@ -28,7 +29,10 @@ export default function BottomTabsScreen() {
   return (
     <BottomTabs.Navigator
       screenOptions={{
-        tabBarButton: (props) => <TouchableBounce {...props} />,
+        tabBarButton:
+          Platform.OS === 'web'
+            ? undefined
+            : (props) => <TouchableBounce {...props} />,
       }}
     >
       <BottomTabs.Screen

example/src/Screens/CompatAPI.tsx

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

example/src/Screens/LinkComponent.tsx

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

example/src/Screens/MasterDetail.tsx

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

example/src/Screens/MaterialTopTabs.tsx

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

example/src/Screens/ModalPresentationStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -12,11 +12,13 @@ import Albums from '../Shared/Albums';
 
 type ModalStackParams = {
   Article: { author: string };
-  Album: undefined;
+  Albums: undefined;
 };
 
 type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
 
+const scrollEnabled = Platform.select({ web: true, default: false });
+
 const ArticleScreen = ({
   navigation,
   route,
@@ -29,7 +31,7 @@ const ArticleScreen = ({
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Album')}
+          onPress={() => navigation.push('Albums')}
           style={styles.button}
         >
           Push album
@@ -42,7 +44,10 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+      <Article
+        author={{ name: route.params.author }}
+        scrollEnabled={scrollEnabled}
+      />
     </ScrollView>
   );
 };
@@ -66,7 +71,7 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={false} />
+      <Albums scrollEnabled={scrollEnabled} />
     </ScrollView>
   );
 };
@@ -107,9 +112,9 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <ModalPresentationStack.Screen
-        name="Album"
+        name="Albums"
         component={AlbumsScreen}
-        options={{ title: 'Album' }}
+        options={{ title: 'Albums' }}
       />
     </ModalPresentationStack.Navigator>
   );

example/src/Screens/SimpleStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, Platform, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -13,11 +13,13 @@ import NewsFeed from '../Shared/NewsFeed';
 type SimpleStackParams = {
   Article: { author: string };
   NewsFeed: undefined;
-  Album: undefined;
+  Albums: undefined;
 };
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
+const scrollEnabled = Platform.select({ web: true, default: false });
+
 const ArticleScreen = ({
   navigation,
   route,
@@ -43,7 +45,10 @@ const ArticleScreen = ({
           Pop screen
         </Button>
       </View>
-      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+      <Article
+        author={{ name: route.params.author }}
+        scrollEnabled={scrollEnabled}
+      />
     </ScrollView>
   );
 };
@@ -58,7 +63,7 @@ const NewsFeedScreen = ({
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.navigate('Album')}
+          onPress={() => navigation.navigate('Albums')}
           style={styles.button}
         >
           Navigate to album
@@ -71,7 +76,7 @@ const NewsFeedScreen = ({
           Go back
         </Button>
       </View>
-      <NewsFeed scrollEnabled={false} />
+      <NewsFeed scrollEnabled={scrollEnabled} />
     </ScrollView>
   );
 };
@@ -99,7 +104,7 @@ const AlbumsScreen = ({
           Pop by 2
         </Button>
       </View>
-      <Albums scrollEnabled={false} />
+      <Albums scrollEnabled={scrollEnabled} />
     </ScrollView>
   );
 };
@@ -131,9 +136,9 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         options={{ title: 'Feed' }}
       />
       <SimpleStack.Screen
-        name="Album"
+        name="Albums"
         component={AlbumsScreen}
-        options={{ title: 'Album' }}
+        options={{ title: 'Albums' }}
       />
     </SimpleStack.Navigator>
   );

example/src/Screens/StackHeaderCustomization.tsx

@@ -15,11 +15,13 @@ import Albums from '../Shared/Albums';
 
 type SimpleStackParams = {
   Article: { author: string };
-  Album: undefined;
+  Albums: undefined;
 };
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
+const scrollEnabled = Platform.select({ web: true, default: false });
+
 const ArticleScreen = ({
   navigation,
   route,
@@ -32,7 +34,7 @@ const ArticleScreen = ({
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('Album')}
+          onPress={() => navigation.push('Albums')}
           style={styles.button}
         >
           Push album
@@ -45,7 +47,10 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+      <Article
+        author={{ name: route.params.author }}
+        scrollEnabled={scrollEnabled}
+      />
     </ScrollView>
   );
 };
@@ -75,7 +80,7 @@ const AlbumsScreen = ({
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={false} />
+      <Albums scrollEnabled={scrollEnabled} />
     </ScrollView>
   );
 };
@@ -126,10 +131,10 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <SimpleStack.Screen
-        name="Album"
+        name="Albums"
         component={AlbumsScreen}
         options={{
-          title: 'Album',
+          title: 'Albums',
           headerBackTitle: 'Back',
           headerTransparent: true,
           headerBackground: () => (

example/src/Screens/StackTransparent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import { Button, Paragraph } from 'react-native-paper';
 import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
 import {
@@ -15,6 +15,8 @@ type SimpleStackParams = {
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
+const scrollEnabled = Platform.select({ web: true, default: false });
+
 const ArticleScreen = ({
   navigation,
   route,
@@ -40,7 +42,10 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+      <Article
+        author={{ name: route.params.author }}
+        scrollEnabled={scrollEnabled}
+      />
     </ScrollView>
   );
 };

example/src/Shared/Albums.tsx

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

example/src/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
   ScrollView,
-  AsyncStorage,
   YellowBox,
   Platform,
   StatusBar,
   I18nManager,
   Dimensions,
   ScaledSize,
+  Linking,
 } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
@@ -22,11 +22,10 @@ import {
   Appbar,
   List,
   Divider,
+  Text,
 } from 'react-native-paper';
 import {
   InitialState,
-  useLinking,
-  NavigationContainerRef,
   NavigationContainer,
   DefaultTheme,
   DarkTheme,
@@ -42,7 +41,9 @@ import {
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 
+import AsyncStorage from './AsyncStorage';
 import LinkingPrefixes from './LinkingPrefixes';
+import SettingsItem from './Shared/SettingsItem';
 import SimpleStack from './Screens/SimpleStack';
 import ModalPresentationStack from './Screens/ModalPresentationStack';
 import StackTransparent from './Screens/StackTransparent';
@@ -53,12 +54,16 @@ import MaterialBottomTabs from './Screens/MaterialBottomTabs';
 import DynamicTabs from './Screens/DynamicTabs';
 import AuthFlow from './Screens/AuthFlow';
 import CompatAPI from './Screens/CompatAPI';
-import SettingsItem from './Shared/SettingsItem';
+import MasterDetail from './Screens/MasterDetail';
+import LinkComponent from './Screens/LinkComponent';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
 enableScreens();
 
+// @ts-ignore
+global.REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED = true;
+
 type RootDrawerParamList = {
   Root: undefined;
   Another: undefined;
@@ -97,6 +102,10 @@ const SCREENS = {
     title: 'Dynamic Tabs',
     component: DynamicTabs,
   },
+  MasterDetail: {
+    title: 'Master Detail',
+    component: MasterDetail,
+  },
   AuthFlow: {
     title: 'Auth Flow',
     component: AuthFlow,
@@ -105,6 +114,10 @@ const SCREENS = {
     title: 'Compat Layer',
     component: CompatAPI,
   },
+  LinkComponent: {
+    title: '<Link />',
+    component: LinkComponent,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
@@ -116,36 +129,6 @@ const THEME_PERSISTENCE_KEY = 'THEME_TYPE';
 Asset.loadAsync(StackAssets);
 
 export default function App() {
-  const containerRef = React.useRef<NavigationContainerRef>();
-
-  // To test deep linking on, run the following in the Terminal:
-  // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
-  // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
-  // Android (bare): adb shell am start -a android.intent.action.VIEW -d "rne://127.0.0.1:19000/--/simple-stack"
-  // iOS (bare): xcrun simctl openurl booted rne://127.0.0.1:19000/--/simple-stack
-  // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
-  const { getInitialState } = useLinking(containerRef, {
-    prefixes: LinkingPrefixes,
-    config: {
-      Root: {
-        path: '',
-        initialRouteName: 'Home',
-        screens: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
-          (acc, name) => {
-            // Convert screen names such as SimpleStack to kebab case (simple-stack)
-            acc[name] = name
-              .replace(/([A-Z]+)/g, '-$1')
-              .replace(/^-/, '')
-              .toLowerCase();
-
-            return acc;
-          },
-          { Home: '' }
-        ),
-      },
-    },
-  });
-
   const [theme, setTheme] = React.useState(DefaultTheme);
 
   const [isReady, setIsReady] = React.useState(false);
@@ -156,17 +139,18 @@ export default function App() {
   React.useEffect(() => {
     const restoreState = async () => {
       try {
-        let state = await getInitialState();
+        const initialUrl = await Linking.getInitialURL();
 
-        if (Platform.OS !== 'web' && state === undefined) {
+        if (Platform.OS !== 'web' || initialUrl === null) {
           const savedState = await AsyncStorage.getItem(
             NAVIGATION_PERSISTENCE_KEY
           );
-          state = savedState ? JSON.parse(savedState) : undefined;
-        }
 
-        if (state !== undefined) {
-          setInitialState(state);
+          const state = savedState ? JSON.parse(savedState) : undefined;
+
+          if (state !== undefined) {
+            setInitialState(state);
+          }
         }
       } finally {
         try {
@@ -182,7 +166,7 @@ export default function App() {
     };
 
     restoreState();
-  }, [getInitialState]);
+  }, []);
 
   const paperTheme = React.useMemo(() => {
     const t = theme.dark ? PaperDarkTheme : PaperLightTheme;
@@ -214,7 +198,7 @@ export default function App() {
     return null;
   }
 
-  const isLargeScreen = dimensions.width > 900;
+  const isLargeScreen = dimensions.width >= 1024;
 
   return (
     <PaperProvider theme={paperTheme}>
@@ -222,7 +206,6 @@ export default function App() {
         <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
       )}
       <NavigationContainer
-        ref={containerRef}
         initialState={initialState}
         onStateChange={(state) =>
           AsyncStorage.setItem(
@@ -231,6 +214,50 @@ export default function App() {
           )
         }
         theme={theme}
+        linking={{
+          // To test deep linking on, run the following in the Terminal:
+          // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
+          // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
+          // Android (bare): adb shell am start -a android.intent.action.VIEW -d "rne://127.0.0.1:19000/--/simple-stack"
+          // iOS (bare): xcrun simctl openurl booted rne://127.0.0.1:19000/--/simple-stack
+          // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
+          prefixes: LinkingPrefixes,
+          config: {
+            Root: {
+              path: '',
+              initialRouteName: 'Home',
+              screens: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
+                (acc, name) => {
+                  // Convert screen names such as SimpleStack to kebab case (simple-stack)
+                  acc[name] = name
+                    .replace(/([A-Z]+)/g, '-$1')
+                    .replace(/^-/, '')
+                    .toLowerCase();
+
+                  return acc;
+                },
+                { Home: '' }
+              ),
+            },
+            Article: {
+              path: 'article/:author?',
+              parse: {
+                author: (author) =>
+                  author.charAt(0).toUpperCase() +
+                  author.slice(1).replace(/-/g, ' '),
+              },
+              stringify: {
+                author: (author: string) =>
+                  author.toLowerCase().replace(/\s/g, '-'),
+              },
+            },
+            Albums: 'music',
+            Chat: 'chat',
+            Contacts: 'people',
+            NewsFeed: 'feed',
+          },
+        }}
+        fallback={<Text>Loading…</Text>}
       >
         <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
           <Drawer.Screen
@@ -306,6 +333,7 @@ export default function App() {
                         (name) => (
                           <List.Item
                             key={name}
+                            testID={name}
                             title={SCREENS[name].title}
                             onPress={() => navigation.navigate(name)}
                           />

example/web/_redirects

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

example/webpack.config.js

@@ -24,19 +24,21 @@ module.exports = async function (env, argv) {
   );
 
   Object.assign(config.resolve.alias, {
-    react: path.resolve(node_modules, 'react'),
+    'react': path.resolve(node_modules, 'react'),
     'react-native': path.resolve(node_modules, 'react-native-web'),
     'react-native-web': path.resolve(node_modules, 'react-native-web'),
     '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
   });
 
-  fs.readdirSync(packages).forEach((name) => {
-    config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-      packages,
-      name,
-      'src'
-    );
-  });
+  fs.readdirSync(packages)
+    .filter((name) => !name.startsWith('.'))
+    .forEach((name) => {
+      config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
+        packages,
+        name,
+        require(`../packages/${name}/package.json`).source
+      );
+    });
 
   return config;
 };

netlify.toml

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

package.json

@@ -13,12 +13,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/satya164/react-navigation.git"
+    "url": "git+https://github.com/react-navigation/react-navigation.git"
   },
   "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/), Michał Osadnik <micosa97@gmail.com> (https://github.com/osdnk/)",
   "scripts": {
     "lint": "eslint --ext '.js,.ts,.tsx' .",
-    "typescript": "tsc --noEmit",
+    "typescript": "tsc --noEmit --composite false",
     "test": "jest",
     "prerelease": "lerna run clean",
     "release": "lerna publish",
@@ -26,25 +26,25 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-flow": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
-    "@babel/runtime": "^7.8.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-flow": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@babel/runtime": "^7.9.6",
     "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^25.1.4",
+    "@types/jest": "^25.2.1",
+    "babel-jest": "^26.0.1",
     "codecov": "^3.6.5",
     "commitlint": "^8.3.5",
-    "core-js": "^3.6.4",
-    "detox": "^16.0.0",
+    "core-js": "^3.6.5",
     "eslint": "^6.8.0",
-    "eslint-config-satya164": "^3.1.5",
-    "husky": "^4.2.3",
-    "jest": "^25.1.0",
+    "eslint-config-satya164": "^3.1.7",
+    "husky": "^4.2.5",
+    "jest": "^26.0.1",
     "lerna": "^3.20.2",
-    "prettier": "^2.0.1",
-    "typescript": "^3.7.5"
+    "prettier": "^2.0.5",
+    "typescript": "^3.8.3"
   },
   "resolutions": {
     "react": "~16.9.0",

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.6...@react-navigation/bottom-tabs@5.4.7) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.6](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.5...@react-navigation/bottom-tabs@5.4.6) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.5](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.4...@react-navigation/bottom-tabs@5.4.5) (2020-05-16)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.3...@react-navigation/bottom-tabs@5.4.4) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.2...@react-navigation/bottom-tabs@5.4.3) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.1...@react-navigation/bottom-tabs@5.4.2) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.0...@react-navigation/bottom-tabs@5.4.1) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.4...@react-navigation/bottom-tabs@5.4.0) (2020-05-08)
+
+
+### Features
+
+* add generic type aliases for screen props ([bea14aa](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/bea14aa26fd5cbfebc7973733c5cf1f44fd323aa)), closes [#7971](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/7971)
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.3...@react-navigation/bottom-tabs@5.3.4) (2020-05-05)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.2...@react-navigation/bottom-tabs@5.3.3) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.1...@react-navigation/bottom-tabs@5.3.2) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.0...@react-navigation/bottom-tabs@5.3.1) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.8...@react-navigation/bottom-tabs@5.3.0) (2020-04-30)
+
+
+### Features
+
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/942d2be2c72720469475ce12ec8df23825994dbf))
+
+
+
+
+
+## [5.2.8](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.7...@react-navigation/bottom-tabs@5.2.8) (2020-04-27)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.6...@react-navigation/bottom-tabs@5.2.7) (2020-04-17)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.2.6](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.5...@react-navigation/bottom-tabs@5.2.6) (2020-04-08)
+
+
+### Bug Fixes
+
+* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
+
+
+
+
+
+## [5.2.5](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.4...@react-navigation/bottom-tabs@5.2.5) (2020-03-30)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 ## [5.2.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.3...@react-navigation/bottom-tabs@5.2.4) (2020-03-23)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.2.4",
+  "version": "5.4.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -15,6 +15,7 @@
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -34,17 +35,17 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.1.3",
+    "@react-native-community/bob": "^0.14.3",
+    "@react-navigation/native": "^5.4.2",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.3.0",
-    "typescript": "^3.7.5"
+    "react-native-screens": "^2.7.0",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/bottom-tabs/src/index.tsx

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

packages/bottom-tabs/src/types.tsx

@@ -4,6 +4,7 @@ import {
   StyleProp,
   TextStyle,
   ViewStyle,
+  GestureResponderEvent,
 } from 'react-native';
 import {
   NavigationHelpers,
@@ -12,6 +13,7 @@ import {
   Descriptor,
   TabNavigationState,
   TabActionHelpers,
+  RouteProp,
 } from '@react-navigation/native';
 
 export type BottomTabNavigationEventMap = {
@@ -44,6 +46,14 @@ export type BottomTabNavigationProp<
 > &
   TabActionHelpers<ParamList>;
 
+export type BottomTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = {
+  navigation: BottomTabNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
 export type BottomTabNavigationOptions = {
   /**
    * Title text for the screen.
@@ -138,7 +148,7 @@ export type BottomTabBarOptions = {
    */
   inactiveTintColor?: string;
   /**
-   * Background olor for the active tab.
+   * Background color for the active tab.
    */
   activeBackgroundColor?: string;
   /**
@@ -196,6 +206,13 @@ export type BottomTabBarProps = BottomTabBarOptions & {
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
 };
 
-export type BottomTabBarButtonProps = TouchableWithoutFeedbackProps & {
+export type BottomTabBarButtonProps = Omit<
+  TouchableWithoutFeedbackProps,
+  'onPress'
+> & {
+  to?: string;
   children: React.ReactNode;
+  onPress?: (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => void;
 };

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

@@ -14,6 +14,7 @@ import {
   NavigationRouteContext,
   CommonActions,
   useTheme,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import { useSafeArea } from 'react-native-safe-area-context';
 
@@ -50,6 +51,7 @@ export default function BottomTabBar({
   tabStyle,
 }: Props) {
   const { colors } = useTheme();
+  const buildLink = useLinkBuilder();
 
   const [dimensions, setDimensions] = React.useState(() => {
     const { height = 0, width = 0 } = Dimensions.get('window');
@@ -260,6 +262,7 @@ export default function BottomTabBar({
                   onPress={onPress}
                   onLongPress={onLongPress}
                   accessibilityLabel={accessibilityLabel}
+                  to={buildLink(route.name, route.params)}
                   testID={options.tabBarTestID}
                   allowFontScaling={allowFontScaling}
                   activeTintColor={activeTintColor}

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

@@ -4,11 +4,13 @@ import {
   TouchableWithoutFeedback,
   Animated,
   StyleSheet,
+  Platform,
   StyleProp,
   ViewStyle,
   TextStyle,
+  GestureResponderEvent,
 } from 'react-native';
-import { Route, useTheme } from '@react-navigation/native';
+import { Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 
 import TabBarIcon from './TabBarIcon';
@@ -37,6 +39,10 @@ type Props = {
     size: number;
     color: string;
   }) => React.ReactNode;
+  /**
+   * URL to use for the link to the tab.
+   */
+  to?: string;
   /**
    * The button for the tab. Uses a `TouchableWithoutFeedback` by default.
    */
@@ -50,13 +56,16 @@ type Props = {
    */
   testID?: string;
   /**
-   * Function to execute on press.
+   * Function to execute on press in React Native.
+   * On the web, this will use onClick.
    */
-  onPress: () => void;
+  onPress: (
+    e: React.MouseEvent<HTMLElement, MouseEvent> | GestureResponderEvent
+  ) => void;
   /**
    * Function to execute on long press.
    */
-  onLongPress: () => void;
+  onLongPress: (e: GestureResponderEvent) => void;
   /**
    * Whether the label should be aligned with the icon horizontally.
    */
@@ -104,11 +113,48 @@ export default function BottomTabBarItem({
   route,
   label,
   icon,
-  button = ({ children, style, ...rest }: BottomTabBarButtonProps) => (
-    <TouchableWithoutFeedback {...rest}>
-      <View style={style}>{children}</View>
-    </TouchableWithoutFeedback>
-  ),
+  to,
+  button = ({
+    children,
+    style,
+    onPress,
+    to,
+    accessibilityRole,
+    ...rest
+  }: BottomTabBarButtonProps) => {
+    if (Platform.OS === 'web' && to) {
+      // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
+      // We need to use `onClick` to be able to prevent default browser handling of links.
+      return (
+        <Link
+          {...rest}
+          to={to}
+          style={[styles.button, style]}
+          onPress={(e: any) => {
+            if (
+              !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+              (e.button == null || e.button === 0) // ignore everything but left clicks
+            ) {
+              e.preventDefault();
+              onPress?.(e);
+            }
+          }}
+        >
+          {children}
+        </Link>
+      );
+    } else {
+      return (
+        <TouchableWithoutFeedback
+          {...rest}
+          accessibilityRole={accessibilityRole}
+          onPress={onPress}
+        >
+          <View style={style}>{children}</View>
+        </TouchableWithoutFeedback>
+      );
+    }
+  },
   accessibilityLabel,
   testID,
   onPress,
@@ -196,6 +242,7 @@ export default function BottomTabBarItem({
     : inactiveBackgroundColor;
 
   return button({
+    to,
     onPress,
     onLongPress,
     testID,
@@ -248,4 +295,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     marginLeft: 20,
   },
+  button: {
+    display: 'flex',
+  },
 });

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

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

packages/compat/CHANGELOG.md

@@ -3,6 +3,152 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.23](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.22...@react-navigation/compat@5.1.23) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.22](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.21...@react-navigation/compat@5.1.22) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.21](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.20...@react-navigation/compat@5.1.21) (2020-05-16)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.20](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.19...@react-navigation/compat@5.1.20) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.19](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.18...@react-navigation/compat@5.1.19) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.18](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.17...@react-navigation/compat@5.1.18) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.17](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.16...@react-navigation/compat@5.1.17) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+## [5.1.16](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.15...@react-navigation/compat@5.1.16) (2020-05-08)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.15](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.14...@react-navigation/compat@5.1.15) (2020-05-05)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.14](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.13...@react-navigation/compat@5.1.14) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.13](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.12...@react-navigation/compat@5.1.13) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.12](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.11...@react-navigation/compat@5.1.12) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.11](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.10...@react-navigation/compat@5.1.11) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.10](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.9...@react-navigation/compat@5.1.10) (2020-04-27)
+
+
+### Bug Fixes
+
+* fix typo in navigationOptions ([8cbb201](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/8cbb201f1a7fb90e45a078df6bc42ce4771cc6a6))
+* spread parent params to children in compat navigator ([24febf6](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/24febf6ea99be2e5f22005fdd2a82136d647255c)), closes [#6785](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/6785)
+
+
+
+
+
+## [5.1.9](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.8...@react-navigation/compat@5.1.9) (2020-04-17)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.8](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.7...@react-navigation/compat@5.1.8) (2020-04-08)
+
+
+### Bug Fixes
+
+* use 1 as default in compatibility pop action ([4408117](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/44081172d440c713ad3543a2d5e1e18ebc8f72a4))
+
+
+
+
+
+## [5.1.7](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.6...@react-navigation/compat@5.1.7) (2020-03-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.5...@react-navigation/compat@5.1.6) (2020-03-23)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.1.6",
+  "version": "5.1.23",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
   "bugs": {
@@ -10,6 +10,7 @@
   "homepage": "https://reactnavigation.org/docs/compatibility.html",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -25,11 +26,11 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.1.3",
-    "@types/react": "^16.9.23",
+    "@react-native-community/bob": "^0.14.3",
+    "@react-navigation/native": "^5.4.2",
+    "@types/react": "^16.9.34",
     "react": "~16.9.0",
-    "typescript": "^3.7.5"
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -7,6 +7,7 @@ import {
   NavigationProp,
   RouteProp,
   EventMapBase,
+  NavigationRouteContext,
 } from '@react-navigation/native';
 import CompatScreen from './CompatScreen';
 import ScreenPropsContext from './ScreenPropsContext';
@@ -67,6 +68,9 @@ export default function createCompatNavigatorFactory<
     const routeNames = order !== undefined ? order : Object.keys(routeConfig);
 
     function Navigator({ screenProps }: { screenProps?: unknown }) {
+      const parentRouteParams = React.useContext(NavigationRouteContext)
+        ?.params;
+
       const screens = React.useMemo(
         () =>
           routeNames.map((name) => {
@@ -135,7 +139,7 @@ export default function createCompatNavigatorFactory<
               <Pair.Screen
                 key={name}
                 name={name}
-                initialParams={initialParams}
+                initialParams={{ ...parentRouteParams, ...initialParams }}
                 options={screenOptions}
               >
                 {({ navigation, route }) => (
@@ -148,7 +152,7 @@ export default function createCompatNavigatorFactory<
               </Pair.Screen>
             );
           }),
-        [screenProps]
+        [parentRouteParams, screenProps]
       );
 
       return (
@@ -163,7 +167,7 @@ export default function createCompatNavigatorFactory<
       );
     }
 
-    Navigator.navigationOtions = parentNavigationOptions;
+    Navigator.navigationOptions = parentNavigationOptions;
 
     return Navigator;
   };

packages/compat/src/helpers.tsx

@@ -57,7 +57,7 @@ export function push(routeName: string, params?: object, action?: never) {
   });
 }
 
-export function pop(n: number) {
+export function pop(n: number = 1) {
   return StackActions.pop(typeof n === 'number' ? { n } : n);
 }
 

packages/core/CHANGELOG.md

@@ -3,6 +3,168 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.8.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.8.0...@react-navigation/core@5.8.1) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+# [5.8.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.7.0...@react-navigation/core@5.8.0) (2020-05-20)
+
+
+### Features
+
+* add getCurrentOptions ([#8277](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8277)) ([d024ec6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/d024ec6d74dffe481ce6fde732c729e20c1668f4))
+* add getCurrentRoute ([#8254](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8254)) ([7b25c8e](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/7b25c8eb2e6f96128fd86b92615346ce55bedeca))
+
+
+
+
+
+# [5.7.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.6.1...@react-navigation/core@5.7.0) (2020-05-16)
+
+
+### Bug Fixes
+
+* don't use Object.fromEntries ([51f4d11](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/51f4d11fdf4bd2bb06f8cd4094f051816590e62c))
+
+
+### Features
+
+* add a PathConfig type ([60cb3c9](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/60cb3c9ba76d7ef166c9fe8b55f23728975b5b6e))
+
+
+
+
+
+## [5.6.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.6.0...@react-navigation/core@5.6.1) (2020-05-14)
+
+
+### Bug Fixes
+
+* don't use flat since it's not supported in node ([21b397f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/21b397f0d6b96ec4875d3172f47533130bb08009))
+
+
+
+
+
+# [5.6.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.5.2...@react-navigation/core@5.6.0) (2020-05-14)
+
+
+### Bug Fixes
+
+* ignore extra slashes in the pattern ([3c47716](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/3c47716826d0dfa69dfa6112141c116723372ea1))
+* ignore state updates when we're not mounted ([0149e85](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/0149e85a95b90c6a9d487fa753ddbf5d01c03e3d)), closes [#8226](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8226)
+
+
+### Features
+
+* merge path patterns for nested screens ([#8253](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8253)) ([acc9646](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/acc9646426fee53558d686dfbe5fd0e35361d8c0))
+
+
+
+
+
+## [5.5.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.5.1...@react-navigation/core@5.5.2) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+## [5.5.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.5.0...@react-navigation/core@5.5.1) (2020-05-08)
+
+
+### Bug Fixes
+
+* avoid cleaning up state when a new navigator is mounted. fixes [#8195](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8195) ([f6d0676](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f6d06768d3c36d1f5beaffcb660f3c259209f2e7))
+
+
+
+
+
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.4.0...@react-navigation/core@5.5.0) (2020-05-05)
+
+
+### Features
+
+* add support for optional params to linking ([#8196](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8196)) ([fcd1cc6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/fcd1cc64c151e4941f3f544a54b5048d853821f6))
+* support params anywhere in path segement ([#8184](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8184)) ([3999fc2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/3999fc28365c3a06a17d963c7be7fb7e897f99e0))
+
+
+
+
+
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.5...@react-navigation/core@5.4.0) (2020-04-30)
+
+
+### Bug Fixes
+
+* handle empty paths when parsing ([c3fa83e](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c3fa83efe0d73db76365f8be3d6a8ca1d1289b71))
+* parsing url ([bd35b4f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/bd35b4fc202c3868fb75c3675b62de67557089e1))
+
+
+### Features
+
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.4...@react-navigation/core@5.3.5) (2020-04-27)
+
+
+### Bug Fixes
+
+* add config to enable redux devtools integration ([c9c825b](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c9c825bee61426635a28ee149eeeff3d628171cd))
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.3...@react-navigation/core@5.3.4) (2020-04-17)
+
+
+### Bug Fixes
+
+* add initial option for navigating to nested navigators ([004c7d7](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/004c7d7ab1f80faf04b2a1836ec6b79a5419e45f))
+* add initial param for actions from deep link ([a3f7a5f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/a3f7a5feba2e6aa2158aeaea6cde73ae1603173e))
+* handle initial: false for nested route after first initialization ([187aefe](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/187aefe9c400b499f920c212bf856414e25c5aaf))
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.2...@react-navigation/core@5.3.3) (2020-04-08)
+
+
+### Bug Fixes
+
+* switch order of focus and blur events. closes [#7963](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7963) ([ce3994c](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/ce3994c82c28669d5742017eb7627e9adf996933))
+* workaround warning about setState in another component in render ([d4fd906](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/d4fd906915cc20d6fb21508384c05a540d8644d8))
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.1...@react-navigation/core@5.3.2) (2020-03-30)
+
+
+### Bug Fixes
+
+* handle no path property and undefined query params ([#7911](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7911)) ([cd47915](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/cd47915861a56cd7eaa9ac79f5139cde56ca95a7))
+
+
+
+
+
 ## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.0...@react-navigation/core@5.3.1) (2020-03-23)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.3.1",
+  "version": "5.8.1",
   "keywords": [
     "react",
     "react-native",
@@ -15,6 +15,7 @@
   "homepage": "https://reactnavigation.org",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -29,24 +30,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.2.0",
-    "escape-string-regexp": "^2.0.0",
-    "query-string": "^6.11.1",
+    "@react-navigation/routers": "^5.4.6",
+    "escape-string-regexp": "^4.0.0",
+    "nanoid": "^3.1.5",
+    "query-string": "^6.12.1",
     "react-is": "^16.13.0",
-    "shortid": "^2.2.15",
     "use-subscription": "^1.4.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@types/react": "^16.9.23",
+    "@react-native-community/bob": "^0.14.3",
+    "@types/react": "^16.9.34",
     "@types/react-is": "^16.7.1",
-    "@types/shortid": "^0.0.29",
     "@types/use-subscription": "^1.0.0",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
-    "react-native-testing-library": "^1.12.0",
-    "react-test-renderer": "~16.9.0",
-    "typescript": "^3.7.5"
+    "react-native-testing-library": "^1.13.2",
+    "react-test-renderer": "~16.13.1",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "react": "*"

packages/core/src/BaseNavigationContainer.tsx

@@ -9,17 +9,22 @@ import {
 } from '@react-navigation/routers';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationBuilderContext from './NavigationBuilderContext';
+import { ScheduleUpdateContext } from './useScheduleUpdate';
 import useFocusedListeners from './useFocusedListeners';
 import useDevTools from './useDevTools';
 import useStateGetters from './useStateGetters';
+import useOptionsGetters from './useOptionsGetters';
+import useEventEmitter from './useEventEmitter';
+import useSyncState from './useSyncState';
 import isSerializable from './isSerializable';
 
 import { NavigationContainerRef, NavigationContainerProps } from './types';
-import useEventEmitter from './useEventEmitter';
-import useSyncState from './useSyncState';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
+const DEVTOOLS_CONFIG_KEY =
+  'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED';
+
 const MISSING_CONTEXT_ERROR =
   "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
 
@@ -35,6 +40,10 @@ export const NavigationStateContext = React.createContext<{
   setState: (
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
+  addOptionsGetter?: (
+    key: string,
+    getter: () => object | undefined | null
+  ) => void;
 }>({
   isDefault: true,
 
@@ -102,7 +111,7 @@ const BaseNavigationContainer = React.forwardRef(
       independent,
       children,
     }: NavigationContainerProps,
-    ref: React.Ref<NavigationContainerRef>
+    ref?: React.Ref<NavigationContainerRef>
   ) {
     const parent = React.useContext(NavigationStateContext);
 
@@ -112,7 +121,13 @@ const BaseNavigationContainer = React.forwardRef(
       );
     }
 
-    const [state, getState, setState] = useSyncState<State>(() =>
+    const [
+      state,
+      getState,
+      setState,
+      scheduleUpdate,
+      flushUpdates,
+    ] = useSyncState<State>(() =>
       getPartialState(initialState == null ? undefined : initialState)
     );
 
@@ -136,7 +151,9 @@ const BaseNavigationContainer = React.forwardRef(
     );
 
     const { trackState, trackAction } = useDevTools({
-      enabled: false,
+      enabled:
+        // @ts-ignore
+        DEVTOOLS_CONFIG_KEY in global ? global[DEVTOOLS_CONFIG_KEY] : false,
       name: '@react-navigation',
       reset,
       state,
@@ -187,8 +204,21 @@ const BaseNavigationContainer = React.forwardRef(
       return getStateForRoute('root');
     }, [getStateForRoute]);
 
+    const getCurrentRoute = React.useCallback(() => {
+      let state = getRootState();
+      if (state === undefined) {
+        return undefined;
+      }
+      while (state.routes[state.index].state !== undefined) {
+        state = state.routes[state.index].state as NavigationState;
+      }
+      return state.routes[state.index];
+    }, [getRootState]);
+
     const emitter = useEventEmitter();
 
+    const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({});
+
     React.useImperativeHandle(ref, () => ({
       ...(Object.keys(CommonActions) as (keyof typeof CommonActions)[]).reduce<
         any
@@ -207,6 +237,10 @@ const BaseNavigationContainer = React.forwardRef(
       dispatch,
       canGoBack,
       getRootState,
+      dangerouslyGetState: () => state,
+      dangerouslyGetParent: () => undefined,
+      getCurrentRoute,
+      getCurrentOptions,
     }));
 
     const builderContext = React.useMemo(
@@ -218,6 +252,11 @@ const BaseNavigationContainer = React.forwardRef(
       [addFocusedListener, trackAction, addStateGetter]
     );
 
+    const scheduleContext = React.useMemo(
+      () => ({ scheduleUpdate, flushUpdates }),
+      [scheduleUpdate, flushUpdates]
+    );
+
     const context = React.useMemo(
       () => ({
         state,
@@ -225,8 +264,9 @@ const BaseNavigationContainer = React.forwardRef(
         setState,
         getKey,
         setKey,
+        addOptionsGetter,
       }),
-      [getKey, getState, setKey, setState, state]
+      [getKey, getState, setKey, setState, state, addOptionsGetter]
     );
 
     React.useEffect(() => {
@@ -263,11 +303,13 @@ const BaseNavigationContainer = React.forwardRef(
     }, [onStateChange, trackState, getRootState, emitter, state]);
 
     return (
-      <NavigationBuilderContext.Provider value={builderContext}>
-        <NavigationStateContext.Provider value={context}>
-          <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-        </NavigationStateContext.Provider>
-      </NavigationBuilderContext.Provider>
+      <ScheduleUpdateContext.Provider value={scheduleContext}>
+        <NavigationBuilderContext.Provider value={builderContext}>
+          <NavigationStateContext.Provider value={context}>
+            <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+          </NavigationStateContext.Provider>
+        </NavigationBuilderContext.Provider>
+      </ScheduleUpdateContext.Provider>
     );
   }
 );

packages/core/src/NavigationHelpersContext.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ParamListBase } from '@react-navigation/routers';
+import { NavigationHelpers } from './types';
+
+/**
+ * Context which holds the navigation helpers of the parent navigator.
+ * Navigators should use this context in their view component.
+ */
+const NavigationHelpersContext = React.createContext<
+  NavigationHelpers<ParamListBase> | undefined
+>(undefined);
+
+export default NavigationHelpersContext;

packages/core/src/SceneView.tsx

@@ -11,6 +11,7 @@ import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import { NavigationProp, RouteConfig, EventMapBase } from './types';
+import useOptionsGetters from './useOptionsGetters';
 
 type Props<
   State extends NavigationState,
@@ -24,6 +25,7 @@ type Props<
   };
   getState: () => State;
   setState: (state: State) => void;
+  options: object;
 };
 
 /**
@@ -40,11 +42,24 @@ export default function SceneView<
   navigation,
   getState,
   setState,
+  options,
 }: Props<State, ScreenOptions, EventMap>) {
   const navigatorKeyRef = React.useRef<string | undefined>();
-
   const getKey = React.useCallback(() => navigatorKeyRef.current, []);
 
+  const optionsRef = React.useRef<object | undefined>(options);
+
+  React.useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  const getOptions = React.useCallback(() => optionsRef.current, []);
+
+  const { addOptionsGetter } = useOptionsGetters({
+    key: route.key,
+    getOptions,
+  });
+
   const setKey = React.useCallback((key: string) => {
     navigatorKeyRef.current = key;
   }, []);
@@ -77,8 +92,16 @@ export default function SceneView<
       setState: setCurrentState,
       getKey,
       setKey,
+      addOptionsGetter,
     }),
-    [getCurrentState, getKey, route.state, setCurrentState, setKey]
+    [
+      getCurrentState,
+      getKey,
+      route.state,
+      setCurrentState,
+      setKey,
+      addOptionsGetter,
+    ]
   );
 
   return (

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

@@ -35,8 +35,10 @@ it('gets navigate action from state', () => {
             author: 'jane',
           },
           screen: 'qux',
+          initial: true,
         },
         screen: 'bar',
+        initial: true,
       },
     },
     type: 'NAVIGATE',
@@ -70,9 +72,11 @@ it('gets navigate action from state', () => {
     payload: {
       name: 'foo',
       params: {
+        initial: true,
         screen: 'bar',
         params: {
           screen: 'quz',
+          initial: false,
         },
       },
     },

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

@@ -117,7 +117,8 @@ it("doesn't add query param for empty params", () => {
 });
 
 it('handles state with config with nested screens', () => {
-  const path = '/foe/bar/sweet/apple/baz/jane?answer=42&count=10&valid=true';
+  const path =
+    '/foo/foe/bar/sweet/apple/baz/jane?answer=42&count=10&valid=true';
   const config = {
     Foo: {
       path: 'foo',
@@ -182,8 +183,77 @@ it('handles state with config with nested screens', () => {
   expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
+it('handles state with config with nested screens and exact', () => {
+  const path = '/foe/bar/sweet/apple/baz/jane?answer=42&count=10&valid=true';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+          exact: true,
+        },
+      },
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) =>
+          author.replace(/^\w/, (c) => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+      },
+      stringify: {
+        author: (author: string) => author.toLowerCase(),
+        id: (id: number) => `x${id}`,
+        unknown: (_: unknown) => 'x',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Bar',
+                    params: { fruit: 'apple', type: 'sweet' },
+                    state: {
+                      routes: [
+                        {
+                          name: 'Baz',
+                          params: {
+                            author: 'Jane',
+                            count: '10',
+                            answer: '42',
+                            valid: true,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
 it('handles state with config with nested screens and unused configs', () => {
-  const path = '/foe/baz/jane?answer=42&count=10&valid=true';
+  const path = '/foo/foe/baz/jane?answer=42&count=10&valid=true';
   const config = {
     Foo: {
       path: 'foo',
@@ -239,6 +309,66 @@ it('handles state with config with nested screens and unused configs', () => {
   expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
+it('handles state with config with nested screens and unused configs with exact', () => {
+  const path = '/foe/baz/jane?answer=42&count=10&valid=true';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+          exact: true,
+        },
+      },
+    },
+    Baz: {
+      path: 'baz/:author',
+      parse: {
+        author: (author: string) =>
+          author.replace(/^\w/, (c) => c.toUpperCase()),
+        count: Number,
+        valid: Boolean,
+      },
+      stringify: {
+        author: (author: string) =>
+          author.replace(/^\w/, (c) => c.toLowerCase()),
+        unknown: (_: unknown) => 'x',
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    params: {
+                      author: 'Jane',
+                      count: 10,
+                      answer: '42',
+                      valid: true,
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
 it('handles nested object with stringify in it', () => {
   const path = '/bar/sweet/apple/foo/bis/jane?answer=42&count=10&valid=true';
   const config = {
@@ -252,7 +382,6 @@ it('handles nested object with stringify in it', () => {
     },
     Bar: 'bar/:type/:fruit',
     Baz: {
-      path: 'baz',
       screens: {
         Bos: 'bos',
         Bis: {
@@ -312,8 +441,82 @@ it('handles nested object with stringify in it', () => {
   expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
+it('handles nested object with stringify in it with exact', () => {
+  const path = '/bar/sweet/apple/foo/bis/jane?answer=42&count=10&valid=true';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+        },
+      },
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz',
+      screens: {
+        Bos: 'bos',
+        Bis: {
+          path: 'bis/:author',
+          exact: true,
+          stringify: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toLowerCase()),
+          },
+          parse: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toUpperCase()),
+            count: Number,
+            valid: Boolean,
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Bis',
+                          params: {
+                            author: 'Jane',
+                            count: 10,
+                            answer: '42',
+                            valid: true,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
 it('handles nested object for second route depth', () => {
-  const path = '/baz';
+  const path = '/foo/bar/baz';
   const config = {
     Foo: {
       path: 'foo',
@@ -351,7 +554,95 @@ it('handles nested object for second route depth', () => {
   expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
-it('handles nested object for second route depth and and path and stringify in roots', () => {
+it('handles nested object for second route depth with exact', () => {
+  const path = '/baz';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: 'foe',
+        Bar: {
+          path: 'bar',
+          screens: {
+            Baz: {
+              path: 'baz',
+              exact: true,
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('handles nested object for second route depth and path and stringify in roots', () => {
+  const path = '/foo/dathomir/bar/42/baz';
+  const config = {
+    Foo: {
+      path: 'foo/:planet',
+      stringify: {
+        id: (id: number) => `planet=${id}`,
+      },
+      screens: {
+        Foe: 'foe',
+        Bar: {
+          path: 'bar/:id',
+          parse: {
+            id: Number,
+          },
+          screens: {
+            Baz: 'baz',
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        params: { planet: 'dathomir' },
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz', params: { id: 42 } }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('handles nested object for second route depth and path and stringify in roots with exact', () => {
   const path = '/baz';
   const config = {
     Foo: {
@@ -370,7 +661,10 @@ it('handles nested object for second route depth and and path and stringify in r
             id: Number,
           },
           screens: {
-            Baz: 'baz',
+            Baz: {
+              path: 'baz',
+              exact: true,
+            },
           },
         },
       },
@@ -426,8 +720,51 @@ it('ignores empty string paths', () => {
   expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
+it('keeps query params if path is empty', () => {
+  const path = '/?foo=42';
+  const config = {
+    Foo: {
+      screens: {
+        Foe: 'foe',
+        Bar: {
+          screens: {
+            Qux: {
+              path: '',
+              parse: { foo: Number },
+            },
+            Baz: 'baz',
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Qux', params: { foo: 42 } }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toEqual(
+    path
+  );
+});
+
 it('cuts nested configs too', () => {
-  const path = '/baz';
+  const path = '/foo/baz';
   const config = {
     Foo: {
       path: 'foo',
@@ -435,7 +772,48 @@ it('cuts nested configs too', () => {
         Bar: '',
       },
     },
-    Baz: { path: 'baz' },
+    Baz: {
+      path: 'baz',
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Bar',
+              state: {
+                routes: [{ name: 'Baz' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('cuts nested configs too with exact', () => {
+  const path = '/baz';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Bar: {
+          path: '',
+          exact: true,
+        },
+      },
+    },
+    Baz: {
+      path: 'baz',
+    },
   };
 
   const state = {
@@ -461,7 +839,7 @@ it('cuts nested configs too', () => {
 });
 
 it('handles empty path at the end', () => {
-  const path = '/bar';
+  const path = '/foo/bar';
   const config = {
     Foo: {
       path: 'foo',
@@ -495,6 +873,8 @@ it('handles empty path at the end', () => {
 });
 
 it('returns "/" for empty path', () => {
+  const path = '/';
+
   const config = {
     Foo: {
       path: '',
@@ -519,5 +899,369 @@ it('returns "/" for empty path', () => {
     ],
   };
 
-  expect(getPathFromState(state, config)).toBe('/');
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('parses no path specified', () => {
+  const path = '/Foo/bar';
+  const config = {
+    Foo: {
+      screens: {
+        Foe: {},
+      },
+    },
+    Bar: 'bar',
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [{ name: 'Bar' }],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('parses no path specified in nested config', () => {
+  const path = '/Foo/Foe/bar';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {},
+      },
+    },
+    Bar: 'bar',
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Foo',
+        state: {
+          routes: [
+            {
+              name: 'Foe',
+              state: {
+                routes: [{ name: 'Bar' }],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('strips undefined query params', () => {
+  const path = '/bar/sweet/apple/foo/bis/jane?count=10&valid=true';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+        },
+      },
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      screens: {
+        Bos: 'bos',
+        Bis: {
+          path: 'bis/:author',
+          stringify: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toLowerCase()),
+          },
+          parse: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toUpperCase()),
+            count: Number,
+            valid: Boolean,
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Bis',
+                          params: {
+                            author: 'Jane',
+                            count: 10,
+                            valid: true,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('strips undefined query params with exact', () => {
+  const path = '/bar/sweet/apple/foo/bis/jane?count=10&valid=true';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+        },
+      },
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz',
+      screens: {
+        Bos: 'bos',
+        Bis: {
+          path: 'bis/:author',
+          exact: true,
+          stringify: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toLowerCase()),
+          },
+          parse: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toUpperCase()),
+            count: Number,
+            valid: Boolean,
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Bis',
+                          params: {
+                            author: 'Jane',
+                            count: 10,
+                            valid: true,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('handles stripping all query params', () => {
+  const path = '/bar/sweet/apple/foo/bis/jane';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+        },
+      },
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      screens: {
+        Bos: 'bos',
+        Bis: {
+          path: 'bis/:author',
+          stringify: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toLowerCase()),
+          },
+          parse: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toUpperCase()),
+            count: Number,
+            valid: Boolean,
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Bis',
+                          params: {
+                            author: 'Jane',
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('handles stripping all query params with exact', () => {
+  const path = '/bar/sweet/apple/foo/bis/jane';
+  const config = {
+    Foo: {
+      path: 'foo',
+      screens: {
+        Foe: {
+          path: 'foe',
+        },
+      },
+    },
+    Bar: 'bar/:type/:fruit',
+    Baz: {
+      path: 'baz',
+      screens: {
+        Bos: 'bos',
+        Bis: {
+          path: 'bis/:author',
+          exact: true,
+          stringify: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toLowerCase()),
+          },
+          parse: {
+            author: (author: string) =>
+              author.replace(/^\w/, (c) => c.toUpperCase()),
+            count: Number,
+            valid: Boolean,
+          },
+        },
+      },
+    },
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple', type: 'sweet' },
+        state: {
+          routes: [
+            {
+              name: 'Foo',
+              state: {
+                routes: [
+                  {
+                    name: 'Baz',
+                    state: {
+                      routes: [
+                        {
+                          name: 'Bis',
+                          params: {
+                            author: 'Jane',
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+});
+
+it('replaces undefined query params', () => {
+  const path = '/bar/undefined/apple';
+  const config = {
+    Bar: 'bar/:type/:fruit',
+  };
+
+  const state = {
+    routes: [
+      {
+        name: 'Bar',
+        params: { fruit: 'apple' },
+      },
+    ],
+  };
+
+  expect(getPathFromState(state, config)).toBe(path);
+  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });

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

@@ -379,6 +379,8 @@ it("doesn't update state if action wasn't handled", () => {
 });
 
 it('cleans up state when the navigator unmounts', () => {
+  jest.useFakeTimers();
+
   const TestNavigator = (props: any) => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
 
@@ -426,6 +428,8 @@ it('cleans up state when the navigator unmounts', () => {
     <BaseNavigationContainer onStateChange={onStateChange} children={null} />
   );
 
+  act(() => jest.runAllTimers());
+
   expect(onStateChange).toBeCalledTimes(2);
   expect(onStateChange).lastCalledWith(undefined);
 });
@@ -626,7 +630,7 @@ it('updates route params with setParams applied to parent', () => {
   });
 });
 
-it('handles change in route names', () => {
+it('handles change in route names', async () => {
   const TestNavigator = (props: any): any => {
     useNavigationBuilder(MockRouter, props);
     return null;
@@ -635,7 +639,7 @@ it('handles change in route names', () => {
   const onStateChange = jest.fn();
 
   const root = render(
-    <BaseNavigationContainer onStateChange={onStateChange}>
+    <BaseNavigationContainer>
       <TestNavigator initialRouteName="bar">
         <Screen name="foo" component={jest.fn()} />
         <Screen name="bar" component={jest.fn()} />
@@ -737,6 +741,366 @@ it('navigates to nested child in a navigator', () => {
   );
 });
 
+it('navigates to nested child in a navigator with initial: false', () => {
+  const TestRouter: typeof MockRouter = (options) => {
+    const router = MockRouter(options);
+
+    return {
+      ...router,
+
+      getStateForAction(state, action, options) {
+        switch (action.type) {
+          case 'NAVIGATE': {
+            if (!options.routeNames.includes(action.payload.name as any)) {
+              return null;
+            }
+
+            const routes = [
+              ...state.routes,
+              {
+                key: String(MockRouterKey.current++),
+                name: action.payload.name,
+                params: action.payload.params,
+              },
+            ];
+
+            return {
+              ...state,
+              index: routes.length - 1,
+              routes,
+            };
+          }
+
+          default:
+            return router.getStateForAction(state, action, options);
+        }
+      },
+    } as typeof router;
+  };
+
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(TestRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestComponent = ({ route }: any): any =>
+    `[${route.name}, ${JSON.stringify(route.params)}]`;
+
+  const onStateChange = jest.fn();
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const first = render(
+    <BaseNavigationContainer ref={navigation} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo-a" component={TestComponent} />
+              <Screen name="foo-b" component={TestComponent} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar">
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestComponent}
+                initialParams={{ lol: 'why' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestComponent}
+                initialParams={{ some: 'stuff' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(first).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 0,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      {
+        key: 'foo',
+        name: 'foo',
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['foo-a', 'foo-b'],
+          routes: [
+            {
+              key: 'foo-a',
+              name: 'foo-a',
+            },
+            {
+              key: 'foo-b',
+              name: 'foo-b',
+            },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  act(
+    () =>
+      navigation.current &&
+      navigation.current.navigate('bar', {
+        screen: 'bar-b',
+        params: { test: 42 },
+      })
+  );
+
+  expect(first).toMatchInlineSnapshot(
+    `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42}]"`
+  );
+
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 2,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+      {
+        key: '2',
+        name: 'bar',
+        params: { params: { test: 42 }, screen: 'bar-b' },
+        state: {
+          index: 1,
+          key: '3',
+          routeNames: ['bar-a', 'bar-b'],
+          routes: [
+            {
+              key: 'bar-a',
+              name: 'bar-a',
+              params: { lol: 'why' },
+            },
+            {
+              key: 'bar-b',
+              name: 'bar-b',
+              params: { some: 'stuff', test: 42 },
+            },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  const second = render(
+    <BaseNavigationContainer ref={navigation} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo-a" component={TestComponent} />
+              <Screen name="foo-b" component={TestComponent} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar">
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestComponent}
+                initialParams={{ lol: 'why' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestComponent}
+                initialParams={{ some: 'stuff' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(second).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 0,
+    key: '4',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      {
+        key: 'foo',
+        name: 'foo',
+        state: {
+          index: 0,
+          key: '5',
+          routeNames: ['foo-a', 'foo-b'],
+          routes: [
+            { key: 'foo-a', name: 'foo-a' },
+            { key: 'foo-b', name: 'foo-b' },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  act(
+    () =>
+      navigation.current &&
+      navigation.current.navigate('bar', {
+        screen: 'bar-b',
+        params: { test: 42 },
+        initial: false,
+      })
+  );
+
+  expect(second).toMatchInlineSnapshot(`"[bar-b, {\\"test\\":42}]"`);
+
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 2,
+    key: '4',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+      {
+        key: '6',
+        name: 'bar',
+        params: { initial: false, params: { test: 42 }, screen: 'bar-b' },
+        state: {
+          index: 2,
+          key: '7',
+          routeNames: ['bar-a', 'bar-b'],
+          routes: [
+            {
+              key: 'bar-a',
+              name: 'bar-a',
+              params: { lol: 'why' },
+            },
+            {
+              key: 'bar-b',
+              name: 'bar-b',
+              params: { some: 'stuff' },
+            },
+            { key: '8', name: 'bar-b', params: { test: 42 } },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  const third = render(
+    <BaseNavigationContainer
+      ref={navigation}
+      initialState={{
+        index: 1,
+        routes: [
+          { name: 'foo' },
+          {
+            name: 'bar',
+            params: { initial: false, params: { test: 42 }, screen: 'bar-b' },
+            state: {
+              index: 1,
+              key: '7',
+              routes: [
+                {
+                  name: 'bar-a',
+                  params: { lol: 'why' },
+                },
+                {
+                  name: 'bar-b',
+                  params: { some: 'stuff' },
+                },
+              ],
+              type: 'test',
+            },
+          },
+        ],
+        type: 'test',
+      }}
+    >
+      <TestNavigator>
+        <Screen name="foo" component={TestComponent} />
+        <Screen name="bar">
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestComponent}
+                initialParams={{ lol: 'why' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestComponent}
+                initialParams={{ some: 'stuff' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(third).toMatchInlineSnapshot(`"[bar-b, {\\"some\\":\\"stuff\\"}]"`);
+
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 1,
+    key: '11',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo-9', name: 'foo' },
+      {
+        key: 'bar-10',
+        name: 'bar',
+        params: { initial: false, params: { test: 42 }, screen: 'bar-b' },
+        state: {
+          index: 1,
+          key: '14',
+          routeNames: ['bar-a', 'bar-b'],
+          routes: [
+            {
+              key: 'bar-a-12',
+              name: 'bar-a',
+              params: { lol: 'why' },
+            },
+            {
+              key: 'bar-b-13',
+              name: 'bar-b',
+              params: { some: 'stuff' },
+            },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+    ],
+    stale: false,
+    type: 'test',
+  });
+});
+
 it('gives access to internal state', () => {
   const TestNavigator = (props: any): any => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);
@@ -1126,3 +1490,128 @@ it("doesn't throw if children is null", () => {
 
   expect(() => render(element).update(element)).not.toThrowError();
 });
+
+it('returns currently focused route with getCurrentRoute', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-a"
+                component={TestScreen}
+                options={{ sample: 'data' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="xux" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentRoute()).toEqual({
+    key: 'bar-a',
+    name: 'bar-a',
+  });
+});
+
+it("returns currently focused route's options with getCurrentOptions", () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator
+              initialRouteName="bar-a"
+              screenOptions={() => ({ sample2: 'data' })}
+            >
+              <Screen
+                name="bar-a"
+                component={TestScreen}
+                options={{ sample: 'data' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="xux" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample: 'data',
+    sample2: 'data',
+  });
+});
+
+it('does not throw if while getting current options with no options defined', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen
+                name="bar-b"
+                component={TestScreen}
+                options={{ wrongKey: true }}
+              />
+              <Screen name="bar-a" component={TestScreen} />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({});
+});
+
+it('does not throw if while getting current options with empty container', () => {
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  // @ts-ignore
+  const container = <BaseNavigationContainer ref={navigation} />;
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual(undefined);
+});

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

@@ -262,8 +262,10 @@ it('sets initial options with setOptions', () => {
   };
 
   const TestScreen = ({ navigation }: any): any => {
-    navigation.setOptions({
-      title: 'Hello world',
+    React.useEffect(() => {
+      navigation.setOptions({
+        title: 'Hello world',
+      });
     });
 
     return 'Test screen';
@@ -315,12 +317,12 @@ it('updates options with setOptions', () => {
   };
 
   const TestScreen = ({ navigation }: any): any => {
-    navigation.setOptions({
-      title: 'Hello world',
-      description: 'Something here',
-    });
-
     React.useEffect(() => {
+      navigation.setOptions({
+        title: 'Hello world',
+        description: 'Something here',
+      });
+
       const timer = setTimeout(() =>
         navigation.setOptions({
           title: 'Hello again',

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

@@ -97,6 +97,69 @@ it('fires focus and blur events in root navigator', () => {
   expect(fourthBlurCallback).toBeCalledTimes(0);
 });
 
+it('fires focus event after blur', () => {
+  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
+    const { state, navigation, descriptors } = useNavigationBuilder(
+      MockRouter,
+      props
+    );
+
+    React.useImperativeHandle(ref, () => navigation, [navigation]);
+
+    return state.routes.map((route) => descriptors[route.key].render());
+  });
+
+  const callback = jest.fn();
+
+  const Test = ({ route, navigation }: any) => {
+    React.useEffect(
+      () =>
+        navigation.addListener('focus', () => callback(route.name, 'focus')),
+      [navigation, route.name]
+    );
+
+    React.useEffect(
+      () => navigation.addListener('blur', () => callback(route.name, 'blur')),
+      [navigation, route.name]
+    );
+
+    return null;
+  };
+
+  const navigation = React.createRef<any>();
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator ref={navigation}>
+        <Screen name="first" component={Test} />
+        <Screen name="second" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  expect(callback.mock.calls).toEqual([['first', 'focus']]);
+
+  act(() => navigation.current.navigate('second'));
+
+  expect(callback.mock.calls).toEqual([
+    ['first', 'focus'],
+    ['first', 'blur'],
+    ['second', 'focus'],
+  ]);
+
+  act(() => navigation.current.navigate('first'));
+
+  expect(callback.mock.calls).toEqual([
+    ['first', 'focus'],
+    ['first', 'blur'],
+    ['second', 'focus'],
+    ['second', 'blur'],
+    ['first', 'focus'],
+  ]);
+});
+
 it('fires focus and blur events in nested navigator', () => {
   const TestNavigator = React.forwardRef((props: any, ref: any): any => {
     const { state, navigation, descriptors } = useNavigationBuilder(

packages/core/src/getActionFromState.tsx

@@ -3,6 +3,7 @@ import { PartialState, NavigationState } from '@react-navigation/routers';
 type NavigateParams = {
   screen?: string;
   params?: NavigateParams;
+  initial?: boolean;
 };
 
 type NavigateAction = {
@@ -35,6 +36,7 @@ export default function getActionFromState(
     }
 
     route = current.routes[current.routes.length - 1];
+    params.initial = current.routes.length === 1;
     params.screen = route.name;
 
     if (route.state) {

packages/core/src/getPathFromState.tsx

@@ -4,19 +4,18 @@ import {
   PartialState,
   Route,
 } from '@react-navigation/routers';
+import { PathConfig } from './types';
 
 type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
 type StringifyConfig = Record<string, (value: any) => string>;
 
-type Options = {
-  [routeName: string]:
-    | string
-    | {
-        path?: string;
-        stringify?: StringifyConfig;
-        screens?: Options;
-      };
+type OptionsItem = PathConfig[string];
+
+type ConfigItem = {
+  pattern?: string;
+  stringify?: StringifyConfig;
+  screens?: Record<string, ConfigItem>;
 };
 
 /**
@@ -48,120 +47,192 @@ type Options = {
  */
 export default function getPathFromState(
   state?: State,
-  options: Options = {}
+  options: PathConfig = {}
 ): string {
   if (state === undefined) {
     throw Error('NavigationState not passed');
   }
-  let path = '/';
 
+  // Create a normalized configs array which will be easier to use
+  const configs = createNormalizedConfigs(options);
+
+  let path = '/';
   let current: State | undefined = state;
 
+  const allParams: Record<string, any> = {};
+
   while (current) {
     let index = typeof current.index === 'number' ? current.index : 0;
     let route = current.routes[index] as Route<string> & {
       state?: State;
     };
-    let currentOptions = options;
-    let pattern = route.name;
 
-    while (route.name in currentOptions) {
-      if (typeof currentOptions[route.name] === 'string') {
-        pattern = currentOptions[route.name] as string;
-        break;
-      } else if (typeof currentOptions[route.name] === 'object') {
-        // if there is no `screens` property, we return pattern
-        if (
-          !(currentOptions[route.name] as {
-            screens: Options;
-          }).screens
-        ) {
-          pattern = (currentOptions[route.name] as { path: string }).path;
-          break;
+    let pattern: string | undefined;
+
+    let currentParams: Record<string, any> = { ...route.params };
+    let currentOptions = configs;
+
+    // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
+    let nestedRouteNames = [];
+
+    let hasNext = true;
+
+    while (route.name in currentOptions && hasNext) {
+      pattern = currentOptions[route.name].pattern;
+
+      nestedRouteNames.push(route.name);
+
+      if (route.params) {
+        const stringify = currentOptions[route.name]?.stringify;
+
+        currentParams = fromEntries(
+          Object.entries(route.params).map(([key, value]) => [
+            key,
+            stringify?.[key] ? stringify[key](value) : String(value),
+          ])
+        );
+
+        if (pattern) {
+          Object.assign(allParams, currentParams);
+        }
+      }
+
+      // If there is no `screens` property or no nested state, we return pattern
+      if (!currentOptions[route.name].screens || route.state === undefined) {
+        hasNext = false;
+      } else {
+        index =
+          typeof route.state.index === 'number'
+            ? route.state.index
+            : route.state.routes.length - 1;
+
+        const nextRoute = route.state.routes[index];
+        const nestedConfig = currentOptions[route.name].screens;
+
+        // if there is config for next route name, we go deeper
+        if (nestedConfig && nextRoute.name in nestedConfig) {
+          route = nextRoute as Route<string> & { state?: State };
+          currentOptions = nestedConfig;
         } else {
-          // if it is the end of state, we return pattern
-          if (route.state === undefined) {
-            pattern = (currentOptions[route.name] as { path: string }).path;
-            break;
-          } else {
-            index =
-              typeof route.state.index === 'number' ? route.state.index : 0;
-            const nextRoute = route.state.routes[index];
-            const deeperConfig = (currentOptions[route.name] as {
-              screens: Options;
-            }).screens;
-            // if there is config for next route name, we go deeper
-            if (nextRoute.name in deeperConfig) {
-              route = nextRoute as Route<string> & { state?: State };
-              currentOptions = deeperConfig;
-            } else {
-              // if not, there is no sense in going deeper in config
-              pattern = (currentOptions[route.name] as { path: string }).path;
-              break;
-            }
-          }
+          // If not, there is no sense in going deeper in config
+          hasNext = false;
         }
       }
     }
 
-    // we don't add empty path strings to path
-    if (pattern !== '') {
-      const config =
-        currentOptions[route.name] !== undefined
-          ? (currentOptions[route.name] as { stringify?: StringifyConfig })
-              .stringify
-          : undefined;
+    if (pattern === undefined) {
+      pattern = nestedRouteNames.join('/');
+    }
 
-      const params = route.params
-        ? // Stringify all of the param values before we use them
-          Object.entries(route.params).reduce<{
-            [key: string]: string;
-          }>((acc, [key, value]) => {
-            acc[key] = config?.[key] ? config[key](value) : String(value);
-            return acc;
-          }, {})
-        : undefined;
+    if (currentOptions[route.name] !== undefined) {
+      path += pattern
+        .split('/')
+        .map((p) => {
+          const name = p.replace(/^:/, '').replace(/\?$/, '');
 
-      if (currentOptions[route.name] !== undefined) {
-        path += pattern
-          .split('/')
-          .map((p) => {
-            const name = p.replace(/^:/, '');
+          // If the path has a pattern for a param, put the param in the path
+          if (p.startsWith(':')) {
+            const value = allParams[name];
 
-            // If the path has a pattern for a param, put the param in the path
-            if (params && name in params && p.startsWith(':')) {
-              const value = params[name];
-              // Remove the used value from the params object since we'll use the rest for query string
+            // Remove the used value from the params object since we'll use the rest for query string
+            if (currentParams) {
               // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-              delete params[name];
-              return encodeURIComponent(value);
+              delete currentParams[name];
             }
 
-            return encodeURIComponent(p);
-          })
-          .join('/');
-      } else {
-        path += encodeURIComponent(route.name);
+            if (value === undefined && p.endsWith('?')) {
+              // Optional params without value assigned in route.params should be ignored
+              return '';
+            }
+
+            return encodeURIComponent(value);
+          }
+
+          return encodeURIComponent(p);
+        })
+        .join('/');
+    } else {
+      path += encodeURIComponent(route.name);
+    }
+
+    if (route.state) {
+      path += '/';
+    } else if (currentParams) {
+      for (let param in currentParams) {
+        if (currentParams[param] === 'undefined') {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete currentParams[param];
+        }
       }
 
-      if (route.state) {
-        path += '/';
-      } else if (params) {
-        const query = queryString.stringify(params);
+      const query = queryString.stringify(currentParams);
 
-        if (query) {
-          path += `?${query}`;
-        }
+      if (query) {
+        path += `?${query}`;
       }
     }
 
     current = route.state;
   }
 
-  path =
-    path !== '/' && path.slice(path.length - 1) === '/'
-      ? path.slice(0, -1)
-      : path;
+  // Remove multiple as well as trailing slashes
+  path = path.replace(/\/+/g, '/');
+  path = path.length > 1 ? path.replace(/\/$/, '') : path;
 
   return path;
 }
+
+// Object.fromEntries is not available in older iOS versions
+const fromEntries = <K extends string, V>(entries: (readonly [K, V])[]) =>
+  entries.reduce((acc, [k, v]) => {
+    acc[k] = v;
+    return acc;
+  }, {} as Record<K, V>);
+
+const joinPaths = (...paths: string[]): string =>
+  ([] as string[])
+    .concat(...paths.map((p) => p.split('/')))
+    .filter(Boolean)
+    .join('/');
+
+const createConfigItem = (
+  config: OptionsItem | string,
+  parentPattern?: string
+): ConfigItem => {
+  if (typeof config === 'string') {
+    // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
+    const pattern = parentPattern ? joinPaths(parentPattern, config) : config;
+
+    return { pattern };
+  }
+
+  // If an object is specified as the value (e.g. Foo: { ... }),
+  // It can have `path` property and `screens` prop which has nested configs
+  const pattern =
+    config.exact !== true && parentPattern && config.path
+      ? joinPaths(parentPattern, config.path)
+      : config.path;
+
+  const screens = config.screens
+    ? createNormalizedConfigs(config.screens, pattern)
+    : undefined;
+
+  return {
+    // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
+    pattern: pattern?.split('/').filter(Boolean).join('/'),
+    stringify: config.stringify,
+    screens,
+  };
+};
+
+const createNormalizedConfigs = (
+  options: PathConfig,
+  pattern?: string
+): Record<string, ConfigItem> =>
+  fromEntries(
+    Object.entries(options).map(([name, c]) => {
+      const result = createConfigItem(c, pattern);
+
+      return [name, result];
+    })
+  );

packages/core/src/getStateFromPath.tsx

@@ -5,25 +5,17 @@ import {
   PartialState,
   InitialState,
 } from '@react-navigation/routers';
+import { PathConfig } from './types';
 
 type ParseConfig = Record<string, (value: string) => any>;
 
-type Options = {
-  [routeName: string]:
-    | string
-    | {
-        path?: string;
-        parse?: ParseConfig;
-        screens?: Options;
-        initialRouteName?: string;
-      };
-};
-
 type RouteConfig = {
-  match: RegExp;
+  screen: string;
+  regex?: RegExp;
+  path: string;
   pattern: string;
   routeNames: string[];
-  parse: ParseConfig | undefined;
+  parse?: ParseConfig;
 };
 
 type InitialRouteConfig = {
@@ -56,34 +48,73 @@ type ResultState = PartialState<NavigationState> & {
  */
 export default function getStateFromPath(
   path: string,
-  options: Options = {}
+  options: PathConfig = {}
 ): ResultState | undefined {
-  if (path === '') {
+  let initialRoutes: InitialRouteConfig[] = [];
+
+  // Create a normalized configs array which will be easier to use
+  const configs = ([] as RouteConfig[])
+    .concat(
+      ...Object.keys(options).map((key) =>
+        createNormalizedConfigs(key, options, [], initialRoutes)
+      )
+    )
+    .sort(
+      (a, b) =>
+        // Sort configs so the most exhaustive is always first to be chosen
+        b.pattern.split('/').length - a.pattern.split('/').length
+    );
+
+  let remaining = path
+    .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
+    .replace(/^\//, '') // Remove extra leading slash
+    .replace(/\?.*$/, ''); // Remove query params which we will handle later
+
+  // Make sure there is a trailing slash
+  remaining = remaining.endsWith('/') ? remaining : `${remaining}/`;
+
+  if (remaining === '/') {
+    // We need to add special handling of empty path so navigation to empty path also works
+    // When handling empty path, we should only look at the root level config
+    const match = configs.find(
+      (config) =>
+        config.path === '' &&
+        config.routeNames.every(
+          // Make sure that none of the parent configs have a non-empty path defined
+          (name) => !configs.find((c) => c.screen === name)?.path
+        )
+    );
+
+    if (match) {
+      return createNestedStateObject(
+        match.routeNames.map((name, i, self) => {
+          if (i === self.length - 1) {
+            return { name, params: parseQueryParams(path, match.parse) };
+          }
+
+          return { name };
+        }),
+        initialRoutes
+      );
+    }
+
     return undefined;
   }
-  let initialRoutes: InitialRouteConfig[] = [];
-  // Create a normalized configs array which will be easier to use
-  const configs = ([] as RouteConfig[]).concat(
-    ...Object.keys(options).map((key) =>
-      createNormalizedConfigs(key, options, [], initialRoutes)
-    )
-  );
 
   let result: PartialState<NavigationState> | undefined;
   let current: PartialState<NavigationState> | undefined;
 
-  let remaining = path
-    .replace(/[/]+/, '/') // Replace multiple slash (//) with single ones
-    .replace(/^\//, '') // Remove extra leading slash
-    .replace(/\?.*/, ''); // Remove query params which we will handle later
-
   while (remaining) {
     let routeNames: string[] | undefined;
-    let params: Record<string, any> | undefined;
+    let allParams: Record<string, any> | undefined;
 
     // Go through all configs, and see if the next path segment matches our regex
     for (const config of configs) {
-      const match = remaining.match(config.match);
+      if (!config.regex) {
+        continue;
+      }
+
+      const match = remaining.match(config.regex);
 
       // If our regex matches, we need to extract params from the path
       if (match) {
@@ -94,21 +125,16 @@ export default function getStateFromPath(
           .filter((p) => p.startsWith(':'));
 
         if (paramPatterns.length) {
-          params = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
-            const key = p.replace(/^:/, '');
-            const value = match[i + 1]; // The param segments start from index 1 in the regex match result
+          allParams = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
+            const value = match![(i + 1) * 2].replace(/\//, ''); // The param segments appear every second item starting from 2 in the regex match result
 
-            acc[key] =
-              config.parse && config.parse[key]
-                ? config.parse[key](value)
-                : value;
+            acc[p] = value;
 
             return acc;
           }, {});
         }
 
-        // Remove the matched segment from the remaining path
-        remaining = remaining.replace(match[0], '');
+        remaining = remaining.replace(match[1], '');
 
         break;
       }
@@ -123,34 +149,46 @@ export default function getStateFromPath(
       remaining = segments.join('/');
     }
 
-    let state: InitialState;
-    let routeName = routeNames.shift() as string;
-    let initialRoute = findInitialRoute(routeName, initialRoutes);
+    const state = createNestedStateObject(
+      routeNames.map((name) => {
+        const config = configs.find((c) => c.screen === name);
 
-    state = createNestedState(
-      initialRoute,
-      routeName,
-      routeNames.length === 0,
-      params
-    );
+        let params: object | undefined;
 
-    if (routeNames.length > 0) {
-      let nestedState = state;
+        if (allParams && config?.path) {
+          const pattern = config.path;
 
-      while ((routeName = routeNames.shift() as string)) {
-        initialRoute = findInitialRoute(routeName, initialRoutes);
-        nestedState.routes[nestedState.index || 0].state = createNestedState(
-          initialRoute,
-          routeName,
-          routeNames.length === 0,
-          params
-        );
-        if (routeNames.length > 0) {
-          nestedState = nestedState.routes[nestedState.index || 0]
-            .state as InitialState;
+          if (pattern) {
+            const paramPatterns = pattern
+              .split('/')
+              .filter((p) => p.startsWith(':'));
+
+            if (paramPatterns.length) {
+              params = paramPatterns.reduce<Record<string, any>>((acc, p) => {
+                const key = p.replace(/^:/, '').replace(/\?$/, '');
+                const value = allParams![p];
+
+                if (value) {
+                  acc[key] =
+                    config.parse && config.parse[key]
+                      ? config.parse[key](value)
+                      : value;
+                }
+
+                return acc;
+              }, {});
+            }
+          }
         }
-      }
-    }
+
+        if (params && Object.keys(params).length) {
+          return { name, params };
+        }
+
+        return { name };
+      }),
+      initialRoutes
+    );
 
     if (current) {
       // The state should be nested inside the deepest route we parsed before
@@ -172,74 +210,78 @@ export default function getStateFromPath(
     return undefined;
   }
 
-  const query = path.split('?')[1];
-
-  if (query) {
-    while (current?.routes[current.index || 0].state) {
-      // The query params apply to the deepest route
-      current = current.routes[current.index || 0].state;
-    }
-
-    const route = (current as PartialState<NavigationState>).routes[
-      current?.index || 0
-    ];
-
-    const params = queryString.parse(query);
-    const parseFunction = findParseConfigForRoute(route.name, configs);
-
-    if (parseFunction) {
-      Object.keys(params).forEach((name) => {
-        if (parseFunction[name] && typeof params[name] === 'string') {
-          params[name] = parseFunction[name](params[name] as string);
-        }
-      });
-    }
+  const route = findFocusedRoute(current);
+  const params = parseQueryParams(
+    path,
+    findParseConfigForRoute(route.name, configs)
+  );
 
+  if (params) {
     route.params = { ...route.params, ...params };
   }
 
   return result;
 }
 
-function createNormalizedConfigs(
-  key: string,
-  routeConfig: Options,
+const joinPaths = (...paths: string[]): string =>
+  ([] as string[])
+    .concat(...paths.map((p) => p.split('/')))
+    .filter(Boolean)
+    .join('/');
+
+const createNormalizedConfigs = (
+  screen: string,
+  routeConfig: PathConfig,
   routeNames: string[] = [],
-  initials: InitialRouteConfig[]
-): RouteConfig[] {
+  initials: InitialRouteConfig[],
+  parentPattern?: string
+): RouteConfig[] => {
   const configs: RouteConfig[] = [];
 
-  routeNames.push(key);
+  routeNames.push(screen);
 
-  const value = routeConfig[key];
+  const config = routeConfig[screen];
 
-  if (typeof value === 'string') {
+  if (typeof config === 'string') {
     // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
-    if (value !== '') {
-      configs.push(createConfigItem(routeNames, value));
-    }
-  } else if (typeof value === 'object') {
+    const pattern = parentPattern ? joinPaths(parentPattern, config) : config;
+
+    configs.push(createConfigItem(screen, routeNames, pattern, config));
+  } else if (typeof config === 'object') {
+    let pattern: string | undefined;
+
     // if an object is specified as the value (e.g. Foo: { ... }),
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
-    if (value.path && value.path !== '') {
-      configs.push(createConfigItem(routeNames, value.path, value.parse));
+    if (typeof config.path === 'string') {
+      pattern =
+        config.exact !== true && parentPattern
+          ? joinPaths(parentPattern, config.path)
+          : config.path;
+
+      configs.push(
+        createConfigItem(screen, routeNames, pattern, config.path, config.parse)
+      );
     }
-    if (value.screens) {
+
+    if (config.screens) {
       // property `initialRouteName` without `screens` has no purpose
-      if (value.initialRouteName) {
+      if (config.initialRouteName) {
         initials.push({
-          initialRouteName: value.initialRouteName,
-          connectedRoutes: Object.keys(value.screens),
+          initialRouteName: config.initialRouteName,
+          connectedRoutes: Object.keys(config.screens),
         });
       }
-      Object.keys(value.screens).forEach((nestedConfig) => {
+
+      Object.keys(config.screens).forEach((nestedConfig) => {
         const result = createNormalizedConfigs(
           nestedConfig,
-          value.screens as Options,
+          config.screens as PathConfig,
           routeNames,
-          initials
+          initials,
+          pattern
         );
+
         configs.push(...result);
       });
     }
@@ -248,43 +290,62 @@ function createNormalizedConfigs(
   routeNames.pop();
 
   return configs;
-}
+};
 
-function createConfigItem(
+const createConfigItem = (
+  screen: string,
   routeNames: string[],
   pattern: string,
+  path: string,
   parse?: ParseConfig
-): RouteConfig {
-  const match = new RegExp(
-    '^' + escape(pattern).replace(/:[a-z0-9]+/gi, '([^/]+)') + '/?'
-  );
+): RouteConfig => {
+  // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
+  pattern = pattern.split('/').filter(Boolean).join('/');
+
+  const regex = pattern
+    ? new RegExp(
+        `^(${pattern
+          .split('/')
+          .map((it) => {
+            if (it.startsWith(':')) {
+              return `(([^/]+\\/)${it.endsWith('?') ? '?' : ''})`;
+            }
+
+            return `${escape(it)}\\/`;
+          })
+          .join('')})`
+      )
+    : undefined;
 
   return {
-    match,
+    screen,
+    regex,
     pattern,
+    path,
     // The routeNames array is mutated, so copy it to keep the current state
     routeNames: [...routeNames],
     parse,
   };
-}
+};
 
-function findParseConfigForRoute(
+const findParseConfigForRoute = (
   routeName: string,
   flatConfig: RouteConfig[]
-): ParseConfig | undefined {
+): ParseConfig | undefined => {
   for (const config of flatConfig) {
     if (routeName === config.routeNames[config.routeNames.length - 1]) {
       return config.parse;
     }
   }
-  return undefined;
-}
 
-// tries to find an initial route connected with the one passed
-function findInitialRoute(
+  return undefined;
+};
+
+// Try to find an initial route connected with the one passed
+const findInitialRoute = (
   routeName: string,
   initialRoutes: InitialRouteConfig[]
-): string | undefined {
+): string | undefined => {
   for (const config of initialRoutes) {
     if (config.connectedRoutes.includes(routeName)) {
       return config.initialRouteName === routeName
@@ -293,28 +354,25 @@ function findInitialRoute(
     }
   }
   return undefined;
-}
+};
 
-// returns nested state object with values depending on whether
+// returns state object with values depending on whether
 // it is the end of state and if there is initialRoute for this level
-function createNestedState(
+const createStateObject = (
   initialRoute: string | undefined,
   routeName: string,
-  isEmpty: boolean,
-  params?: Record<string, any> | undefined
-): InitialState {
+  params: Record<string, any> | undefined,
+  isEmpty: boolean
+): InitialState => {
   if (isEmpty) {
     if (initialRoute) {
       return {
         index: 1,
-        routes: [
-          { name: initialRoute },
-          { name: routeName as string, ...(params && { params }) },
-        ],
+        routes: [{ name: initialRoute }, { name: routeName as string, params }],
       };
     } else {
       return {
-        routes: [{ name: routeName as string, ...(params && { params }) }],
+        routes: [{ name: routeName as string, params }],
       };
     }
   } else {
@@ -323,11 +381,87 @@ function createNestedState(
         index: 1,
         routes: [
           { name: initialRoute },
-          { name: routeName as string, state: { routes: [] } },
+          { name: routeName as string, params, state: { routes: [] } },
         ],
       };
     } else {
-      return { routes: [{ name: routeName as string, state: { routes: [] } }] };
+      return {
+        routes: [{ name: routeName as string, params, state: { routes: [] } }],
+      };
     }
   }
-}
+};
+
+const createNestedStateObject = (
+  routes: { name: string; params?: object }[],
+  initialRoutes: InitialRouteConfig[]
+) => {
+  let state: InitialState;
+  let route = routes.shift() as { name: string; params?: object };
+  let initialRoute = findInitialRoute(route.name, initialRoutes);
+
+  state = createStateObject(
+    initialRoute,
+    route.name,
+    route.params,
+    routes.length === 0
+  );
+
+  if (routes.length > 0) {
+    let nestedState = state;
+
+    while ((route = routes.shift() as { name: string; params?: object })) {
+      initialRoute = findInitialRoute(route.name, initialRoutes);
+
+      const nestedStateIndex =
+        nestedState.index || nestedState.routes.length - 1;
+
+      nestedState.routes[nestedStateIndex].state = createStateObject(
+        initialRoute,
+        route.name,
+        route.params,
+        routes.length === 0
+      );
+
+      if (routes.length > 0) {
+        nestedState = nestedState.routes[nestedStateIndex]
+          .state as InitialState;
+      }
+    }
+  }
+
+  return state;
+};
+
+const findFocusedRoute = (state: InitialState) => {
+  let current: InitialState | undefined = state;
+
+  while (current?.routes[current.index || 0].state) {
+    // The query params apply to the deepest route
+    current = current.routes[current.index || 0].state;
+  }
+
+  const route = (current as PartialState<NavigationState>).routes[
+    current?.index || 0
+  ];
+
+  return route;
+};
+
+const parseQueryParams = (
+  path: string,
+  parseConfig?: Record<string, (value: string) => any>
+) => {
+  const query = path.split('?')[1];
+  const params = queryString.parse(query);
+
+  if (parseConfig) {
+    Object.keys(params).forEach((name) => {
+      if (parseConfig[name] && typeof params[name] === 'string') {
+        params[name] = parseConfig[name](params[name] as string);
+      }
+    });
+  }
+
+  return Object.keys(params).length ? params : undefined;
+};

packages/core/src/index.tsx

@@ -3,6 +3,7 @@ export * from '@react-navigation/routers';
 export { default as BaseNavigationContainer } from './BaseNavigationContainer';
 export { default as createNavigatorFactory } from './createNavigatorFactory';
 
+export { default as NavigationHelpersContext } from './NavigationHelpersContext';
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';
 

packages/core/src/types.tsx

@@ -193,6 +193,20 @@ type NavigationHelpersCommon<
    * Note that this method doesn't re-render screen when the result changes. So don't use it in `render`.
    */
   canGoBack(): boolean;
+
+  /**
+   * Returns the parent navigator, if any. Reason why the function is called
+   * dangerouslyGetParent is to warn developers against overusing it to eg. get parent
+   * of parent and other hard-to-follow patterns.
+   */
+  dangerouslyGetParent<T = NavigationProp<ParamListBase> | undefined>(): T;
+
+  /**
+   * Returns the navigator's state. Reason why the function is called
+   * dangerouslyGetState is to discourage developers to use internal navigation's state.
+   * Note that this method doesn't re-render screen when the result changes. So don't use it in `render`.
+   */
+  dangerouslyGetState(): State;
 } & PrivateValueStore<ParamList, keyof ParamList, {}>;
 
 export type NavigationHelpers<
@@ -254,20 +268,6 @@ export type NavigationProp<
    * @param options Options object for the route.
    */
   setOptions(options: Partial<ScreenOptions>): void;
-
-  /**
-   * Returns the parent navigator, if any. Reason why the function is called
-   * dangerouslyGetParent is to warn developers against overusing it to eg. get parent
-   * of parent and other hard-to-follow patterns.
-   */
-  dangerouslyGetParent<T = NavigationProp<ParamListBase> | undefined>(): T;
-
-  /**
-   * Returns the navigator's state. Reason why the function is called
-   * dangerouslyGetState is to discourage developers to use internal navigation's state.
-   * Note that this method doesn't re-render screen when the result changes. So don't use it in `render`.
-   */
-  dangerouslyGetState(): State;
 } & EventConsumer<EventMap & EventMapCore<State>> &
   PrivateValueStore<ParamList, RouteName, EventMap>;
 
@@ -410,24 +410,27 @@ export type RouteConfig<
     }
 );
 
-export type NavigationContainerRef =
-  | (NavigationHelpers<ParamListBase> &
-      EventConsumer<{ state: { data: { state: NavigationState } } }> & {
-        /**
-         * Reset the navigation state of the root navigator to the provided state.
-         *
-         * @param state Navigation state object.
-         */
-        resetRoot(
-          state?: PartialState<NavigationState> | NavigationState
-        ): void;
-        /**
-         * Get the rehydrated navigation state of the navigation tree.
-         */
-        getRootState(): NavigationState;
-      })
-  | undefined
-  | null;
+export type NavigationContainerRef = NavigationHelpers<ParamListBase> &
+  EventConsumer<{ state: { data: { state: NavigationState } } }> & {
+    /**
+     * Reset the navigation state of the root navigator to the provided state.
+     *
+     * @param state Navigation state object.
+     */
+    resetRoot(state?: PartialState<NavigationState> | NavigationState): void;
+    /**
+     * Get the rehydrated navigation state of the navigation tree.
+     */
+    getRootState(): NavigationState;
+    /**
+     * Get the currently focused navigation route.
+     */
+    getCurrentRoute(): Route<string> | undefined;
+    /**
+     * Get the currently focused route's options.
+     */
+    getCurrentOptions(): object | undefined;
+  };
 
 export type TypedNavigator<
   ParamList extends ParamListBase,
@@ -467,3 +470,16 @@ export type TypedNavigator<
     _: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>
   ) => null;
 };
+
+export type PathConfig = {
+  [routeName: string]:
+    | string
+    | {
+        path?: string;
+        exact?: boolean;
+        parse?: Record<string, (value: string) => any>;
+        stringify?: Record<string, (value: any) => string>;
+        screens?: PathConfig;
+        initialRouteName?: string;
+      };
+};

packages/core/src/useDescriptors.tsx

@@ -117,6 +117,28 @@ export default function useDescriptors<
       const screen = screens[route.name];
       const navigation = navigations[route.key];
 
+      const routeOptions = {
+        // The default `screenOptions` passed to the navigator
+        ...(typeof screenOptions === 'object' || screenOptions == null
+          ? screenOptions
+          : screenOptions({
+              // @ts-ignore
+              route,
+              navigation,
+            })),
+        // The `options` prop passed to `Screen` elements
+        ...(typeof screen.options === 'object' || screen.options == null
+          ? screen.options
+          : screen.options({
+              // @ts-ignore
+              route,
+              // @ts-ignore
+              navigation,
+            })),
+        // The options set via `navigation.setOptions`
+        ...options[route.key],
+      };
+
       acc[route.key] = {
         navigation,
         render() {
@@ -128,31 +150,12 @@ export default function useDescriptors<
                 screen={screen}
                 getState={getState}
                 setState={setState}
+                options={routeOptions}
               />
             </NavigationBuilderContext.Provider>
           );
         },
-        options: {
-          // The default `screenOptions` passed to the navigator
-          ...(typeof screenOptions === 'object' || screenOptions == null
-            ? screenOptions
-            : screenOptions({
-                // @ts-ignore
-                route,
-                navigation,
-              })),
-          // The `options` prop passed to `Screen` elements
-          ...(typeof screen.options === 'object' || screen.options == null
-            ? screen.options
-            : screen.options({
-                // @ts-ignore
-                route,
-                // @ts-ignore
-                navigation,
-              })),
-          // The options set via `navigation.setOptions`
-          ...options[route.key],
-        },
+        options: routeOptions,
       };
 
       return acc;

packages/core/src/useFocusEvents.tsx

@@ -48,7 +48,7 @@ export default function useFocusEvents({ state, emitter }: Options) {
       emitter.emit({ type: 'focus', target: currentFocusedKey });
     }
 
-    // We should only dispatch events when the focused key changed and navigator is focused
+    // We should only emit events when the focused key changed and navigator is focused
     // When navigator is not focused, screens inside shouldn't receive focused status either
     if (
       lastFocusedKey === currentFocusedKey ||
@@ -62,7 +62,7 @@ export default function useFocusEvents({ state, emitter }: Options) {
       return;
     }
 
-    emitter.emit({ type: 'focus', target: currentFocusedKey });
     emitter.emit({ type: 'blur', target: lastFocusedKey });
+    emitter.emit({ type: 'focus', target: currentFocusedKey });
   }, [currentFocusedKey, emitter, navigation]);
 }

packages/core/src/useIsFocused.tsx

@@ -9,6 +9,7 @@ import useNavigation from './useNavigation';
  */
 export default function useIsFocused(): boolean {
   const navigation = useNavigation();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const getCurrentValue = React.useCallback(navigation.isFocused, [navigation]);
   const subscribe = React.useCallback(
     (callback: (value: boolean) => void) => {

packages/core/src/useNavigationBuilder.tsx

@@ -32,6 +32,7 @@ import {
 } from './types';
 import useStateGetters from './useStateGetters';
 import useOnGetState from './useOnGetState';
+import useScheduleUpdate from './useScheduleUpdate';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
@@ -42,6 +43,7 @@ type NavigatorRoute = {
   params?: {
     screen?: string;
     params?: object;
+    initial?: boolean;
   };
 };
 
@@ -175,17 +177,19 @@ export default function useNavigationBuilder<
     | NavigatorRoute
     | undefined;
 
-  const previousRouteRef = React.useRef(route);
+  const previousNestedParamsRef = React.useRef(route?.params);
 
   React.useEffect(() => {
-    previousRouteRef.current = route;
+    previousNestedParamsRef.current = route?.params;
   }, [route]);
 
   const { children, ...rest } = options;
   const { current: router } = React.useRef<Router<State, any>>(
     createRouter({
       ...((rest as unknown) as RouterOptions),
-      ...(route?.params && typeof route.params.screen === 'string'
+      ...(route?.params &&
+      route.params.initial !== false &&
+      typeof route.params.screen === 'string'
         ? { initialRouteName: route.params.screen }
         : null),
     })
@@ -218,7 +222,7 @@ export default function useNavigationBuilder<
     (acc, curr) => {
       const { initialParams } = screens[curr];
       const initialParamsFromParams =
-        route?.params && route.params.screen === curr
+        route?.params?.initial !== false && route?.params?.screen === curr
           ? route.params.params
           : undefined;
 
@@ -265,6 +269,8 @@ export default function useNavigationBuilder<
   >();
   const initializedStateRef = React.useRef<State>();
 
+  let isFirstStateInitialization = false;
+
   if (
     initializedStateRef.current === undefined ||
     currentState !== previousStateRef.current
@@ -273,16 +279,21 @@ export default function useNavigationBuilder<
     // 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
     // So we need to rehydrate it to make it usable
-    initializedStateRef.current =
-      currentState === undefined || !isStateValid(currentState)
-        ? router.getInitialState({
-            routeNames,
-            routeParamList,
-          })
-        : router.getRehydratedState(currentState as PartialState<State>, {
-            routeNames,
-            routeParamList,
-          });
+    if (currentState === undefined || !isStateValid(currentState)) {
+      isFirstStateInitialization = true;
+      initializedStateRef.current = router.getInitialState({
+        routeNames,
+        routeParamList,
+      });
+    } else {
+      initializedStateRef.current = router.getRehydratedState(
+        currentState as PartialState<State>,
+        {
+          routeNames,
+          routeParamList,
+        }
+      );
+    }
   }
 
   React.useEffect(() => {
@@ -308,16 +319,14 @@ export default function useNavigationBuilder<
   }
 
   if (
-    previousRouteRef.current &&
-    route &&
-    route.params &&
-    typeof route.params.screen === 'string' &&
-    route.params !== previousRouteRef.current.params
+    typeof route?.params?.screen === 'string' &&
+    (route.params !== previousNestedParamsRef.current ||
+      (route.params.initial === false && isFirstStateInitialization))
   ) {
     // If the route was updated with new name and/or params, we should navigate there
     // The update should be limited to current navigator only, so we call the router manually
     const updatedState = router.getStateForAction(
-      state,
+      nextState,
       CommonActions.navigate(route.params.screen, route.params.params),
       {
         routeNames,
@@ -331,17 +340,17 @@ export default function useNavigationBuilder<
             routeNames,
             routeParamList,
           })
-        : state;
+        : nextState;
   }
 
   const shouldUpdate = state !== nextState;
 
-  React.useEffect(() => {
+  useScheduleUpdate(() => {
     if (shouldUpdate) {
-      // If the state needs to be updated, we'll schedule an update with React
+      // If the state needs to be updated, we'll schedule an update
       setState(nextState);
     }
-  }, [nextState, setState, shouldUpdate]);
+  });
 
   // The up-to-date state will come in next render, but we don't need to wait for it
   // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
@@ -353,9 +362,14 @@ export default function useNavigationBuilder<
 
     return () => {
       // We need to clean up state for this navigator on unmount
-      if (getCurrentState() !== undefined && getKey() === navigatorKey) {
-        setState(undefined);
-      }
+      // We do it in a timeout because we need to detect if another navigator mounted in the meantime
+      // For example, if another navigator has started rendering, we should skip cleanup
+      // Otherwise, our cleanup step will cleanup state for the other navigator and re-initialize it
+      setTimeout(() => {
+        if (getCurrentState() !== undefined && getKey() === navigatorKey) {
+          setState(undefined);
+        }
+      }, 0);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

packages/core/src/useNavigationCache.tsx

@@ -7,7 +7,6 @@ import {
   Router,
 } from '@react-navigation/routers';
 import { NavigationEventEmitter } from './useEventEmitter';
-import NavigationContext from './NavigationContext';
 
 import { NavigationHelpers, NavigationProp } from './types';
 
@@ -49,12 +48,10 @@ export default function useNavigationCache<
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
-  const parentNavigation = React.useContext(NavigationContext);
-
   const cache = React.useMemo(
     () => ({ current: {} as NavigationCache<State, ScreenOptions> }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getState, navigation, setOptions, router, emitter, parentNavigation]
+    [getState, navigation, setOptions, router, emitter]
   );
 
   const actions = {
@@ -99,8 +96,6 @@ export default function useNavigationCache<
           ...rest,
           ...helpers,
           ...emitter.create(route.key),
-          dangerouslyGetParent: () => parentNavigation as any,
-          dangerouslyGetState: getState,
           dispatch,
           setOptions: (options: object) =>
             setOptions((o) => ({

packages/core/src/useNavigationHelpers.tsx

@@ -112,6 +112,8 @@ export default function useNavigationHelpers<
           false
         );
       },
+      dangerouslyGetParent: () => parentNavigationHelpers as any,
+      dangerouslyGetState: getState,
     } as NavigationHelpers<ParamListBase, EventMap> &
       (NavigationProp<ParamListBase, string, any, any, any> | undefined);
   }, [router, getState, parentNavigationHelpers, emitter.emit, onAction]);

packages/core/src/useOptionsGetters.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { NavigationStateContext } from './BaseNavigationContainer';
+import { NavigationState } from '@react-navigation/routers';
+
+export default function useOptionsGetters({
+  key,
+  getOptions,
+  getState,
+}: {
+  key?: string;
+  getOptions?: () => object | undefined;
+  getState?: () => NavigationState;
+}) {
+  const optionsGettersFromChild = React.useRef<
+    Record<string, (() => object | undefined | null) | undefined>
+  >({});
+
+  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
+    NavigationStateContext
+  );
+
+  const getOptionsFromListener = React.useCallback(() => {
+    for (let key in optionsGettersFromChild.current) {
+      if (optionsGettersFromChild.current.hasOwnProperty(key)) {
+        const result = optionsGettersFromChild.current[key]?.();
+        // null means unfocused route
+        if (result !== null) {
+          return result;
+        }
+      }
+    }
+    return null;
+  }, []);
+
+  const getCurrentOptions = React.useCallback(() => {
+    if (getState) {
+      const state = getState();
+      if (state.routes[state.index].key !== key) {
+        // null means unfocused route
+        return null;
+      }
+    }
+
+    const optionsFromListener = getOptionsFromListener();
+    if (optionsFromListener !== null) {
+      return optionsFromListener;
+    }
+    return getOptions?.() ?? undefined;
+  }, [getState, getOptionsFromListener, getOptions, key]);
+
+  React.useEffect(() => {
+    return parentAddOptionsGetter?.(key!, getCurrentOptions);
+  }, [getCurrentOptions, parentAddOptionsGetter, key]);
+
+  const addOptionsGetter = React.useCallback(
+    (key: string, getter: () => object | undefined | null) => {
+      optionsGettersFromChild.current[key] = getter;
+
+      return () => {
+        optionsGettersFromChild.current[key] = undefined;
+      };
+    },
+    []
+  );
+
+  return {
+    addOptionsGetter,
+    getCurrentOptions,
+  };
+}

packages/core/src/useRegisterNavigator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import shortid from 'shortid';
+import { nanoid } from 'nanoid/non-secure';
 import { SingleNavigatorContext } from './EnsureSingleNavigator';
 
 /**
@@ -7,7 +7,7 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  * This is used to prevent multiple navigators under a single container or screen.
  */
 export default function useRegisterNavigator() {
-  const [key] = React.useState(() => shortid());
+  const [key] = React.useState(() => nanoid());
   const container = React.useContext(SingleNavigatorContext);
 
   if (container === undefined) {

packages/core/src/useScheduleUpdate.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+const MISSING_CONTEXT_ERROR = "Couldn't find a schedule context.";
+
+export const ScheduleUpdateContext = React.createContext<{
+  scheduleUpdate: (callback: () => void) => void;
+  flushUpdates: () => void;
+}>({
+  scheduleUpdate() {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  flushUpdates() {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+});
+
+/**
+ * When screen config changes, we want to update the navigator in the same update phase.
+ * However, navigation state is in the root component and React won't let us update it from a child.
+ * This is a workaround for that, the scheduled update is stored in the ref without actually calling setState.
+ * It lets all subsequent updates access the latest state so it stays correct.
+ * Then we call setState during after the component updates.
+ */
+export default function useScheduleUpdate(callback: () => void) {
+  const { scheduleUpdate, flushUpdates } = React.useContext(
+    ScheduleUpdateContext
+  );
+
+  scheduleUpdate(callback);
+
+  React.useEffect(flushUpdates);
+}

packages/core/src/useSyncState.tsx

@@ -2,8 +2,21 @@ import * as React from 'react';
 
 const UNINTIALIZED_STATE = {};
 
+/**
+ * This is definitely not compatible with concurrent mode, but we don't have a solution for sync state yet.
+ */
 export default function useSyncState<T>(initialState?: (() => T) | T) {
   const stateRef = React.useRef<T>(UNINTIALIZED_STATE as any);
+  const isSchedulingRef = React.useRef(false);
+  const isMountedRef = React.useRef(true);
+
+  React.useEffect(() => {
+    isMountedRef.current = true;
+
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
 
   if (stateRef.current === UNINTIALIZED_STATE) {
     stateRef.current =
@@ -11,18 +24,49 @@ export default function useSyncState<T>(initialState?: (() => T) | T) {
       typeof initialState === 'function' ? initialState() : initialState;
   }
 
-  const [state, setTrackingState] = React.useState(stateRef.current);
+  const [trackingState, setTrackingState] = React.useState(stateRef.current);
 
   const getState = React.useCallback(() => stateRef.current, []);
 
   const setState = React.useCallback((state: T) => {
-    if (state === stateRef.current) {
+    if (state === stateRef.current || !isMountedRef.current) {
       return;
     }
 
     stateRef.current = state;
-    setTrackingState(state);
+
+    if (!isSchedulingRef.current) {
+      setTrackingState(state);
+    }
   }, []);
 
-  return [state, getState, setState] as const;
+  const scheduleUpdate = React.useCallback((callback: () => void) => {
+    isSchedulingRef.current = true;
+
+    try {
+      callback();
+    } finally {
+      isSchedulingRef.current = false;
+    }
+  }, []);
+
+  const flushUpdates = React.useCallback(() => {
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    // Make sure that the tracking state is up-to-date.
+    // We call it unconditionally, but React should skip the update if state is unchanged.
+    setTrackingState(stateRef.current);
+  }, []);
+
+  // If we're rendering and the tracking state is out of date, update it immediately
+  // This will make sure that our updates are applied as early as possible.
+  if (trackingState !== stateRef.current) {
+    setTrackingState(stateRef.current);
+  }
+
+  const state = stateRef.current;
+
+  return [state, getState, setState, scheduleUpdate, flushUpdates] as const;
 }

packages/drawer/CHANGELOG.md

@@ -3,6 +3,179 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.7.7](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.6...@react-navigation/drawer@5.7.7) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.7.6](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.5...@react-navigation/drawer@5.7.6) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.7.5](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.4...@react-navigation/drawer@5.7.5) (2020-05-16)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.7.4](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.3...@react-navigation/drawer@5.7.4) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.7.3](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.2...@react-navigation/drawer@5.7.3) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.7.2](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.1...@react-navigation/drawer@5.7.2) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.7.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.7.0...@react-navigation/drawer@5.7.1) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+# [5.7.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.6.4...@react-navigation/drawer@5.7.0) (2020-05-08)
+
+
+### Features
+
+* add generic type aliases for screen props ([bea14aa](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/bea14aa26fd5cbfebc7973733c5cf1f44fd323aa)), closes [#7971](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7971)
+
+
+
+
+
+## [5.6.4](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.6.3...@react-navigation/drawer@5.6.4) (2020-05-05)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.6.3](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.6.2...@react-navigation/drawer@5.6.3) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.6.2](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.6.1...@react-navigation/drawer@5.6.2) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.6.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.6.0...@react-navigation/drawer@5.6.1) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.6.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.5.1...@react-navigation/drawer@5.6.0) (2020-04-30)
+
+
+### Bug Fixes
+
+* fix closing drawer on web with tap on overlay ([70be3f6](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/70be3f6d863c56211e2f90bdf743bd8526338248))
+* make sure the address bar hides when scrolling on web ([0a19e94](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/0a19e94b23a4d2b5f22d1d9deb0544f586f475ee))
+
+
+### Features
+
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/942d2be2c72720469475ce12ec8df23825994dbf))
+
+
+
+
+
+## [5.5.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.5.0...@react-navigation/drawer@5.5.1) (2020-04-27)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.4.1...@react-navigation/drawer@5.5.0) (2020-04-17)
+
+
+### Bug Fixes
+
+* fix drawer not closing on web ([e2bcf51](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/e2bcf5168c389833eaaeadb4b8794aaea4a66d17)), closes [#6759](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/6759)
+* webkit style error in overlay ([821343f](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/821343fed38577cfdc87a78f13f991d5760bf8f5))
+
+
+### Features
+
+* add openByDefault option to drawer ([36689e2](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/36689e24c21b474692bb7ecd0b901c8afbbe9a20))
+
+
+
+
+
+## [5.4.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.4.0...@react-navigation/drawer@5.4.1) (2020-04-08)
+
+
+### Bug Fixes
+
+* don't hide content from accessibility with permanent drawer ([cb2f157](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/cb2f157a561a2ce3f073eb4ccb567532c77bd869)), closes [#7976](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7976)
+* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
+
+
+
+
+
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.3.4...@react-navigation/drawer@5.4.0) (2020-03-30)
+
+
+### Bug Fixes
+
+* disable only swipe gesture on safari ([105da6a](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/105da6ab2fe69847b676c4d4117638212cda1f9a))
+
+
+### Features
+
+* add swipeEnabled option to disable swipe gesture in drawer ([#7834](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7834)) ([ac7f972](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/ac7f972e922a82cd32d943356941d100b68bd8b0))
+
+
+
+
+
 ## [5.3.4](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.3.3...@react-navigation/drawer@5.3.4) (2020-03-23)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.3.4",
+  "version": "5.7.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -20,6 +20,7 @@
   "homepage": "https://reactnavigation.org/docs/drawer-navigator.html",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -39,18 +40,18 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.1.3",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
+    "@react-native-community/bob": "^0.14.3",
+    "@react-navigation/native": "^5.4.2",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.6.0",
-    "react-native-reanimated": "^1.7.0",
+    "react-native-reanimated": "^1.8.0",
     "react-native-safe-area-context": "^0.7.3",
-    "react-native-screens": "^2.3.0",
-    "typescript": "^3.7.5"
+    "react-native-screens": "^2.7.0",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/drawer/src/index.tsx

@@ -22,9 +22,10 @@ export { default as useIsDrawerOpen } from './utils/useIsDrawerOpen';
 /**
  * Types
  */
-export {
+export type {
   DrawerNavigationOptions,
   DrawerNavigationProp,
+  DrawerScreenProps,
   DrawerContentOptions,
   DrawerContentComponentProps,
 } from './types';

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -21,6 +21,7 @@ type Props = DefaultNavigatorOptions<DrawerNavigationOptions> &
 
 function DrawerNavigator({
   initialRouteName,
+  openByDefault,
   backBehavior,
   children,
   screenOptions,
@@ -33,6 +34,7 @@ function DrawerNavigator({
     DrawerNavigationEventMap
   >(DrawerRouter, {
     initialRouteName,
+    openByDefault,
     backBehavior,
     children,
     screenOptions,

packages/drawer/src/types.tsx

@@ -8,8 +8,9 @@ import {
   NavigationHelpers,
   DrawerNavigationState,
   DrawerActionHelpers,
+  RouteProp,
 } from '@react-navigation/native';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
 
 export type Scene = {
   route: Route<string>;
@@ -32,6 +33,7 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   drawerType?: 'front' | 'back' | 'slide' | 'permanent';
   /**
    * How far from the edge of the screen the swipe gesture should activate.
+   * Not supported on Web.
    */
   edgeWidth?: number;
   /**
@@ -58,8 +60,9 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   statusBarAnimation?: 'slide' | 'none' | 'fade';
   /**
    * Props to pass to the underlying pan gesture handler.
+   * Not supported on Web.
    */
-  gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
+  gestureHandlerProps?: PanGestureHandlerProperties;
   /**
    * Whether the screens should render the first time they are accessed. Defaults to `true`.
    * Set it to `false` if you want to render all screens on initial render.
@@ -111,9 +114,20 @@ export type DrawerNavigationOptions = {
 
   /**
    * Whether you can use gestures to open or close the drawer.
-   * Defaults to `true`
+   * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
+   * See `swipeEnabled` to disable only the swipe gesture.
+   * Defaults to `true`.
+   * Not supported on Web.
    */
   gestureEnabled?: boolean;
+
+  /**
+   * Whether you can use swipe gestures to open or close the drawer.
+   * Defaults to `true`.
+   * Not supported on Web.
+   */
+  swipeEnabled?: boolean;
+
   /**
    * Whether this screen should be unmounted when navigating away from it.
    * Defaults to `false`.
@@ -195,6 +209,14 @@ export type DrawerNavigationProp<
 > &
   DrawerActionHelpers<ParamList>;
 
+export type DrawerScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = {
+  navigation: DrawerNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
 export type DrawerDescriptor = Descriptor<
   ParamListBase,
   string,

packages/drawer/src/views/Drawer.tsx

@@ -10,13 +10,14 @@ import {
   StyleProp,
   View,
   InteractionManager,
+  TouchableWithoutFeedback,
 } from 'react-native';
+import Animated from 'react-native-reanimated';
 import {
   PanGestureHandler,
   TapGestureHandler,
-  State,
-} from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+  GestureState,
+} from './GestureHandler';
 import Overlay from './Overlay';
 
 const {
@@ -78,8 +79,8 @@ type Props = {
   open: boolean;
   onOpen: () => void;
   onClose: () => void;
-  onGestureRef?: (ref: PanGestureHandler | null) => void;
   gestureEnabled: boolean;
+  swipeEnabled: boolean;
   drawerPosition: 'left' | 'right';
   drawerType: 'front' | 'back' | 'slide' | 'permanent';
   keyboardDismissMode: 'none' | 'on-drag';
@@ -94,32 +95,15 @@ type Props = {
   renderDrawerContent: Renderer;
   renderSceneContent: Renderer;
   gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
+  dimensions: { width: number; height: number };
 };
 
-/**
- * Disables the pan gesture by default on Apple devices in the browser.
- * https://stackoverflow.com/a/9039885
- */
-function shouldEnableGesture(): boolean {
-  if (
-    Platform.OS === 'web' &&
-    typeof navigator !== 'undefined' &&
-    typeof window !== 'undefined'
-  ) {
-    const isWebAppleDevice =
-      /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-
-    return !isWebAppleDevice;
-  }
-
-  return true;
-}
-
-export default class DrawerView extends React.PureComponent<Props> {
+export default class DrawerView extends React.Component<Props> {
   static defaultProps = {
     drawerPostion: I18nManager.isRTL ? 'left' : 'right',
     drawerType: 'front',
-    gestureEnabled: shouldEnableGesture(),
+    gestureEnabled: true,
+    swipeEnabled: Platform.OS !== 'web',
     swipeEdgeWidth: 32,
     swipeVelocityThreshold: 500,
     keyboardDismissMode: 'on-drag',
@@ -138,16 +122,11 @@ export default class DrawerView extends React.PureComponent<Props> {
       open,
       drawerPosition,
       drawerType,
-      gestureEnabled,
       swipeDistanceThreshold,
       swipeVelocityThreshold,
       hideStatusBar,
     } = this.props;
 
-    if (prevProps.gestureEnabled !== gestureEnabled) {
-      this.isGestureEnabled.setValue(gestureEnabled ? TRUE : FALSE);
-    }
-
     if (
       // If we're not in the middle of a transition, sync the drawer's open state
       typeof this.pendingOpenValue !== 'boolean' ||
@@ -217,30 +196,54 @@ export default class DrawerView extends React.PureComponent<Props> {
     }
   };
 
+  private getDrawerWidth = (): number => {
+    const { drawerStyle, dimensions } = this.props;
+    const { width } = StyleSheet.flatten(drawerStyle);
+
+    if (typeof width === 'string' && width.endsWith('%')) {
+      // Try to calculate width if a percentage is given
+      const percentage = Number(width.replace(/%$/, ''));
+
+      if (Number.isFinite(percentage)) {
+        return dimensions.width * (percentage / 100);
+      }
+    }
+
+    return typeof width === 'number' ? width : 0;
+  };
+
   private clock = new Clock();
   private interactionHandle: number | undefined;
 
   private isDrawerTypeFront = new Value<Binary>(
     this.props.drawerType === 'front' ? TRUE : FALSE
   );
-  private isGestureEnabled = new Value(
-    this.props.gestureEnabled ? TRUE : FALSE
-  );
 
   private isOpen = new Value<Binary>(this.props.open ? TRUE : FALSE);
   private nextIsOpen = new Value<Binary | -1>(UNSET);
   private isSwiping = new Value<Binary>(FALSE);
 
-  private gestureState = new Value<number>(State.UNDETERMINED);
+  private initialDrawerWidth = this.getDrawerWidth();
+
+  private gestureState = new Value<number>(GestureState.UNDETERMINED);
   private touchX = new Value<number>(0);
   private velocityX = new Value<number>(0);
   private gestureX = new Value<number>(0);
   private offsetX = new Value<number>(0);
-  private position = new Value<number>(0);
+  private position = new Value<number>(
+    this.props.open
+      ? this.initialDrawerWidth *
+        (this.props.drawerPosition === 'right'
+          ? DIRECTION_RIGHT
+          : DIRECTION_LEFT)
+      : 0
+  );
 
-  private containerWidth = new Value<number>(0);
-  private drawerWidth = new Value<number>(0);
-  private drawerOpacity = new Value<number>(0);
+  private containerWidth = new Value<number>(this.props.dimensions.width);
+  private drawerWidth = new Value<number>(this.initialDrawerWidth);
+  private drawerOpacity = new Value<number>(
+    this.initialDrawerWidth || this.props.drawerType === 'permanent' ? 1 : 0
+  );
   private drawerPosition = new Value<number>(
     this.props.drawerPosition === 'right' ? DIRECTION_RIGHT : DIRECTION_LEFT
   );
@@ -418,12 +421,12 @@ export default class DrawerView extends React.PureComponent<Props> {
     onChange(
       this.gestureState,
       cond(
-        eq(this.gestureState, State.ACTIVE),
+        eq(this.gestureState, GestureState.ACTIVE),
         call([], this.handleStartInteraction)
       )
     ),
     cond(
-      eq(this.gestureState, State.ACTIVE),
+      eq(this.gestureState, GestureState.ACTIVE),
       [
         cond(this.isSwiping, NOOP, [
           // We weren't dragging before, set it to true
@@ -511,7 +514,10 @@ export default class DrawerView extends React.PureComponent<Props> {
     {
       nativeEvent: {
         oldState: (s: Animated.Value<number>) =>
-          cond(eq(s, State.ACTIVE), set(this.manuallyTriggerSpring, TRUE)),
+          cond(
+            eq(s, GestureState.ACTIVE),
+            set(this.manuallyTriggerSpring, TRUE)
+          ),
       },
     },
   ]);
@@ -554,13 +560,13 @@ export default class DrawerView extends React.PureComponent<Props> {
     const {
       open,
       gestureEnabled,
+      swipeEnabled,
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
       sceneContainerStyle,
       drawerStyle,
       overlayStyle,
-      onGestureRef,
       renderDrawerContent,
       renderSceneContent,
       gestureHandlerProps,
@@ -569,9 +575,15 @@ export default class DrawerView extends React.PureComponent<Props> {
     const isOpen = drawerType === 'permanent' ? true : open;
     const isRight = drawerPosition === 'right';
 
-    const contentTranslateX = drawerType === 'front' ? 0 : this.translateX;
+    const contentTranslateX =
+      drawerType === 'front' || drawerType === 'permanent'
+        ? 0
+        : this.translateX;
+
     const drawerTranslateX =
-      drawerType === 'back'
+      drawerType === 'permanent'
+        ? 0
+        : drawerType === 'back'
         ? I18nManager.isRTL
           ? multiply(
               sub(this.containerWidth, this.drawerWidth),
@@ -599,13 +611,12 @@ export default class DrawerView extends React.PureComponent<Props> {
 
     return (
       <PanGestureHandler
-        ref={onGestureRef}
         activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         onGestureEvent={this.handleGestureEvent}
         onHandlerStateChange={this.handleGestureStateChange}
         hitSlop={hitSlop}
-        enabled={drawerType !== 'permanent' && gestureEnabled}
+        enabled={drawerType !== 'permanent' && gestureEnabled && swipeEnabled}
         {...gestureHandlerProps}
       >
         <Animated.View
@@ -621,31 +632,46 @@ export default class DrawerView extends React.PureComponent<Props> {
           <Animated.View
             style={[
               styles.content,
-              drawerType !== 'permanent' && {
-                transform: [{ translateX: contentTranslateX }],
-              },
+              { transform: [{ translateX: contentTranslateX }] },
               sceneContainerStyle as any,
             ]}
           >
             <View
-              accessibilityElementsHidden={isOpen}
+              accessibilityElementsHidden={isOpen && drawerType !== 'permanent'}
               importantForAccessibility={
-                isOpen ? 'no-hide-descendants' : 'auto'
+                isOpen && drawerType !== 'permanent'
+                  ? 'no-hide-descendants'
+                  : 'auto'
               }
               style={styles.content}
             >
               {renderSceneContent({ progress })}
             </View>
-            {// Disable overlay if sidebar is permanent
-            drawerType === 'permanent' ? null : (
-              <TapGestureHandler
-                enabled={gestureEnabled}
-                onHandlerStateChange={this.handleTapStateChange}
-              >
-                <Overlay progress={progress} style={overlayStyle} />
-              </TapGestureHandler>
-            )}
+            {
+              // Disable overlay if sidebar is permanent
+              drawerType === 'permanent' ? null : Platform.OS === 'web' ? (
+                <TouchableWithoutFeedback
+                  onPress={
+                    gestureEnabled ? () => this.toggleDrawer(false) : undefined
+                  }
+                >
+                  <Overlay progress={progress} style={overlayStyle as any} />
+                </TouchableWithoutFeedback>
+              ) : (
+                <TapGestureHandler
+                  enabled={gestureEnabled}
+                  onHandlerStateChange={this.handleTapStateChange}
+                >
+                  <Overlay progress={progress} style={overlayStyle as any} />
+                </TapGestureHandler>
+              )
+            }
           </Animated.View>
+          <Animated.Code
+            // This is needed to make sure that container width updates with `setValue`
+            // Without this, it won't update when not used in styles
+            exec={this.containerWidth}
+          />
           {drawerType === 'permanent' ? null : (
             <Animated.Code
               exec={block([
@@ -659,11 +685,15 @@ export default class DrawerView extends React.PureComponent<Props> {
             />
           )}
           <Animated.View
-            accessibilityViewIsModal={isOpen}
+            accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
             removeClippedSubviews={Platform.OS !== 'ios'}
             onLayout={this.handleDrawerLayout}
             style={[
               styles.container,
+              {
+                transform: [{ translateX: drawerTranslateX }],
+                opacity: this.drawerOpacity,
+              },
               drawerType === 'permanent'
                 ? // Without this, the `left`/`right` values don't get reset
                   isRight
@@ -671,10 +701,6 @@ export default class DrawerView extends React.PureComponent<Props> {
                   : { left: 0 }
                 : [
                     styles.nonPermanent,
-                    {
-                      transform: [{ translateX: drawerTranslateX }],
-                      opacity: this.drawerOpacity,
-                    },
                     isRight ? { right: offset } : { left: offset },
                     { zIndex: drawerType === 'back' ? -1 : 0 },
                   ],
@@ -705,6 +731,11 @@ const styles = StyleSheet.create({
   },
   main: {
     flex: 1,
-    overflow: 'hidden',
+    ...Platform.select({
+      // FIXME: We need to hide `overflowX` on Web so the translated content doesn't show offscreen.
+      // But adding `overflowX: 'hidden'` prevents content from collapsing the URL bar.
+      web: null,
+      default: { overflow: 'hidden' },
+    }),
   },
 });

packages/drawer/src/views/DrawerItem.tsx

@@ -6,8 +6,10 @@ import {
   StyleProp,
   ViewStyle,
   TextStyle,
+  Platform,
+  TouchableWithoutFeedbackProps,
 } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import { Link, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import TouchableItem from './TouchableItem';
 
@@ -26,6 +28,10 @@ type Props = {
     size: number;
     color: string;
   }) => React.ReactNode;
+  /**
+   * URL to use for the link to the tab.
+   */
+  to?: string;
   /**
    * Whether to highlight the drawer item as active.
    */
@@ -60,6 +66,54 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
+const Touchable = ({
+  children,
+  style,
+  onPress,
+  to,
+  accessibilityRole,
+  delayPressIn,
+  ...rest
+}: TouchableWithoutFeedbackProps & {
+  to?: string;
+  children: React.ReactNode;
+  onPress?: () => void;
+}) => {
+  if (Platform.OS === 'web' && to) {
+    // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
+    // We need to use `onClick` to be able to prevent default browser handling of links.
+    return (
+      <Link
+        {...rest}
+        to={to}
+        style={[styles.button, style]}
+        onPress={(e: any) => {
+          if (
+            !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+            (e.button == null || e.button === 0) // ignore everything but left clicks
+          ) {
+            e.preventDefault();
+            onPress?.(e);
+          }
+        }}
+      >
+        {children}
+      </Link>
+    );
+  } else {
+    return (
+      <TouchableItem
+        {...rest}
+        accessibilityRole={accessibilityRole}
+        delayPressIn={delayPressIn}
+        onPress={onPress}
+      >
+        <View style={style}>{children}</View>
+      </TouchableItem>
+    );
+  }
+};
+
 /**
  * A component used to show an action item with an icon and a label in a navigation drawer.
  */
@@ -70,6 +124,7 @@ export default function DrawerItem(props: Props) {
     icon,
     label,
     labelStyle,
+    to,
     focused = false,
     activeTintColor = colors.primary,
     inactiveTintColor = Color(colors.text).alpha(0.68).rgb().string(),
@@ -94,7 +149,7 @@ export default function DrawerItem(props: Props) {
       {...rest}
       style={[styles.container, { borderRadius, backgroundColor }, style]}
     >
-      <TouchableItem
+      <Touchable
         delayPressIn={0}
         onPress={onPress}
         style={[styles.wrapper, { borderRadius }]}
@@ -102,6 +157,7 @@ export default function DrawerItem(props: Props) {
         accessibilityComponentType="button"
         accessibilityRole="button"
         accessibilityStates={focused ? ['selected'] : []}
+        to={to}
       >
         <React.Fragment>
           {iconNode}
@@ -129,7 +185,7 @@ export default function DrawerItem(props: Props) {
             )}
           </View>
         </React.Fragment>
-      </TouchableItem>
+      </Touchable>
     </View>
   );
 }
@@ -148,4 +204,7 @@ const styles = StyleSheet.create({
   label: {
     marginRight: 32,
   },
+  button: {
+    display: 'flex',
+  },
 });

packages/drawer/src/views/DrawerItemList.tsx

@@ -3,6 +3,7 @@ import {
   CommonActions,
   DrawerActions,
   DrawerNavigationState,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import DrawerItem from './DrawerItem';
 import {
@@ -31,6 +32,8 @@ export default function DrawerItemList({
   itemStyle,
   labelStyle,
 }: Props) {
+  const buildLink = useLinkBuilder();
+
   return (state.routes.map((route, i) => {
     const focused = i === state.index;
     const { title, drawerLabel, drawerIcon } = descriptors[route.key].options;
@@ -53,6 +56,7 @@ export default function DrawerItemList({
         inactiveBackgroundColor={inactiveBackgroundColor}
         labelStyle={labelStyle}
         style={itemStyle}
+        to={buildLink(route.name, route.params)}
         onPress={() => {
           navigation.dispatch({
             ...(focused

packages/drawer/src/views/DrawerView.tsx

@@ -12,16 +12,13 @@ import {
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 import {
-  PanGestureHandler,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler';
-import {
+  NavigationHelpersContext,
   DrawerNavigationState,
   DrawerActions,
   useTheme,
 } from '@react-navigation/native';
 
-import DrawerGestureContext from '../utils/DrawerGestureContext';
+import { GestureHandlerRootView } from './GestureHandler';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import DrawerContent from './DrawerContent';
@@ -89,13 +86,9 @@ export default function DrawerView({
   sceneContainerStyle,
 }: Props) {
   const [loaded, setLoaded] = React.useState([state.index]);
-  const [drawerWidth, setDrawerWidth] = React.useState(() => {
-    const { height = 0, width = 0 } = Dimensions.get('window');
-
-    return getDefaultDrawerWidth({ height, width });
-  });
-
-  const drawerGestureRef = React.useRef<PanGestureHandler>(null);
+  const [dimensions, setDimensions] = React.useState(() =>
+    Dimensions.get('window')
+  );
 
   const { colors } = useTheme();
 
@@ -141,13 +134,13 @@ export default function DrawerView({
   }, [handleDrawerClose, isDrawerOpen, navigation, state.key]);
 
   React.useEffect(() => {
-    const updateWidth = ({ window }: { window: ScaledSize }) => {
-      setDrawerWidth(getDefaultDrawerWidth(window));
+    const updateDimensions = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
     };
 
-    Dimensions.addEventListener('change', updateWidth);
+    Dimensions.addEventListener('change', updateDimensions);
 
-    return () => Dimensions.removeEventListener('change', updateWidth);
+    return () => Dimensions.removeEventListener('change', updateDimensions);
   }, []);
 
   if (!loaded.includes(state.index)) {
@@ -200,22 +193,19 @@ export default function DrawerView({
   };
 
   const activeKey = state.routes[state.index].key;
-  const { gestureEnabled } = descriptors[activeKey].options;
+  const { gestureEnabled, swipeEnabled } = descriptors[activeKey].options;
 
   return (
-    <GestureHandlerWrapper style={styles.content}>
-      <SafeAreaProviderCompat>
-        <DrawerGestureContext.Provider value={drawerGestureRef}>
+    <NavigationHelpersContext.Provider value={navigation}>
+      <GestureHandlerWrapper style={styles.content}>
+        <SafeAreaProviderCompat>
           <DrawerOpenContext.Provider value={isDrawerOpen}>
             <Drawer
               open={isDrawerOpen}
               gestureEnabled={gestureEnabled}
+              swipeEnabled={swipeEnabled}
               onOpen={handleDrawerOpen}
               onClose={handleDrawerClose}
-              onGestureRef={(ref) => {
-                // @ts-ignore
-                drawerGestureRef.current = ref;
-              }}
               gestureHandlerProps={gestureHandlerProps}
               drawerType={drawerType}
               drawerPosition={drawerPosition}
@@ -224,7 +214,10 @@ export default function DrawerView({
                 sceneContainerStyle,
               ]}
               drawerStyle={[
-                { width: drawerWidth, backgroundColor: colors.card },
+                {
+                  width: getDefaultDrawerWidth(dimensions),
+                  backgroundColor: colors.card,
+                },
                 drawerType === 'permanent' &&
                   (drawerPosition === 'left'
                     ? {
@@ -246,11 +239,12 @@ export default function DrawerView({
               renderSceneContent={renderContent}
               keyboardDismissMode={keyboardDismissMode}
               drawerPostion={drawerPosition}
+              dimensions={dimensions}
             />
           </DrawerOpenContext.Provider>
-        </DrawerGestureContext.Provider>
-      </SafeAreaProviderCompat>
-    </GestureHandlerWrapper>
+        </SafeAreaProviderCompat>
+      </GestureHandlerWrapper>
+    </NavigationHelpersContext.Provider>
   );
 }
 

packages/drawer/src/views/GestureHandler.native.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {
+  PanGestureHandler as PanGestureHandlerNative,
+  PanGestureHandlerProperties,
+} from 'react-native-gesture-handler';
+import DrawerGestureContext from '../utils/DrawerGestureContext';
+
+export function PanGestureHandler(props: PanGestureHandlerProperties) {
+  const gestureRef = React.useRef<PanGestureHandlerNative>(null);
+
+  return (
+    <DrawerGestureContext.Provider value={gestureRef}>
+      <PanGestureHandlerNative {...props} />
+    </DrawerGestureContext.Provider>
+  );
+}
+
+export {
+  GestureHandlerRootView,
+  TapGestureHandler,
+  State as GestureState,
+  PanGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';

packages/drawer/src/views/GestureHandler.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type {
+  PanGestureHandlerProperties,
+  TapGestureHandlerProperties,
+} from 'react-native-gesture-handler';
+
+const Dummy: any = ({ children }: { children: React.ReactNode }) => (
+  <>{children}</>
+);
+
+export const PanGestureHandler = Dummy as React.ComponentType<
+  PanGestureHandlerProperties
+>;
+
+export const TapGestureHandler = Dummy as React.ComponentType<
+  TapGestureHandlerProperties
+>;
+
+export const GestureHandlerRootView = View;
+
+export const GestureState = {
+  UNDETERMINED: 0,
+  FAILED: 1,
+  BEGAN: 2,
+  CANCELLED: 3,
+  ACTIVE: 4,
+  END: 5,
+};
+
+export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';

packages/drawer/src/views/Overlay.tsx

@@ -29,22 +29,24 @@ const Overlay = React.forwardRef(function Overlay(
     <Animated.View
       {...props}
       ref={ref}
-      style={[styles.overlay, animatedStyle, style]}
+      style={[styles.overlay, overlayStyle, animatedStyle, style]}
     />
   );
 });
 
+const overlayStyle = Platform.select<Record<string, string>>({
+  web: {
+    // Disable touch highlight on mobile Safari.
+    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.
+    WebkitTapHighlightColor: 'transparent',
+  },
+  default: {},
+});
+
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    ...Platform.select({
-      web: {
-        // Disable touch highlight on mobile Safari.
-        WebkitTapHighlightColor: 'transparent',
-      },
-      default: {},
-    }),
   },
 });
 

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -29,7 +29,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
           styles.container,
           Platform.OS === 'web'
             ? { display: isVisible ? 'flex' : 'none' }
-            : null,
+            : { overflow: 'hidden' },
           style,
         ]}
         collapsable={false}
@@ -52,7 +52,6 @@ export default class ResourceSavingScene extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    overflow: 'hidden',
   },
   attached: {
     flex: 1,

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.6...@react-navigation/material-bottom-tabs@5.2.7) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.6](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.5...@react-navigation/material-bottom-tabs@5.2.6) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.5](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.4...@react-navigation/material-bottom-tabs@5.2.5) (2020-05-16)
+
+
+### Bug Fixes
+
+* center icons in material tab bar. fixes [#8248](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/issues/8248) ([51b4087](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/commit/51b40879bdb9cea5462a2291955513a88eb87340))
+
+
+
+
+
+## [5.2.4](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.3...@react-navigation/material-bottom-tabs@5.2.4) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.2...@react-navigation/material-bottom-tabs@5.2.3) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.1...@react-navigation/material-bottom-tabs@5.2.2) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.2.0...@react-navigation/material-bottom-tabs@5.2.1) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.15...@react-navigation/material-bottom-tabs@5.2.0) (2020-05-08)
+
+
+### Features
+
+* add generic type aliases for screen props ([bea14aa](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/commit/bea14aa26fd5cbfebc7973733c5cf1f44fd323aa)), closes [#7971](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/issues/7971)
+* use links in bottom navigation tabs ([f384706](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/commit/f384706741f7e2422c284b65da10425f7af680c0))
+
+
+
+
+
+## [5.1.15](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.14...@react-navigation/material-bottom-tabs@5.1.15) (2020-05-05)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.14](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.13...@react-navigation/material-bottom-tabs@5.1.14) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.13](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.12...@react-navigation/material-bottom-tabs@5.1.13) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.12](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.11...@react-navigation/material-bottom-tabs@5.1.12) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.11](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.10...@react-navigation/material-bottom-tabs@5.1.11) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.10](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.9...@react-navigation/material-bottom-tabs@5.1.10) (2020-04-27)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.9](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.8...@react-navigation/material-bottom-tabs@5.1.9) (2020-04-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.8](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.7...@react-navigation/material-bottom-tabs@5.1.8) (2020-04-08)
+
+
+### Bug Fixes
+
+* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
+
+
+
+
+
+## [5.1.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.6...@react-navigation/material-bottom-tabs@5.1.7) (2020-03-30)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.5...@react-navigation/material-bottom-tabs@5.1.6) (2020-03-23)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.1.6",
+  "version": "5.2.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -20,6 +20,7 @@
   "homepage": "https://reactnavigation.org/docs/material-bottom-tab-navigator.html",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -35,17 +36,17 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.1.3",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
+    "@react-native-community/bob": "^0.14.3",
+    "@react-navigation/native": "^5.4.2",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.7",
     "@types/react-native-vector-icons": "^6.4.5",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-paper": "^3.6.0",
+    "react-native-paper": "^3.10.1",
     "react-native-vector-icons": "^6.6.0",
-    "typescript": "^3.7.5"
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/material-bottom-tabs/src/index.tsx

@@ -11,7 +11,8 @@ export { default as MaterialBottomTabView } from './views/MaterialBottomTabView'
 /**
  * Types
  */
-export {
+export type {
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationProp,
+  MaterialBottomTabScreenProps,
 } from './types';

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

@@ -6,6 +6,7 @@ import {
   NavigationHelpers,
   TabNavigationState,
   TabActionHelpers,
+  RouteProp,
 } from '@react-navigation/native';
 
 export type MaterialBottomTabNavigationEventMap = {
@@ -32,6 +33,14 @@ export type MaterialBottomTabNavigationProp<
 > &
   TabActionHelpers<ParamList>;
 
+export type MaterialBottomTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = {
+  navigation: MaterialBottomTabNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
 export type MaterialBottomTabNavigationOptions = {
   /**
    * Title text for the screen.

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
+  NavigationHelpersContext,
   Route,
   TabNavigationState,
   TabActions,
   useTheme,
+  useLinkBuilder,
+  Link,
 } from '@react-navigation/native';
 
 import {
@@ -23,13 +26,14 @@ type Props = MaterialBottomTabNavigationConfig & {
 
 type Scene = { route: { key: string } };
 
-export default function MaterialBottomTabView({
+function MaterialBottomTabViewInner({
   state,
   navigation,
   descriptors,
   ...rest
 }: Props) {
   const { dark, colors } = useTheme();
+  const buildLink = useLinkBuilder();
 
   const theme = React.useMemo(() => {
     const t = dark ? DarkTheme : DefaultTheme;
@@ -56,6 +60,39 @@ export default function MaterialBottomTabView({
         })
       }
       renderScene={({ route }) => descriptors[route.key].render()}
+      renderTouchable={
+        Platform.OS === 'web'
+          ? ({
+              onPress,
+              route,
+              accessibilityRole: _0,
+              borderless: _1,
+              centered: _2,
+              rippleColor: _3,
+              style,
+              ...rest
+            }) => {
+              return (
+                <Link
+                  {...rest}
+                  // @ts-ignore
+                  to={buildLink(route.name, route.params)}
+                  accessibilityRole="link"
+                  onPress={(e: any) => {
+                    if (
+                      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+                      (e.button == null || e.button === 0) // ignore everything but left clicks
+                    ) {
+                      e.preventDefault();
+                      onPress?.(e);
+                    }
+                  }}
+                  style={[styles.touchable, style]}
+                />
+              );
+            }
+          : undefined
+      }
       renderIcon={({ route, focused, color }) => {
         const { options } = descriptors[route.key];
 
@@ -66,8 +103,6 @@ export default function MaterialBottomTabView({
               color={color}
               size={24}
               style={styles.icon}
-              importantForAccessibility="no-hide-descendants"
-              accessibilityElementsHidden
             />
           );
         }
@@ -108,8 +143,20 @@ export default function MaterialBottomTabView({
   );
 }
 
+export default function MaterialBottomTabView(props: Props) {
+  return (
+    <NavigationHelpersContext.Provider value={props.navigation}>
+      <MaterialBottomTabViewInner {...props} />
+    </NavigationHelpersContext.Provider>
+  );
+}
+
 const styles = StyleSheet.create({
   icon: {
     backgroundColor: 'transparent',
   },
+  touchable: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
 });

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.6...@react-navigation/material-top-tabs@5.2.7) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.6](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.5...@react-navigation/material-top-tabs@5.2.6) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.5](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.4...@react-navigation/material-top-tabs@5.2.5) (2020-05-16)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.4](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.3...@react-navigation/material-top-tabs@5.2.4) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.2...@react-navigation/material-top-tabs@5.2.3) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.1...@react-navigation/material-top-tabs@5.2.2) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.2.0...@react-navigation/material-top-tabs@5.2.1) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.15...@react-navigation/material-top-tabs@5.2.0) (2020-05-08)
+
+
+### Features
+
+* add generic type aliases for screen props ([bea14aa](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/commit/bea14aa26fd5cbfebc7973733c5cf1f44fd323aa)), closes [#7971](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/issues/7971)
+
+
+
+
+
+## [5.1.15](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.14...@react-navigation/material-top-tabs@5.1.15) (2020-05-05)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.14](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.13...@react-navigation/material-top-tabs@5.1.14) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.13](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.12...@react-navigation/material-top-tabs@5.1.13) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.12](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.11...@react-navigation/material-top-tabs@5.1.12) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.11](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.10...@react-navigation/material-top-tabs@5.1.11) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.10](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.9...@react-navigation/material-top-tabs@5.1.10) (2020-04-27)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.9](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.8...@react-navigation/material-top-tabs@5.1.9) (2020-04-17)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.8](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.7...@react-navigation/material-top-tabs@5.1.8) (2020-04-08)
+
+
+### Bug Fixes
+
+* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
+
+
+
+
+
+## [5.1.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.6...@react-navigation/material-top-tabs@5.1.7) (2020-03-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.5...@react-navigation/material-top-tabs@5.1.6) (2020-03-23)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.1.6",
+  "version": "5.2.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -20,6 +20,7 @@
   "homepage": "https://reactnavigation.org/docs/material-top-tab-navigator.html",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -38,17 +39,17 @@
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.1.3",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
+    "@react-native-community/bob": "^0.14.3",
+    "@react-navigation/native": "^5.4.2",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.6.0",
-    "react-native-reanimated": "^1.7.0",
-    "react-native-tab-view": "^2.13.0",
-    "typescript": "^3.7.5"
+    "react-native-reanimated": "^1.8.0",
+    "react-native-tab-view": "^2.14.0",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

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

@@ -12,9 +12,10 @@ export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
 /**
  * Types
  */
-export {
+export type {
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationProp,
+  MaterialTopTabScreenProps,
   MaterialTopTabBarProps,
   MaterialTopTabBarOptions,
 } from './types';

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

@@ -8,6 +8,7 @@ import {
   NavigationProp,
   TabNavigationState,
   TabActionHelpers,
+  RouteProp,
 } from '@react-navigation/native';
 
 export type MaterialTopTabNavigationEventMap = {
@@ -46,6 +47,14 @@ export type MaterialTopTabNavigationProp<
 > &
   TabActionHelpers<ParamList>;
 
+export type MaterialTopTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = {
+  navigation: MaterialTopTabNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
 export type MaterialTopTabNavigationOptions = {
   /**
    * Title text for the screen.

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TabView, SceneRendererProps } from 'react-native-tab-view';
 import {
+  NavigationHelpersContext,
   TabNavigationState,
   TabActions,
   useTheme,
@@ -45,25 +46,27 @@ export default function MaterialTopTabView({
   };
 
   return (
-    <TabView
-      {...rest}
-      onIndexChange={(index) =>
-        navigation.dispatch({
-          ...TabActions.jumpTo(state.routes[index].name),
-          target: state.key,
-        })
-      }
-      renderScene={({ route }) => descriptors[route.key].render()}
-      navigationState={state}
-      renderTabBar={renderTabBar}
-      renderPager={pager}
-      renderLazyPlaceholder={lazyPlaceholder}
-      onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
-      onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
-      sceneContainerStyle={[
-        { backgroundColor: colors.background },
-        sceneContainerStyle,
-      ]}
-    />
+    <NavigationHelpersContext.Provider value={navigation}>
+      <TabView
+        {...rest}
+        onIndexChange={(index) =>
+          navigation.dispatch({
+            ...TabActions.jumpTo(state.routes[index].name),
+            target: state.key,
+          })
+        }
+        renderScene={({ route }) => descriptors[route.key].render()}
+        navigationState={state}
+        renderTabBar={renderTabBar}
+        renderPager={pager}
+        renderLazyPlaceholder={lazyPlaceholder}
+        onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
+        onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
+        sceneContainerStyle={[
+          { backgroundColor: colors.background },
+          sceneContainerStyle,
+        ]}
+      />
+    </NavigationHelpersContext.Provider>
   );
 }

packages/native/CHANGELOG.md

@@ -3,6 +3,186 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.2](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.4.1...@react-navigation/native@5.4.2) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.4.1](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.4.0...@react-navigation/native@5.4.1) (2020-05-20)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.3.2...@react-navigation/native@5.4.0) (2020-05-16)
+
+
+### Bug Fixes
+
+* fix types for linking options ([d14f38b](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/d14f38b80ad569d5828c1919cea426c659173924))
+
+
+### Features
+
+* add a PathConfig type ([60cb3c9](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/60cb3c9ba76d7ef166c9fe8b55f23728975b5b6e))
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.3.1...@react-navigation/native@5.3.2) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.3.0...@react-navigation/native@5.3.1) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.6...@react-navigation/native@5.3.0) (2020-05-10)
+
+
+### Features
+
+* initialState should take priority over deep link ([039017b](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/039017bc2af69120d2d10e8f2c8a62919c37eb65))
+
+
+
+
+
+## [5.2.6](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.5...@react-navigation/native@5.2.6) (2020-05-08)
+
+
+### Bug Fixes
+
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+
+
+
+
+
+## [5.2.5](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.4...@react-navigation/native@5.2.5) (2020-05-08)
+
+
+### Bug Fixes
+
+* return a promise-like from getInitialState ([#8210](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/8210)) ([85ae378](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/85ae378d8cb1073895b281e13ebccee881d4c062))
+
+
+
+
+
+## [5.2.4](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.3...@react-navigation/native@5.2.4) (2020-05-05)
+
+
+### Bug Fixes
+
+* return undefined for buildLink if linking is not enabled ([9fd2635](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/9fd2635756362c8da79656b4d9b101bebaaf7003))
+
+
+
+
+
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.2...@react-navigation/native@5.2.3) (2020-05-01)
+
+
+### Bug Fixes
+
+* default linking enabled to true ([c7b8e2e](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/c7b8e2e9666733143eef156b27f3e4995c36b856))
+
+
+
+
+
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.1...@react-navigation/native@5.2.2) (2020-05-01)
+
+
+### Bug Fixes
+
+* don't throw when using 'useLinking'. fixes [#8171](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/8171) ([10eca8b](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/10eca8b92edbce6dbef8abaf189e4b59a29b3748))
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.2.0...@react-navigation/native@5.2.1) (2020-04-30)
+
+
+### Bug Fixes
+
+* render fallback only if linking is enabled. closes [#8161](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/8161) ([1c075ff](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/1c075ffb169d233ed0515efea264a5a69b4de52e))
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.7...@react-navigation/native@5.2.0) (2020-04-30)
+
+
+### Bug Fixes
+
+* add catch to thenable returned by getInitialState ([d6fa279](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/d6fa279d9371c7a6403d10d209a2a64147891c63))
+* return onPress instead of onClick for useLinkProps ([ae5442e](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/ae5442ebe812b91fa1f12164f27d1aeed918ab0e))
+
+
+### Features
+
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+* add a useLinkProps hook ([f2291d1](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/f2291d110faa2aa8e10c9133c1c0c28d54af7917))
+* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/942d2be2c72720469475ce12ec8df23825994dbf))
+* add Link component as useLinkTo hook for navigating to links ([2573b5b](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/2573b5beaac1240434e52f3f57bb29da2f541c88))
+
+
+
+
+
+## [5.1.7](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.6...@react-navigation/native@5.1.7) (2020-04-27)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.5...@react-navigation/native@5.1.6) (2020-04-17)
+
+
+### Bug Fixes
+
+* handle in-page go back when there's no history ([6bdf6ae](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/6bdf6ae4ed0f83ac1deb3172d9075a6a2adbbe11)), closes [#7852](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/7852)
+
+
+
+
+
+## [5.1.5](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.4...@react-navigation/native@5.1.5) (2020-04-08)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.3...@react-navigation/native@5.1.4) (2020-03-30)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.2...@react-navigation/native@5.1.3) (2020-03-23)
 
 

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.1.3",
+  "version": "5.4.2",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -16,6 +16,7 @@
   "homepage": "https://reactnavigation.org",
   "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
@@ -31,17 +32,17 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.3.1"
+    "@react-navigation/core": "^5.8.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
+    "@react-native-community/bob": "^0.14.3",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.7",
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-testing-library": "^1.12.0",
-    "typescript": "^3.7.5"
+    "react-native-testing-library": "^1.13.2",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "react": "*",

packages/native/src/Link.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Text, TextProps, GestureResponderEvent, Platform } from 'react-native';
+import { NavigationAction } from '@react-navigation/core';
+import useLinkProps from './useLinkProps';
+
+type Props = {
+  to: string;
+  action?: NavigationAction;
+  target?: string;
+} & (TextProps & { children: React.ReactNode });
+
+/**
+ * Component to render link to another screen using a path.
+ * Uses an anchor tag on the web.
+ *
+ * @param props.to Absolute path to screen (e.g. `/feeds/hot`).
+ * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
+ * @param props.children Child elements to render the content.
+ */
+export default function Link({ to, action, ...rest }: Props) {
+  const props = useLinkProps({ to, action });
+
+  const onPress = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => {
+    if ('onPress' in rest) {
+      // @ts-ignore
+      rest.onPress?.(e);
+    }
+
+    props.onPress(e);
+  };
+
+  return React.createElement(Text, {
+    ...props,
+    ...rest,
+    ...Platform.select({
+      web: { onClick: onPress } as any,
+      default: { onPress },
+    }),
+  });
+}

packages/native/src/LinkingContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { LinkingOptions } from './types';
+
+const LinkingContext = React.createContext<{
+  options: LinkingOptions | undefined;
+}>({ options: undefined });
+
+export default LinkingContext;

packages/native/src/NavigationContainer.tsx

@@ -6,38 +6,70 @@ import {
 } from '@react-navigation/core';
 import ThemeProvider from './theming/ThemeProvider';
 import DefaultTheme from './theming/DefaultTheme';
+import LinkingContext from './LinkingContext';
+import useThenable from './useThenable';
+import useLinking from './useLinking';
 import useBackButton from './useBackButton';
-import { Theme } from './types';
+import { Theme, LinkingOptions } from './types';
 
 type Props = NavigationContainerProps & {
   theme?: Theme;
+  linking?: LinkingOptions;
+  fallback?: React.ReactNode;
 };
 
 /**
- * Container component which holds the navigation state
- * designed for mobile apps.
+ * Container component which holds the navigation state designed for React Native apps.
  * This should be rendered at the root wrapping the whole app.
  *
- * @param props.initialState Initial state object for the navigation tree.
+ * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
  * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
  * @param props.theme Theme object for the navigators.
+ * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
+ * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 const NavigationContainer = React.forwardRef(function NavigationContainer(
-  { theme = DefaultTheme, ...rest }: Props,
-  ref: React.Ref<NavigationContainerRef>
+  { theme = DefaultTheme, linking, fallback = null, ...rest }: Props,
+  ref?: React.Ref<NavigationContainerRef | null>
 ) {
+  const isLinkingEnabled = linking ? linking.enabled !== false : false;
+
   const refContainer = React.useRef<NavigationContainerRef>(null);
 
   useBackButton(refContainer);
 
+  const { getInitialState } = useLinking(refContainer, {
+    enabled: isLinkingEnabled,
+    prefixes: [],
+    ...linking,
+  });
+
+  const [isReady, initialState] = useThenable(getInitialState);
+
   React.useImperativeHandle(ref, () => refContainer.current);
 
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking]);
+
+  if (rest.initialState == null && isLinkingEnabled && !isReady) {
+    // This is temporary until we have Suspense for data-fetching
+    // Then the fallback will be handled by a parent `Suspense` component
+    return fallback as React.ReactElement;
+  }
+
   return (
-    <ThemeProvider value={theme}>
-      <BaseNavigationContainer {...rest} ref={refContainer} />
-    </ThemeProvider>
+    <LinkingContext.Provider value={linkingContext}>
+      <ThemeProvider value={theme}>
+        <BaseNavigationContainer
+          {...rest}
+          initialState={
+            rest.initialState == null ? initialState : rest.initialState
+          }
+          ref={refContainer}
+        />
+      </ThemeProvider>
+    </LinkingContext.Provider>
   );
 });
 

packages/native/src/NavigationNativeContainer.tsx

@@ -1,5 +0,0 @@
-export default function () {
-  throw new Error(
-    "'NavigationNativeContainer' has been renamed to 'NavigationContainer"
-  );
-}

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

@@ -17,7 +17,7 @@ it('throws if multiple instances of useLinking are used', () => {
   let element;
 
   expect(() => (element = render(<Sample />))).toThrowError(
-    "Looks like you are using 'useLinking' in multiple components."
+    'Looks like you have configured linking in multiple places.'
   );
 
   // @ts-ignore
@@ -41,9 +41,7 @@ it('throws if multiple instances of useLinking are used', () => {
           <B />
         </>
       ))
-  ).toThrowError(
-    "Looks like you are using 'useLinking' in multiple components."
-  );
+  ).toThrowError('Looks like you have configured linking in multiple places.');
 
   // @ts-ignore
   element?.unmount();
@@ -57,5 +55,19 @@ it('throws if multiple instances of useLinking are used', () => {
 
   render(wrapper2).unmount();
 
-  expect(() => render(wrapper2)).not.toThrow();
+  expect(() => (element = render(wrapper2))).not.toThrow();
+
+  // @ts-ignore
+  element?.unmount();
+
+  function Sample3() {
+    useLinking(ref, options);
+    useLinking(ref, { ...options, enabled: false });
+    return null;
+  }
+
+  expect(() => (element = render(<Sample3 />))).not.toThrowError();
+
+  // @ts-ignore
+  element?.unmount();
 });