chore: publish

- @react-navigation/bottom-tabs@5.7.1
fix: don't render badge on bottom tabs if not visible. closes #8577
2026-01-13 09:30:30 +08:00 · 2020-07-14 14:05:18 +02:00 · 2020-07-14 14:03:16 +02:00 · 2020-07-14 13:44:17 +02:00 · 2020-07-10 22:40:45 +02:00 · 2020-07-10 22:33:13 +02:00
210 changed files with 11124 additions and 5014 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -52,10 +52,10 @@ jobs:
      - attach_project
      - run:
          name: Run unit tests
-          command: yarn test --coverage
+          command: yarn test --maxWorkers=2 --coverage
      - run:
          name: Upload test coverage
-          command: cat ./coverage/lcov.info | ./node_modules/.bin/codecov
+          command: yarn codecov
      - store_artifacts:
          path: coverage
          destination: coverage
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,9 @@
 {
  "extends": "satya164",
  "settings": {
-    "react": { "version": "16" },
+    "react": {
+      "version": "16"
+    },
    "import/core-modules": [
      "@react-navigation/core",
      "@react-navigation/native",
@@ -11,8 +13,15 @@
      "@react-navigation/drawer",
      "@react-navigation/bottom-tabs",
      "@react-navigation/material-top-tabs",
-      "@react-navigation/material-bottom-tabs"
+      "@react-navigation/material-bottom-tabs",
+      "@react-navigation/devtools"
    ]
  },
-  "env": { "browser": true, "node": true }
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "react/no-unused-prop-types": "off"
+  }
 }
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: react-navigation
--- a/.github/workflows/expo-preview.yml
+++ b/.github/workflows/expo-preview.yml
@@ -8,7 +8,7 @@ jobs:
    if: github.event.pull_request.head.repo.owner.login == 'react-navigation'
    steps:
      - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v1
@@ -25,7 +25,7 @@ jobs:

      - name: Restore yarn cache
        id: yarn-cache
-        uses: actions/cache@master
+        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -43,8 +43,25 @@ jobs:
        run: echo "::set-output name=path::@react-navigation/react-navigation-example?release-channel=pr-${{ github.event.number }}"

      - name: Comment on PR
-        uses: unsplash/comment-on-pr@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: actions/github-script@v2
        with:
-          msg: The Expo app for the example from this branch is ready!<br><br>[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})<br><br><a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>.
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const body = 'The Expo app for the example from this branch is ready!\n\n[expo.io/${{ steps.expo.outputs.path }}](https://expo.io/${{ steps.expo.outputs.path }})\n\n<a href="https://exp.host/${{ steps.expo.outputs.path }}"><img src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=exp://exp.host/${{ steps.expo.outputs.path }}" height="200px" width="200px"></a>';
+
+            const comments = await github.issues.listComments({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            });
+
+            if (comments.some(comment => comment.body === body)) {
+              return;
+            }
+
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body
+            })
--- a/.github/workflows/expo.yml
+++ b/.github/workflows/expo.yml
@@ -2,7 +2,7 @@ name: Expo Publish
 on:
  push:
    branches:
-      - master
+      - main

 jobs:
  publish:
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v1
@@ -27,7 +27,7 @@ jobs:

      - name: Restore yarn cache
        id: yarn-cache
-        uses: actions/cache@master
+        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
--- a/.github/workflows/rebase.yml
+++ b/.github/workflows/rebase.yml
@@ -9,7 +9,8 @@ jobs:
    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@master
+      - name: Checkout
+        uses: actions/checkout@v2
        with:
          fetch-depth: 0

--- a/.github/workflows/triage.yml
+++ b/.github/workflows/triage.yml
@@ -8,42 +8,58 @@ jobs:
    runs-on: ubuntu-latest
    if: github.event.label.name == 'needs more info'
    steps:
-      - uses: actions/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
        with:
-          args: comment "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.)."
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help.\n\nMake sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.)."
+            })

  needs-repro:
    runs-on: ubuntu-latest
    if: github.event.label.name == 'needs repro'
    steps:
-      - uses: actions/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
        with:
-          args: comment "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then you can also provide the repro in a GitHub repository."
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "Hey! Thanks for opening the issue. Can you provide a [minimal repro](https://stackoverflow.com/help/minimal-reproducible-example) which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible.\n\nThe easiest way to provide a repro is on [snack.expo.io](https://snack.expo.io). If it's not possible to repro it on [snack.expo.io](https://snack.expo.io), then please provide the repro in a GitHub repository."
+            })

  question:
    runs-on: ubuntu-latest
    if: github.event.label.name == 'question'
    steps:
-      - uses: actions/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
        with:
-          args: comment "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel."
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question or an issue unrelated to this library. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel.\n\nIf you believe that this is actually a bug in the library, please open a new issue and fill the issue template with relevant information."
+            })

  feature-request:
    runs-on: ubuntu-latest
    if: github.event.label.name == 'feature-request'
    steps:
-      - uses: actions/checkout@master
-      - uses: actions/github@v1.0.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v2
        with:
-          args: comment "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. Seems you have a feature request. Please post the feature request on [Canny](https://react-navigation.canny.io/feature-requests). This lets other users upvote your feature request and helps us prioritize the most requested features."
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. Seems you have a feature request. Please post the feature request on [Canny](https://react-navigation.canny.io/feature-requests). This lets other users upvote your feature request and helps us prioritize the most requested features.\n\nYou can also open a detailed proposal in our [RFC repo](https://github.com/react-navigation/rfcs) for discussion."
+            })
--- a/.github/workflows/versions.yml
+++ b/.github/workflows/versions.yml
@@ -1,25 +1,36 @@
 name: Check versions
 on:
  issues:
-    types: [opened]
+    types: [opened, edited]

 jobs:
  check-versions:
    runs-on: ubuntu-latest
    steps:
-      - uses: react-navigation/check-versions-action@master
+      - uses: react-navigation/check-versions-action@v1.0.0
+        if: contains(github.event.issue.labels.*.name, 'version-4') != true
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
-          packages: |
+          required-packages: |
+            @react-navigation/native
+          optional-packages: |
            @react-navigation/bottom-tabs
            @react-navigation/compat
            @react-navigation/core
+            @react-navigation/devtools
            @react-navigation/drawer
            @react-navigation/material-bottom-tabs
            @react-navigation/material-top-tabs
-            @react-navigation/native
            @react-navigation/routers
            @react-navigation/stack
+
+      - uses: react-navigation/check-versions-action@v1.0.0
+        if: contains(github.event.issue.labels.*.name, 'version-4')
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          required-packages: |
+            react-navigation
+          optional-packages: |
            react-navigation-animated-switch
            react-navigation-drawer
            react-navigation-material-bottom-tabs
--- a/README.md
+++ b/README.md
@@ -10,9 +10,23 @@ Documentation can be found at [reactnavigation.org](https://reactnavigation.org/

 If you are looking for version 4, the code can be found in the [4.x branch](https://github.com/react-navigation/react-navigation/tree/4.x).

+## Package Versions
+
+| Name                                                                     |                                                                               Latest Version                                                                                |
+| ------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| [@react-navigation/core](/packages/core)                                 |                 [![badge](https://img.shields.io/npm/v/@react-navigation/core.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/core)                 |
+| [@react-navigation/native](/packages/native)                             |               [![badge](https://img.shields.io/npm/v/@react-navigation/native.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/native)               |
+| [@react-navigation/routers](/packages/routers)                           |              [![badge](https://img.shields.io/npm/v/@react-navigation/routers.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/routers)              |
+| [@react-navigation/stack](/packages/stack)                               |                [![badge](https://img.shields.io/npm/v/@react-navigation/stack.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/stack)                |
+| [@react-navigation/drawer](/packages/drawer)                             |               [![badge](https://img.shields.io/npm/v/@react-navigation/drawer.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/drawer)               |
+| [@react-navigation/material-top-tabs](/packages/material-top-tabs)       |    [![badge](https://img.shields.io/npm/v/@react-navigation/material-top-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/material-top-tabs)    |
+| [@react-navigation/material-bottom-tabs](/packages/material-bottom-tabs) | [![badge](https://img.shields.io/npm/v/@react-navigation/material-bottom-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/material-bottom-tabs) |
+| [@react-navigation/bottom-tabs](/packages/bottom-tabs)                   |          [![badge](https://img.shields.io/npm/v/@react-navigation/bottom-tabs.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/bottom-tabs)          |
+| [@react-navigation/devtools](/packages/devtools)                         |             [![badge](https://img.shields.io/npm/v/@react-navigation/devtools.svg?style=flat-square)](https://www.npmjs.com/package/@react-navigation/devtools)             |
+
 ## Contributing

-Please read through our [contribution guide](CONTRIBUTING.md) a to get started!
+Please read through our [contribution guide](CONTRIBUTING.md) to get started!

 ## Installing from a fork on GitHub

@@ -49,7 +63,7 @@ Remember to replace `<user>`, `<repo>` and `<name>` with right values.

 <!-- badges -->

-[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/react-navigation/master.svg?style=flat-square
+[build-badge]: https://img.shields.io/circleci/project/github/react-navigation/react-navigation/main.svg?style=flat-square
 [build]: https://circleci.com/gh/react-navigation/react-navigation
 [coverage-badge]: https://img.shields.io/codecov/c/github/react-navigation/react-navigation.svg?style=flat-square
 [coverage]: https://codecov.io/github/react-navigation/react-navigation
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,22 +1,3 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'usage',
-        corejs: 3,
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/transform-flow-strip-types',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-  ],
+  presets: ['module:metro-react-native-babel-preset'],
 };
--- a/example/e2e/__integration_tests__/index.test.tsx
+++ b/example/e2e/__integration_tests__/index.test.tsx
@@ -3,10 +3,11 @@ import { page } from '../config/setup-playwright';
 it('loads the example app', async () => {
  const snapshot = await page.accessibility.snapshot();

-  // @ts-ignore
-  expect(snapshot?.children?.find((it) => it.role === 'heading')?.name).toBe(
-    'Examples'
-  );
+  expect(
+    (snapshot?.children as Record<string, unknown>[])?.find(
+      (it) => it.role === 'heading'
+    )?.name
+  ).toBe('Examples');
  const title = await page.$eval('[role=heading]', (el) => el.textContent);

  expect(title).toBe('Examples');
--- a/example/package.json
+++ b/example/package.json
@@ -16,8 +16,8 @@
    "@expo/vector-icons": "^10.2.0",
    "@react-native-community/masked-view": "^0.1.10",
    "color": "^3.1.2",
-    "expo": "^37.0.8",
-    "expo-asset": "~8.1.3",
+    "expo": "^37.0.12",
+    "expo-asset": "~8.1.5",
    "expo-blur": "~8.1.0",
    "koa": "^2.12.0",
    "react": "~16.9.0",
@@ -29,32 +29,33 @@
    "react-native-restart": "^0.0.15",
    "react-native-safe-area-context": "^1.0.0",
    "react-native-screens": "^2.7.0",
-    "react-native-tab-view": "2.14.0",
+    "react-native-tab-view": "2.14.4",
    "react-native-unimodules": "~0.9.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
-    "@babel/node": "^7.8.7",
-    "@expo/webpack-config": "^0.11.19",
+    "@babel/node": "^7.10.1",
+    "@expo/webpack-config": "^0.12.12",
    "@types/cheerio": "^0.22.18",
    "@types/jest-dev-server": "^4.2.0",
    "@types/koa": "^2.11.3",
    "@types/node-fetch": "^2.5.7",
-    "@types/react": "^16.9.34",
+    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "@types/react-native": "^0.62.7",
+    "babel-loader": "^8.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "^8.1.0",
+    "babel-preset-expo": "^8.2.1",
    "cheerio": "^1.0.0-rc.3",
-    "expo-cli": "^3.20.1",
+    "expo-cli": "^3.21.5",
    "jest": "^26.0.1",
    "jest-dev-server": "^4.4.0",
    "mock-require-assets": "^0.0.1",
    "node-fetch": "^2.6.0",
    "nodemon": "^2.0.4",
    "playwright": "^0.14.0",
-    "serve": "^11.3.0",
-    "typescript": "^3.8.3"
+    "serve": "^11.3.2",
+    "typescript": "^3.9.5"
  }
 }
--- a/example/server/resolve-hooks.tsx
+++ b/example/server/resolve-hooks.tsx
@@ -3,9 +3,9 @@ import 'mock-require-assets';
 import Module from 'module';

 // We need to make sure that .web.xx extensions are resolved before .xx
-// @ts-ignore
+// @ts-expect-error: _extensions doesn't exist in the type definitions
 Module._extensions = Object.fromEntries(
-  // @ts-ignore
+  // @ts-expect-error
  Object.entries(Module._extensions).sort((a, b) => {
    return b[0].split('.').length - a[0].split('.').length;
  })
--- a/example/src/Restart.native.tsx
+++ b/example/src/Restart.native.tsx
@@ -1,8 +1,8 @@
-import RNRestart from 'react-native-restart';
 import { Updates } from 'expo';
+import RNRestart from 'react-native-restart';

 export function restartApp() {
-  // @ts-ignore
+  // @ts-expect-error: Expo doesn't exist in global definitions
  if (global.Expo) {
    Updates.reloadFromCache();
  } else {
--- a/example/src/Screens/AuthFlow.tsx
+++ b/example/src/Screens/AuthFlow.tsx
@@ -5,7 +5,7 @@ import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
  HeaderBackButton,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';

 type AuthStackParams = {
@@ -81,10 +81,6 @@ const HomeScreen = () => {

 const SimpleStack = createStackNavigator<AuthStackParams>();

-type Props = {
-  navigation: StackNavigationProp<ParamListBase>;
-};
-
 type State = {
  isLoading: boolean;
  isSignout: boolean;
@@ -96,7 +92,9 @@ type Action =
  | { type: 'SIGN_IN'; token: string }
  | { type: 'SIGN_OUT' };

-export default function SimpleStackScreen({ navigation }: Props) {
+export default function SimpleStackScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
  const [state, dispatch] = React.useReducer<React.Reducer<State, Action>>(
    (prevState, action) => {
      switch (action.type) {
@@ -135,9 +133,11 @@ export default function SimpleStackScreen({ navigation }: Props) {
    return () => clearTimeout(timer);
  }, []);

-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  const authContext = React.useMemo(
    () => ({
--- a/example/src/Screens/BottomTabs.tsx
+++ b/example/src/Screens/BottomTabs.tsx
@@ -2,9 +2,14 @@ import * as React from 'react';
 import { View, ScrollView, StyleSheet, Platform } from 'react-native';
 import { Button } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import {
+  getFocusedRouteNameFromRoute,
+  ParamListBase,
+} from '@react-navigation/native';
+import type { StackScreenProps } from '@react-navigation/stack';
 import {
  createBottomTabNavigator,
-  BottomTabNavigationProp,
+  BottomTabScreenProps,
 } from '@react-navigation/bottom-tabs';
 import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
@@ -31,9 +36,7 @@ const scrollEnabled = Platform.select({ web: true, default: false });

 const AlbumsScreen = ({
  navigation,
-}: {
-  navigation: BottomTabNavigationProp<BottomTabParams>;
-}) => {
+}: BottomTabScreenProps<BottomTabParams>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -59,7 +62,18 @@ const AlbumsScreen = ({

 const BottomTabs = createBottomTabNavigator<BottomTabParams>();

-export default function BottomTabsScreen() {
+export default function BottomTabsScreen({
+  navigation,
+  route,
+}: StackScreenProps<ParamListBase, string>) {
+  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Article';
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      title: routeName,
+    });
+  }, [navigation, routeName]);
+
  return (
    <BottomTabs.Navigator
      screenOptions={{
@@ -71,19 +85,19 @@ export default function BottomTabsScreen() {
    >
      <BottomTabs.Screen
        name="Article"
+        component={SimpleStackScreen}
        options={{
          title: 'Article',
          tabBarIcon: getTabBarIcon('file-document-box'),
        }}
-      >
-        {(props) => <SimpleStackScreen {...props} headerMode="none" />}
-      </BottomTabs.Screen>
+      />
      <BottomTabs.Screen
        name="Chat"
        component={Chat}
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: getTabBarIcon('message-reply'),
+          tabBarBadge: 2,
        }}
      />
      <BottomTabs.Screen
--- a/example/src/Screens/CompatAPI.tsx
+++ b/example/src/Screens/CompatAPI.tsx
@@ -8,6 +8,7 @@ import {
 import {
  createStackNavigator,
  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -126,8 +127,8 @@ const CompatStack = createCompatStackNavigator<
        StackNavigationProp<NestedStackParams>
      >(
        {
-          Feed: FeedScreen,
-          Article: ArticleScreen,
+          Feed: { getScreen: () => FeedScreen },
+          Article: { getScreen: () => ArticleScreen },
        },
        { navigationOptions: { headerShown: false } }
      ),
@@ -143,12 +144,12 @@ const CompatStack = createCompatStackNavigator<

 export default function CompatStackScreen({
  navigation,
-}: {
-  navigation: StackNavigationProp<{}>;
-}) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+}: StackScreenProps<{}>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return <CompatStack />;
 }
--- a/example/src/Screens/LinkComponent.tsx
+++ b/example/src/Screens/LinkComponent.tsx
@@ -4,13 +4,12 @@ import { Button } from 'react-native-paper';
 import {
  Link,
  StackActions,
-  RouteProp,
  ParamListBase,
  useLinkProps,
 } from '@react-navigation/native';
 import {
  createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
@@ -20,8 +19,6 @@ type SimpleStackParams = {
  Albums: undefined;
 };

-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });

 const LinkButton = ({
@@ -45,10 +42,7 @@ const LinkButton = ({
 const ArticleScreen = ({
  navigation,
  route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -88,11 +82,7 @@ const ArticleScreen = ({
  );
 };

-const AlbumsScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -124,14 +114,15 @@ const AlbumsScreen = ({

 const SimpleStack = createStackNavigator<SimpleStackParams>();

-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;

 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return (
    <SimpleStack.Navigator {...rest}>
--- a/example/src/Screens/MasterDetail.tsx
+++ b/example/src/Screens/MasterDetail.tsx
@@ -6,14 +6,14 @@ import {
  useNavigation,
  ParamListBase,
 } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
 import {
  createDrawerNavigator,
-  DrawerNavigationProp,
+  DrawerScreenProps,
  DrawerContent,
  DrawerContentComponentProps,
  DrawerContentOptions,
 } from '@react-navigation/drawer';
+import type { StackScreenProps } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import NewsFeed from '../Shared/NewsFeed';
@@ -24,8 +24,6 @@ type DrawerParams = {
  Albums: undefined;
 };

-type DrawerNavigation = DrawerNavigationProp<DrawerParams>;
-
 const useIsLargeScreen = () => {
  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));

@@ -60,7 +58,9 @@ const Header = ({
  );
 };

-const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const ArticleScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'Article'>) => {
  return (
    <>
      <Header title="Article" onGoBack={() => navigation.toggleDrawer()} />
@@ -69,7 +69,9 @@ const ArticleScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
  );
 };

-const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const NewsFeedScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'NewsFeed'>) => {
  return (
    <>
      <Header title="Feed" onGoBack={() => navigation.toggleDrawer()} />
@@ -78,7 +80,9 @@ const NewsFeedScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
  );
 };

-const AlbumsScreen = ({ navigation }: { navigation: DrawerNavigation }) => {
+const AlbumsScreen = ({
+  navigation,
+}: DrawerScreenProps<DrawerParams, 'Albums'>) => {
  return (
    <>
      <Header title="Albums" onGoBack={() => navigation.toggleDrawer()} />
@@ -106,15 +110,16 @@ const CustomDrawerContent = (

 const Drawer = createDrawerNavigator<DrawerParams>();

-type Props = Partial<React.ComponentProps<typeof Drawer.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof Drawer.Navigator>> &
+  StackScreenProps<ParamListBase>;

 export default function DrawerScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-    gestureEnabled: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+      gestureEnabled: false,
+    });
+  }, [navigation]);

  const isLargeScreen = useIsLargeScreen();

--- a/example/src/Screens/MaterialBottomTabs.tsx
+++ b/example/src/Screens/MaterialBottomTabs.tsx
@@ -22,14 +22,13 @@ export default function MaterialBottomTabsScreen() {
    <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
      <MaterialBottomTabs.Screen
        name="Article"
+        component={SimpleStackScreen}
        options={{
          tabBarLabel: 'Article',
          tabBarIcon: 'file-document-box',
          tabBarColor: '#C9E7F8',
        }}
-      >
-        {(props) => <SimpleStackScreen {...props} headerMode="none" />}
-      </MaterialBottomTabs.Screen>
+      />
      <MaterialBottomTabs.Screen
        name="Chat"
        component={Chat}
--- a/example/src/Screens/MaterialTopTabs.tsx
+++ b/example/src/Screens/MaterialTopTabs.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import type { ParamListBase } from '@react-navigation/native';
+import type { StackScreenProps } from '@react-navigation/stack';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
@@ -14,14 +14,14 @@ type MaterialTopTabParams = {

 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();

-type Props = {
-  navigation: StackNavigationProp<ParamListBase>;
-};
-
-export default function MaterialTopTabsScreen({ navigation }: Props) {
-  navigation.setOptions({
-    cardStyle: { flex: 1 },
-  });
+export default function MaterialTopTabsScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      cardStyle: { flex: 1 },
+    });
+  }, [navigation]);

  return (
    <MaterialTopTabs.Navigator>
--- a/example/src/Screens/ModalPresentationStack.tsx
+++ b/example/src/Screens/ModalPresentationStack.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import { Button } from 'react-native-paper';
-import { RouteProp, ParamListBase } from '@react-navigation/native';
+import type { ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
+  StackNavigationOptions,
  TransitionPresets,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
@@ -15,17 +16,12 @@ type ModalStackParams = {
  Albums: undefined;
 };

-type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });

 const ArticleScreen = ({
  navigation,
  route,
-}: {
-  navigation: ModalStackNavigation;
-  route: RouteProp<ModalStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<ModalStackParams, 'Article'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -52,7 +48,7 @@ const ArticleScreen = ({
  );
 };

-const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<ModalStackParams>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -78,20 +74,20 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {

 const ModalPresentationStack = createStackNavigator<ModalStackParams>();

-type Props = {
-  options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
-  navigation: StackNavigationProp<ParamListBase>;
+type Props = StackScreenProps<ParamListBase> & {
+  options?: StackNavigationOptions;
 };

 export default function SimpleStackScreen({ navigation, options }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return (
    <ModalPresentationStack.Navigator
      mode="modal"
-      headerMode="screen"
      screenOptions={({ route, navigation }) => ({
        ...TransitionPresets.ModalPresentationIOS,
        cardOverlayEnabled: true,
--- a/example/src/Screens/NotFound.tsx
+++ b/example/src/Screens/NotFound.tsx
@@ -1,13 +1,11 @@
-import { StackNavigationProp } from '@react-navigation/stack';
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
+import type { StackScreenProps } from '@react-navigation/stack';

 const NotFoundScreen = ({
  navigation,
-}: {
-  navigation: StackNavigationProp<{ Home: undefined }>;
-}) => {
+}: StackScreenProps<{ Home: undefined }>) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>404 Not Found</Text>
--- a/example/src/Screens/PreventRemove.tsx
+++ b/example/src/Screens/PreventRemove.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {
+  Alert,
+  View,
+  TextInput,
+  ScrollView,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { Button } from 'react-native-paper';
+import {
+  useTheme,
+  CommonActions,
+  ParamListBase,
+  NavigationAction,
+} from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackScreenProps,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+
+type PreventRemoveParams = {
+  Article: { author: string };
+  Input: undefined;
+};
+
+const scrollEnabled = Platform.select({ web: true, default: false });
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: StackScreenProps<PreventRemoveParams, 'Article'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Input')}
+          style={styles.button}
+        >
+          Push Input
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.popToTop()}
+          style={styles.button}
+        >
+          Pop to top
+        </Button>
+      </View>
+      <Article
+        author={{ name: route.params?.author ?? 'Unknown' }}
+        scrollEnabled={scrollEnabled}
+      />
+    </ScrollView>
+  );
+};
+
+const InputScreen = ({
+  navigation,
+}: StackScreenProps<PreventRemoveParams, 'Input'>) => {
+  const [text, setText] = React.useState('');
+  const { colors } = useTheme();
+
+  const hasUnsavedChanges = Boolean(text);
+
+  React.useEffect(
+    () =>
+      navigation.addListener('beforeRemove', (e) => {
+        const action: NavigationAction & { payload?: { confirmed?: boolean } } =
+          e.data.action;
+
+        if (!hasUnsavedChanges || action.payload?.confirmed) {
+          return;
+        }
+
+        e.preventDefault();
+
+        Alert.alert(
+          'Discard changes?',
+          'You have unsaved changes. Are you sure to discard them and leave the screen?',
+          [
+            { text: "Don't leave", style: 'cancel', onPress: () => {} },
+            {
+              text: 'Discard',
+              style: 'destructive',
+              onPress: () => navigation.dispatch(action),
+            },
+          ]
+        );
+      }),
+    [hasUnsavedChanges, navigation]
+  );
+
+  return (
+    <View style={styles.content}>
+      <TextInput
+        autoFocus
+        style={[
+          styles.input,
+          { backgroundColor: colors.card, color: colors.text },
+        ]}
+        value={text}
+        placeholder="Type something…"
+        onChangeText={setText}
+      />
+      <Button
+        mode="outlined"
+        color="tomato"
+        onPress={() =>
+          navigation.dispatch({
+            ...CommonActions.goBack(),
+            payload: { confirmed: true },
+          })
+        }
+        style={styles.button}
+      >
+        Discard and go back
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.push('Article', { author: text })}
+        style={styles.button}
+      >
+        Push Article
+      </Button>
+    </View>
+  );
+};
+
+const SimpleStack = createStackNavigator<PreventRemoveParams>();
+
+type Props = StackScreenProps<ParamListBase>;
+
+export default function SimpleStackScreen({ navigation }: Props) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <SimpleStack.Navigator>
+      <SimpleStack.Screen name="Input" component={InputScreen} />
+      <SimpleStack.Screen name="Article" component={ArticleScreen} />
+    </SimpleStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  input: {
+    margin: 8,
+    padding: 10,
+    borderRadius: 3,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0, 0, 0, 0.08)',
+  },
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});
--- a/example/src/Screens/SimpleStack.tsx
+++ b/example/src/Screens/SimpleStack.tsx
@@ -1,38 +1,33 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
-import { RouteProp, ParamListBase } from '@react-navigation/native';
+import type { ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import NewsFeed from '../Shared/NewsFeed';

 type SimpleStackParams = {
-  Article: { author: string };
-  NewsFeed: undefined;
+  Article: { author: string } | undefined;
+  NewsFeed: { date: number };
  Albums: undefined;
 };

-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });

 const ArticleScreen = ({
  navigation,
  route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
        <Button
          mode="contained"
-          onPress={() => navigation.replace('NewsFeed')}
+          onPress={() => navigation.replace('NewsFeed', { date: Date.now() })}
          style={styles.button}
        >
          Replace with feed
@@ -46,7 +41,7 @@ const ArticleScreen = ({
        </Button>
      </View>
      <Article
-        author={{ name: route.params.author }}
+        author={{ name: route.params?.author ?? 'Unknown' }}
        scrollEnabled={scrollEnabled}
      />
    </ScrollView>
@@ -54,10 +49,9 @@ const ArticleScreen = ({
 };

 const NewsFeedScreen = ({
+  route,
  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'NewsFeed'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -76,16 +70,14 @@ const NewsFeedScreen = ({
          Go back
        </Button>
      </View>
-      <NewsFeed scrollEnabled={scrollEnabled} />
+      <NewsFeed scrollEnabled={scrollEnabled} date={route.params.date} />
    </ScrollView>
  );
 };

 const AlbumsScreen = ({
  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Albums'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -111,22 +103,22 @@ const AlbumsScreen = ({

 const SimpleStack = createStackNavigator<SimpleStackParams>();

-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
-
-export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+export default function SimpleStackScreen({
+  navigation,
+}: StackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return (
-    <SimpleStack.Navigator {...rest}>
+    <SimpleStack.Navigator>
      <SimpleStack.Screen
        name="Article"
        component={ArticleScreen}
        options={({ route }) => ({
-          title: `Article by ${route.params.author}`,
+          title: `Article by ${route.params?.author ?? 'Unknown'}`,
        })}
        initialParams={{ author: 'Gandalf' }}
      />
--- a/example/src/Screens/StackHeaderCustomization.tsx
+++ b/example/src/Screens/StackHeaderCustomization.tsx
@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import { Button, Appbar } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { RouteProp, ParamListBase } from '@react-navigation/native';
+import { useTheme, ParamListBase } from '@react-navigation/native';
 import {
  createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
  HeaderBackground,
  useHeaderHeight,
  Header,
@@ -27,17 +27,12 @@ type SimpleStackParams = {
  Albums: undefined;
 };

-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });

 const ArticleScreen = ({
  navigation,
  route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -64,11 +59,7 @@ const ArticleScreen = ({
  );
 };

-const AlbumsScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
  const headerHeight = useHeaderHeight();

  return (
@@ -96,9 +87,8 @@ const AlbumsScreen = ({

 const SimpleStack = createStackNavigator<SimpleStackParams>();

-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;

 function CustomHeader(props: StackHeaderProps) {
  const { current, next } = props.scene.progress;
@@ -120,9 +110,13 @@ function CustomHeader(props: StackHeaderProps) {
 }

 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  const { colors, dark } = useTheme();

  return (
    <SimpleStack.Navigator {...rest}>
@@ -167,9 +161,15 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
          headerBackTitle: 'Back',
          headerTransparent: true,
          headerBackground: () => (
-            <HeaderBackground style={{ backgroundColor: 'transparent' }}>
+            <HeaderBackground
+              style={{
+                backgroundColor: 'transparent',
+                borderBottomWidth: StyleSheet.hairlineWidth,
+                borderBottomColor: colors.border,
+              }}
+            >
              <BlurView
-                tint="light"
+                tint={dark ? 'dark' : 'light'}
                intensity={75}
                style={StyleSheet.absoluteFill}
              />
--- a/example/src/Screens/StackTransparent.tsx
+++ b/example/src/Screens/StackTransparent.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import { Button, Paragraph } from 'react-native-paper';
-import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
+import { ParamListBase, useTheme } from '@react-navigation/native';
 import {
  createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
 } from '@react-navigation/stack';
 import Article from '../Shared/Article';

@@ -13,17 +13,12 @@ type SimpleStackParams = {
  Dialog: undefined;
 };

-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
-
 const scrollEnabled = Platform.select({ web: true, default: false });

 const ArticleScreen = ({
  navigation,
  route,
-}: {
-  navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'Article'>;
-}) => {
+}: StackScreenProps<SimpleStackParams, 'Article'>) => {
  return (
    <ScrollView>
      <View style={styles.buttons}>
@@ -50,11 +45,7 @@ const ArticleScreen = ({
  );
 };

-const DialogScreen = ({
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
+const DialogScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
  const { colors } = useTheme();

  return (
@@ -81,14 +72,15 @@ const DialogScreen = ({

 const SimpleStack = createStackNavigator<SimpleStackParams>();

-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & {
-  navigation: StackNavigationProp<ParamListBase>;
-};
+type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
+  StackScreenProps<ParamListBase>;

 export default function SimpleStackScreen({ navigation, ...rest }: Props) {
-  navigation.setOptions({
-    headerShown: false,
-  });
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);

  return (
    <SimpleStack.Navigator mode="modal" {...rest}>
--- a/example/src/Shared/Albums.tsx
+++ b/example/src/Shared/Albums.tsx
@@ -81,10 +81,6 @@ export default function Albums(props: Partial<ScrollViewProps>) {
 }

 const styles = StyleSheet.create({
-  content: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
  ...Platform.select({
    web: {
      content: {
--- a/example/src/Shared/NewsFeed.tsx
+++ b/example/src/Shared/NewsFeed.tsx
@@ -18,7 +18,9 @@ import {
 } from 'react-native-paper';
 import Color from 'color';

-type Props = Partial<ScrollViewProps>;
+type Props = Partial<ScrollViewProps> & {
+  date?: number;
+};

 const Author = () => {
  return (
--- a/example/src/Shared/TouchableBounce.native.tsx
+++ b/example/src/Shared/TouchableBounce.native.tsx
@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-expect-error: there are no type definitions for deep imports
 import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';

 export default TouchableBounce;
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -26,17 +26,19 @@ import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
-  PathConfig,
+  PathConfigMap,
+  NavigationContainerRef,
 } from '@react-navigation/native';
 import {
  createDrawerNavigator,
-  DrawerNavigationProp,
+  DrawerScreenProps,
 } from '@react-navigation/drawer';
 import {
  createStackNavigator,
-  StackNavigationProp,
+  StackScreenProps,
  HeaderStyleInterpolators,
 } from '@react-navigation/stack';
+import { useReduxDevToolsExtension } from '@react-navigation/devtools';

 import { restartApp } from './Restart';
 import AsyncStorage from './AsyncStorage';
@@ -51,18 +53,16 @@ import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
 import NotFound from './Screens/NotFound';
 import DynamicTabs from './Screens/DynamicTabs';
-import AuthFlow from './Screens/AuthFlow';
-import CompatAPI from './Screens/CompatAPI';
 import MasterDetail from './Screens/MasterDetail';
+import AuthFlow from './Screens/AuthFlow';
+import PreventRemove from './Screens/PreventRemove';
+import CompatAPI from './Screens/CompatAPI';
 import LinkComponent from './Screens/LinkComponent';

 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);

 enableScreens();

-// @ts-ignore
-global.REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED = true;
-
 type RootDrawerParamList = {
  Root: undefined;
  Another: undefined;
@@ -110,6 +110,10 @@ const SCREENS = {
    title: 'Auth Flow',
    component: AuthFlow,
  },
+  PreventRemove: {
+    title: 'Prevent removing screen',
+    component: PreventRemove,
+  },
  CompatAPI: {
    title: 'Compat Layer',
    component: CompatAPI,
@@ -192,6 +196,10 @@ export default function App() {
    return () => Dimensions.removeEventListener('change', onDimensionsChange);
  }, []);

+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+
+  useReduxDevToolsExtension(navigationRef);
+
  if (!isReady) {
    return null;
  }
@@ -204,6 +212,7 @@ export default function App() {
        <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
      )}
      <NavigationContainer
+        ref={navigationRef}
        initialState={initialState}
        onStateChange={(state) =>
          AsyncStorage.setItem(
@@ -221,51 +230,57 @@ export default function App() {
          // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
          prefixes: LinkingPrefixes,
          config: {
-            Root: {
-              path: '',
-              initialRouteName: 'Home',
-              screens: Object.keys(SCREENS).reduce<PathConfig>(
-                (acc, name) => {
-                  // Convert screen names such as SimpleStack to kebab case (simple-stack)
-                  const path = name
-                    .replace(/([A-Z]+)/g, '-$1')
-                    .replace(/^-/, '')
-                    .toLowerCase();
+            screens: {
+              Root: {
+                path: '',
+                initialRouteName: 'Home',
+                screens: Object.keys(SCREENS).reduce<PathConfigMap>(
+                  (acc, name) => {
+                    // Convert screen names such as SimpleStack to kebab case (simple-stack)
+                    const path = name
+                      .replace(/([A-Z]+)/g, '-$1')
+                      .replace(/^-/, '')
+                      .toLowerCase();

-                  acc[name] = {
-                    path,
-                    screens: {
-                      Article: {
-                        path: 'article/:author?',
-                        parse: {
-                          author: (author) =>
-                            author.charAt(0).toUpperCase() +
-                            author.slice(1).replace(/-/g, ' '),
-                        },
-                        stringify: {
-                          author: (author: string) =>
-                            author.toLowerCase().replace(/\s/g, '-'),
+                    acc[name] = {
+                      path,
+                      screens: {
+                        Article: {
+                          path: 'article/:author?',
+                          parse: {
+                            author: (author) =>
+                              author.charAt(0).toUpperCase() +
+                              author.slice(1).replace(/-/g, ' '),
+                          },
+                          stringify: {
+                            author: (author: string) =>
+                              author.toLowerCase().replace(/\s/g, '-'),
+                          },
                        },
+                        Albums: 'music',
+                        Chat: 'chat',
+                        Contacts: 'people',
+                        NewsFeed: 'feed',
+                        Dialog: 'dialog',
                      },
-                      Albums: 'music',
-                      Chat: 'chat',
-                      Contacts: 'people',
-                      NewsFeed: 'feed',
-                      Dialog: 'dialog',
-                    },
-                  };
+                    };

-                  return acc;
-                },
-                {
-                  Home: '',
-                  NotFound: '*',
-                }
-              ),
+                    return acc;
+                  },
+                  {
+                    Home: '',
+                    NotFound: '*',
+                  }
+                ),
+              },
            },
          },
        }}
        fallback={<Text>Loading…</Text>}
+        documentTitle={{
+          formatter: (options, route) =>
+            `${options?.title ?? route?.name} - React Navigation Example`,
+        }}
      >
        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
          <Drawer.Screen
@@ -277,11 +292,7 @@ export default function App() {
              ),
            }}
          >
-            {({
-              navigation,
-            }: {
-              navigation: DrawerNavigationProp<RootDrawerParamList>;
-            }) => (
+            {({ navigation }: DrawerScreenProps<RootDrawerParamList>) => (
              <Stack.Navigator
                screenOptions={{
                  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
@@ -302,11 +313,7 @@ export default function App() {
                        ),
                  }}
                >
-                  {({
-                    navigation,
-                  }: {
-                    navigation: StackNavigationProp<RootStackParamList>;
-                  }) => (
+                  {({ navigation }: StackScreenProps<RootStackParamList>) => (
                    <ScrollView
                      style={{ backgroundColor: theme.colors.background }}
                    >
@@ -355,7 +362,7 @@ export default function App() {
                    <Stack.Screen
                      key={name}
                      name={name}
-                      component={SCREENS[name].component}
+                      getComponent={() => SCREENS[name].component}
                      options={{ title: SCREENS[name].title }}
                    />
                  )
--- a/jest/setup.js
+++ b/jest/setup.js
@@ -1,3 +1,21 @@
+/* eslint-env jest */
+/* eslint-disable import/no-extraneous-dependencies */
+
+import 'react-native-gesture-handler/jestSetup';
+
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+
 const error = console.error;

 console.error = (...args) =>
--- a/lerna.json
+++ b/lerna.json
@@ -8,7 +8,7 @@
  "version": "independent",
  "command": {
    "publish": {
-      "allowBranch": "master",
+      "allowBranch": "main",
      "conventionalCommits": true,
      "createRelease": "github",
      "message": "chore: publish",
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
  },
  "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/), Michał Osadnik <micosa97@gmail.com> (https://github.com/osdnk/)",
  "scripts": {
-    "lint": "eslint --ext '.js,.ts,.tsx' .",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
    "typescript": "tsc --noEmit --composite false",
    "test": "jest",
    "prerelease": "lerna run clean",
@@ -25,26 +25,19 @@
    "example": "yarn --cwd example"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/preset-env": "^7.9.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.2.1",
+    "@types/jest": "^26.0.0",
    "babel-jest": "^26.0.1",
-    "codecov": "^3.6.5",
+    "codecov": "^3.7.0",
    "commitlint": "^8.3.5",
-    "core-js": "^3.6.5",
-    "eslint": "^6.8.0",
+    "eslint": "^7.2.0",
    "eslint-config-satya164": "^3.1.7",
    "husky": "^4.2.5",
    "jest": "^26.0.1",
-    "lerna": "^3.20.2",
+    "lerna": "^3.22.1",
+    "metro-react-native-babel-preset": "^0.59.0",
    "prettier": "^2.0.5",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.5"
  },
  "resolutions": {
    "react": "~16.9.0",
@@ -59,9 +52,6 @@
  "jest": {
    "testEnvironment": "node",
    "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|tsx?)$",
-    "transform": {
-      "^.+\\.(js|ts|tsx)$": "babel-jest"
-    },
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ],
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/CHANGELOG.md
@@ -3,38 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [5.5.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.1...@react-navigation/bottom-tabs@5.5.2) (2020-06-06)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.5.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.0...@react-navigation/bottom-tabs@5.5.1) (2020-05-27)
+## [5.7.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.7.0...@react-navigation/bottom-tabs@5.7.1) (2020-07-14)


 ### Bug Fixes

-* fix type of style for various options ([9d822b9](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/9d822b95a6df797e2e63e481573e64ea7d0f9386))
+* don't render badge on bottom tabs if not visible. closes [#8577](https://github.com/react-navigation/react-navigation/issues/8577) ([2f74541](https://github.com/react-navigation/react-navigation/commit/2f74541811bac4d36e89c159cd1f4b267063e7f9))





-# [5.5.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.7...@react-navigation/bottom-tabs@5.5.0) (2020-05-23)
+# [5.7.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.6.1...@react-navigation/bottom-tabs@5.7.0) (2020-07-10)
+
+
+### Bug Fixes
+
+* fix bottom tab bar to match iOS defaults ([849e04a](https://github.com/react-navigation/react-navigation/commit/849e04ab6a541fffb490ffdfa9819608b88494f4))


 ### Features

-* animate changes to tabBarVisible in BottomTabBar ([#8286](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/8286)) ([c1e46f8](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/c1e46f8e331e0054995aa476455af204d02d4170))
-* update react-native-safe-area-context to 1.0.0 ([#8182](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/8182)) ([d62fbfe](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/d62fbfe255140f16b182e8b54b276a7c96f2aec6))
+* add support for badges to bottom tab bar ([96c7b68](https://github.com/react-navigation/react-navigation/commit/96c7b688ce773b3dd1f1cf7775367cd7080c94a2))





-## [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)
+## [5.6.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.6.0...@react-navigation/bottom-tabs@5.6.1) (2020-06-25)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -42,69 +38,24 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [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)
+# [5.6.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.5.2...@react-navigation/bottom-tabs@5.6.0) (2020-06-24)


 ### Bug Fixes

-* 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)
+* make sure we don't miss dimensions updates ([c65f9ef](https://github.com/react-navigation/react-navigation/commit/c65f9ef1a9be93b399e724a9731605e408aca80e))
+* remove broken showIcon option from bottom-tabs ([1612819](https://github.com/react-navigation/react-navigation/commit/16128199edd4de37f9c7353bdf803de8e2f201a2))


 ### Features

-* add 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)
+* add iconStyle prop to bottom tab bar options ([#8188](https://github.com/react-navigation/react-navigation/issues/8188)) ([4480d2f](https://github.com/react-navigation/react-navigation/commit/4480d2fe04c8da11b444ebe75ee618d380682312))





-## [5.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)
+## [5.5.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.1...@react-navigation/bottom-tabs@5.5.2) (2020-06-06)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -112,43 +63,30 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [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)
+## [5.5.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.5.0...@react-navigation/bottom-tabs@5.5.1) (2020-05-27)

-**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+### Bug Fixes
+
+* fix type of style for various options ([9d822b9](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/9d822b95a6df797e2e63e481573e64ea7d0f9386))





-## [5.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)
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.7...@react-navigation/bottom-tabs@5.5.0) (2020-05-23)


 ### Features

-* add `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))
+* animate changes to tabBarVisible in BottomTabBar ([#8286](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/8286)) ([c1e46f8](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/c1e46f8e331e0054995aa476455af204d02d4170))
+* update react-native-safe-area-context to 1.0.0 ([#8182](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/8182)) ([d62fbfe](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/d62fbfe255140f16b182e8b54b276a7c96f2aec6))





-## [5.2.8](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.7...@react-navigation/bottom-tabs@5.2.8) (2020-04-27)
+## [5.4.7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.6...@react-navigation/bottom-tabs@5.4.7) (2020-05-20)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -156,7 +94,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.2.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.6...@react-navigation/bottom-tabs@5.2.7) (2020-04-17)
+## [5.4.6](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.5...@react-navigation/bottom-tabs@5.4.6) (2020-05-20)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -164,73 +102,61 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.2.6](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.5...@react-navigation/bottom-tabs@5.2.6) (2020-04-08)
+## [5.4.5](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.4...@react-navigation/bottom-tabs@5.4.5) (2020-05-16)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.3...@react-navigation/bottom-tabs@5.4.4) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.2...@react-navigation/bottom-tabs@5.4.3) (2020-05-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.1...@react-navigation/bottom-tabs@5.4.2) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.4.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.4.0...@react-navigation/bottom-tabs@5.4.1) (2020-05-08)


 ### Bug Fixes

-* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))





-## [5.2.5](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.4...@react-navigation/bottom-tabs@5.2.5) (2020-03-30)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.3...@react-navigation/bottom-tabs@5.2.4) (2020-03-23)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.2...@react-navigation/bottom-tabs@5.2.3) (2020-03-22)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.1...@react-navigation/bottom-tabs@5.2.2) (2020-03-19)
-
-
-### Bug Fixes
-
-* don't use react-native-screens on web ([b1a65fc](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/7485)
-* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6789)
-
-
-
-
-
-## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.0...@react-navigation/bottom-tabs@5.2.1) (2020-03-17)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.1...@react-navigation/bottom-tabs@5.2.0) (2020-03-16)
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.4...@react-navigation/bottom-tabs@5.4.0) (2020-05-08)


 ### Features

-* add safeAreaInsets to bottom tabs ([82af7be](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/82af7bed7135e42e24693b48cf7f1c6f9f5a6981))
+* add generic type aliases for screen props ([bea14aa](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/bea14aa26fd5cbfebc7973733c5cf1f44fd323aa)), closes [#7971](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/7971)





-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.0...@react-navigation/bottom-tabs@5.1.1) (2020-03-03)
+## [5.3.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.3...@react-navigation/bottom-tabs@5.3.4) (2020-05-05)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -238,18 +164,43 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.7...@react-navigation/bottom-tabs@5.1.0) (2020-02-26)
+## [5.3.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.2...@react-navigation/bottom-tabs@5.3.3) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.1...@react-navigation/bottom-tabs@5.3.2) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.3.0...@react-navigation/bottom-tabs@5.3.1) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.8...@react-navigation/bottom-tabs@5.3.0) (2020-04-30)


 ### Features

-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6756)
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/942d2be2c72720469475ce12ec8df23825994dbf))





-## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.6...@react-navigation/bottom-tabs@5.0.7) (2020-02-21)
+## [5.2.8](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.7...@react-navigation/bottom-tabs@5.2.8) (2020-04-27)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -257,7 +208,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.5...@react-navigation/bottom-tabs@5.0.6) (2020-02-19)
+## [5.2.7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.6...@react-navigation/bottom-tabs@5.2.7) (2020-04-17)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -265,43 +216,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.5](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.4...@react-navigation/bottom-tabs@5.0.5) (2020-02-14)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.3...@react-navigation/bottom-tabs@5.0.4) (2020-02-14)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.2...@react-navigation/bottom-tabs@5.0.3) (2020-02-12)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.1...@react-navigation/bottom-tabs@5.0.2) (2020-02-11)
+## [5.2.6](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.5...@react-navigation/bottom-tabs@5.2.6) (2020-04-08)


 ### Bug Fixes

-* initialize keyboard-hiding tabBar to visible=true ([#6740](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6740), [#6799](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6799)) ([0c59ef7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/0c59ef7328c63108a2a2c04e927794d73cead63a))
-* provide route context to header and bottom tabs ([b6e7e08](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/b6e7e08b9a05be6c04ed21e938b9580876239116))
+* mark type exports for all packages ([b71de6c](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b71de6cc799143f1d0e8a0cfcc34f0a2381f9840))





-## [5.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.45...@react-navigation/bottom-tabs@5.0.1) (2020-02-10)
+## [5.2.5](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.4...@react-navigation/bottom-tabs@5.2.5) (2020-03-30)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -309,7 +235,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.45](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.44...@react-navigation/bottom-tabs@5.0.0-alpha.45) (2020-02-04)
+## [5.2.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.3...@react-navigation/bottom-tabs@5.2.4) (2020-03-23)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -317,7 +243,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.44](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.43...@react-navigation/bottom-tabs@5.0.0-alpha.44) (2020-02-04)
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.2...@react-navigation/bottom-tabs@5.2.3) (2020-03-22)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -325,7 +251,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.42...@react-navigation/bottom-tabs@5.0.0-alpha.43) (2020-02-03)
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.1...@react-navigation/bottom-tabs@5.2.2) (2020-03-19)
+
+
+### Bug Fixes
+
+* don't use react-native-screens on web ([b1a65fc](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b1a65fc73e8603ae2c06ef101a74df31e80bb9b2)), closes [#7485](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/7485)
+* initialize height and width to zero if undefined ([3df65e2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/3df65e28197db3bb8371059146546d57661c5ba3)), closes [#6789](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6789)
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.0...@react-navigation/bottom-tabs@5.2.1) (2020-03-17)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -333,56 +271,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.42) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-
-
-
-
-
-# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.40) (2020-02-02)
-
-
-### Bug Fixes
-
-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-
-
-
-
-
-# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.38...@react-navigation/bottom-tabs@5.0.0-alpha.39) (2020-01-24)
-
-
-### Bug Fixes
-
-* use layout instead of dimensions for determining tab bar layout ([f1fe951](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/f1fe951cf9d602e1b6d4932e3c6c77bbeaaec5c0))
-
-
-
-
-
-# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.37...@react-navigation/bottom-tabs@5.0.0-alpha.38) (2020-01-23)
-
-
-### Bug Fixes
-
-* don't use native driver on web ([0a982ee](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/0a982ee6984b24c0ba053a30223e255f3835e050))
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.1...@react-navigation/bottom-tabs@5.2.0) (2020-03-16)


 ### Features

-* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+* add safeAreaInsets to bottom tabs ([82af7be](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/82af7bed7135e42e24693b48cf7f1c6f9f5a6981))





-# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.36...@react-navigation/bottom-tabs@5.0.0-alpha.37) (2020-01-14)
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.0...@react-navigation/bottom-tabs@5.1.1) (2020-03-03)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -390,18 +290,70 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.35...@react-navigation/bottom-tabs@5.0.0-alpha.36) (2020-01-13)
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.7...@react-navigation/bottom-tabs@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6756)
+
+
+
+
+
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.6...@react-navigation/bottom-tabs@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.6](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.5...@react-navigation/bottom-tabs@5.0.6) (2020-02-19)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.5](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.4...@react-navigation/bottom-tabs@5.0.5) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.3...@react-navigation/bottom-tabs@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.3](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.2...@react-navigation/bottom-tabs@5.0.3) (2020-02-12)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.0.2](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.1...@react-navigation/bottom-tabs@5.0.2) (2020-02-11)


 ### Bug Fixes

-* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/issues/265)
+* initialize keyboard-hiding tabBar to visible=true ([#6740](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6740), [#6799](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/6799)) ([0c59ef7](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/0c59ef7328c63108a2a2c04e927794d73cead63a))
+* provide route context to header and bottom tabs ([b6e7e08](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/b6e7e08b9a05be6c04ed21e938b9580876239116))





-# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.34...@react-navigation/bottom-tabs@5.0.0-alpha.35) (2020-01-13)
+## [5.0.1](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.45...@react-navigation/bottom-tabs@5.0.1) (2020-02-10)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -409,7 +361,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.34) (2020-01-09)
+# [5.0.0-alpha.45](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.44...@react-navigation/bottom-tabs@5.0.0-alpha.45) (2020-02-04)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

@@ -417,7 +369,107 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.33) (2020-01-09)
+# [5.0.0-alpha.44](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.43...@react-navigation/bottom-tabs@5.0.0-alpha.44) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.43](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.42...@react-navigation/bottom-tabs@5.0.0-alpha.43) (2020-02-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.42](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.42) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+
+
+
+
+
+# [5.0.0-alpha.40](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.39...@react-navigation/bottom-tabs@5.0.0-alpha.40) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+
+
+
+
+
+# [5.0.0-alpha.39](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.38...@react-navigation/bottom-tabs@5.0.0-alpha.39) (2020-01-24)
+
+
+### Bug Fixes
+
+* use layout instead of dimensions for determining tab bar layout ([f1fe951](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/f1fe951cf9d602e1b6d4932e3c6c77bbeaaec5c0))
+
+
+
+
+
+# [5.0.0-alpha.38](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.37...@react-navigation/bottom-tabs@5.0.0-alpha.38) (2020-01-23)
+
+
+### Bug Fixes
+
+* don't use native driver on web ([0a982ee](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/0a982ee6984b24c0ba053a30223e255f3835e050))
+
+
+### Features
+
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.37](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.36...@react-navigation/bottom-tabs@5.0.0-alpha.37) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.36](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.35...@react-navigation/bottom-tabs@5.0.0-alpha.36) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.34...@react-navigation/bottom-tabs@5.0.0-alpha.35) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.34) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.0-alpha.32...@react-navigation/bottom-tabs@5.0.0-alpha.33) (2020-01-09)

 **Note:** Version bump only for package @react-navigation/bottom-tabs

--- a/packages/bottom-tabs/package.json
+++ b/packages/bottom-tabs/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/bottom-tabs",
  "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.5.2",
+  "version": "5.7.1",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -12,7 +12,11 @@
    "tab"
  ],
  "license": "MIT",
-  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/bottom-tabs"
+  },
  "main": "lib/commonjs/index.js",
  "react-native": "src/index.tsx",
  "source": "src/index.tsx",
@@ -36,17 +40,18 @@
    "react-native-iphone-x-helper": "^1.2.1"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.5.1",
+    "@react-native-community/bob": "^0.15.1",
+    "@react-navigation/native": "^5.7.0",
    "@types/color": "^3.0.1",
-    "@types/react": "^16.9.34",
+    "@types/react": "^16.9.36",
    "@types/react-native": "^0.62.7",
-    "del-cli": "^3.0.0",
+    "del-cli": "^3.0.1",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-safe-area-context": "^1.0.0",
    "react-native-screens": "^2.7.0",
-    "typescript": "^3.8.3"
+    "react-native-testing-library": "^2.1.0",
+    "typescript": "^3.9.5"
  },
  "peerDependencies": {
    "@react-navigation/native": "^5.0.5",
--- a/packages/bottom-tabs/src/tests/index.test.tsx
+++ b/packages/bottom-tabs/src/tests/index.test.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { render, fireEvent } from 'react-native-testing-library';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createBottomTabNavigator, BottomTabScreenProps } from '../index';
+
+it('renders a bottom tab navigator with screens', async () => {
+  const Test = ({ route, navigation }: BottomTabScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Tab = createBottomTabNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="A" component={Test} />
+        <Tab.Screen name="B" component={Test} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent.press(await findByText('Go to B'));
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});
--- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
+++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
@@ -8,7 +8,7 @@ import {
  TabNavigationState,
 } from '@react-navigation/native';
 import BottomTabView from '../views/BottomTabView';
-import {
+import type {
  BottomTabNavigationConfig,
  BottomTabNavigationOptions,
  BottomTabNavigationEventMap,
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
  Animated,
  TouchableWithoutFeedbackProps,
  StyleProp,
@@ -7,7 +7,7 @@ import {
  ViewStyle,
  GestureResponderEvent,
 } from 'react-native';
-import {
+import type {
  NavigationHelpers,
  NavigationProp,
  ParamListBase,
@@ -79,6 +79,11 @@ export type BottomTabNavigationOptions = {
    size: number;
  }) => React.ReactNode;

+  /**
+   * Text to show in a badge on the tab icon.
+   */
+  tabBarBadge?: number | string;
+
  /**
   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
   * It's recommended to set this if you don't have a label for the tab.
@@ -119,7 +124,7 @@ export type BottomTabDescriptorMap = {
  [key: string]: BottomTabDescriptor;
 };

-export type BottomTabNavigationConfig = {
+export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
  /**
   * Whether the screens should render the first time they are accessed. Defaults to `true`.
   * Set it to `false` if you want to render all screens on initial render.
@@ -128,11 +133,11 @@ export type BottomTabNavigationConfig = {
  /**
   * Function that returns a React element to display as the tab bar.
   */
-  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
+  tabBar?: (props: BottomTabBarProps<T>) => React.ReactNode;
  /**
   * Options for the tab bar which will be passed as props to the tab bar component.
   */
-  tabBarOptions?: BottomTabBarOptions;
+  tabBarOptions?: T;
 };

 export type BottomTabBarOptions = {
@@ -164,21 +169,21 @@ export type BottomTabBarOptions = {
   * Whether the tab label should be visible. Defaults to `true`.
   */
  showLabel?: boolean;
-  /**
-   * Whether the tab icon should be visible. Defaults to `true`.
-   */
-  showIcon?: boolean;
  /**
   * Style object for the tab label.
   */
  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the tab icon.
+   */
+  iconStyle?: StyleProp<TextStyle>;
  /**
   * Style object for the tab container.
   */
  tabStyle?: StyleProp<ViewStyle>;
  /**
   * Whether the label is rendered below the icon or beside the icon.
-   * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's rendered beside.
+   * By default, in `vertical` orientation, label is rendered below and in `horizontal` orientation, it's rendered beside.
   */
  labelPosition?: LabelPosition;
  /**
@@ -201,7 +206,7 @@ export type BottomTabBarOptions = {
  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };

-export type BottomTabBarProps = BottomTabBarOptions & {
+export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
  state: TabNavigationState;
  descriptors: BottomTabDescriptorMap;
  navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
--- a/packages/bottom-tabs/src/utils/useIsKeyboardShown.tsx
+++ b/packages/bottom-tabs/src/utils/useIsKeyboardShown.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Keyboard, Platform } from 'react-native';
+
+export default function useIsKeyboardShown() {
+  const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleKeyboardShow = () => setIsKeyboardShown(true);
+    const handleKeyboardHide = () => setIsKeyboardShown(false);
+
+    if (Platform.OS === 'ios') {
+      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
+    } else {
+      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
+      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
+    }
+
+    return () => {
+      if (Platform.OS === 'ios') {
+        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
+      } else {
+        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
+        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
+      }
+    };
+  }, []);
+
+  return isKeyboardShown;
+}
--- a/packages/bottom-tabs/src/utils/useWindowDimensions.tsx
+++ b/packages/bottom-tabs/src/utils/useWindowDimensions.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ScaledSize, Dimensions } from 'react-native';
+
+// This is similar to the new useWindowDimensions hook in react-native
+// However, we have a custom implementation to support older RN versions
+export default function useWindowDimensions() {
+  const [dimensions, setDimensions] = React.useState(() => {
+    // `height` and `width` maybe undefined during SSR, so we initialize them
+    const { height = 0, width = 0 } = Dimensions.get('window');
+
+    return { height, width };
+  });
+
+  React.useEffect(() => {
+    const onChange = ({ window }: { window: ScaledSize }) => {
+      const { width, height } = window;
+
+      setDimensions((d) => {
+        if (width === d.width && height === d.height) {
+          return d;
+        }
+
+        return { width, height };
+      });
+    };
+
+    // We might have missed an update before the listener was added
+    // So make sure to update the dimensions
+    onChange({ window: Dimensions.get('window') });
+
+    Dimensions.addEventListener('change', onChange);
+
+    return () => Dimensions.addEventListener('change', onChange);
+  }, []);
+
+  return dimensions;
+}
--- a/packages/bottom-tabs/src/views/Badge.tsx
+++ b/packages/bottom-tabs/src/views/Badge.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Animated, StyleSheet, StyleProp, TextStyle } from 'react-native';
+import color from 'color';
+import { useTheme } from '@react-navigation/native';
+
+type Props = {
+  /**
+   * Whether the badge is visible
+   */
+  visible: boolean;
+  /**
+   * Content of the `Badge`.
+   */
+  children?: string | number;
+  /**
+   * Size of the `Badge`.
+   */
+  size?: number;
+  /**
+   * Style object for the tab bar container.
+   */
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
+export default function Badge({
+  visible = true,
+  size = 18,
+  children,
+  style,
+  ...rest
+}: Props) {
+  const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
+  const [rendered, setRendered] = React.useState(visible ? true : false);
+
+  const theme = useTheme();
+
+  React.useEffect(() => {
+    if (!rendered) {
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished && !visible) {
+        setRendered(false);
+      }
+    });
+  }, [opacity, rendered, visible]);
+
+  if (visible && !rendered) {
+    setRendered(true);
+  }
+
+  if (!visible && !rendered) {
+    return null;
+  }
+
+  // @ts-expect-error: backgroundColor definitely exists
+  const { backgroundColor = theme.colors.notification, ...restStyle } =
+    StyleSheet.flatten(style) || {};
+  const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
+
+  const borderRadius = size / 2;
+  const fontSize = Math.floor((size * 3) / 4);
+
+  return (
+    <Animated.Text
+      numberOfLines={1}
+      style={[
+        {
+          opacity,
+          transform: [
+            {
+              scale: opacity.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              }),
+            },
+          ],
+          backgroundColor,
+          color: textColor,
+          fontSize,
+          lineHeight: size - 1,
+          height: size,
+          minWidth: size,
+          borderRadius,
+        },
+        styles.container,
+        restStyle,
+      ]}
+      {...rest}
+    >
+      {children}
+    </Animated.Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-end',
+    textAlign: 'center',
+    paddingHorizontal: 4,
+    overflow: 'hidden',
+  },
+});
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -3,11 +3,8 @@ import {
  View,
  Animated,
  StyleSheet,
-  Keyboard,
  Platform,
  LayoutChangeEvent,
-  ScaledSize,
-  Dimensions,
 } from 'react-native';
 import {
  NavigationContext,
@@ -19,14 +16,16 @@ import {
 import { useSafeArea } from 'react-native-safe-area-context';

 import BottomTabItem from './BottomTabItem';
-import { BottomTabBarProps } from '../types';
+import useWindowDimensions from '../utils/useWindowDimensions';
+import useIsKeyboardShown from '../utils/useIsKeyboardShown';
+import type { BottomTabBarProps } from '../types';

 type Props = BottomTabBarProps & {
  activeTintColor?: string;
  inactiveTintColor?: string;
 };

-const DEFAULT_TABBAR_HEIGHT = 50;
+const DEFAULT_TABBAR_HEIGHT = 49;
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;

 const useNativeDriver = Platform.OS !== 'web';
@@ -44,8 +43,8 @@ export default function BottomTabBar({
  keyboardHidesTabBar = false,
  labelPosition,
  labelStyle,
+  iconStyle,
  safeAreaInsets,
-  showIcon,
  showLabel,
  style,
  tabStyle,
@@ -57,7 +56,8 @@ export default function BottomTabBar({
  const focusedDescriptor = descriptors[focusedRoute.key];
  const focusedOptions = focusedDescriptor.options;

-  const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
+  const dimensions = useWindowDimensions();
+  const isKeyboardShown = useIsKeyboardShown();

  const shouldShowTabBar =
    focusedOptions.tabBarVisible !== false &&
@@ -91,43 +91,6 @@ export default function BottomTabBar({
    }
  }, [shouldShowTabBar, visible]);

-  const [dimensions, setDimensions] = React.useState(() => {
-    const { height = 0, width = 0 } = Dimensions.get('window');
-
-    return { height, width };
-  });
-
-  React.useEffect(() => {
-    const handleOrientationChange = ({ window }: { window: ScaledSize }) => {
-      setDimensions(window);
-    };
-
-    Dimensions.addEventListener('change', handleOrientationChange);
-
-    const handleKeyboardShow = () => setIsKeyboardShown(true);
-    const handleKeyboardHide = () => setIsKeyboardShown(false);
-
-    if (Platform.OS === 'ios') {
-      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
-      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
-    } else {
-      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
-      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
-    }
-
-    return () => {
-      Dimensions.removeEventListener('change', handleOrientationChange);
-
-      if (Platform.OS === 'ios') {
-        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
-        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
-      } else {
-        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
-        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
-      }
-    };
-  }, []);
-
  const [layout, setLayout] = React.useState({
    height: 0,
    width: dimensions.width,
@@ -189,6 +152,8 @@ export default function BottomTabBar({
    left: safeAreaInsets?.left ?? defaultInsets.left,
  };

+  const paddingBottom = Math.max(insets.bottom - 4, 0);
+
  return (
    <Animated.View
      style={[
@@ -202,7 +167,7 @@ export default function BottomTabBar({
            {
              translateY: visible.interpolate({
                inputRange: [0, 1],
-                outputRange: [layout.height + insets.bottom, 0],
+                outputRange: [layout.height + paddingBottom, 0],
              }),
            },
          ],
@@ -211,8 +176,8 @@ export default function BottomTabBar({
          position: isTabBarHidden ? 'absolute' : null,
        },
        {
-          height: DEFAULT_TABBAR_HEIGHT + insets.bottom,
-          paddingBottom: insets.bottom,
+          height: DEFAULT_TABBAR_HEIGHT + paddingBottom,
+          paddingBottom,
          paddingHorizontal: Math.max(insets.left, insets.right),
        },
        style,
@@ -282,10 +247,11 @@ export default function BottomTabBar({
                  inactiveBackgroundColor={inactiveBackgroundColor}
                  button={options.tabBarButton}
                  icon={options.tabBarIcon}
+                  badge={options.tabBarBadge}
                  label={label}
-                  showIcon={showIcon}
                  showLabel={showLabel}
                  labelStyle={labelStyle}
+                  iconStyle={iconStyle}
                  style={tabStyle}
                />
              </NavigationRouteContext.Provider>
--- a/packages/bottom-tabs/src/views/BottomTabItem.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -14,7 +14,7 @@ import { Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';

 import TabBarIcon from './TabBarIcon';
-import { BottomTabBarButtonProps } from '../types';
+import type { BottomTabBarButtonProps } from '../types';

 type Props = {
  /**
@@ -39,6 +39,10 @@ type Props = {
    size: number;
    color: string;
  }) => React.ReactNode;
+  /**
+   * Text to show in a badge on the tab icon.
+   */
+  badge?: number | string;
  /**
   * URL to use for the link to the tab.
   */
@@ -90,10 +94,6 @@ type Props = {
   * Whether to show the label text for the tab.
   */
  showLabel?: boolean;
-  /**
-   * Whether to show the icon for the tab.
-   */
-  showIcon?: boolean;
  /**
   * Whether to allow scaling the font for the label for accessibility purposes.
   */
@@ -102,6 +102,10 @@ type Props = {
   * Style object for the label element.
   */
  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the icon element.
+   */
+  iconStyle?: StyleProp<ViewStyle>;
  /**
   * Style object for the wrapper element.
   */
@@ -113,6 +117,7 @@ export default function BottomTabBarItem({
  route,
  label,
  icon,
+  badge,
  to,
  button = ({
    children,
@@ -165,9 +170,9 @@ export default function BottomTabBarItem({
  activeBackgroundColor = 'transparent',
  inactiveBackgroundColor = 'transparent',
  showLabel = true,
-  showIcon = true,
  allowFontScaling,
  labelStyle,
+  iconStyle,
  style,
 }: Props) {
  const { colors } = useTheme();
@@ -196,7 +201,7 @@ export default function BottomTabBarItem({
          style={[
            styles.label,
            { color },
-            showIcon && horizontal ? styles.labelBeside : styles.labelBeneath,
+            horizontal ? styles.labelBeside : styles.labelBeneath,
            labelStyle,
          ]}
          allowFontScaling={allowFontScaling}
@@ -210,7 +215,7 @@ export default function BottomTabBarItem({
  };

  const renderIcon = ({ focused }: { focused: boolean }) => {
-    if (showIcon === false || icon === undefined) {
+    if (icon === undefined) {
      return null;
    }

@@ -220,13 +225,14 @@ export default function BottomTabBarItem({
    return (
      <TabBarIcon
        route={route}
-        size={horizontal ? 17 : 24}
+        horizontal={horizontal}
+        badge={badge}
        activeOpacity={activeOpacity}
        inactiveOpacity={inactiveOpacity}
        activeTintColor={activeTintColor}
        inactiveTintColor={inactiveTintColor}
        renderIcon={icon}
-        style={horizontal ? styles.iconHorizontal : styles.iconVertical}
+        style={iconStyle}
      />
    );
  };
@@ -273,23 +279,17 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    flexDirection: 'row',
  },
-  iconVertical: {
-    flex: 1,
-  },
-  iconHorizontal: {
-    height: '100%',
-  },
  label: {
    textAlign: 'center',
    backgroundColor: 'transparent',
  },
  labelBeneath: {
-    fontSize: 11,
-    marginBottom: 1.5,
+    fontSize: 10,
  },
  labelBeside: {
-    fontSize: 12,
+    fontSize: 13,
    marginLeft: 20,
+    marginTop: 3,
  },
  button: {
    display: 'flex',
--- a/packages/bottom-tabs/src/views/BottomTabView.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -12,7 +12,7 @@ import { ScreenContainer } from 'react-native-screens';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
-import {
+import type {
  BottomTabNavigationConfig,
  BottomTabDescriptorMap,
  BottomTabNavigationHelpers,
--- a/packages/bottom-tabs/src/views/ResourceSavingScene.tsx
+++ b/packages/bottom-tabs/src/views/ResourceSavingScene.tsx
@@ -17,7 +17,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
    if (screensEnabled?.() && Platform.OS !== 'web') {
      const { isVisible, ...rest } = this.props;

-      // @ts-ignore
+      // @ts-expect-error: stackPresentation is incorrectly marked as required
      return <Screen active={isVisible ? 1 : 0} {...rest} />;
    }

--- a/packages/bottom-tabs/src/views/TabBarIcon.tsx
+++ b/packages/bottom-tabs/src/views/TabBarIcon.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Route } from '@react-navigation/native';
+import type { Route } from '@react-navigation/native';
+import Badge from './Badge';

 type Props = {
  route: Route<string>;
-  size: number;
+  horizontal: boolean;
+  badge?: string | number;
  activeOpacity: number;
  inactiveOpacity: number;
  activeTintColor: string;
@@ -18,18 +20,23 @@ type Props = {
 };

 export default function TabBarIcon({
+  horizontal,
+  badge,
  activeOpacity,
  inactiveOpacity,
  activeTintColor,
  inactiveTintColor,
  renderIcon,
-  size,
  style,
 }: Props) {
+  const size = 25;
+
  // We render the icon twice at the same position on top of each other:
  // active and inactive one, so we can fade between them.
  return (
-    <View style={style}>
+    <View
+      style={[horizontal ? styles.iconHorizontal : styles.iconVertical, style]}
+    >
      <View style={[styles.icon, { opacity: activeOpacity }]}>
        {renderIcon({
          focused: true,
@@ -44,6 +51,16 @@ export default function TabBarIcon({
          color: inactiveTintColor,
        })}
      </View>
+      <Badge
+        visible={badge != null}
+        style={[
+          styles.badge,
+          horizontal ? styles.badgeHorizontal : styles.badgeVertical,
+        ]}
+        size={(size * 3) / 4}
+      >
+        {badge}
+      </Badge>
    </View>
  );
 }
@@ -62,4 +79,21 @@ const styles = StyleSheet.create({
    // Workaround for react-native >= 0.54 layout bug
    minWidth: 25,
  },
+  iconVertical: {
+    flex: 1,
+  },
+  iconHorizontal: {
+    height: '100%',
+    marginTop: 3,
+  },
+  badge: {
+    position: 'absolute',
+    left: 3,
+  },
+  badgeVertical: {
+    top: 3,
+  },
+  badgeHorizontal: {
+    top: 7,
+  },
 });
--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/CHANGELOG.md
@@ -3,236 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [5.1.26](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.25...@react-navigation/compat@5.1.26) (2020-06-06)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.25](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.24...@react-navigation/compat@5.1.25) (2020-05-27)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.24](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.23...@react-navigation/compat@5.1.24) (2020-05-23)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [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
-
-
-
-
-
-## [5.1.5](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.4...@react-navigation/compat@5.1.5) (2020-03-22)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.3...@react-navigation/compat@5.1.4) (2020-03-19)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.2...@react-navigation/compat@5.1.3) (2020-03-17)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.1...@react-navigation/compat@5.1.2) (2020-03-16)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.0...@react-navigation/compat@5.1.1) (2020-03-03)
-
-**Note:** Version bump only for package @react-navigation/compat
-
-
-
-
-
-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.7...@react-navigation/compat@5.1.0) (2020-02-26)
+# [5.2.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.28...@react-navigation/compat@5.2.0) (2020-07-10)


 ### Features

-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/6756)
+* add a getComponent prop to lazily specify components ([f418029](https://github.com/react-navigation/react-navigation/commit/f4180295bf22e32c65f6a7ab7089523cb2de58fb))





-## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.6...@react-navigation/compat@5.0.7) (2020-02-21)
+## [5.1.28](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.27...@react-navigation/compat@5.1.28) (2020-06-25)

 **Note:** Version bump only for package @react-navigation/compat

@@ -240,18 +22,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.5...@react-navigation/compat@5.0.6) (2020-02-19)
+## [5.1.27](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.1.26...@react-navigation/compat@5.1.27) (2020-06-24)


 ### Bug Fixes

-* add NavigationEvents ([d69b0db](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/d69b0db60455b8789276822ba73f5349db8842d7)), closes [/github.com/react-navigation/react-navigation/issues/6821#issuecomment-588268512](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/issuecomment-588268512)
+* more improvements to types ([d244488](https://github.com/react-navigation/react-navigation/commit/d2444887be227bbbdcfcb13a7f26a8ebb344043e))





-## [5.0.5](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.4...@react-navigation/compat@5.0.5) (2020-02-14)
+## [5.1.26](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.25...@react-navigation/compat@5.1.26) (2020-06-06)

 **Note:** Version bump only for package @react-navigation/compat

@@ -259,7 +41,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.3...@react-navigation/compat@5.0.4) (2020-02-14)
+## [5.1.25](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.24...@react-navigation/compat@5.1.25) (2020-05-27)

 **Note:** Version bump only for package @react-navigation/compat

@@ -267,7 +49,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.2...@react-navigation/compat@5.0.3) (2020-02-12)
+## [5.1.24](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.23...@react-navigation/compat@5.1.24) (2020-05-23)

 **Note:** Version bump only for package @react-navigation/compat

@@ -275,7 +57,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.1...@react-navigation/compat@5.0.2) (2020-02-11)
+## [5.1.23](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.22...@react-navigation/compat@5.1.23) (2020-05-20)

 **Note:** Version bump only for package @react-navigation/compat

@@ -283,7 +65,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.34...@react-navigation/compat@5.0.1) (2020-02-10)
+## [5.1.22](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.21...@react-navigation/compat@5.1.22) (2020-05-20)

 **Note:** Version bump only for package @react-navigation/compat

@@ -291,7 +73,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.33...@react-navigation/compat@5.0.0-alpha.34) (2020-02-04)
+## [5.1.21](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.20...@react-navigation/compat@5.1.21) (2020-05-16)

 **Note:** Version bump only for package @react-navigation/compat

@@ -299,7 +81,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.32...@react-navigation/compat@5.0.0-alpha.33) (2020-02-04)
+## [5.1.20](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.19...@react-navigation/compat@5.1.20) (2020-05-14)

 **Note:** Version bump only for package @react-navigation/compat

@@ -307,7 +89,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.31...@react-navigation/compat@5.0.0-alpha.32) (2020-02-03)
+## [5.1.19](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.18...@react-navigation/compat@5.1.19) (2020-05-14)

 **Note:** Version bump only for package @react-navigation/compat

@@ -315,31 +97,86 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.31) (2020-02-02)
+## [5.1.18](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.17...@react-navigation/compat@5.1.18) (2020-05-10)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.17](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.16...@react-navigation/compat@5.1.17) (2020-05-08)


 ### Bug Fixes

-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))





-# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.29) (2020-02-02)
+## [5.1.16](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.15...@react-navigation/compat@5.1.16) (2020-05-08)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.15](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.14...@react-navigation/compat@5.1.15) (2020-05-05)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.14](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.13...@react-navigation/compat@5.1.14) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.13](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.12...@react-navigation/compat@5.1.13) (2020-05-01)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.12](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.11...@react-navigation/compat@5.1.12) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.11](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.10...@react-navigation/compat@5.1.11) (2020-04-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.10](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.9...@react-navigation/compat@5.1.10) (2020-04-27)


 ### Bug Fixes

-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
+* fix typo in navigationOptions ([8cbb201](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/8cbb201f1a7fb90e45a078df6bc42ce4771cc6a6))
+* spread parent params to children in compat navigator ([24febf6](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/24febf6ea99be2e5f22005fdd2a82136d647255c)), closes [#6785](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/6785)





-# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.27...@react-navigation/compat@5.0.0-alpha.28) (2020-01-24)
+## [5.1.9](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.8...@react-navigation/compat@5.1.9) (2020-04-17)

 **Note:** Version bump only for package @react-navigation/compat

@@ -347,19 +184,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.26...@react-navigation/compat@5.0.0-alpha.27) (2020-01-23)
+## [5.1.8](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.7...@react-navigation/compat@5.1.8) (2020-04-08)


 ### Bug Fixes

-* ensure re-render on isFirstRouteInParent change in compat layer ([14ae373](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/14ae3738cf46088e082bd1c60b9dcc6dacacd1bf))
-* improvements to the compat layer ([2a76dc4](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/2a76dc4d3c4cc0365a3afcff6ac321145efed026))
+* use 1 as default in compatibility pop action ([4408117](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/44081172d440c713ad3543a2d5e1e18ebc8f72a4))





-# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.25...@react-navigation/compat@5.0.0-alpha.26) (2020-01-14)
+## [5.1.7](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.6...@react-navigation/compat@5.1.7) (2020-03-30)

 **Note:** Version bump only for package @react-navigation/compat

@@ -367,18 +203,85 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.24...@react-navigation/compat@5.0.0-alpha.25) (2020-01-13)
+## [5.1.6](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.5...@react-navigation/compat@5.1.6) (2020-03-23)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.5](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.4...@react-navigation/compat@5.1.5) (2020-03-22)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.3...@react-navigation/compat@5.1.4) (2020-03-19)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.2...@react-navigation/compat@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.2](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.1...@react-navigation/compat@5.1.2) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.1.0...@react-navigation/compat@5.1.1) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.7...@react-navigation/compat@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/6756)
+
+
+
+
+
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.6...@react-navigation/compat@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.0.6](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.5...@react-navigation/compat@5.0.6) (2020-02-19)


 ### Bug Fixes

-* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/issues/265)
+* add NavigationEvents ([d69b0db](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/d69b0db60455b8789276822ba73f5349db8842d7)), closes [/github.com/react-navigation/react-navigation/issues/6821#issuecomment-588268512](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/issuecomment-588268512)





-# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.23...@react-navigation/compat@5.0.0-alpha.24) (2020-01-13)
+## [5.0.5](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.4...@react-navigation/compat@5.0.5) (2020-02-14)

 **Note:** Version bump only for package @react-navigation/compat

@@ -386,7 +289,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.23) (2020-01-09)
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.3...@react-navigation/compat@5.0.4) (2020-02-14)

 **Note:** Version bump only for package @react-navigation/compat

@@ -394,7 +297,134 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/tree/master/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.22) (2020-01-09)
+## [5.0.3](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.2...@react-navigation/compat@5.0.3) (2020-02-12)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.0.2](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.1...@react-navigation/compat@5.0.2) (2020-02-11)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.0.1](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.34...@react-navigation/compat@5.0.1) (2020-02-10)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.33...@react-navigation/compat@5.0.0-alpha.34) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.32...@react-navigation/compat@5.0.0-alpha.33) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.31...@react-navigation/compat@5.0.0-alpha.32) (2020-02-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.31](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.31) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.28...@react-navigation/compat@5.0.0-alpha.29) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* throw when assigning or accessing the router property in compat ([944fa35](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/944fa35ed4778ebc7fa7cd50092719cbd5bf3caf))
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.27...@react-navigation/compat@5.0.0-alpha.28) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.26...@react-navigation/compat@5.0.0-alpha.27) (2020-01-23)
+
+
+### Bug Fixes
+
+* ensure re-render on isFirstRouteInParent change in compat layer ([14ae373](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/14ae3738cf46088e082bd1c60b9dcc6dacacd1bf))
+* improvements to the compat layer ([2a76dc4](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/2a76dc4d3c4cc0365a3afcff6ac321145efed026))
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.25...@react-navigation/compat@5.0.0-alpha.26) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.24...@react-navigation/compat@5.0.0-alpha.25) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.23...@react-navigation/compat@5.0.0-alpha.24) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.23](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.23) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.0.0-alpha.22](https://github.com/react-navigation/react-navigation/tree/main/packages/compat/compare/@react-navigation/compat@5.0.0-alpha.21...@react-navigation/compat@5.0.0-alpha.22) (2020-01-09)

 **Note:** Version bump only for package @react-navigation/compat

--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -1,9 +1,13 @@
 {
  "name": "@react-navigation/compat",
  "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.1.26",
+  "version": "5.2.0",
  "license": "MIT",
-  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/compat"
+  },
  "bugs": {
    "url": "https://github.com/react-navigation/react-navigation/issues"
  },
@@ -27,11 +31,11 @@
    "clean": "del lib"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.14.3",
-    "@react-navigation/native": "^5.5.1",
-    "@types/react": "^16.9.34",
+    "@react-native-community/bob": "^0.15.1",
+    "@react-navigation/native": "^5.7.0",
+    "@types/react": "^16.9.36",
    "react": "~16.9.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.5"
  },
  "peerDependencies": {
    "@react-navigation/native": "^5.0.5",
--- a/packages/compat/src/CompatScreen.tsx
+++ b/packages/compat/src/CompatScreen.tsx
@@ -1,25 +1,17 @@
 import * as React from 'react';
-import {
-  NavigationProp,
-  ParamListBase,
-  RouteProp,
-} from '@react-navigation/native';
 import ScreenPropsContext from './ScreenPropsContext';
 import useCompatNavigation from './useCompatNavigation';

-type Props<ParamList extends ParamListBase> = {
-  navigation: NavigationProp<ParamList>;
-  route: RouteProp<ParamList, string>;
-  component: React.ComponentType<any>;
+type Props = {
+  getComponent: () => React.ComponentType<any>;
 };

-function ScreenComponent<ParamList extends ParamListBase>(
-  props: Props<ParamList>
-) {
+function CompatScreen({ getComponent }: Props) {
  const navigation = useCompatNavigation();
  const screenProps = React.useContext(ScreenPropsContext);
+  const ScreenComponent = getComponent();

-  return <props.component navigation={navigation} screenProps={screenProps} />;
+  return <ScreenComponent navigation={navigation} screenProps={screenProps} />;
 }

-export default React.memo(ScreenComponent);
+export default React.memo(CompatScreen);
--- a/packages/compat/src/NavigationEvents.tsx
+++ b/packages/compat/src/NavigationEvents.tsx
@@ -25,7 +25,7 @@ export default function NavigationEvents(props: Props) {
      propsRef.current.onWillBlur?.();
    });

-    // @ts-ignore
+    // @ts-expect-error: transitionEnd may not exist on this navigator
    const unsubTransitionEnd = navigation.addListener('transitionEnd', () => {
      if (navigation.isFocused()) {
        propsRef.current.onDidFocus?.();
--- a/packages/compat/src/createCompatNavigationProp.tsx
+++ b/packages/compat/src/createCompatNavigationProp.tsx
@@ -1,4 +1,4 @@
-import {
+import type {
  NavigationState,
  PartialState,
  ParamListBase,
@@ -6,7 +6,7 @@ import {
  RouteProp,
 } from '@react-navigation/native';
 import * as helpers from './helpers';
-import { CompatNavigationProp } from './types';
+import type { CompatNavigationProp } from './types';

 type EventName =
  | 'action'
@@ -16,10 +16,6 @@ type EventName =
  | 'didBlur'
  | 'refocus';

-// const focusSubscriptions = new WeakMap<() => void, () => void>();
-// const blurSubscriptions = new WeakMap<() => void, () => void>();
-// const refocusSubscriptions = new WeakMap<() => void, () => void>();
-
 export default function createCompatNavigationProp<
  NavigationPropType extends NavigationProp<ParamListBase>,
  ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
@@ -74,7 +70,7 @@ export default function createCompatNavigationProp<
            }
          };

-          // @ts-ignore
+          // @ts-expect-error: this event may not exist in this navigator
          unsubscribe = navigation.addListener('transitionEnd', listener);
          context.subscriptions.didFocus.set(callback, unsubscribe);
          break;
@@ -86,7 +82,7 @@ export default function createCompatNavigationProp<
            }
          };

-          // @ts-ignore
+          // @ts-expect-error: this event may not exist in this navigator
          unsubscribe = navigation.addListener('transitionEnd', listener);
          context.subscriptions.didBlur.set(callback, unsubscribe);
          break;
@@ -98,7 +94,7 @@ export default function createCompatNavigationProp<
            }
          };

-          // @ts-ignore
+          // @ts-expect-error: this event may not exist in this navigator
          unsubscribe = navigation.addListener('tabPress', listener);
          context.subscriptions.refocus.set(callback, unsubscribe);
          break;
@@ -106,7 +102,6 @@ export default function createCompatNavigationProp<
        case 'action':
          throw new Error("Listening to 'action' events is not supported.");
        default:
-          // @ts-ignore
          unsubscribe = navigation.addListener(type, callback);
      }

@@ -144,18 +139,17 @@ export default function createCompatNavigationProp<
        case 'action':
          throw new Error("Listening to 'action' events is not supported.");
        default:
-          // @ts-ignore
          navigation.removeListener(type, callback);
      }
    },
    state: {
      ...state,
-      // @ts-ignore
+      // @ts-expect-error
      routeName: state.name,
      get index() {
-        // @ts-ignore
+        // @ts-expect-error
        if (state.index !== undefined) {
-          // @ts-ignore
+          // @ts-expect-error
          return state.index;
        }

@@ -163,13 +157,13 @@ export default function createCompatNavigationProp<
          "Accessing child navigation state for a route is not safe and won't work correctly."
        );

-        // @ts-ignore
+        // @ts-expect-error
        return state.state ? state.state.index : undefined;
      },
      get routes() {
-        // @ts-ignore
+        // @ts-expect-error
        if (state.routes !== undefined) {
-          // @ts-ignore
+          // @ts-expect-error
          return state.routes;
        }

@@ -177,7 +171,7 @@ export default function createCompatNavigationProp<
          "Accessing child navigation state for a route is not safe and won't work correctly."
        );

-        // @ts-ignore
+        // @ts-expect-error
        return state.state ? state.state.routes : undefined;
      },
    },
@@ -185,7 +179,7 @@ export default function createCompatNavigationProp<
      paramName: T,
      defaultValue: ParamList[T]
    ): ParamList[T] {
-      // @ts-ignore
+      // @ts-expect-error
      const params = state.params;

      if (params && paramName in params) {
@@ -201,7 +195,7 @@ export default function createCompatNavigationProp<

      const { routes } = navigation.dangerouslyGetState();

-      // @ts-ignore
+      // @ts-expect-error
      return routes[0].key === state.key;
    },
    dangerouslyGetParent() {
--- a/packages/compat/src/createCompatNavigatorFactory.tsx
+++ b/packages/compat/src/createCompatNavigatorFactory.tsx
@@ -6,24 +6,23 @@ import {
  TypedNavigator,
  NavigationProp,
  RouteProp,
-  EventMapBase,
  NavigationRouteContext,
 } from '@react-navigation/native';
 import CompatScreen from './CompatScreen';
 import ScreenPropsContext from './ScreenPropsContext';
 import createCompatNavigationProp from './createCompatNavigationProp';
-import { CompatScreenType, CompatRouteConfig } from './types';
+import type { CompatScreenType, CompatRouteConfig } from './types';

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

 export type CompatNavigationProp<
  NavigationPropType extends NavigationProp<ParamListBase>,
--- a/packages/compat/src/useCompatNavigation.tsx
+++ b/packages/compat/src/useCompatNavigation.tsx
@@ -7,7 +7,7 @@ import {
  useNavigationState,
 } from '@react-navigation/native';
 import createCompatNavigationProp from './createCompatNavigationProp';
-import { CompatNavigationProp } from './types';
+import type { CompatNavigationProp } from './types';

 export default function useCompatNavigation<
  T extends NavigationProp<ParamListBase>
--- a/packages/compat/src/withNavigation.tsx
+++ b/packages/compat/src/withNavigation.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
+import type { NavigationProp, ParamListBase } from '@react-navigation/native';
 import useCompatNavigation from './useCompatNavigation';
-import { CompatNavigationProp } from './types';
+import type { CompatNavigationProp } from './types';

 type InjectedProps<T extends NavigationProp<ParamListBase>> = {
  navigation: CompatNavigationProp<T>;
@@ -22,7 +22,7 @@ export default function withNavigation<
  }): React.ReactElement => {
    const navigation = useCompatNavigation<T>();

-    // @ts-ignore
+    // @ts-expect-error: type checking HOC is hard
    return <Comp ref={onRef} navigation={navigation} {...rest} />;
  };

--- a/packages/compat/src/withNavigationFocus.tsx
+++ b/packages/compat/src/withNavigationFocus.tsx
@@ -19,7 +19,7 @@ export default function withNavigationFocus<
  }): React.ReactElement => {
    const isFocused = useIsFocused();

-    // @ts-ignore
+    // @ts-expect-error: type checking HOC is hard
    return <Comp ref={onRef} isFocused={isFocused} {...rest} />;
  };

--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,37 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-# [5.10.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.9.0...@react-navigation/core@5.10.0) (2020-06-06)
+# [5.12.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.11.1...@react-navigation/core@5.12.0) (2020-07-10)


 ### Bug Fixes

-* catch missing params when they are required in navigate ([#8389](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8389)) ([8774ca9](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/8774ca97e1da91e97677ecd816c85f66af296b93))
-* make sure the wildcard pattern catches nested unmatched routes ([c3bd349](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c3bd349d77688011c9c55027edd66c6f39de2ade))
-* only use the query params for focused route in path ([2d66ef9](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2d66ef93ec9923a452415c482c40e7c6b769917c))
-* prevent state change being emitted unnecessarily ([ab1f79c](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/ab1f79c096e94475a4da1acf1c850d04fb1bc4cf))
+* avoid error setting warning for devtools migration. closes [#8534](https://github.com/react-navigation/react-navigation/issues/8534) ([1801a13](https://github.com/react-navigation/react-navigation/commit/1801a13323eff149fb6bc4e3c3f12422b401f178))
+* fix bubbling actions to correct target when specified ([9671c76](https://github.com/react-navigation/react-navigation/commit/9671c76c5121aaa64a956e2ca696b2f1712cd6f4))
+* fix options event being emitted incorrectly ([#8559](https://github.com/react-navigation/react-navigation/issues/8559)) ([a255e35](https://github.com/react-navigation/react-navigation/commit/a255e350f9a54c6d8e410167c9c8661e70b23779))
+* improve the warning message for non-serializable values ([e63580e](https://github.com/react-navigation/react-navigation/commit/e63580edbef8e77239f3dbefc919d1a41723eff1))
+* mark some types as read-only ([7c3a0a0](https://github.com/react-navigation/react-navigation/commit/7c3a0a0f23629da0beb956ba5a9689ab965061ce))


 ### Features

-* add wildcard patterns for paths ([4fe72e3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/4fe72e3ce7bae9120d04e490401f3bad58ebdf5c)), closes [#8019](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8019)
+* add a `beforeRemove` event ([6925e92](https://github.com/react-navigation/react-navigation/commit/6925e92dc3e9885e3f552ca5e5eb51ae1521e54e))
+* add a getComponent prop to lazily specify components ([f418029](https://github.com/react-navigation/react-navigation/commit/f4180295bf22e32c65f6a7ab7089523cb2de58fb))





-# [5.9.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.8.2...@react-navigation/core@5.9.0) (2020-05-27)
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.11.0...@react-navigation/core@5.11.1) (2020-06-25)
+
+
+### Bug Fixes
+
+* fix error with type definitions. closes [#8511](https://github.com/react-navigation/react-navigation/issues/8511) ([d1210a8](https://github.com/react-navigation/react-navigation/commit/d1210a861b37201827c333a5c012c4f0ebd9bb6a))
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.10.0...@react-navigation/core@5.11.0) (2020-06-24)
+
+
+### Bug Fixes
+
+* fix getCurrentOptions for nested screens ([6730690](https://github.com/react-navigation/react-navigation/commit/67306905299314bda053e553ded228374e3e23c9))
+* fix getCurrentOptions for nested screens ([afc83ee](https://github.com/react-navigation/react-navigation/commit/afc83eedf8c308c958a08900e069948e3d8a6aa1))
+* more improvements to types ([d244488](https://github.com/react-navigation/react-navigation/commit/d2444887be227bbbdcfcb13a7f26a8ebb344043e))


 ### Features

-* add ref to get current options in `ServerContainer` ([#8333](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8333)) ([0b1a718](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/0b1a718756e208d84b20e45ca56004332308ad54))
+* add devtools package ([#8436](https://github.com/react-navigation/react-navigation/issues/8436)) ([95b044e](https://github.com/react-navigation/react-navigation/commit/95b044ecf95939f40ced4da740a365140b3952b7))
+* add event for options on container ([#8334](https://github.com/react-navigation/react-navigation/issues/8334)) ([fe3f98e](https://github.com/react-navigation/react-navigation/commit/fe3f98eb9cdd986c32460b78520b4d3d2435c279))
+* add helper to get focused route name from nested state ([#8435](https://github.com/react-navigation/react-navigation/issues/8435)) ([f51f9c8](https://github.com/react-navigation/react-navigation/commit/f51f9c8493e079f73688adaf9dc43a2171c3e44a))
+* rework linking configuration to be more strict ([#8502](https://github.com/react-navigation/react-navigation/issues/8502)) ([a021cfb](https://github.com/react-navigation/react-navigation/commit/a021cfb8af4afd50f785f6ee9b51d361e25704ca))





-## [5.8.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.8.1...@react-navigation/core@5.8.2) (2020-05-23)
+# [5.10.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.9.0...@react-navigation/core@5.10.0) (2020-06-06)
+
+
+### Bug Fixes
+
+* catch missing params when they are required in navigate ([#8389](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8389)) ([8774ca9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/8774ca97e1da91e97677ecd816c85f66af296b93))
+* make sure the wildcard pattern catches nested unmatched routes ([c3bd349](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c3bd349d77688011c9c55027edd66c6f39de2ade))
+* only use the query params for focused route in path ([2d66ef9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2d66ef93ec9923a452415c482c40e7c6b769917c))
+* prevent state change being emitted unnecessarily ([ab1f79c](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ab1f79c096e94475a4da1acf1c850d04fb1bc4cf))
+
+
+### Features
+
+* add wildcard patterns for paths ([4fe72e3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/4fe72e3ce7bae9120d04e490401f3bad58ebdf5c)), closes [#8019](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8019)
+
+
+
+
+
+# [5.9.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.8.2...@react-navigation/core@5.9.0) (2020-05-27)
+
+
+### Features
+
+* add ref to get current options in `ServerContainer` ([#8333](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8333)) ([0b1a718](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0b1a718756e208d84b20e45ca56004332308ad54))
+
+
+
+
+
+## [5.8.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.8.1...@react-navigation/core@5.8.2) (2020-05-23)

 **Note:** Version bump only for package @react-navigation/core

@@ -41,7 +94,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [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)
+## [5.8.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.8.0...@react-navigation/core@5.8.1) (2020-05-20)

 **Note:** Version bump only for package @react-navigation/core

@@ -49,189 +102,189 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [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)
+# [5.8.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.7.0...@react-navigation/core@5.8.0) (2020-05-20)


 ### Features

-* add 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))
+* add getCurrentOptions ([#8277](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8277)) ([d024ec6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/d024ec6d74dffe481ce6fde732c729e20c1668f4))
+* add getCurrentRoute ([#8254](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8254)) ([7b25c8e](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/7b25c8eb2e6f96128fd86b92615346ce55bedeca))





-# [5.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)
+# [5.7.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.6.1...@react-navigation/core@5.7.0) (2020-05-16)


 ### Bug Fixes

-* don't use Object.fromEntries ([51f4d11](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/51f4d11fdf4bd2bb06f8cd4094f051816590e62c))
+* don't use Object.fromEntries ([51f4d11](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/51f4d11fdf4bd2bb06f8cd4094f051816590e62c))


 ### Features

-* add a PathConfig type ([60cb3c9](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/60cb3c9ba76d7ef166c9fe8b55f23728975b5b6e))
+* add a PathConfig type ([60cb3c9](https://github.com/react-navigation/react-navigation/tree/main/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)
+## [5.6.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.6.0...@react-navigation/core@5.6.1) (2020-05-14)


 ### Bug Fixes

-* 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))
+* don't use flat since it's not supported in node ([21b397f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/21b397f0d6b96ec4875d3172f47533130bb08009))





-# [5.6.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.5.2...@react-navigation/core@5.6.0) (2020-05-14)
+# [5.6.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.5.2...@react-navigation/core@5.6.0) (2020-05-14)


 ### Bug Fixes

-* ignore extra slashes in the pattern ([3c47716](https://github.com/react-navigation/react-navigation/tree/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)
+* ignore extra slashes in the pattern ([3c47716](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3c47716826d0dfa69dfa6112141c116723372ea1))
+* ignore state updates when we're not mounted ([0149e85](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0149e85a95b90c6a9d487fa753ddbf5d01c03e3d)), closes [#8226](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8226)


 ### Features

-* 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))
+* merge path patterns for nested screens ([#8253](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8253)) ([acc9646](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/acc9646426fee53558d686dfbe5fd0e35361d8c0))





-## [5.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)
+## [5.5.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.5.1...@react-navigation/core@5.5.2) (2020-05-08)


 ### Bug Fixes

-* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))
+* fix building typescript definitions. closes [#8216](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8216) ([47a1229](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/47a12298378747edd2d22e54dc1c8677f98c49b4))





-## [5.5.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.5.0...@react-navigation/core@5.5.1) (2020-05-08)
+## [5.5.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.5.0...@react-navigation/core@5.5.1) (2020-05-08)


 ### Bug Fixes

-* avoid cleaning up state when a new navigator is mounted. fixes [#8195](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/8195) ([f6d0676](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f6d06768d3c36d1f5beaffcb660f3c259209f2e7))
+* avoid cleaning up state when a new navigator is mounted. fixes [#8195](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8195) ([f6d0676](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/f6d06768d3c36d1f5beaffcb660f3c259209f2e7))





-# [5.5.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.4.0...@react-navigation/core@5.5.0) (2020-05-05)
+# [5.5.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.4.0...@react-navigation/core@5.5.0) (2020-05-05)


 ### Features

-* add support for optional params to linking ([#8196](https://github.com/react-navigation/react-navigation/tree/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))
+* add support for optional params to linking ([#8196](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8196)) ([fcd1cc6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/fcd1cc64c151e4941f3f544a54b5048d853821f6))
+* support params anywhere in path segement ([#8184](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/8184)) ([3999fc2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3999fc28365c3a06a17d963c7be7fb7e897f99e0))





-# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.5...@react-navigation/core@5.4.0) (2020-04-30)
+# [5.4.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.5...@react-navigation/core@5.4.0) (2020-04-30)


 ### Bug Fixes

-* handle empty paths when parsing ([c3fa83e](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c3fa83efe0d73db76365f8be3d6a8ca1d1289b71))
-* parsing url ([bd35b4f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/bd35b4fc202c3868fb75c3675b62de67557089e1))
+* handle empty paths when parsing ([c3fa83e](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c3fa83efe0d73db76365f8be3d6a8ca1d1289b71))
+* parsing url ([bd35b4f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/bd35b4fc202c3868fb75c3675b62de67557089e1))


 ### Features

-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
+* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))





-## [5.3.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.4...@react-navigation/core@5.3.5) (2020-04-27)
+## [5.3.5](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.4...@react-navigation/core@5.3.5) (2020-04-27)


 ### Bug Fixes

-* add config to enable redux devtools integration ([c9c825b](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c9c825bee61426635a28ee149eeeff3d628171cd))
+* add config to enable redux devtools integration ([c9c825b](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c9c825bee61426635a28ee149eeeff3d628171cd))





-## [5.3.4](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.3...@react-navigation/core@5.3.4) (2020-04-17)
+## [5.3.4](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.3...@react-navigation/core@5.3.4) (2020-04-17)


 ### Bug Fixes

-* add initial option for navigating to nested navigators ([004c7d7](https://github.com/react-navigation/react-navigation/tree/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))
+* add initial option for navigating to nested navigators ([004c7d7](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/004c7d7ab1f80faf04b2a1836ec6b79a5419e45f))
+* add initial param for actions from deep link ([a3f7a5f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/a3f7a5feba2e6aa2158aeaea6cde73ae1603173e))
+* handle initial: false for nested route after first initialization ([187aefe](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/187aefe9c400b499f920c212bf856414e25c5aaf))





-## [5.3.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.2...@react-navigation/core@5.3.3) (2020-04-08)
+## [5.3.3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.2...@react-navigation/core@5.3.3) (2020-04-08)


 ### Bug Fixes

-* switch order of focus and blur events. closes [#7963](https://github.com/react-navigation/react-navigation/tree/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))
+* switch order of focus and blur events. closes [#7963](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/7963) ([ce3994c](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ce3994c82c28669d5742017eb7627e9adf996933))
+* workaround warning about setState in another component in render ([d4fd906](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/d4fd906915cc20d6fb21508384c05a540d8644d8))





-## [5.3.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.1...@react-navigation/core@5.3.2) (2020-03-30)
+## [5.3.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.1...@react-navigation/core@5.3.2) (2020-03-30)


 ### Bug Fixes

-* handle no path property and undefined query params ([#7911](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7911)) ([cd47915](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/cd47915861a56cd7eaa9ac79f5139cde56ca95a7))
+* handle no path property and undefined query params ([#7911](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/7911)) ([cd47915](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/cd47915861a56cd7eaa9ac79f5139cde56ca95a7))





-## [5.3.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.0...@react-navigation/core@5.3.1) (2020-03-23)
+## [5.3.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.3.0...@react-navigation/core@5.3.1) (2020-03-23)


 ### Bug Fixes

-* don't emit events for screens that don't exist anymore ([1c00142](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/1c001424b595b40f9db9343096c833f75353b099))
-* only call listeners for focused screen for global events ([3096de6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/3096de62868a7ed9ed65e529c8ddfa001b9be486))
+* don't emit events for screens that don't exist anymore ([1c00142](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/1c001424b595b40f9db9343096c833f75353b099))
+* only call listeners for focused screen for global events ([3096de6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3096de62868a7ed9ed65e529c8ddfa001b9be486))





-# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.3...@react-navigation/core@5.3.0) (2020-03-22)
+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.3...@react-navigation/core@5.3.0) (2020-03-22)


 ### Bug Fixes

-* return correct value for isFocused after changing screens ([5b15c71](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/5b15c7164f5503f2f0d51006a3f23bd0c58fd9b7)), closes [#7843](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/7843)
+* return correct value for isFocused after changing screens ([5b15c71](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5b15c7164f5503f2f0d51006a3f23bd0c58fd9b7)), closes [#7843](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/7843)


 ### Features

-* support function in listeners prop ([3709e65](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/3709e652f41a16c2c2b05d5dbbe1da2017ba2c3f))
+* support function in listeners prop ([3709e65](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3709e652f41a16c2c2b05d5dbbe1da2017ba2c3f))





-## [5.2.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.2...@react-navigation/core@5.2.3) (2020-03-19)
+## [5.2.3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.2...@react-navigation/core@5.2.3) (2020-03-19)

 **Note:** Version bump only for package @react-navigation/core

@@ -239,7 +292,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.1...@react-navigation/core@5.2.2) (2020-03-16)
+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.1...@react-navigation/core@5.2.2) (2020-03-16)

 **Note:** Version bump only for package @react-navigation/core

@@ -247,133 +300,133 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.0...@react-navigation/core@5.2.1) (2020-03-03)
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.2.0...@react-navigation/core@5.2.1) (2020-03-03)


 ### Bug Fixes

-* fix links for documentation ([5bb0f40](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/5bb0f405ceb5755d39a0b5b1f2e4ecee0da051bc))
-* move updating state to useEffect ([2dfa4f3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2dfa4f36293a2acb718814f6b2fa79d7c7ddf09c))
+* fix links for documentation ([5bb0f40](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5bb0f405ceb5755d39a0b5b1f2e4ecee0da051bc))
+* move updating state to useEffect ([2dfa4f3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2dfa4f36293a2acb718814f6b2fa79d7c7ddf09c))





-# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.6...@react-navigation/core@5.2.0) (2020-02-26)
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.6...@react-navigation/core@5.2.0) (2020-02-26)


 ### Features

-* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6756)
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6756)





-## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.5...@react-navigation/core@5.1.6) (2020-02-21)
+## [5.1.6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.5...@react-navigation/core@5.1.6) (2020-02-21)


 ### Bug Fixes

-* avoid emitting focus events twice ([f167008](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f16700812f3757713b04ca3a860209795b4a6c44)), closes [#6749](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6749)
-* preserve screen order with numeric names ([125bd70](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/125bd70e49b708d936a2eee72ba5cb92eacf26a9)), closes [#6900](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6900)
+* avoid emitting focus events twice ([f167008](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/f16700812f3757713b04ca3a860209795b4a6c44)), closes [#6749](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6749)
+* preserve screen order with numeric names ([125bd70](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/125bd70e49b708d936a2eee72ba5cb92eacf26a9)), closes [#6900](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6900)





-## [5.1.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.4...@react-navigation/core@5.1.5) (2020-02-19)
+## [5.1.5](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.4...@react-navigation/core@5.1.5) (2020-02-19)


 ### Bug Fixes

-* show descriptive error for invalid return for useFocusEffect ([1a28c29](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/1a28c299b5e3f0805eb6e9ea3cf5e9cc90c7a280))
+* show descriptive error for invalid return for useFocusEffect ([1a28c29](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/1a28c299b5e3f0805eb6e9ea3cf5e9cc90c7a280))





-## [5.1.4](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.3...@react-navigation/core@5.1.4) (2020-02-14)
+## [5.1.4](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.3...@react-navigation/core@5.1.4) (2020-02-14)


 ### Bug Fixes

-* link to migration guide on invalid usage ([c5fcfbd](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c5fcfbd4277541e131acbaa7602a5d7e636afebb))
-* return '/' for empty paths ([aaf01e0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/aaf01e01e7b47b375f68aebe6d0effe82878d060))
+* link to migration guide on invalid usage ([c5fcfbd](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c5fcfbd4277541e131acbaa7602a5d7e636afebb))
+* return '/' for empty paths ([aaf01e0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/aaf01e01e7b47b375f68aebe6d0effe82878d060))





-## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.2...@react-navigation/core@5.1.3) (2020-02-14)
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.2...@react-navigation/core@5.1.3) (2020-02-14)


 ### Bug Fixes

-* return false for canGoBack if navigator hasn't finished mounting ([c8ac5fa](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c8ac5fab61cf127985431075a3c59c1f3dfa42da))
-* throw a descriptive error if navigation object hasn't initialized ([b6accd0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/b6accd03f69dd438e595094d8bf8599cc12e71ac))
-* update links in error messages ([f964200](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f964200b0dcbc19d5f88ad2dd1eb8e5576973497))
+* return false for canGoBack if navigator hasn't finished mounting ([c8ac5fa](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/c8ac5fab61cf127985431075a3c59c1f3dfa42da))
+* throw a descriptive error if navigation object hasn't initialized ([b6accd0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/b6accd03f69dd438e595094d8bf8599cc12e71ac))
+* update links in error messages ([f964200](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/f964200b0dcbc19d5f88ad2dd1eb8e5576973497))





-## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.1...@react-navigation/core@5.1.2) (2020-02-12)
+## [5.1.2](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.1...@react-navigation/core@5.1.2) (2020-02-12)


 ### Bug Fixes

-* fix false positives for circular object check ([030c63c](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/030c63c89fe447aa484b767831c8f8e26e90431c)), closes [#6827](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6827)
-* static container memo check ([#6825](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6825)) ([2bf0958](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2bf09585021470f500d967e9242836840efe970f))
+* fix false positives for circular object check ([030c63c](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/030c63c89fe447aa484b767831c8f8e26e90431c)), closes [#6827](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6827)
+* static container memo check ([#6825](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/6825)) ([2bf0958](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2bf09585021470f500d967e9242836840efe970f))





-## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.0...@react-navigation/core@5.1.1) (2020-02-11)
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.1.0...@react-navigation/core@5.1.1) (2020-02-11)


 ### Bug Fixes

-* don't cleanup state on switching navigator ([359ae1b](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/359ae1bfacec5ef880b3944f465c881aedb16767))
+* don't cleanup state on switching navigator ([359ae1b](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/359ae1bfacec5ef880b3944f465c881aedb16767))





-# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.43...@react-navigation/core@5.1.0) (2020-02-10)
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.43...@react-navigation/core@5.1.0) (2020-02-10)


 ### Bug Fixes

-* add some links in the error messages ([13b4e07](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/13b4e07348496f7cb516d625b44a6a7d310ef9af))
+* add some links in the error messages ([13b4e07](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/13b4e07348496f7cb516d625b44a6a7d310ef9af))


 ### Features

-* support ignoring empty path strings ([#349](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/349)) ([61b1134](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/61b1134f90310390fe819622c1f33273fca0bd42))
+* support ignoring empty path strings ([#349](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/349)) ([61b1134](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/61b1134f90310390fe819622c1f33273fca0bd42))





-# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.42...@react-navigation/core@5.0.0-alpha.43) (2020-02-04)
+# [5.0.0-alpha.43](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.42...@react-navigation/core@5.0.0-alpha.43) (2020-02-04)


 ### Bug Fixes

-* improve error message for unhandled action ([ca4a360](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ca4a36070a21c4fe86cb1cc55a4452dca293f215))
+* improve error message for unhandled action ([ca4a360](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ca4a36070a21c4fe86cb1cc55a4452dca293f215))


 ### Features

-* add initialRouteName property to config ([#322](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/322)) ([4ca5cc6](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/4ca5cc632992187f12870281e4cf4c7d1f799967))
+* add initialRouteName property to config ([#322](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/322)) ([4ca5cc6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/4ca5cc632992187f12870281e4cf4c7d1f799967))





-# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.41...@react-navigation/core@5.0.0-alpha.42) (2020-02-04)
+# [5.0.0-alpha.42](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.41...@react-navigation/core@5.0.0-alpha.42) (2020-02-04)

 **Note:** Version bump only for package @react-navigation/core

@@ -381,115 +434,115 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.41](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.40...@react-navigation/core@5.0.0-alpha.41) (2020-02-03)
+# [5.0.0-alpha.41](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.40...@react-navigation/core@5.0.0-alpha.41) (2020-02-03)


 ### Bug Fixes

-* ignore circular references when checking serializable ([e5063b9](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/e5063b93398350511f3fd2ef48425559f871781f))
+* ignore circular references when checking serializable ([e5063b9](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/e5063b93398350511f3fd2ef48425559f871781f))





-# [5.0.0-alpha.40](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.40) (2020-02-02)
+# [5.0.0-alpha.40](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.40) (2020-02-02)


 ### Bug Fixes

-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
-* tweak error messages for validation ([2243b45](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
+* tweak error messages for validation ([2243b45](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))


 ### Features

-* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
-* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
-* integrate with history API on web ([5a3f835](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
+* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
+* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
+* integrate with history API on web ([5a3f835](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))





-# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.38) (2020-02-02)
+# [5.0.0-alpha.38](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.37...@react-navigation/core@5.0.0-alpha.38) (2020-02-02)


 ### Bug Fixes

-* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
-* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
-* tweak error messages for validation ([2243b45](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))
+* add licenses ([0c159db](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* add warning when passing inline function to component prop ([fa4a959](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/fa4a959549ccd9dc2f9bd2ea495e99abdedc9f94))
+* tweak error messages for validation ([2243b45](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2243b45cc1addf83727166d82736d214f181b1fb))


 ### Features

-* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
-* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
-* integrate with history API on web ([5a3f835](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))
+* add `screens` prop for nested configs ([#308](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/308)) ([b931ae6](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/b931ae62dfb2c5253c94ea5ace73e9070ec17c4a))
+* add useIsDrawerOpen hook ([#299](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/299)) ([ecd68af](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ecd68afb46a4c56200748da5e5fb284fa5a839db))
+* integrate with history API on web ([5a3f835](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5a3f8356b05bff7ed20893a5db6804612da3e568))





-# [5.0.0-alpha.37](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.36...@react-navigation/core@5.0.0-alpha.37) (2020-01-24)
+# [5.0.0-alpha.37](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.36...@react-navigation/core@5.0.0-alpha.37) (2020-01-24)


 ### Bug Fixes

-* add error message when trying to use v4 API with v5 ([179e807](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/179e807a64a7d031d671c2c4b12edaee3c3440c5))
-* validate screen configs ([2f1f0af](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/2f1f0af862ef8625da4c2aaf463d45fe17a4ac88))
-* warn if non-serializable values found in state ([5751e7f](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/5751e7f97a1731a5c71862174dfd931b6ffe13e2))
+* add error message when trying to use v4 API with v5 ([179e807](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/179e807a64a7d031d671c2c4b12edaee3c3440c5))
+* validate screen configs ([2f1f0af](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/2f1f0af862ef8625da4c2aaf463d45fe17a4ac88))
+* warn if non-serializable values found in state ([5751e7f](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/5751e7f97a1731a5c71862174dfd931b6ffe13e2))





-# [5.0.0-alpha.36](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.35...@react-navigation/core@5.0.0-alpha.36) (2020-01-23)
+# [5.0.0-alpha.36](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.35...@react-navigation/core@5.0.0-alpha.36) (2020-01-23)


 ### Bug Fixes

-* disallow canPreventDefault option if not present in types ([d9059b5](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/d9059b56d8a89b39fec43d38a7b0514d41c0b550))
-* don't add ?if query params is empty ([3bf5ddd](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/3bf5ddde2ac1ba45f1123752d37532175f18a3d9))
-* fix types for useFocusEffect ([23ab45a](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/23ab45aceb72cc27ebfacdedfbf60d0c540fecfb)), closes [#270](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/270)
-* make sure that we return correct value if selector changes ([6c2acbb](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/6c2acbb304a9f11789b45a410b6c41911eca3947)), closes [/github.com/react-navigation/navigation-ex/pull/273#issuecomment-576581225](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/issuecomment-576581225)
-* use protected for private value store ([ad4eaff](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/ad4eaff1e99e4f9fca3a193764fd0f26efa41341))
+* disallow canPreventDefault option if not present in types ([d9059b5](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/d9059b56d8a89b39fec43d38a7b0514d41c0b550))
+* don't add ?if query params is empty ([3bf5ddd](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/3bf5ddde2ac1ba45f1123752d37532175f18a3d9))
+* fix types for useFocusEffect ([23ab45a](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/23ab45aceb72cc27ebfacdedfbf60d0c540fecfb)), closes [#270](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/270)
+* make sure that we return correct value if selector changes ([6c2acbb](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/6c2acbb304a9f11789b45a410b6c41911eca3947)), closes [/github.com/react-navigation/navigation-ex/pull/273#issuecomment-576581225](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/issuecomment-576581225)
+* use protected for private value store ([ad4eaff](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/ad4eaff1e99e4f9fca3a193764fd0f26efa41341))


 ### Features

-* add useNavigationState hook ([32a2206](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/32a2206513bc084d8da07187385d11db498f1e2a))
-* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/da67e134d2157201360427d3c10da24f24cae7aa))
-* support nested config in getPathFromState ([#266](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/266)) ([1e53821](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/1e53821d52be182369add07a86c72221c5dba53e))
+* add useNavigationState hook ([32a2206](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/32a2206513bc084d8da07187385d11db498f1e2a))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+* support nested config in getPathFromState ([#266](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/266)) ([1e53821](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/1e53821d52be182369add07a86c72221c5dba53e))





-# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.34...@react-navigation/core@5.0.0-alpha.35) (2020-01-14)
+# [5.0.0-alpha.35](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.34...@react-navigation/core@5.0.0-alpha.35) (2020-01-14)


 ### Bug Fixes

-* fix intellisense for CompositeNavigationProp ([a912323](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/a912323c1dfa0c3564ca82c448a86f85d1658f7f))
+* fix intellisense for CompositeNavigationProp ([a912323](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/a912323c1dfa0c3564ca82c448a86f85d1658f7f))





-# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.33...@react-navigation/core@5.0.0-alpha.34) (2020-01-13)
+# [5.0.0-alpha.34](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.33...@react-navigation/core@5.0.0-alpha.34) (2020-01-13)


 ### Bug Fixes

-* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/issues/265)
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/react-navigation/tree/main/packages/core/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/react-navigation/tree/main/packages/core/issues/265)





-# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.32...@react-navigation/core@5.0.0-alpha.33) (2020-01-13)
+# [5.0.0-alpha.33](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.32...@react-navigation/core@5.0.0-alpha.33) (2020-01-13)

 **Note:** Version bump only for package @react-navigation/core

@@ -497,7 +550,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.32) (2020-01-09)
+# [5.0.0-alpha.32](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.32) (2020-01-09)

 **Note:** Version bump only for package @react-navigation/core

@@ -505,7 +558,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline



-# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/tree/master/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.31) (2020-01-09)
+# [5.0.0-alpha.31](https://github.com/react-navigation/react-navigation/tree/main/packages/core/compare/@react-navigation/core@5.0.0-alpha.30...@react-navigation/core@5.0.0-alpha.31) (2020-01-09)

 **Note:** Version bump only for package @react-navigation/core

--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,14 +1,18 @@
 {
  "name": "@react-navigation/core",
  "description": "Core utilities for building navigators",
-  "version": "5.10.0",
+  "version": "5.12.0",
  "keywords": [
    "react",
    "react-native",
    "react-navigation"
  ],
  "license": "MIT",
-  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/core",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/core"
+  },
  "bugs": {
    "url": "https://github.com/react-navigation/react-navigation/issues"
  },
@@ -31,23 +35,23 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.4.7",
+    "@react-navigation/routers": "^5.4.9",
    "escape-string-regexp": "^4.0.0",
-    "nanoid": "^3.1.5",
-    "query-string": "^6.12.1",
+    "nanoid": "^3.1.9",
+    "query-string": "^6.13.1",
    "react-is": "^16.13.0",
    "use-subscription": "^1.4.0"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.14.3",
-    "@types/react": "^16.9.34",
+    "@react-native-community/bob": "^0.15.1",
+    "@types/react": "^16.9.36",
    "@types/react-is": "^16.7.1",
    "@types/use-subscription": "^1.0.0",
-    "del-cli": "^3.0.0",
+    "del-cli": "^3.0.1",
    "react": "~16.9.0",
-    "react-native-testing-library": "^1.13.2",
+    "react-native-testing-library": "^2.1.0",
    "react-test-renderer": "~16.13.1",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.5"
  },
  "peerDependencies": {
    "react": "*"
--- a/packages/core/src/BaseNavigationContainer.tsx
+++ b/packages/core/src/BaseNavigationContainer.tsx
@@ -9,27 +9,46 @@ import {
 } from '@react-navigation/routers';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
 import NavigationBuilderContext from './NavigationBuilderContext';
+import NavigationStateContext from './NavigationStateContext';
+import UnhandledActionContext from './UnhandledActionContext';
 import { ScheduleUpdateContext } from './useScheduleUpdate';
-import useFocusedListeners from './useFocusedListeners';
-import useDevTools from './useDevTools';
-import useStateGetters from './useStateGetters';
+import useChildListeners from './useChildListeners';
+import useKeyedChildListeners from './useKeyedChildListeners';
 import useOptionsGetters from './useOptionsGetters';
 import useEventEmitter from './useEventEmitter';
 import useSyncState from './useSyncState';
-import isSerializable from './isSerializable';
-
-import { NavigationContainerRef, NavigationContainerProps } from './types';
-import NavigationStateContext from './NavigationStateContext';
+import checkSerializable from './checkSerializable';
+import type {
+  NavigationContainerEventMap,
+  NavigationContainerRef,
+  NavigationContainerProps,
+} from './types';

 type State = NavigationState | PartialState<NavigationState> | undefined;

-const DEVTOOLS_CONFIG_KEY =
-  'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED';
-
 const NOT_INITIALIZED_ERROR =
  "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";

-let hasWarnedForSerialization = false;
+const serializableWarnings: string[] = [];
+
+try {
+  /**
+   * Migration instructions for removal of devtools from core
+   */
+  Object.defineProperty(
+    global,
+    'REACT_NAVIGATION_REDUX_DEVTOOLS_EXTENSION_INTEGRATION_ENABLED',
+    {
+      set(_) {
+        console.warn(
+          "Redux devtools extension integration can be enabled with the '@react-navigation/devtools' package. For more details, see https://reactnavigation.org/docs/devtools"
+        );
+      },
+    }
+  );
+} catch (e) {
+  // Ignore
+}

 /**
 * Remove `key` and `routeNames` from the state objects recursively to get partial state.
@@ -46,7 +65,6 @@ const getPartialState = (
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { key, routeNames, ...partialState } = state;

-  // @ts-ignore
  return {
    ...partialState,
    stale: true,
@@ -100,7 +118,6 @@ const BaseNavigationContainer = React.forwardRef(
    );

    const isFirstMountRef = React.useRef<boolean>(true);
-    const skipTrackingRef = React.useRef<boolean>(false);

    const navigatorKeyRef = React.useRef<string | undefined>();

@@ -110,46 +127,26 @@ const BaseNavigationContainer = React.forwardRef(
      navigatorKeyRef.current = key;
    }, []);

-    const reset = React.useCallback(
-      (state: NavigationState) => {
-        skipTrackingRef.current = true;
-        setState(state);
-      },
-      [setState]
-    );
+    const { listeners, addListener } = useChildListeners();

-    const { trackState, trackAction } = useDevTools({
-      enabled:
-        // @ts-ignore
-        DEVTOOLS_CONFIG_KEY in global ? global[DEVTOOLS_CONFIG_KEY] : false,
-      name: '@react-navigation',
-      reset,
-      state,
-    });
-
-    const {
-      listeners,
-      addListener: addFocusedListener,
-    } = useFocusedListeners();
-
-    const { getStateForRoute, addStateGetter } = useStateGetters();
+    const { keyedListeners, addKeyedListener } = useKeyedChildListeners();

    const dispatch = (
      action: NavigationAction | ((state: NavigationState) => NavigationAction)
    ) => {
-      if (listeners[0] == null) {
+      if (listeners.focus[0] == null) {
        throw new Error(NOT_INITIALIZED_ERROR);
      }

-      listeners[0]((navigation) => navigation.dispatch(action));
+      listeners.focus[0]((navigation) => navigation.dispatch(action));
    };

    const canGoBack = () => {
-      if (listeners[0] == null) {
+      if (listeners.focus[0] == null) {
        return false;
      }

-      const { result, handled } = listeners[0]((navigation) =>
+      const { result, handled } = listeners.focus[0]((navigation) =>
        navigation.canGoBack()
      );

@@ -162,15 +159,14 @@ const BaseNavigationContainer = React.forwardRef(

    const resetRoot = React.useCallback(
      (state?: PartialState<NavigationState> | NavigationState) => {
-        trackAction('@@RESET_ROOT');
        setState(state);
      },
-      [setState, trackAction]
+      [setState]
    );

    const getRootState = React.useCallback(() => {
-      return getStateForRoute('root');
-    }, [getStateForRoute]);
+      return keyedListeners.getState.root?.();
+    }, [keyedListeners.getState]);

    const getCurrentRoute = React.useCallback(() => {
      let state = getRootState();
@@ -183,7 +179,7 @@ const BaseNavigationContainer = React.forwardRef(
      return state.routes[state.index];
    }, [getRootState]);

-    const emitter = useEventEmitter();
+    const emitter = useEventEmitter<NavigationContainerEventMap>();

    const { addOptionsGetter, getCurrentOptions } = useOptionsGetters({});

@@ -194,7 +190,7 @@ const BaseNavigationContainer = React.forwardRef(
        acc[name] = (...args: any[]) =>
          dispatch(
            CommonActions[name](
-              // @ts-ignore
+              // @ts-expect-error: we can't know the type statically
              ...args
            )
          );
@@ -211,13 +207,39 @@ const BaseNavigationContainer = React.forwardRef(
      getCurrentOptions,
    }));

+    const onDispatchAction = React.useCallback(
+      (action: NavigationAction, noop: boolean) => {
+        emitter.emit({ type: '__unsafe_action__', data: { action, noop } });
+      },
+      [emitter]
+    );
+
+    const lastEmittedOptionsRef = React.useRef<object | undefined>();
+
+    const onOptionsChange = React.useCallback(
+      (options) => {
+        if (lastEmittedOptionsRef.current === options) {
+          return;
+        }
+
+        lastEmittedOptionsRef.current = options;
+
+        emitter.emit({
+          type: 'options',
+          data: { options },
+        });
+      },
+      [emitter]
+    );
+
    const builderContext = React.useMemo(
      () => ({
-        addFocusedListener,
-        addStateGetter,
-        trackAction,
+        addListener,
+        addKeyedListener,
+        onDispatchAction,
+        onOptionsChange,
      }),
-      [addFocusedListener, trackAction, addStateGetter]
+      [addListener, addKeyedListener, onDispatchAction, onOptionsChange]
    );

    const scheduleContext = React.useMemo(
@@ -245,42 +267,114 @@ const BaseNavigationContainer = React.forwardRef(

    React.useEffect(() => {
      if (process.env.NODE_ENV !== 'production') {
-        if (
-          state !== undefined &&
-          !isSerializable(state) &&
-          !hasWarnedForSerialization
-        ) {
-          hasWarnedForSerialization = true;
+        if (state !== undefined) {
+          const result = checkSerializable(state);

-          console.warn(
-            "Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details."
-          );
+          if (!result.serializable) {
+            const { location, reason } = result;
+
+            let path = '';
+            let pointer: Record<any, any> = state;
+            let params = false;
+
+            for (let i = 0; i < location.length; i++) {
+              const curr = location[i];
+              const prev = location[i - 1];
+
+              pointer = pointer[curr];
+
+              if (!params && curr === 'state') {
+                continue;
+              } else if (!params && curr === 'routes') {
+                if (path) {
+                  path += ' > ';
+                }
+              } else if (
+                !params &&
+                typeof curr === 'number' &&
+                prev === 'routes'
+              ) {
+                path += pointer?.name;
+              } else if (!params) {
+                path += ` > ${curr}`;
+                params = true;
+              } else {
+                if (typeof curr === 'number' || /^[0-9]+$/.test(curr)) {
+                  path += `[${curr}]`;
+                } else if (/^[a-z$_]+$/i.test(curr)) {
+                  path += `.${curr}`;
+                } else {
+                  path += `[${JSON.stringify(curr)}]`;
+                }
+              }
+            }
+
+            const message = `Non-serializable values were found in the navigation state. Check:\n\n${path} (${reason})\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`;
+
+            if (!serializableWarnings.includes(message)) {
+              serializableWarnings.push(message);
+              console.warn(message);
+            }
+          }
        }
      }

-      emitter.emit({
-        type: 'state',
-        data: { state },
-      });
-
-      if (skipTrackingRef.current) {
-        skipTrackingRef.current = false;
-      } else {
-        trackState(getRootState);
-      }
+      emitter.emit({ type: 'state', data: { state } });

      if (!isFirstMountRef.current && onStateChangeRef.current) {
        onStateChangeRef.current(getRootState());
      }

      isFirstMountRef.current = false;
-    }, [trackState, getRootState, emitter, state]);
+    }, [getRootState, emitter, state]);
+
+    const onUnhandledAction = React.useCallback((action: NavigationAction) => {
+      if (process.env.NODE_ENV === 'production') {
+        return;
+      }
+
+      const payload: Record<string, any> | undefined = action.payload;
+
+      let message = `The action '${action.type}'${
+        payload ? ` with payload ${JSON.stringify(action.payload)}` : ''
+      } was not handled by any navigator.`;
+
+      switch (action.type) {
+        case 'NAVIGATE':
+        case 'PUSH':
+        case 'REPLACE':
+        case 'JUMP_TO':
+          if (payload?.name) {
+            message += `\n\nDo you have a screen named '${payload.name}'?\n\nIf you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.`;
+          } else {
+            message += `\n\nYou need to pass the name of the screen to navigate to.\n\nSee https://reactnavigation.org/docs/navigation-actions for usage.`;
+          }
+
+          break;
+        case 'GO_BACK':
+        case 'POP':
+        case 'POP_TO_TOP':
+          message += `\n\nIs there any screen to go back to?`;
+          break;
+        case 'OPEN_DRAWER':
+        case 'CLOSE_DRAWER':
+        case 'TOGGLE_DRAWER':
+          message += `\n\nIs your screen inside a Drawer navigator?`;
+          break;
+      }
+
+      message += `\n\nThis is a development-only warning and won't be shown in production.`;
+
+      console.error(message);
+    }, []);

    return (
      <ScheduleUpdateContext.Provider value={scheduleContext}>
        <NavigationBuilderContext.Provider value={builderContext}>
          <NavigationStateContext.Provider value={context}>
-            <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+            <UnhandledActionContext.Provider value={onUnhandledAction}>
+              <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
+            </UnhandledActionContext.Provider>
          </NavigationStateContext.Provider>
        </NavigationBuilderContext.Provider>
      </ScheduleUpdateContext.Provider>
--- a/packages/core/src/NavigationBuilderContext.tsx
+++ b/packages/core/src/NavigationBuilderContext.tsx
@@ -1,10 +1,31 @@
 import * as React from 'react';
-import {
+import type {
  NavigationAction,
  NavigationState,
  ParamListBase,
 } from '@react-navigation/routers';
-import { NavigationHelpers } from './types';
+import type { NavigationHelpers } from './types';
+
+export type ListenerMap = {
+  action: ChildActionListener;
+  focus: FocusedNavigationListener;
+};
+
+export type KeyedListenerMap = {
+  getState: GetStateListener;
+  beforeRemove: ChildBeforeRemoveListener;
+};
+
+export type AddListener = <T extends keyof ListenerMap>(
+  type: T,
+  listener: ListenerMap[T]
+) => void;
+
+export type AddKeyedListener = <T extends keyof KeyedListenerMap>(
+  type: T,
+  key: string,
+  listener: KeyedListenerMap[T]
+) => void;

 export type ChildActionListener = (
  action: NavigationAction,
@@ -19,7 +40,9 @@ export type FocusedNavigationListener = <T>(
  callback: FocusedNavigationCallback<T>
 ) => { handled: boolean; result: T };

-export type NavigatorStateGetter = () => NavigationState;
+export type GetStateListener = () => NavigationState;
+
+export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;

 /**
 * Context which holds the required helpers needed to build nested navigators.
@@ -29,13 +52,14 @@ const NavigationBuilderContext = React.createContext<{
    action: NavigationAction,
    visitedNavigators?: Set<string>
  ) => boolean;
-  addActionListener?: (listener: ChildActionListener) => void;
-  addFocusedListener?: (listener: FocusedNavigationListener) => void;
+  addListener?: AddListener;
+  addKeyedListener?: AddKeyedListener;
  onRouteFocus?: (key: string) => void;
-  addStateGetter?: (key: string, getter: NavigatorStateGetter) => void;
-  trackAction: (action: NavigationAction) => void;
+  onDispatchAction: (action: NavigationAction, noop: boolean) => void;
+  onOptionsChange: (options: object) => void;
 }>({
-  trackAction: () => undefined,
+  onDispatchAction: () => undefined,
+  onOptionsChange: () => undefined,
 });

 export default NavigationBuilderContext;
--- a/packages/core/src/NavigationContext.tsx
+++ b/packages/core/src/NavigationContext.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/routers';
-import { NavigationProp } from './types';
+import type { ParamListBase } from '@react-navigation/routers';
+import type { NavigationProp } from './types';

 /**
 * Context which holds the navigation prop for a screen.
--- a/packages/core/src/NavigationHelpersContext.tsx
+++ b/packages/core/src/NavigationHelpersContext.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/routers';
-import { NavigationHelpers } from './types';
+import type { ParamListBase } from '@react-navigation/routers';
+import type { NavigationHelpers } from './types';

 /**
 * Context which holds the navigation helpers of the parent navigator.
--- a/packages/core/src/NavigationRouteContext.tsx
+++ b/packages/core/src/NavigationRouteContext.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Route } from '@react-navigation/routers';
+import type { Route } from '@react-navigation/routers';

 /**
 * Context which holds the route prop for a screen.
--- a/packages/core/src/NavigationStateContext.tsx
+++ b/packages/core/src/NavigationStateContext.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavigationState, PartialState } from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';

 const MISSING_CONTEXT_ERROR =
  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
--- a/packages/core/src/SceneView.tsx
+++ b/packages/core/src/SceneView.tsx
@@ -1,21 +1,19 @@
 import * as React from 'react';
-import {
+import type {
  Route,
  ParamListBase,
  NavigationState,
  PartialState,
 } from '@react-navigation/routers';
 import NavigationStateContext from './NavigationStateContext';
-import NavigationContext from './NavigationContext';
-import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
-import { NavigationProp, RouteConfig, EventMapBase } from './types';
 import useOptionsGetters from './useOptionsGetters';
+import type { NavigationProp, RouteConfig, EventMapBase } from './types';

 type Props<
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase
 > = {
  screen: RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>;
@@ -34,7 +32,7 @@ type Props<
 */
 export default function SceneView<
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase
 >({
  screen,
@@ -47,17 +45,10 @@ export default function SceneView<
  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,
+    options,
+    navigation,
  });

  const setKey = React.useCallback((key: string) => {
@@ -104,29 +95,26 @@ export default function SceneView<
    ]
  );

+  const ScreenComponent = screen.getComponent
+    ? screen.getComponent()
+    : screen.component;
+
  return (
-    <NavigationContext.Provider value={navigation}>
-      <NavigationRouteContext.Provider value={route}>
-        <NavigationStateContext.Provider value={context}>
-          <EnsureSingleNavigator>
-            <StaticContainer
-              name={screen.name}
-              // @ts-ignore
-              render={screen.component || screen.children}
-              navigation={navigation}
-              route={route}
-            >
-              {'component' in screen && screen.component !== undefined ? (
-                // @ts-ignore
-                <screen.component navigation={navigation} route={route} />
-              ) : 'children' in screen && screen.children !== undefined ? (
-                // @ts-ignore
-                screen.children({ navigation, route })
-              ) : null}
-            </StaticContainer>
-          </EnsureSingleNavigator>
-        </NavigationStateContext.Provider>
-      </NavigationRouteContext.Provider>
-    </NavigationContext.Provider>
+    <NavigationStateContext.Provider value={context}>
+      <EnsureSingleNavigator>
+        <StaticContainer
+          name={screen.name}
+          render={ScreenComponent || screen.children}
+          navigation={navigation}
+          route={route}
+        >
+          {ScreenComponent !== undefined ? (
+            <ScreenComponent navigation={navigation} route={route} />
+          ) : screen.children !== undefined ? (
+            screen.children({ navigation, route })
+          ) : null}
+        </StaticContainer>
+      </EnsureSingleNavigator>
+    </NavigationStateContext.Provider>
  );
 }
--- a/packages/core/src/Screen.tsx
+++ b/packages/core/src/Screen.tsx
@@ -1,5 +1,5 @@
-import { ParamListBase, NavigationState } from '@react-navigation/routers';
-import { RouteConfig, EventMapBase } from './types';
+import type { ParamListBase, NavigationState } from '@react-navigation/routers';
+import type { RouteConfig, EventMapBase } from './types';

 /**
 * Empty component used for specifying route configuration.
@@ -8,7 +8,7 @@ export default function Screen<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList,
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase
 >(_: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>) {
  /* istanbul ignore next */
--- a/packages/core/src/UnhandledActionContext.tsx
+++ b/packages/core/src/UnhandledActionContext.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { NavigationAction } from '@react-navigation/routers';
+
+const UnhandledActionContext = React.createContext<
+  ((action: NavigationAction) => void) | undefined
+>(undefined);
+
+export default UnhandledActionContext;
--- a/packages/core/src/tests/BaseNavigationContainer.test.tsx
+++ b/packages/core/src/tests/BaseNavigationContainer.test.tsx
@@ -4,13 +4,15 @@ import {
  DefaultRouterOptions,
  NavigationState,
  Router,
+  StackRouter,
+  TabRouter,
 } from '@react-navigation/routers';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import NavigationStateContext from '../NavigationStateContext';
 import MockRouter, { MockActions } from './__fixtures__/MockRouter';
 import useNavigationBuilder from '../useNavigationBuilder';
 import Screen from '../Screen';
-import { NavigationContainerRef } from '../types';
+import type { NavigationContainerRef } from '../types';

 it('throws when getState is accessed without a container', () => {
  expect.assertions(1);
@@ -430,6 +432,154 @@ it('emits state events when the state changes', () => {
  });
 });

+it('emits option events when options change with tab router', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(TabRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo" options={{ x: 1 }}>
+          {() => null}
+        </Screen>
+        <Screen name="bar" options={{ y: 2 }}>
+          {() => null}
+        </Screen>
+        <Screen name="baz" options={{ v: 3 }}>
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" options={{ g: 5 }}>
+                {() => null}
+              </Screen>
+              <Screen name="quxx" options={{ h: 9 }}>
+                {() => null}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const listener = jest.fn();
+
+  render(element).update(element);
+  ref.current?.addListener('options', listener);
+
+  act(() => {
+    ref.current?.navigate('bar');
+  });
+
+  expect(listener).toBeCalledTimes(1);
+  expect(listener.mock.calls[0][0].data.options).toEqual({ y: 2 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ y: 2 });
+
+  ref.current?.removeListener('options', listener);
+
+  const listener2 = jest.fn();
+
+  ref.current?.addListener('options', listener2);
+
+  act(() => {
+    ref.current?.navigate('baz');
+  });
+
+  expect(listener2).toBeCalledTimes(1);
+  expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ g: 5 });
+
+  act(() => {
+    ref.current?.navigate('quxx');
+  });
+
+  expect(listener2).toBeCalledTimes(2);
+  expect(listener2.mock.calls[1][0].data.options).toEqual({ h: 9 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ h: 9 });
+});
+
+it('emits option events when options change with stack router', () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo" options={{ x: 1 }}>
+          {() => null}
+        </Screen>
+        <Screen name="bar" options={{ y: 2 }}>
+          {() => null}
+        </Screen>
+        <Screen name="baz" options={{ v: 3 }}>
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" options={{ g: 5 }}>
+                {() => null}
+              </Screen>
+              <Screen name="quxx" options={{ h: 9 }}>
+                {() => null}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  const listener = jest.fn();
+
+  render(element).update(element);
+  ref.current?.addListener('options', listener);
+
+  act(() => {
+    ref.current?.navigate('bar');
+  });
+
+  expect(listener).toBeCalledTimes(1);
+  expect(listener.mock.calls[0][0].data.options).toEqual({ y: 2 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ y: 2 });
+
+  ref.current?.removeListener('options', listener);
+
+  const listener2 = jest.fn();
+
+  ref.current?.addListener('options', listener2);
+
+  act(() => {
+    ref.current?.navigate('baz');
+  });
+
+  expect(listener2).toBeCalledTimes(1);
+  expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ g: 5 });
+
+  act(() => {
+    ref.current?.navigate('quxx');
+  });
+
+  expect(listener2).toBeCalledTimes(2);
+  expect(listener2.mock.calls[1][0].data.options).toEqual({ h: 9 });
+  expect(ref.current?.getCurrentOptions()).toEqual({ h: 9 });
+});
+
 it('throws if there is no navigator rendered', () => {
  expect.assertions(1);

--- a/packages/core/src/tests/checkSerializable.test.tsx
+++ b/packages/core/src/tests/checkSerializable.test.tsx
@@ -1,8 +1,8 @@
-import isSerializable from '../isSerializable';
+import checkSerializable from '../checkSerializable';

 it('returns true for serializable object', () => {
  expect(
-    isSerializable({
+    checkSerializable({
      index: 0,
      key: '7',
      routeNames: ['foo', 'bar'],
@@ -22,12 +22,12 @@ it('returns true for serializable object', () => {
        },
      ],
    })
-  ).toBe(true);
+  ).toEqual({ serializable: true });
 });

 it('returns false for non-serializable object', () => {
  expect(
-    isSerializable({
+    checkSerializable({
      index: 0,
      key: '7',
      routeNames: ['foo', 'bar'],
@@ -47,23 +47,56 @@ it('returns false for non-serializable object', () => {
        },
      ],
    })
-  ).toBe(false);
+  ).toEqual({
+    serializable: false,
+    location: ['routes', 0, 'state', 'routes', 0, 'params'],
+    reason: 'Function',
+  });
+
+  expect(
+    checkSerializable({
+      index: 0,
+      key: '7',
+      routeNames: ['foo', 'bar'],
+      routes: [
+        {
+          key: 'foo',
+          name: 'foo',
+          state: {
+            index: 0,
+            key: '8',
+            routeNames: ['qux', 'lex'],
+            routes: [
+              { key: 'qux', name: 'qux', params: { foo: Symbol('test') } },
+              { key: 'lex', name: 'lex' },
+            ],
+          },
+        },
+      ],
+    })
+  ).toEqual({
+    serializable: false,
+    location: ['routes', 0, 'state', 'routes', 0, 'params', 'foo'],
+    reason: 'Symbol(test)',
+  });
 });

 it('returns false for circular references', () => {
-  const x = {
+  const x: any = {
    a: 1,
    b: { b1: 1 },
  };

-  // @ts-ignore
  x.b.b2 = x;
-  // @ts-ignore
  x.c = x.b;

-  expect(isSerializable(x)).toBe(false);
+  expect(checkSerializable(x)).toEqual({
+    serializable: false,
+    location: ['b', 'b2'],
+    reason: 'Circular reference',
+  });

-  const y = [
+  const y: any = [
    {
      label: 'home',
      children: [{ label: 'product' }],
@@ -71,29 +104,34 @@ it('returns false for circular references', () => {
    { label: 'about', extend: {} },
  ];

-  // @ts-ignore
  y[0].children[0].parent = y[0];
-  // @ts-ignore
  y[1].extend.home = y[0].children[0];

-  expect(isSerializable(y)).toBe(false);
+  expect(checkSerializable(y)).toEqual({
+    serializable: false,
+    location: [0, 'children', 0, 'parent'],
+    reason: 'Circular reference',
+  });

-  const z = {
+  const z: any = {
    name: 'sun',
    child: [{ name: 'flower' }],
  };

-  // @ts-ignore
  z.child[0].parent = z;

-  expect(isSerializable(z)).toBe(false);
+  expect(checkSerializable(z)).toEqual({
+    serializable: false,
+    location: ['child', 0, 'parent'],
+    reason: 'Circular reference',
+  });
 });

 it("doesn't fail if same object used multiple times", () => {
  const o = { foo: 'bar' };

  expect(
-    isSerializable({
+    checkSerializable({
      baz: 'bax',
      first: o,
      second: o,
@@ -101,5 +139,5 @@ it("doesn't fail if same object used multiple times", () => {
        b: o,
      },
    })
-  ).toBe(true);
+  ).toEqual({ serializable: true });
 });
--- a/packages/core/src/tests/createNavigatorFactory.test.tsx
+++ b/packages/core/src/tests/createNavigatorFactory.test.tsx
@@ -5,7 +5,7 @@ it('throws descriptive error if an argument is passed', () => {

  expect(() => createDummyNavigator()).not.toThrowError();

-  // @ts-ignore
+  // @ts-expect-error: we're explicitly passing invalid argument
  expect(() => createDummyNavigator({})).toThrowError(
    "Creating a navigator doesn't take an argument."
  );
--- a/packages/core/src/tests/getFocusedRouteNameFromRoute.test.tsx
+++ b/packages/core/src/tests/getFocusedRouteNameFromRoute.test.tsx
@@ -0,0 +1,68 @@
+import getFocusedRouteNameFromRoute from '../getFocusedRouteNameFromRoute';
+
+it('gets undefined if there is no nested state', () => {
+  expect(getFocusedRouteNameFromRoute({ name: 'Home' })).toBe(undefined);
+});
+
+it('gets focused route name from nested state', () => {
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        routes: [{ name: 'Article' }],
+      },
+    })
+  ).toBe('Article');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        index: 1,
+        routes: [{ name: 'Article' }, { name: 'Chat' }, { name: 'Album' }],
+      },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        routes: [{ name: 'Article' }, { name: 'Chat' }],
+      },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      state: {
+        type: 'tab',
+        routes: [{ name: 'Article' }, { name: 'Chat' }],
+      },
+    })
+  ).toBe('Article');
+});
+
+it('gets nested screen in params if present', () => {
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      params: { screen: 'Chat' },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      params: { screen: 'Chat', initial: false },
+    })
+  ).toBe('Chat');
+
+  expect(
+    getFocusedRouteNameFromRoute({
+      name: 'Home',
+      params: { screen: {} },
+    })
+  ).toBe(undefined);
+});
--- a/packages/core/src/tests/getPathFromState.test.tsx
+++ b/packages/core/src/tests/getPathFromState.test.tsx
--- a/packages/core/src/tests/getStateFromPath.test.tsx
+++ b/packages/core/src/tests/getStateFromPath.test.tsx
--- a/packages/core/src/tests/index.test.tsx
+++ b/packages/core/src/tests/index.test.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import { NavigationState } from '@react-navigation/routers';
+import type { NavigationState } from '@react-navigation/routers';
 import Screen from '../Screen';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigation from '../useNavigation';
 import MockRouter, { MockRouterKey } from './__fixtures__/MockRouter';
-import { NavigationContainerRef } from '../types';
+import type { NavigationContainerRef } from '../types';

 beforeEach(() => (MockRouterKey.current = 0));

@@ -75,7 +75,7 @@ it("doesn't crash when initialState is null", () => {
  const TestScreen = () => null;

  const element = (
-    // @ts-ignore
+    // @ts-expect-error: we're explicitly passing null for state
    <BaseNavigationContainer initialState={null}>
      <TestNavigator>
        <Screen name="foo" component={TestScreen} />
@@ -1403,6 +1403,7 @@ it('throws if both children and component are passed', () => {
  const element = (
    <BaseNavigationContainer>
      <TestNavigator>
+        {/* @ts-ignore */}
        <Screen name="foo" component={jest.fn()}>
          {jest.fn()}
        </Screen>
@@ -1415,6 +1416,48 @@ it('throws if both children and component are passed', () => {
  );
 });

+it('throws if both children and getComponent are passed', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Screen name="foo" getComponent={jest.fn()}>
+          {jest.fn()}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "Got both 'getComponent' and 'children' props for the screen 'foo'. You must pass only one of them."
+  );
+});
+
+it('throws if both component and getComponent are passed', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        {/* @ts-ignore */}
+        <Screen name="foo" component={jest.fn()} getComponent={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "Got both 'component' and 'getComponent' props for the screen 'foo'. You must pass only one of them."
+  );
+});
+
 it('throws descriptive error for undefined screen component', () => {
  const TestNavigator = (props: any) => {
    useNavigationBuilder(MockRouter, props);
@@ -1430,7 +1473,7 @@ it('throws descriptive error for undefined screen component', () => {
  );

  expect(() => render(element).update(element)).toThrowError(
-    "Couldn't find a 'component' or 'children' prop for the screen 'foo'"
+    "Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'foo'"
  );
 });

@@ -1453,6 +1496,25 @@ it('throws descriptive error for invalid screen component', () => {
  );
 });

+it('throws descriptive error for invalid getComponent prop', () => {
+  const TestNavigator = (props: any) => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator>
+        <Screen name="foo" getComponent={{} as any} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(() => render(element).update(element)).toThrowError(
+    "Got an invalid value for 'getComponent' prop for the screen 'foo'. It must be a function returning a React Component."
+  );
+});
+
 it('throws descriptive error for invalid children', () => {
  const TestNavigator = (props: any) => {
    useNavigationBuilder(MockRouter, props);
@@ -1529,7 +1591,7 @@ it('returns currently focused route with getCurrentRoute', () => {
  });
 });

-it("returns currently focused route's options with getCurrentOptions", () => {
+it("returns focused screen's options with getCurrentOptions when focused screen is rendered", () => {
  const TestNavigator = (props: any): any => {
    const { state, descriptors } = useNavigationBuilder(MockRouter, props);

@@ -1554,6 +1616,11 @@ it("returns currently focused route's options with getCurrentOptions", () => {
                component={TestScreen}
                options={{ sample: 'data' }}
              />
+              <Screen
+                name="bar-b"
+                component={TestScreen}
+                options={{ sample3: 'data' }}
+              />
            </TestNavigator>
          )}
        </Screen>
@@ -1568,6 +1635,66 @@ it("returns currently focused route's options with getCurrentOptions", () => {
    sample: 'data',
    sample2: 'data',
  });
+
+  act(() => navigation.current?.navigate('bar-b'));
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample2: 'data',
+    sample3: 'data',
+  });
+});
+
+it("returns focused screen's options with getCurrentOptions when all screens are rendered", () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return <>{state.routes.map((route) => descriptors[route.key].render())}</>;
+  };
+
+  const TestScreen = () => null;
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const container = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="bar" options={{ a: 'b' }}>
+          {() => (
+            <TestNavigator
+              initialRouteName="bar-a"
+              screenOptions={() => ({ sample2: 'data' })}
+            >
+              <Screen
+                name="bar-a"
+                component={TestScreen}
+                options={{ sample: 'data' }}
+              />
+              <Screen
+                name="bar-b"
+                component={TestScreen}
+                options={{ sample3: 'data' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="xux" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(container).update(container);
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample: 'data',
+    sample2: 'data',
+  });
+
+  act(() => navigation.current?.navigate('bar-b'));
+
+  expect(navigation.current?.getCurrentOptions()).toEqual({
+    sample2: 'data',
+    sample3: 'data',
+  });
 });

 it('does not throw if while getting current options with no options defined', () => {
@@ -1608,8 +1735,9 @@ it('does not throw if while getting current options with no options defined', ()
 it('does not throw if while getting current options with empty container', () => {
  const navigation = React.createRef<NavigationContainerRef>();

-  // @ts-ignore
-  const container = <BaseNavigationContainer ref={navigation} />;
+  const container = (
+    <BaseNavigationContainer ref={navigation} children={null} />
+  );

  render(container).update(container);

--- a/packages/core/src/tests/useDescriptors.test.tsx
+++ b/packages/core/src/tests/useDescriptors.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import {
+import type {
  DefaultRouterOptions,
  NavigationState,
  Router,
--- a/packages/core/src/tests/useEventEmitter.test.tsx
+++ b/packages/core/src/tests/useEventEmitter.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import { Router, NavigationState } from '@react-navigation/routers';
+import type { Router, NavigationState } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
--- a/packages/core/src/tests/useNavigationState.test.tsx
+++ b/packages/core/src/tests/useNavigationState.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, act } from 'react-native-testing-library';
-import { NavigationState } from '@react-navigation/routers';
+import type { NavigationState } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigationState from '../useNavigationState';
 import BaseNavigationContainer from '../BaseNavigationContainer';
--- a/packages/core/src/tests/useOnAction.test.tsx
+++ b/packages/core/src/tests/useOnAction.test.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { render } from 'react-native-testing-library';
+import { act, render } from 'react-native-testing-library';
 import {
  Router,
  DefaultRouterOptions,
  NavigationState,
+  StackRouter,
 } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import BaseNavigationContainer from '../BaseNavigationContainer';
@@ -12,8 +13,19 @@ import MockRouter, {
  MockActions,
  MockRouterKey,
 } from './__fixtures__/MockRouter';
+import type { NavigationContainerRef } from '../types';

-beforeEach(() => (MockRouterKey.current = 0));
+jest.mock('nanoid/non-secure', () => {
+  const m = { nanoid: () => String(++m.__key), __key: 0 };
+
+  return m;
+});
+
+beforeEach(() => {
+  MockRouterKey.current = 0;
+
+  require('nanoid/non-secure').__key = 0;
+});

 it("lets parent handle the action if child didn't", () => {
  function CurrentRouter(options: DefaultRouterOptions) {
@@ -224,6 +236,147 @@ it("lets children handle the action if parent didn't", () => {
  });
 });

+it('action goes to correct navigator if target is specified', () => {
+  function CurrentTestRouter(options: DefaultRouterOptions) {
+    const CurrentMockRouter = MockRouter(options);
+    const TestRouter: Router<
+      NavigationState,
+      MockActions | { type: 'REVERSE' }
+    > = {
+      ...CurrentMockRouter,
+
+      shouldActionChangeFocus() {
+        return true;
+      },
+
+      getStateForAction(state, action, options) {
+        if (action.type === 'REVERSE') {
+          return {
+            ...state,
+            routes: state.routes.slice().reverse(),
+          };
+        }
+
+        return CurrentMockRouter.getStateForAction(state, action, options);
+      },
+    };
+    return TestRouter;
+  }
+
+  const ChildNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(
+      CurrentTestRouter,
+      props
+    );
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const ParentNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(
+      CurrentTestRouter,
+      props
+    );
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const TestScreen = (props: any) => {
+    React.useEffect(() => {
+      props.navigation.dispatch({ type: 'REVERSE', target: '0' });
+    }, [props.navigation]);
+
+    return null;
+  };
+
+  const initialState = {
+    stale: false,
+    type: 'test',
+    index: 1,
+    key: '0',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          stale: false,
+          type: 'test',
+          index: 0,
+          key: '1',
+          routeNames: ['qux', 'lex'],
+          routes: [
+            { key: 'lex', name: 'lex' },
+            { key: 'qux', name: 'qux' },
+          ],
+        },
+      },
+      { key: 'bar', name: 'bar' },
+      { key: 'foo', name: 'foo' },
+    ],
+  };
+
+  const onStateChange = jest.fn();
+
+  const element = (
+    <BaseNavigationContainer
+      initialState={initialState}
+      onStateChange={onStateChange}
+    >
+      <ParentNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <ChildNavigator>
+              <Screen name="qux">{() => null}</Screen>
+              <Screen name="lex" component={TestScreen} />
+            </ChildNavigator>
+          )}
+        </Screen>
+      </ParentNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element).update(element);
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    stale: false,
+    type: 'test',
+    index: 1,
+    key: '0',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      { key: 'bar', name: 'bar' },
+      {
+        key: 'baz',
+        name: 'baz',
+        state: {
+          stale: false,
+          type: 'test',
+          index: 0,
+          key: '1',
+          routeNames: ['qux', 'lex'],
+          routes: [
+            { key: 'lex', name: 'lex' },
+            { key: 'qux', name: 'qux' },
+          ],
+        },
+      },
+    ],
+  });
+});
+
 it("action doesn't bubble if target is specified", () => {
  const CurrentParentRouter = MockRouter;

@@ -379,3 +532,649 @@ it('logs error if no navigator handled the action', () => {

  spy.mockRestore();
 });
+
+it("prevents removing a screen with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar" component={TestScreen} />
+        <Screen name="baz">{() => null}</Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('bar'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      { key: 'baz-5', name: 'baz' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(3);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = true;
+  shouldContinue = true;
+
+  act(() => ref.current?.navigate('bar'));
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(5);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
+
+it("prevents removing a child screen with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux" component={TestScreen} />
+              <Screen name="lex">{() => null}</Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('bar'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-8', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux', 'lex'],
+          routes: [{ key: 'qux-8', name: 'qux' }],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(3);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = true;
+  shouldContinue = true;
+
+  act(() => ref.current?.navigate('bar'));
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(5);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
+
+it("prevents removing a grand child screen with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = jest.fn();
+
+  let shouldPrevent = true;
+  let shouldContinue = false;
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          onBeforeRemove();
+
+          if (shouldPrevent) {
+            e.preventDefault();
+
+            if (shouldContinue) {
+              props.navigation.dispatch(e.data.action);
+            }
+          }
+        }),
+      [props.navigation]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar">{() => null}</Screen>
+        <Screen name="baz">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux">
+                {() => (
+                  <TestNavigator>
+                    <Screen name="lex" component={TestScreen} />
+                  </TestNavigator>
+                )}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => ref.current?.navigate('bar'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith({
+    index: 1,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('baz'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux'],
+          routes: [
+            {
+              key: 'qux-8',
+              name: 'qux',
+              state: {
+                index: 0,
+                key: 'stack-10',
+                routeNames: ['lex'],
+                routes: [{ key: 'lex-11', name: 'lex' }],
+                stale: false,
+                type: 'stack',
+              },
+            },
+          ],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onBeforeRemove).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual({
+    index: 2,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      {
+        key: 'baz-5',
+        name: 'baz',
+        state: {
+          index: 0,
+          key: 'stack-7',
+          routeNames: ['qux'],
+          routes: [
+            {
+              key: 'qux-8',
+              name: 'qux',
+              state: {
+                index: 0,
+                key: 'stack-10',
+                routeNames: ['lex'],
+                routes: [{ key: 'lex-11', name: 'lex' }],
+                stale: false,
+                type: 'stack',
+              },
+            },
+          ],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(3);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+
+  shouldPrevent = true;
+  shouldContinue = true;
+
+  act(() => ref.current?.navigate('bar'));
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(5);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
+
+it("prevents removing by multiple screens with 'beforeRemove' event", () => {
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(StackRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const onBeforeRemove = {
+    bar: jest.fn(),
+    baz: jest.fn(),
+    lex: jest.fn(),
+  };
+
+  const shouldPrevent = {
+    bar: true,
+    baz: true,
+    lex: true,
+  };
+
+  const TestScreen = (props: any) => {
+    React.useEffect(
+      () =>
+        props.navigation.addListener('beforeRemove', (e: any) => {
+          // @ts-expect-error: we should have the required mocks
+          onBeforeRemove[props.route.name]();
+          e.preventDefault();
+
+          // @ts-expect-error: we should have the required properties
+          if (!shouldPrevent[props.route.name]) {
+            props.navigation.dispatch(e.data.action);
+          }
+        }),
+      [props.navigation, props.route.name]
+    );
+
+    return null;
+  };
+
+  const onStateChange = jest.fn();
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = (
+    <BaseNavigationContainer ref={ref} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">{() => null}</Screen>
+        <Screen name="bar" component={TestScreen} />
+        <Screen name="baz" component={TestScreen} />
+        <Screen name="bax">
+          {() => (
+            <TestNavigator>
+              <Screen name="qux">
+                {() => (
+                  <TestNavigator>
+                    <Screen name="lex" component={TestScreen} />
+                  </TestNavigator>
+                )}
+              </Screen>
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  act(() => {
+    ref.current?.navigate('bar');
+    ref.current?.navigate('baz');
+    ref.current?.navigate('bax');
+  });
+
+  const preventedState = {
+    index: 3,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz', 'bax'],
+    routes: [
+      { key: 'foo-3', name: 'foo' },
+      { key: 'bar-4', name: 'bar' },
+      { key: 'baz-5', name: 'baz' },
+      {
+        key: 'bax-6',
+        name: 'bax',
+        state: {
+          index: 0,
+          key: 'stack-8',
+          routeNames: ['qux'],
+          routes: [
+            {
+              key: 'qux-9',
+              name: 'qux',
+              state: {
+                index: 0,
+                key: 'stack-11',
+                routeNames: ['lex'],
+                routes: [{ key: 'lex-12', name: 'lex' }],
+                stale: false,
+                type: 'stack',
+              },
+            },
+          ],
+          stale: false,
+          type: 'stack',
+        },
+      },
+    ],
+    stale: false,
+    type: 'stack',
+  };
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onStateChange).toBeCalledWith(preventedState);
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove.lex).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual(preventedState);
+
+  shouldPrevent.lex = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove.baz).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual(preventedState);
+
+  shouldPrevent.baz = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(1);
+  expect(onBeforeRemove.bar).toBeCalledTimes(1);
+
+  expect(ref.current?.getRootState()).toEqual(preventedState);
+
+  shouldPrevent.bar = false;
+
+  act(() => ref.current?.navigate('foo'));
+
+  expect(onStateChange).toBeCalledTimes(2);
+  expect(onStateChange).toBeCalledWith({
+    index: 0,
+    key: 'stack-2',
+    routeNames: ['foo', 'bar', 'baz', 'bax'],
+    routes: [{ key: 'foo-3', name: 'foo' }],
+    stale: false,
+    type: 'stack',
+  });
+});
--- a/packages/core/src/tests/useRoute.test.tsx
+++ b/packages/core/src/tests/useRoute.test.tsx
@@ -5,7 +5,7 @@ import useRoute from '../useRoute';
 import BaseNavigationContainer from '../BaseNavigationContainer';
 import Screen from '../Screen';
 import MockRouter from './__fixtures__/MockRouter';
-import { RouteProp } from '../types';
+import type { RouteProp } from '../types';

 it('gets route prop from context', () => {
  expect.assertions(1);
--- a/packages/core/src/checkLegacyPathConfig.tsx
+++ b/packages/core/src/checkLegacyPathConfig.tsx
@@ -0,0 +1,36 @@
+import type { PathConfigMap } from './types';
+
+type Options = {
+  initialRouteName?: string;
+  screens: PathConfigMap;
+};
+
+export default function checkLegacyPathConfig(
+  config?: Options
+): [boolean, Options | undefined] {
+  let legacy = false;
+
+  if (config) {
+    // Assume legacy configuration if config has any other keys except `screens` and `initialRouteName`
+    legacy = Object.keys(config).some(
+      (key) => key !== 'screens' && key !== 'initialRouteName'
+    );
+
+    if (
+      legacy &&
+      (config.hasOwnProperty('screens') ||
+        config.hasOwnProperty('initialRouteName'))
+    ) {
+      throw new Error(
+        'Found invalid keys in the configuration object. See https://reactnavigation.org/docs/configuring-links/ for more details on the shape of the configuration object.'
+      );
+    }
+  }
+
+  if (legacy) {
+    // @ts-expect-error: we have incorrect type for config since we don't type legacy config
+    return [legacy, { screens: config }];
+  }
+
+  return [legacy, config];
+}
--- a/packages/core/src/checkSerializable.tsx
+++ b/packages/core/src/checkSerializable.tsx
@@ -0,0 +1,74 @@
+const checkSerializableWithoutCircularReference = (
+  o: { [key: string]: any },
+  seen: Set<any>,
+  location: (string | number)[]
+):
+  | { serializable: true }
+  | {
+      serializable: false;
+      location: (string | number)[];
+      reason: string;
+    } => {
+  if (
+    o === undefined ||
+    o === null ||
+    typeof o === 'boolean' ||
+    typeof o === 'number' ||
+    typeof o === 'string'
+  ) {
+    return { serializable: true };
+  }
+
+  if (
+    Object.prototype.toString.call(o) !== '[object Object]' &&
+    !Array.isArray(o)
+  ) {
+    return {
+      serializable: false,
+      location,
+      reason: typeof o === 'function' ? 'Function' : String(o),
+    };
+  }
+
+  if (seen.has(o)) {
+    return {
+      serializable: false,
+      reason: 'Circular reference',
+      location,
+    };
+  }
+
+  seen.add(o);
+
+  if (Array.isArray(o)) {
+    for (let i = 0; i < o.length; i++) {
+      const childResult = checkSerializableWithoutCircularReference(
+        o[i],
+        new Set<any>(seen),
+        [...location, i]
+      );
+
+      if (!childResult.serializable) {
+        return childResult;
+      }
+    }
+  } else {
+    for (const key in o) {
+      const childResult = checkSerializableWithoutCircularReference(
+        o[key],
+        new Set<any>(seen),
+        [...location, key]
+      );
+
+      if (!childResult.serializable) {
+        return childResult;
+      }
+    }
+  }
+
+  return { serializable: true };
+};
+
+export default function checkSerializable(o: { [key: string]: any }) {
+  return checkSerializableWithoutCircularReference(o, new Set<any>(), []);
+}
--- a/packages/core/src/createNavigatorFactory.tsx
+++ b/packages/core/src/createNavigatorFactory.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { ParamListBase, NavigationState } from '@react-navigation/routers';
+import type * as React from 'react';
+import type { ParamListBase, NavigationState } from '@react-navigation/routers';
 import Screen from './Screen';
-import { TypedNavigator, EventMapBase } from './types';
+import type { TypedNavigator, EventMapBase } from './types';

 /**
 * Higher order component to create a `Navigator` and `Screen` pair.
@@ -12,7 +12,7 @@ import { TypedNavigator, EventMapBase } from './types';
 */
 export default function createNavigatorFactory<
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase,
  NavigatorComponent extends React.ComponentType<any>
 >(Navigator: NavigatorComponent) {
--- a/packages/core/src/getActionFromState.tsx
+++ b/packages/core/src/getActionFromState.tsx
@@ -1,4 +1,4 @@
-import { PartialState, NavigationState } from '@react-navigation/routers';
+import type { PartialState, NavigationState } from '@react-navigation/routers';

 type NavigateParams = {
  screen?: string;
--- a/packages/core/src/getFocusedRouteNameFromRoute.tsx
+++ b/packages/core/src/getFocusedRouteNameFromRoute.tsx
@@ -0,0 +1,29 @@
+import type {
+  Route,
+  PartialState,
+  NavigationState,
+} from '@react-navigation/routers';
+
+export default function getFocusedRouteNameFromRoute(
+  route: Partial<Route<string>> & { state?: PartialState<NavigationState> }
+): string | undefined {
+  const state = route.state;
+  const params = route.params as { screen?: unknown } | undefined;
+
+  const routeName = state
+    ? // Get the currently active route name in the nested navigator
+      state.routes[
+        // If we have a partial state without index, for tab/drawer, first screen will be focused one, and last for stack
+        // The type property will only exist for rehydrated state and not for state from deep link
+        state.index ??
+          (typeof state.type === 'string' && state.type !== 'stack'
+            ? 0
+            : state.routes.length - 1)
+      ].name
+    : // If state doesn't exist, we need to default to `screen` param if available
+    typeof params?.screen === 'string'
+    ? params.screen
+    : undefined;
+
+  return routeName;
+}
--- a/packages/core/src/getPathFromState.tsx
+++ b/packages/core/src/getPathFromState.tsx
@@ -1,17 +1,18 @@
 import queryString from 'query-string';
-import {
+import type {
  NavigationState,
  PartialState,
  Route,
 } from '@react-navigation/routers';
-import { PathConfig } from './types';
+import checkLegacyPathConfig from './checkLegacyPathConfig';
+import type { PathConfig, PathConfigMap } from './types';
+
+type Options = { initialRouteName?: string; screens: PathConfigMap };

 type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;

 type StringifyConfig = Record<string, (value: any) => string>;

-type OptionsItem = PathConfig[string];
-
 type ConfigItem = {
  pattern?: string;
  stringify?: StringifyConfig;
@@ -46,9 +47,11 @@ const getActiveRoute = (state: State): { name: string; params?: object } => {
 *     ],
 *   },
 *   {
- *     Chat: {
- *       path: 'chat/:author/:id',
- *       stringify: { author: author => author.toLowerCase() }
+ *     screens: {
+ *       Chat: {
+ *         path: 'chat/:author/:id',
+ *         stringify: { author: author => author.toLowerCase() }
+ *       }
 *     }
 *   }
 * )
@@ -59,15 +62,21 @@ const getActiveRoute = (state: State): { name: string; params?: object } => {
 * @returns Path representing the state, e.g. /foo/bar?count=42.
 */
 export default function getPathFromState(
-  state?: State,
-  options: PathConfig = {}
+  state: State,
+  options?: Options
 ): string {
-  if (state === undefined) {
-    throw Error('NavigationState not passed');
+  if (state == null) {
+    throw Error(
+      "Got 'undefined' for the navigation state. You must pass a valid state object."
+    );
  }

-  // Create a normalized configs array which will be easier to use
-  const configs = createNormalizedConfigs(options);
+  const [legacy, compatOptions] = checkLegacyPathConfig(options);
+
+  // Create a normalized configs object which will be easier to use
+  const configs: Record<string, ConfigItem> = compatOptions
+    ? createNormalizedConfigs(legacy, compatOptions.screens)
+    : {};

  let path = '/';
  let current: State | undefined = state;
@@ -168,6 +177,12 @@ export default function getPathFromState(
          // Showing the route name seems ok, though whatever we show here will be incorrect
          // Since the page doesn't actually exist
          if (p === '*') {
+            if (legacy) {
+              throw new Error(
+                "Please update your config to the new format to use wildcard pattern ('*'). https://reactnavigation.org/docs/configuring-links/#updating-config"
+              );
+            }
+
            return route.name;
          }

@@ -238,7 +253,8 @@ const joinPaths = (...paths: string[]): string =>
    .join('/');

 const createConfigItem = (
-  config: OptionsItem | string,
+  legacy: boolean,
+  config: PathConfig | string,
  parentPattern?: string
 ): ConfigItem => {
  if (typeof config === 'string') {
@@ -250,13 +266,28 @@ const createConfigItem = (

  // 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;
+  let pattern: string | undefined;
+
+  if (legacy) {
+    pattern =
+      config.exact !== true && parentPattern && config.path
+        ? joinPaths(parentPattern, config.path)
+        : config.path;
+  } else {
+    if (config.exact && config.path === undefined) {
+      throw new Error(
+        "A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. `path: ''`."
+      );
+    }
+
+    pattern =
+      config.exact !== true
+        ? joinPaths(parentPattern || '', config.path || '')
+        : config.path || '';
+  }

  const screens = config.screens
-    ? createNormalizedConfigs(config.screens, pattern)
+    ? createNormalizedConfigs(legacy, config.screens, pattern)
    : undefined;

  return {
@@ -268,12 +299,13 @@ const createConfigItem = (
 };

 const createNormalizedConfigs = (
-  options: PathConfig,
+  legacy: boolean,
+  options: PathConfigMap,
  pattern?: string
 ): Record<string, ConfigItem> =>
  fromEntries(
    Object.entries(options).map(([name, c]) => {
-      const result = createConfigItem(c, pattern);
+      const result = createConfigItem(legacy, c, pattern);

      return [name, result];
    })
--- a/packages/core/src/getStateFromPath.tsx
+++ b/packages/core/src/getStateFromPath.tsx
@@ -1,11 +1,17 @@
 import escape from 'escape-string-regexp';
 import queryString from 'query-string';
-import {
+import type {
  NavigationState,
  PartialState,
  InitialState,
 } from '@react-navigation/routers';
-import { PathConfig } from './types';
+import checkLegacyPathConfig from './checkLegacyPathConfig';
+import type { PathConfigMap } from './types';
+
+type Options = {
+  initialRouteName?: string;
+  screens: PathConfigMap;
+};

 type ParseConfig = Record<string, (value: string) => any>;

@@ -36,9 +42,11 @@ type ResultState = PartialState<NavigationState> & {
 * getStateFromPath(
 *   '/chat/jane/42',
 *   {
- *     Chat: {
- *       path: 'chat/:author/:id',
- *       parse: { id: Number }
+ *     screens: {
+ *       Chat: {
+ *         path: 'chat/:author/:id',
+ *         parse: { id: Number }
+ *       }
 *     }
 *   }
 * )
@@ -48,15 +56,62 @@ type ResultState = PartialState<NavigationState> & {
 */
 export default function getStateFromPath(
  path: string,
-  options: PathConfig = {}
+  options?: Options
 ): ResultState | undefined {
+  const [legacy, compatOptions] = checkLegacyPathConfig(options);
+
  let initialRoutes: InitialRouteConfig[] = [];

+  if (compatOptions?.initialRouteName) {
+    initialRoutes.push({
+      initialRouteName: compatOptions.initialRouteName,
+      connectedRoutes: Object.keys(compatOptions.screens),
+    });
+  }
+
+  const screens = compatOptions?.screens;
+
+  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 (screens === undefined) {
+    // When no config is specified, use the path segments as route names
+    const routes = remaining
+      .split('/')
+      .filter(Boolean)
+      .map((segment, i, self) => {
+        const name = decodeURIComponent(segment);
+
+        if (i === self.length - 1) {
+          return { name, params: parseQueryParams(path) };
+        }
+
+        return { name };
+      });
+
+    if (routes.length) {
+      return createNestedStateObject(routes, initialRoutes);
+    }
+
+    return undefined;
+  }
+
  // 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)
+      ...Object.keys(screens).map((key) =>
+        createNormalizedConfigs(
+          legacy,
+          key,
+          screens as PathConfigMap,
+          [],
+          initialRoutes
+        )
      )
    )
    .sort((a, b) => {
@@ -100,14 +155,6 @@ export default function getStateFromPath(
      return bWildcardIndex - aWildcardIndex;
    });

-  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
@@ -139,66 +186,67 @@ export default function getStateFromPath(
  let result: PartialState<NavigationState> | undefined;
  let current: PartialState<NavigationState> | undefined;

-  // We try to match the paths in 2 passes
-  // In first pass, we match the whole path against the regex instead of segments
-  // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-  const { routeNames, allParams, remainingPath } = matchAgainstConfigs(
-    remaining,
-    configs.map((c) => ({
-      ...c,
-      // Add `$` to the regex to make sure it matches till end of the path and not just beginning
-      regex: c.regex ? new RegExp(c.regex.source + '$') : undefined,
-    }))
-  );
-
-  if (routeNames !== undefined) {
-    // This will always be empty if full path matched
-    remaining = remainingPath;
-    current = createNestedStateObject(
-      createRouteObjects(configs, routeNames, allParams),
-      initialRoutes
-    );
-    result = current;
-  }
-
-  // In second pass, we divide the path into segments and match piece by piece
-  // This preserves the old behaviour, but we should remove it in next major
-  while (remaining) {
-    let { routeNames, allParams, remainingPath } = matchAgainstConfigs(
+  if (legacy === false) {
+    // If we're not in legacy mode,, we match the whole path against the regex instead of segments
+    // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
+    const { routeNames, allParams, remainingPath } = matchAgainstConfigs(
      remaining,
-      configs
+      configs.map((c) => ({
+        ...c,
+        // Add `$` to the regex to make sure it matches till end of the path and not just beginning
+        regex: c.regex ? new RegExp(c.regex.source + '$') : undefined,
+      }))
    );

-    remaining = remainingPath;
-
-    // If we hadn't matched any segments earlier, use the path as route name
-    if (routeNames === undefined) {
-      const segments = remaining.split('/');
-
-      routeNames = [decodeURIComponent(segments[0])];
-      segments.shift();
-      remaining = segments.join('/');
+    if (routeNames !== undefined) {
+      // This will always be empty if full path matched
+      remaining = remainingPath;
+      current = createNestedStateObject(
+        createRouteObjects(configs, routeNames, allParams),
+        initialRoutes
+      );
+      result = current;
    }
+  } else {
+    // In legacy mode, we divide the path into segments and match piece by piece
+    // This preserves the legacy behaviour, but we should remove it in next major
+    while (remaining) {
+      let { routeNames, allParams, remainingPath } = matchAgainstConfigs(
+        remaining,
+        configs
+      );

-    const state = createNestedStateObject(
-      createRouteObjects(configs, routeNames, allParams),
-      initialRoutes
-    );
+      remaining = remainingPath;

-    if (current) {
-      // The state should be nested inside the deepest route we parsed before
-      while (current?.routes[current.index || 0].state) {
-        current = current.routes[current.index || 0].state;
+      // If we hadn't matched any segments earlier, use the path as route name
+      if (routeNames === undefined) {
+        const segments = remaining.split('/');
+
+        routeNames = [decodeURIComponent(segments[0])];
+        segments.shift();
+        remaining = segments.join('/');
      }

-      (current as PartialState<NavigationState>).routes[
-        current?.index || 0
-      ].state = state;
-    } else {
-      result = state;
-    }
+      const state = createNestedStateObject(
+        createRouteObjects(configs, routeNames, allParams),
+        initialRoutes
+      );

-    current = state;
+      if (current) {
+        // The state should be nested inside the deepest route we parsed before
+        while (current?.routes[current.index || 0].state) {
+          current = current.routes[current.index || 0].state;
+        }
+
+        (current as PartialState<NavigationState>).routes[
+          current?.index || 0
+        ].state = state;
+      } else {
+        result = state;
+      }
+
+      current = state;
+    }
  }

  if (current == null || result == null) {
@@ -212,6 +260,7 @@ export default function getStateFromPath(
  );

  if (params) {
+    // @ts-expect-error: params should be treated as read-only, but we're creating the state here so it doesn't matter
    route.params = { ...route.params, ...params };
  }

@@ -265,8 +314,9 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 };

 const createNormalizedConfigs = (
+  legacy: boolean,
  screen: string,
-  routeConfig: PathConfig,
+  routeConfig: PathConfigMap,
  routeNames: string[] = [],
  initials: InitialRouteConfig[],
  parentPattern?: string
@@ -281,7 +331,7 @@ const createNormalizedConfigs = (
    // 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;

-    configs.push(createConfigItem(screen, routeNames, pattern, config));
+    configs.push(createConfigItem(legacy, screen, routeNames, pattern, config));
  } else if (typeof config === 'object') {
    let pattern: string | undefined;

@@ -289,13 +339,33 @@ const createNormalizedConfigs = (
    // it can have `path` property and
    // it could have `screens` prop which has nested configs
    if (typeof config.path === 'string') {
-      pattern =
-        config.exact !== true && parentPattern
-          ? joinPaths(parentPattern, config.path)
-          : config.path;
+      if (legacy) {
+        pattern =
+          config.exact !== true && parentPattern
+            ? joinPaths(parentPattern, config.path)
+            : config.path;
+      } else {
+        if (config.exact && config.path === undefined) {
+          throw new Error(
+            "A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. `path: ''`."
+          );
+        }
+
+        pattern =
+          config.exact !== true
+            ? joinPaths(parentPattern || '', config.path || '')
+            : config.path || '';
+      }

      configs.push(
-        createConfigItem(screen, routeNames, pattern, config.path, config.parse)
+        createConfigItem(
+          legacy,
+          screen,
+          routeNames,
+          pattern,
+          config.path,
+          config.parse
+        )
      );
    }

@@ -310,11 +380,12 @@ const createNormalizedConfigs = (

      Object.keys(config.screens).forEach((nestedConfig) => {
        const result = createNormalizedConfigs(
+          legacy,
          nestedConfig,
-          config.screens as PathConfig,
+          config.screens as PathConfigMap,
          routeNames,
          initials,
-          pattern
+          pattern ?? parentPattern
        );

        configs.push(...result);
@@ -328,6 +399,7 @@ const createNormalizedConfigs = (
 };

 const createConfigItem = (
+  legacy: boolean,
  screen: string,
  routeNames: string[],
  pattern: string,
@@ -342,6 +414,12 @@ const createConfigItem = (
        `^(${pattern
          .split('/')
          .map((it) => {
+            if (legacy && it === '*') {
+              throw new Error(
+                "Please update your config to the new format to use wildcard pattern ('*'). https://reactnavigation.org/docs/configuring-links/#updating-config"
+              );
+            }
+
            if (it.startsWith(':')) {
              return `(([^/]+\\/)${it.endsWith('?') ? '?' : ''})`;
            }
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -20,4 +20,6 @@ export { default as getStateFromPath } from './getStateFromPath';
 export { default as getPathFromState } from './getPathFromState';
 export { default as getActionFromState } from './getActionFromState';

+export { default as getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
+
 export * from './types';
--- a/packages/core/src/isSerializable.tsx
+++ b/packages/core/src/isSerializable.tsx
@@ -1,47 +0,0 @@
-const isSerializableWithoutCircularReference = (
-  o: { [key: string]: any },
-  seen: Set<any>
-): boolean => {
-  if (
-    o === undefined ||
-    o === null ||
-    typeof o === 'boolean' ||
-    typeof o === 'number' ||
-    typeof o === 'string'
-  ) {
-    return true;
-  }
-
-  if (
-    Object.prototype.toString.call(o) !== '[object Object]' &&
-    !Array.isArray(o)
-  ) {
-    return false;
-  }
-
-  if (seen.has(o)) {
-    return false;
-  }
-
-  seen.add(o);
-
-  if (Array.isArray(o)) {
-    for (const it of o) {
-      if (!isSerializableWithoutCircularReference(it, new Set<any>(seen))) {
-        return false;
-      }
-    }
-  } else {
-    for (const key in o) {
-      if (!isSerializableWithoutCircularReference(o[key], new Set<any>(seen))) {
-        return false;
-      }
-    }
-  }
-
-  return true;
-};
-
-export default function isSerializable(o: { [key: string]: any }) {
-  return isSerializableWithoutCircularReference(o, new Set<any>());
-}
--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
  DefaultRouterOptions,
  NavigationState,
  NavigationAction,
@@ -10,7 +10,7 @@ import {
 } from '@react-navigation/routers';

 export type DefaultNavigatorOptions<
-  ScreenOptions extends object
+  ScreenOptions extends {}
 > = DefaultRouterOptions & {
  /**
   * Children React Elements to extract the route configuration from.
@@ -37,6 +37,7 @@ export type EventMapCore<State extends NavigationState> = {
  focus: { data: undefined };
  blur: { data: undefined };
  state: { data: { state: State } };
+  beforeRemove: { data: { action: NavigationAction }; canPreventDefault: true };
 };

 export type EventArg<
@@ -61,7 +62,9 @@ export type EventArg<
      preventDefault(): void;
    }
  : {}) &
-  (Data extends undefined ? {} : { readonly data: Data });
+  (undefined extends Data
+    ? { readonly data?: Readonly<Data> }
+    : { readonly data: Readonly<Data> });

 export type EventListenerCallback<
  EventMap extends EventMapBase,
@@ -107,8 +110,8 @@ export type EventEmitter<EventMap extends EventMapBase> = {
    } & (EventMap[EventName]['canPreventDefault'] extends true
      ? { canPreventDefault: true }
      : {}) &
-      (EventMap[EventName]['data'] extends undefined
-        ? {}
+      (undefined extends EventMap[EventName]['data']
+        ? { data?: EventMap[EventName]['data'] }
        : { data: EventMap[EventName]['data'] })
  ): EventArg<
    EventName,
@@ -250,7 +253,7 @@ export type NavigationProp<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string,
  State extends NavigationState = NavigationState,
-  ScreenOptions extends object = {},
+  ScreenOptions extends {} = {},
  EventMap extends EventMapBase = {}
 > = NavigationHelpersCommon<ParamList, State> & {
  /**
@@ -275,14 +278,19 @@ export type RouteProp<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList
 > = Omit<Route<Extract<RouteName, string>>, 'params'> &
-  (ParamList[RouteName] extends undefined
-    ? {}
-    : {
+  (undefined extends ParamList[RouteName]
+    ? Readonly<{
        /**
         * Params for this route
         */
-        params: ParamList[RouteName];
-      });
+        params?: Readonly<ParamList[RouteName]>;
+      }>
+    : Readonly<{
+        /**
+         * Params for this route
+         */
+        params: Readonly<ParamList[RouteName]>;
+      }>);

 export type CompositeNavigationProp<
  A extends NavigationProp<ParamListBase, string, any, any>,
@@ -321,7 +329,7 @@ export type Descriptor<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string,
  State extends NavigationState = NavigationState,
-  ScreenOptions extends object = {},
+  ScreenOptions extends {} = {},
  EventMap extends EventMapBase = {}
 > = {
  /**
@@ -360,7 +368,7 @@ export type RouteConfig<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList,
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase
 > = {
  /**
@@ -398,6 +406,16 @@ export type RouteConfig<
       * React component to render for this screen.
       */
      component: React.ComponentType<any>;
+      getComponent?: never;
+      children?: never;
+    }
+  | {
+      /**
+       * Lazily get a React component to render for this screen.
+       */
+      getComponent: () => React.ComponentType<any>;
+      component?: never;
+      children?: never;
    }
  | {
      /**
@@ -407,11 +425,48 @@ export type RouteConfig<
        route: RouteProp<ParamList, RouteName>;
        navigation: any;
      }) => React.ReactNode;
+      component?: never;
+      getComponent?: never;
    }
 );

+export type NavigationContainerEventMap = {
+  /**
+   * Event which fires when the navigation state changes.
+   */
+  state: {
+    data: {
+      /**
+       * The updated state object after the state change.
+       */
+      state: NavigationState | PartialState<NavigationState> | undefined;
+    };
+  };
+  /**
+   * Event which fires when current options changes.
+   */
+  options: { data: { options: object } };
+  /**
+   * Event which fires when an action is dispatched.
+   * Only intended for debugging purposes, don't use it for app logic.
+   * This event will be emitted before state changes have been applied.
+   */
+  __unsafe_action__: {
+    data: {
+      /**
+       * The action object which was dispatched.
+       */
+      action: NavigationAction;
+      /**
+       * Whether the action was a no-op, i.e. resulted any state changes.
+       */
+      noop: boolean;
+    };
+  };
+};
+
 export type NavigationContainerRef = NavigationHelpers<ParamListBase> &
-  EventConsumer<{ state: { data: { state: NavigationState } } }> & {
+  EventConsumer<NavigationContainerEventMap> & {
    /**
     * Reset the navigation state of the root navigator to the provided state.
     *
@@ -435,7 +490,7 @@ export type NavigationContainerRef = NavigationHelpers<ParamListBase> &
 export type TypedNavigator<
  ParamList extends ParamListBase,
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase,
  Navigator extends React.ComponentType<any>
 > = {
@@ -443,25 +498,14 @@ export type TypedNavigator<
   * Navigator component which manages the child screens.
   */
  Navigator: React.ComponentType<
-    Omit<
-      React.ComponentProps<Navigator>,
-      'initialRouteName' | 'screenOptions'
-    > & {
-      /**
-       * Name of the route to focus by on initial render.
-       * If not specified, usually the first route is used.
-       */
-      initialRouteName?: keyof ParamList;
-      /**
-       * Default options for all screens under this navigator.
-       */
-      screenOptions?:
-        | ScreenOptions
-        | ((props: {
-            route: RouteProp<ParamList, keyof ParamList>;
-            navigation: any;
-          }) => ScreenOptions);
-    }
+    Omit<React.ComponentProps<Navigator>, keyof DefaultNavigatorOptions<any>> &
+      Omit<DefaultNavigatorOptions<ScreenOptions>, 'initialRouteName'> & {
+        /**
+         * Name of the route to focus by on initial render.
+         * If not specified, usually the first route is used.
+         */
+        initialRouteName?: keyof ParamList;
+      }
  >;
  /**
   * Component used for specifying route configuration.
@@ -472,14 +516,14 @@ export type TypedNavigator<
 };

 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;
-      };
+  path?: string;
+  exact?: boolean;
+  parse?: Record<string, (value: string) => any>;
+  stringify?: Record<string, (value: any) => string>;
+  screens?: PathConfigMap;
+  initialRouteName?: string;
+};
+
+export type PathConfigMap = {
+  [routeName: string]: string | PathConfig;
 };
--- a/packages/core/src/useChildActionListeners.tsx
+++ b/packages/core/src/useChildActionListeners.tsx
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { ChildActionListener } from './NavigationBuilderContext';
-
-/**
- * Hook which lets child navigators add action listeners.
- */
-export default function useChildActionListeners() {
-  const { current: listeners } = React.useRef<ChildActionListener[]>([]);
-
-  const addListener = React.useCallback(
-    (listener: ChildActionListener) => {
-      listeners.push(listener);
-
-      return () => {
-        const index = listeners.indexOf(listener);
-
-        listeners.splice(index, 1);
-      };
-    },
-    [listeners]
-  );
-
-  return {
-    listeners,
-    addListener,
-  };
-}
--- a/packages/core/src/useChildListeners.tsx
+++ b/packages/core/src/useChildListeners.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { ListenerMap } from './NavigationBuilderContext';
+
+/**
+ * Hook which lets child navigators add action listeners.
+ */
+export default function useChildListeners() {
+  const { current: listeners } = React.useRef<
+    {
+      [K in keyof ListenerMap]: ListenerMap[K][];
+    }
+  >({
+    action: [],
+    focus: [],
+  });
+
+  const addListener = React.useCallback(
+    <T extends keyof ListenerMap>(type: T, listener: ListenerMap[T]) => {
+      // @ts-expect-error: listener should be correct type according to `type`
+      listeners[type].push(listener);
+
+      return () => {
+        // @ts-expect-error: listener should be correct type according to `type`
+        const index = listeners[type].indexOf(listener);
+
+        listeners[type].splice(index, 1);
+      };
+    },
+    [listeners]
+  );
+
+  return {
+    listeners,
+    addListener,
+  };
+}
--- a/packages/core/src/useCurrentRender.tsx
+++ b/packages/core/src/useCurrentRender.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { NavigationState, ParamListBase } from '@react-navigation/routers';
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import CurrentRenderContext from './CurrentRenderContext';
-import { Descriptor, NavigationHelpers } from './types';
+import type { Descriptor, NavigationHelpers } from './types';

 type Options = {
  state: NavigationState;
--- a/packages/core/src/useDescriptors.tsx
+++ b/packages/core/src/useDescriptors.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {
+import type {
  NavigationAction,
  NavigationState,
  ParamListBase,
@@ -7,13 +7,14 @@ import {
 } from '@react-navigation/routers';
 import SceneView from './SceneView';
 import NavigationBuilderContext, {
-  ChildActionListener,
-  FocusedNavigationListener,
-  NavigatorStateGetter,
+  AddListener,
+  AddKeyedListener,
 } from './NavigationBuilderContext';
-import { NavigationEventEmitter } from './useEventEmitter';
+import type { NavigationEventEmitter } from './useEventEmitter';
 import useNavigationCache from './useNavigationCache';
-import {
+import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import type {
  Descriptor,
  NavigationHelpers,
  RouteConfig,
@@ -23,7 +24,7 @@ import {

 type Options<
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase
 > = {
  state: State;
@@ -44,12 +45,11 @@ type Options<
  ) => boolean;
  getState: () => State;
  setState: (state: State) => void;
-  addActionListener: (listener: ChildActionListener) => void;
-  addFocusedListener: (listener: FocusedNavigationListener) => void;
-  addStateGetter: (key: string, getter: NavigatorStateGetter) => void;
+  addListener: AddListener;
+  addKeyedListener: AddKeyedListener;
  onRouteFocus: (key: string) => void;
  router: Router<State, NavigationAction>;
-  emitter: NavigationEventEmitter;
+  emitter: NavigationEventEmitter<any>;
 };

 /**
@@ -62,7 +62,7 @@ type Options<
 */
 export default function useDescriptors<
  State extends NavigationState,
-  ScreenOptions extends object,
+  ScreenOptions extends {},
  EventMap extends EventMapBase
 >({
  state,
@@ -72,34 +72,35 @@ export default function useDescriptors<
  onAction,
  getState,
  setState,
-  addActionListener,
-  addFocusedListener,
-  addStateGetter,
+  addListener,
+  addKeyedListener,
  onRouteFocus,
  router,
  emitter,
 }: Options<State, ScreenOptions, EventMap>) {
  const [options, setOptions] = React.useState<Record<string, object>>({});
-  const { trackAction } = React.useContext(NavigationBuilderContext);
+  const { onDispatchAction, onOptionsChange } = React.useContext(
+    NavigationBuilderContext
+  );

  const context = React.useMemo(
    () => ({
      navigation,
      onAction,
-      addActionListener,
-      addFocusedListener,
-      addStateGetter,
+      addListener,
+      addKeyedListener,
      onRouteFocus,
-      trackAction,
+      onDispatchAction,
+      onOptionsChange,
    }),
    [
      navigation,
      onAction,
-      addActionListener,
-      addFocusedListener,
+      addListener,
+      addKeyedListener,
      onRouteFocus,
-      addStateGetter,
-      trackAction,
+      onDispatchAction,
+      onOptionsChange,
    ]
  );

@@ -112,56 +113,56 @@ export default function useDescriptors<
    emitter,
  });

-  return state.routes.reduce(
-    (acc, route) => {
-      const screen = screens[route.name];
-      const navigation = navigations[route.key];
+  return state.routes.reduce<
+    Record<string, Descriptor<ParamListBase, string, State, ScreenOptions>>
+  >((acc, route) => {
+    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],
-      };
+    const routeOptions = {
+      // The default `screenOptions` passed to the navigator
+      ...(typeof screenOptions === 'object' || screenOptions == null
+        ? screenOptions
+        : // @ts-expect-error: this is a function, but typescript doesn't think so
+          screenOptions({
+            route,
+            navigation,
+          })),
+      // The `options` prop passed to `Screen` elements
+      ...(typeof screen.options === 'object' || screen.options == null
+        ? screen.options
+        : // @ts-expect-error: this is a function, but typescript doesn't think so
+          screen.options({
+            route,
+            navigation,
+          })),
+      // The options set via `navigation.setOptions`
+      ...options[route.key],
+    };

-      acc[route.key] = {
-        navigation,
-        render() {
-          return (
-            <NavigationBuilderContext.Provider key={route.key} value={context}>
-              <SceneView
-                navigation={navigation}
-                route={route}
-                screen={screen}
-                getState={getState}
-                setState={setState}
-                options={routeOptions}
-              />
-            </NavigationBuilderContext.Provider>
-          );
-        },
-        options: routeOptions,
-      };
+    acc[route.key] = {
+      navigation,
+      render() {
+        return (
+          <NavigationBuilderContext.Provider key={route.key} value={context}>
+            <NavigationContext.Provider value={navigation}>
+              <NavigationRouteContext.Provider value={route}>
+                <SceneView
+                  navigation={navigation}
+                  route={route}
+                  screen={screen}
+                  getState={getState}
+                  setState={setState}
+                  options={routeOptions}
+                />
+              </NavigationRouteContext.Provider>
+            </NavigationContext.Provider>
+          </NavigationBuilderContext.Provider>
+        );
+      },
+      options: routeOptions as ScreenOptions,
+    };

-      return acc;
-    },
-    {} as {
-      [key: string]: Descriptor<ParamListBase, string, State, ScreenOptions>;
-    }
-  );
+    return acc;
+  }, {});
 }
--- a/packages/core/src/useDevTools.tsx
+++ b/packages/core/src/useDevTools.tsx
@@ -1,107 +0,0 @@
-import * as React from 'react';
-import {
-  NavigationState,
-  NavigationAction,
-  PartialState,
-} from '@react-navigation/routers';
-
-type State = NavigationState | PartialState<NavigationState> | undefined;
-
-type Options = {
-  enabled: boolean;
-  name: string;
-  reset: (state: NavigationState) => void;
-  state: State;
-};
-
-type DevTools = {
-  init(value: any): void;
-  send(action: any, value: any): void;
-  subscribe(
-    listener: (message: { type: string; [key: string]: any }) => void
-  ): () => void;
-};
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace NodeJS {
-    interface Global {
-      __REDUX_DEVTOOLS_EXTENSION__:
-        | {
-            connect(options: { name: string }): DevTools;
-            disconnect(): void;
-          }
-        | undefined;
-    }
-  }
-}
-
-export default function useDevTools({ name, reset, state, enabled }: Options) {
-  const devToolsRef = React.useRef<DevTools>();
-
-  if (
-    enabled &&
-    process.env.NODE_ENV !== 'production' &&
-    global.__REDUX_DEVTOOLS_EXTENSION__ &&
-    devToolsRef.current === undefined
-  ) {
-    devToolsRef.current = global.__REDUX_DEVTOOLS_EXTENSION__.connect({ name });
-  }
-
-  const devTools = devToolsRef.current;
-  const lastStateRef = React.useRef<State>(state);
-  const actions = React.useRef<(NavigationAction | string)[]>([]);
-
-  React.useEffect(() => {
-    devTools?.init(lastStateRef.current);
-  }, [devTools]);
-
-  React.useEffect(
-    () =>
-      devTools?.subscribe((message) => {
-        if (message.type === 'DISPATCH' && message.state) {
-          reset(JSON.parse(message.state));
-        }
-      }),
-    [devTools, reset]
-  );
-
-  const trackState = React.useCallback(
-    (getState: () => State) => {
-      if (!devTools) {
-        return;
-      }
-
-      while (actions.current.length > 1) {
-        devTools.send(actions.current.shift(), lastStateRef.current);
-      }
-
-      const state = getState();
-
-      if (actions.current.length) {
-        devTools.send(actions.current.pop(), state);
-      } else {
-        devTools.send('@@UNKNOWN', state);
-      }
-
-      lastStateRef.current = state;
-    },
-    [devTools]
-  );
-
-  const trackAction = React.useCallback(
-    (action: NavigationAction | string) => {
-      if (!devTools) {
-        return;
-      }
-
-      actions.current.push(action);
-    },
-    [devTools]
-  );
-
-  return {
-    trackAction,
-    trackState,
-  };
-}
--- a/packages/core/src/useEventEmitter.tsx
+++ b/packages/core/src/useEventEmitter.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { EventEmitter, EventConsumer, EventArg } from './types';
+import type { EventEmitter, EventConsumer, EventArg } from './types';

-export type NavigationEventEmitter = EventEmitter<Record<string, any>> & {
-  create: (target: string) => EventConsumer<Record<string, any>>;
+export type NavigationEventEmitter<
+  T extends Record<string, any>
+> = EventEmitter<T> & {
+  create: (target: string) => EventConsumer<T>;
 };

 type Listeners = ((e: any) => void)[];
@@ -10,9 +12,9 @@ type Listeners = ((e: any) => void)[];
 /**
 * Hook to manage the event system used by the navigator to notify screens of various events.
 */
-export default function useEventEmitter(
+export default function useEventEmitter<T extends Record<string, any>>(
  listen?: (e: any) => void
-): NavigationEventEmitter {
+): NavigationEventEmitter<T> {
  const listenRef = React.useRef(listen);

  React.useEffect(() => {
--- a/packages/core/src/useFocusEvents.tsx
+++ b/packages/core/src/useFocusEvents.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
-import { NavigationState } from '@react-navigation/routers';
+import type { NavigationState } from '@react-navigation/routers';
 import NavigationContext from './NavigationContext';
-import { NavigationEventEmitter } from './useEventEmitter';
+import type { NavigationEventEmitter } from './useEventEmitter';
+import type { EventMapCore } from './types';

-type Options = {
-  state: NavigationState;
-  emitter: NavigationEventEmitter;
+type Options<State extends NavigationState> = {
+  state: State;
+  emitter: NavigationEventEmitter<EventMapCore<State>>;
 };

 /**
 * Hook to take care of emitting `focus` and `blur` events.
 */
-export default function useFocusEvents({ state, emitter }: Options) {
+export default function useFocusEvents<State extends NavigationState>({
+  state,
+  emitter,
+}: Options<State>) {
  const navigation = React.useContext(NavigationContext);
  const lastFocusedKeyRef = React.useRef<string | undefined>();

--- a/packages/core/src/useFocusedListeners.tsx
+++ b/packages/core/src/useFocusedListeners.tsx
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { FocusedNavigationListener } from './NavigationBuilderContext';
-
-/**
- * Hook which lets child navigators add listeners to be called for focused navigators.
- */
-export default function useFocusedListeners() {
-  const { current: listeners } = React.useRef<FocusedNavigationListener[]>([]);
-
-  const addListener = React.useCallback(
-    (listener: FocusedNavigationListener) => {
-      listeners.push(listener);
-
-      return () => {
-        const index = listeners.indexOf(listener);
-
-        listeners.splice(index, 1);
-      };
-    },
-    [listeners]
-  );
-
-  return {
-    listeners,
-    addListener,
-  };
-}
--- a/packages/core/src/useFocusedListenersChildrenAdapter.tsx
+++ b/packages/core/src/useFocusedListenersChildrenAdapter.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/routers';
+import type { ParamListBase } from '@react-navigation/routers';
 import NavigationBuilderContext, {
  FocusedNavigationCallback,
  FocusedNavigationListener,
 } from './NavigationBuilderContext';
-import { NavigationHelpers } from './types';
+import type { NavigationHelpers } from './types';

 type Options = {
  navigation: NavigationHelpers<ParamListBase>;
@@ -18,7 +18,7 @@ export default function useFocusedListenersChildrenAdapter({
  navigation,
  focusedListeners,
 }: Options) {
-  const { addFocusedListener } = React.useContext(NavigationBuilderContext);
+  const { addListener } = React.useContext(NavigationBuilderContext);

  const listener = React.useCallback(
    (callback: FocusedNavigationCallback<any>) => {
@@ -39,8 +39,8 @@ export default function useFocusedListenersChildrenAdapter({
    [focusedListeners, navigation]
  );

-  React.useEffect(() => addFocusedListener?.(listener), [
-    addFocusedListener,
+  React.useEffect(() => addListener?.('focus', listener), [
+    addListener,
    listener,
  ]);
 }
--- a/packages/core/src/useKeyedChildListeners.tsx
+++ b/packages/core/src/useKeyedChildListeners.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { KeyedListenerMap } from './NavigationBuilderContext';
+
+/**
+ * Hook which lets child navigators add getters to be called for obtaining rehydrated state.
+ */
+
+export default function useKeyedChildListeners() {
+  const { current: keyedListeners } = React.useRef<
+    {
+      [K in keyof KeyedListenerMap]: Record<
+        string,
+        KeyedListenerMap[K] | undefined
+      >;
+    }
+  >({
+    getState: {},
+    beforeRemove: {},
+  });
+
+  const addKeyedListener = React.useCallback(
+    <T extends keyof KeyedListenerMap>(
+      type: T,
+      key: string,
+      listener: KeyedListenerMap[T]
+    ) => {
+      // @ts-expect-error: listener should be correct type according to `type`
+      keyedListeners[type][key] = listener;
+
+      return () => {
+        // @ts-expect-error: listener should be correct type according to `type`
+        keyedListeners[type][key] = undefined;
+      };
+    },
+    [keyedListeners]
+  );
+
+  return {
+    keyedListeners,
+    addKeyedListener,
+  };
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Satyajit Sahoo	b2a99c2a88	chore: publish - @react-navigation/bottom-tabs@5.7.1	2020-07-14 14:05:18 +02:00
Satyajit Sahoo	2f74541811	fix: don't render badge on bottom tabs if not visible. closes #8577	2020-07-14 14:03:16 +02:00
Satyajit Sahoo	cf09f00472	chore: don't repeat comments for expo preview	2020-07-14 13:44:17 +02:00
Satyajit Sahoo	513482425a	chore: publish - @react-navigation/bottom-tabs@5.7.0 - @react-navigation/compat@5.2.0 - @react-navigation/core@5.12.0 - @react-navigation/devtools@5.1.2 - @react-navigation/drawer@5.8.5 - @react-navigation/material-bottom-tabs@5.2.13 - @react-navigation/material-top-tabs@5.2.13 - @react-navigation/native@5.7.0 - @react-navigation/routers@5.4.9 - @react-navigation/stack@5.7.0	2020-07-10 22:40:45 +02:00
Satyajit Sahoo	f4180295bf	feat: add a getComponent prop to lazily specify components	2020-07-10 22:33:13 +02:00
Satyajit Sahoo	c665c027a6	fix: tweak border color to match iOS default	2020-07-10 21:54:29 +02:00
Satyajit Sahoo	849e04ab6a	fix: fix bottom tab bar to match iOS defaults	2020-07-10 21:54:29 +02:00
Satyajit Sahoo	374b081b1c	fix: only remove non-existed routes from tab history. closes #8567	2020-07-10 21:54:29 +02:00
Satyajit Sahoo	96c7b688ce	feat: add support for badges to bottom tab bar	2020-07-10 21:54:29 +02:00
Satyajit Sahoo	e63580edbe	fix: improve the warning message for non-serializable values	2020-07-10 15:32:18 +02:00
Satyajit Sahoo	eea9860323	refactor: change format to formatter for documentTitle option	2020-07-10 13:07:47 +02:00
Satyajit Sahoo	13c9d1e281	feat: add a hook to update document title	2020-07-10 13:00:45 +02:00
osdnk	8f5286ef50	fix: ensure correct document title after going back on Chrome	2020-07-10 11:45:03 +02:00
Satyajit Sahoo	a255e350f9	fix: fix options event being emitted incorrectly (#8559 )	2020-07-09 15:47:27 +02:00
Satyajit Sahoo	7a74bdb24e	test: add test for merging params on navigation	2020-07-09 11:48:48 +02:00
Satyajit Sahoo	7c3a0a0f23	fix: mark some types as read-only	2020-07-09 11:07:14 +02:00
Satyajit Sahoo	bddb1f0046	chore: fix uploading test coverage to codecov	2020-07-08 12:49:03 +02:00
Satyajit Sahoo	c1521e81e8	chore: fix the lint script to be windows compatible	2020-07-02 16:53:35 +02:00
Satyajit Sahoo	bce6c4fc3b	chore: tweak types in the example	2020-07-02 16:52:45 +02:00
Satyajit Sahoo	6925e92dc3	feat: add a `beforeRemove` event A lot of times, we want to prompt before leaving a screen if we have unsaved changes. Currently, we need to handle multiple cases to prevent this: - Disable swipe gestures - Override the back button in header - Override the hardware back button on Android This PR adds a new event which is emitted before a screen gets removed, and the developer has a chance to ask the user before closing the screen. Example: ```js React.useEffect( () => navigation.addListener('beforeRemove', (e) => { if (!hasUnsavedChanges) { return; } e.preventDefault(); Alert.alert( 'Discard changes?', 'You have unsaved changes. Are you sure to discard them and leave the screen?', [ { text: "Don't leave", style: 'cancel', onPress: () => {} }, { text: 'Discard', style: 'destructive', onPress: () => navigation.dispatch(e.data.action), }, ] ); }), [navigation, hasUnsavedChanges] ); ```	2020-07-02 14:32:31 +02:00
Satyajit Sahoo	1801a13323	fix: avoid error setting warning for devtools migration. closes #8534	2020-07-02 14:14:56 +02:00
Satyajit Sahoo	9671c76c51	fix: fix bubbling actions to correct target when specified	2020-07-01 21:37:38 +02:00
Satyajit Sahoo	ec840692ec	refactor: make state getter hook more generic	2020-07-01 20:41:20 +02:00
Satyajit Sahoo	1cae93331d	refactor: consolidate action and focus listeners	2020-07-01 20:10:38 +02:00
Satyajit Sahoo	4edc2a64e2	chore: limit number of jest workers on circle ci	2020-06-30 18:34:43 +02:00
Satyajit Sahoo	75c99b5a12	chore: add missing babel-loader	2020-06-30 18:23:04 +02:00
Satyajit Sahoo	9ba2f84d18	test: add basic unit tests for all navigators	2020-06-30 16:14:52 +02:00
Satyajit Sahoo	2477db47a0	chore: publish - @react-navigation/bottom-tabs@5.6.1 - @react-navigation/compat@5.1.28 - @react-navigation/core@5.11.1 - @react-navigation/devtools@5.1.1 - @react-navigation/drawer@5.8.4 - @react-navigation/material-bottom-tabs@5.2.12 - @react-navigation/material-top-tabs@5.2.12 - @react-navigation/native@5.6.1 - @react-navigation/stack@5.6.2	2020-06-25 17:31:40 +02:00
Satyajit Sahoo	d1210a861b	fix: fix error with type definitions. closes #8511	2020-06-25 17:27:48 +02:00
Satyajit Sahoo	c4d2a8a828	chore: publish - @react-navigation/stack@5.6.1	2020-06-25 11:45:59 +02:00
Satyajit Sahoo	fc95d7a256	fix: fix showing back button with headerMode=screen. fixes #8508	2020-06-25 11:42:19 +02:00
Satyajit Sahoo	978b197446	chore: publish - @react-navigation/bottom-tabs@5.6.0 - @react-navigation/compat@5.1.27 - @react-navigation/core@5.11.0 - @react-navigation/devtools@5.1.0 - @react-navigation/drawer@5.8.3 - @react-navigation/material-bottom-tabs@5.2.11 - @react-navigation/material-top-tabs@5.2.11 - @react-navigation/native@5.6.0 - @react-navigation/routers@5.4.8 - @react-navigation/stack@5.6.0	2020-06-24 22:29:01 +02:00
Satyajit Sahoo	c65f9ef1a9	fix: make sure we don't miss dimensions updates	2020-06-24 22:09:00 +02:00
Satyajit Sahoo	d85d27c432	fix: fix forward with history API. closes #8409	2020-06-24 21:50:30 +02:00
Satyajit Sahoo	f00091d7ab	refactor: use ts-expect-errpr instead of ts-ignore	2020-06-24 20:07:32 +02:00
Satyajit Sahoo	67cd44d24b	refactor: handle unhandled action in container	2020-06-24 17:09:06 +02:00
Satyajit Sahoo	a021cfb8af	feat: rework linking configuration to be more strict (#8502 ) The PR changes a few things about linking configuration: - Moves the configuration for screens to a screens property so that it's possible to specify other options like `initialRouteName` for the navigator at root - The nesting in the configuration needs to strictly match the shape of the navigation tree, it can't just rely on URL's shape anymore - If a screen is not specified in the configuration, it won't be parsed to/from the URL (this is essential to handle unmatched screens) - Treat `path: ''` and no specified path in the same way, unless `exact` is specified - Disallow specifying unmatched screen with old format - Add support for `initialRouteName` at top level - Automatically adapt old configuration to new format	2020-06-24 16:54:24 +02:00
Satyajit Sahoo	a2d649faf1	feat: show back button in nested stack	2020-06-24 12:45:40 +02:00
Attila Szabo	1024a86a07	docs: updated description for drawer (#8497 ) Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>	2020-06-23 22:21:10 +02:00
Satyajit Sahoo	c94d79d3a5	chore: add a sponsorship button to the repo	2020-06-23 22:15:00 +02:00
Satyajit Sahoo	37bbbbe869	fix: workaround keyboard dismissing on focus closes #8414, closes #8478	2020-06-23 19:17:03 +02:00
Steven Conaway	84aea698f2	docs: fix grammar issue in a readme	2020-06-22 16:23:20 +02:00
Satyajit Sahoo	8177c45d14	feat: add an onReady callback to the container (#8491 )	2020-06-22 14:03:57 +02:00
Satyajit Sahoo	16128199ed	fix: remove broken showIcon option from bottom-tabs	2020-06-22 12:05:05 +02:00
Satyajit Sahoo	ea5affd914	fix: use interpolateNode in drawer to support Reanimated 2	2020-06-22 11:45:52 +02:00
Satyajit Sahoo	d2444887be	fix: more improvements to types	2020-06-22 11:45:52 +02:00
Wojciech Lewicki	962456beb6	fix: fix screen disappearing on Android (#8473 ) Added `collapsable={false}` to the View in order for the Android to render screens properly. This issue is most probably similar to `9c06a92d09` but fixes it on Android since the View seems to be removed from a native view hierarchy due to not drawing anything. To see the bug go to https://github.com/software-mansion/react-native-screens/issues/544.	2020-06-19 19:38:32 +02:00
Satyajit Sahoo	1aadc79fb8	refactor: enforce import type everywhere	2020-06-17 12:05:40 +02:00
Satyajit Sahoo	b14fd9453d	chore: better check versions action	2020-06-16 22:44:03 +02:00
Satyajit Sahoo	cc3728fc95	chore: tweak repository field in package.json. closes #8423	2020-06-16 21:46:09 +02:00
Satyajit Sahoo	bf1ee2d9ff	chore: master -> main	2020-06-16 21:42:22 +02:00
Satyajit Sahoo	6730690529	fix: fix getCurrentOptions for nested screens	2020-06-16 15:38:09 +02:00
Satyajit Sahoo	afc83eedf8	fix: fix getCurrentOptions for nested screens	2020-06-16 15:27:15 +02:00
Satyajit Sahoo	24e4333ec6	chore: update github workflows	2020-06-16 14:05:27 +02:00
Guilherme Pacheco	4480d2fe04	feat: add iconStyle prop to bottom tab bar options (#8188 ) Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>	2020-06-15 19:11:03 +02:00
Satyajit Sahoo	33476b9cb5	refactor: tweak type for screen options	2020-06-15 18:34:08 +02:00
Satyajit Sahoo	07c30b2847	refactor: tweak types for bottom tab bar	2020-06-15 18:01:37 +02:00
Michał Osadnik	fe3f98eb9c	feat: add event for options on container (#8334 )	2020-06-15 17:56:01 +02:00
Kang Byung Seon	35d6b9e3a4	fix: don't use deprecated currentlyFocusedField (#8365 ) Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>	2020-06-15 15:12:56 +02:00
Satyajit Sahoo	95b044ecf9	feat: add devtools package (#8436 ) The `devtools` package extracts the redux devtools extension integration to a separate package. In future we can add more tools such as flipper integration to this package. Usage: ```js import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { useReduxDevToolsExtension } from '@react-navigation/devtools'; export default function App() { const navigationRef = React.useRef(); useReduxDevToolsExtension(navigationRef); return ( <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer> ); } ```	2020-06-15 13:53:17 +02:00
Satyajit Sahoo	f51f9c8493	feat: add helper to get focused route name from nested state (#8435 ) Currently, to access the focused child screen, we need to do something like this: ```js const routeName = route.state ? route.state.routes[route.state.index].name : route.params?.screen \|\| 'Feed'; ``` However, it doesn't handle some cases, such as when `route.state` is partial. This helper will make it easier: ```js const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed'; ```	2020-06-15 13:52:38 +02:00
Rajendran Nadar	e000138fe5	chore: add v5 package versions in readme (#8413 )	2020-06-15 10:13:44 +02:00
Satyajit Sahoo	5042c86a09	chore: upgrade depenendecies	2020-06-12 18:37:40 +02:00
Satyajit Sahoo	34c907ec0a	chore: publish - @react-navigation/stack@5.5.1	2020-06-08 11:21:27 +02:00
Satyajit Sahoo	1ae07af796	fix: make sure the header is on top of the view	2020-06-08 11:17:53 +02:00
Satyajit Sahoo	220af93db5	chore: publish - @react-navigation/stack@5.5.0	2020-06-08 10:56:32 +02:00
Satyajit Sahoo	1f27e4b1f6	fix: ignore onOpen from route that wasn't closing closes #8257	2020-06-08 10:48:04 +02:00
Satyajit Sahoo	9c06a92d09	fix: fix blank screen with animationEnabled: false & headerShown: false closes #8391	2020-06-08 10:17:02 +02:00
Satyajit Sahoo	e0e0f79793	feat: automatically hide header in nested stacks	2020-06-08 08:14:34 +02:00
Jeroen Verfallie	c7e4bf94e6	fix: pass gestureRef to PanGestureHandlerNative (#8394 ) In the current implementation the ref is unused, resulting in a constant `current: {null}` on the context.	2020-06-08 08:05:59 +02:00
Satyajit Sahoo	7024d4bb81	docs: fix comment about headerBacktitleVisible	2020-06-08 01:47:09 +02:00