chore: publish

- @react-navigation/bottom-tabs@5.10.6
 - @react-navigation/compat@5.3.6
 - @react-navigation/core@5.14.0
 - @react-navigation/devtools@5.1.14
 - @react-navigation/drawer@5.10.6
 - @react-navigation/material-bottom-tabs@5.3.6
 - @react-navigation/material-top-tabs@5.3.6
 - @react-navigation/native@5.8.6
 - @react-navigation/routers@5.6.0
 - @react-navigation/stack@5.12.3

.circleci/config.yml

@@ -87,6 +87,9 @@ jobs:
       - run:
           name: Build packages in the monorepo
           command: yarn lerna run prepare
+      - run:
+          name: Verify built type definitions are correct
+          command: yarn typescript
       - run:
           name: Verify paths for types
           command: node scripts/check-types-path.js

.github/workflows/expo.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
 
 jobs:
   publish:

.github/workflows/triage.yml

@@ -16,7 +16,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help.\n\nMake sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.)."
+              body: "Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can to be able to help.\n\nMake sure to at least provide - Current behaviour, Expected behaviour, A way to [reproduce the issue with minimal code](https://stackoverflow.com/help/minimal-reproducible-example) (link to [snack.expo.io](https://snack.expo.io)) or a repo on GitHub, and the information about your environment (such as the platform of the device, exact versions of all the packages mentioned in the template etc.). In addition, if you can provide a video or GIF demonstrating the issue, it will also be very helpful."
             })
 
   needs-repro:
@@ -76,7 +76,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `native-stack` navigator or `react-native-screens` library. Please post your issue in [this repo](https://github.com/software-mansion/react-native-screens) so that it's notified to the maintainers of that library."
+              body: "Hey! Thanks for opening the issue. Seems that this issue issue related to `react-native-screens` library which is a dependency of React Navigation. Can you also post your issue in [this repo](https://github.com/software-mansion/react-native-screens) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
             })
 
   react-native-reanimated:
@@ -91,7 +91,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `react-native-reanimated` library. Please post your issue in [this repo](https://github.com/software-mansion/react-native-reanimated) so that it's notified to the maintainers of that library."
+              body: "Hey! Thanks for opening the issue. Seems that this issue issue related to `react-native-reanimated` library which is a dependency of React Navigation. Can you also post your issue in [this repo](https://github.com/software-mansion/react-native-reanimated) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
             })
 
   react-native-gesture-handler:
@@ -106,7 +106,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `react-native-gesture-handler` library. Please post your issue in [this repo](https://github.com/software-mansion/react-native-gesture-handler) so that it's notified to the maintainers of that library."
+              body: "Hey! Thanks for opening the issue. Seems that this issue issue related to `react-native-gesture-handler` library which is a dependency of React Navigation. Can you also post your issue in [this repo](https://github.com/software-mansion/react-native-gesture-handler) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
             })
 
   react-native-safe-area-context:
@@ -121,5 +121,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports in React Navigation. Seems you have an issue related to `react-native-safe-area-context` library. Please post your issue in [this repo](https://github.com/th3rdwave/react-native-safe-area-context) so that it's notified to the maintainers of that library."
+              body: "Hey! Thanks for opening the issue. Seems that this issue issue related to `react-native-safe-area-context` library which is a dependency of React Navigation. Can you also post your issue in [this repo](https://github.com/th3rdwave/react-native-safe-area-context) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
             })

example/app.json

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

example/package.json

@@ -14,13 +14,14 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
+    "@react-native-async-storage/async-storage": "^1.13.1",
     "@react-native-community/masked-view": "0.1.10",
-    "color": "^3.1.2",
+    "color": "^3.1.3",
     "expo": "^39.0.0",
     "expo-asset": "~8.2.0",
     "expo-blur": "~8.2.0",
     "expo-linking": "^1.0.4",
-    "expo-updates": "~0.3.3",
+    "expo-updates": "~0.3.5",
     "koa": "^2.13.0",
     "react": "~16.13.1",
     "react-dom": "~16.13.1",
@@ -31,30 +32,30 @@
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
-    "react-native-tab-view": "^2.15.1",
+    "react-native-tab-view": "^2.15.2",
     "react-native-vector-icons": "^7.0.0",
-    "react-native-web": "^0.13.13"
+    "react-native-web": "^0.13.16"
   },
   "devDependencies": {
-    "@babel/node": "^7.10.1",
-    "@expo/webpack-config": "^0.12.21",
-    "@types/cheerio": "^0.22.21",
+    "@babel/node": "^7.12.1",
+    "@expo/webpack-config": "^0.12.40",
+    "@types/cheerio": "^0.22.22",
     "@types/jest-dev-server": "^4.2.0",
-    "@types/koa": "^2.11.4",
+    "@types/koa": "^2.11.6",
     "@types/node-fetch": "^2.5.7",
-    "@types/react": "~16.9.35",
+    "@types/react": "~16.9.53",
     "@types/react-dom": "^16.9.8",
-    "@types/react-native": "~0.63.2",
+    "@types/react-native": "~0.63.30",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "^8.3.0",
     "cheerio": "^1.0.0-rc.3",
-    "expo-cli": "^3.27.7",
-    "jest": "^26.4.2",
+    "expo-cli": "^3.28.2",
+    "jest": "^26.6.1",
     "jest-dev-server": "^4.4.0",
     "mock-require-assets": "^0.0.1",
     "node-fetch": "^2.6.1",
-    "nodemon": "^2.0.4",
+    "nodemon": "^2.0.6",
     "playwright": "^0.14.0",
     "serve": "^11.3.0",
     "typescript": "^4.0.3"

example/src/AsyncStorage.native.tsx

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

example/src/AsyncStorage.tsx

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

example/src/Screens/AuthFlow.tsx

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

example/src/Screens/BottomTabs.tsx

@@ -5,6 +5,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import {
   getFocusedRouteNameFromRoute,
   ParamListBase,
+  NavigatorScreenParams,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import {
@@ -15,7 +16,7 @@ import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
-import SimpleStackScreen from './SimpleStack';
+import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({
   color,
@@ -26,7 +27,7 @@ const getTabBarIcon = (name: string) => ({
 }) => <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {
-  Article: undefined;
+  Article: NavigatorScreenParams<SimpleStackParams>;
   Albums: undefined;
   Contacts: undefined;
   Chat: undefined;

example/src/Screens/LinkComponent.tsx

@@ -25,18 +25,9 @@ const LinkButton = ({
   to,
   ...rest
 }: React.ComponentProps<typeof Button> & { to: string }) => {
-  const { onPress, ...props } = useLinkProps({ to });
+  const props = useLinkProps({ to });
 
-  return (
-    <Button
-      {...props}
-      {...rest}
-      {...Platform.select({
-        web: { onClick: onPress } as any,
-        default: { onPress },
-      })}
-    />
-  );
+  return <Button {...props} {...rest} />;
 };
 
 const ArticleScreen = ({

example/src/Screens/MaterialBottomTabs.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
+import type { NavigatorScreenParams } from '@react-navigation/native';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
-import SimpleStackScreen from './SimpleStack';
+import SimpleStackScreen, { SimpleStackParams } from './SimpleStack';
 
 type MaterialBottomTabParams = {
-  Article: undefined;
+  Article: NavigatorScreenParams<SimpleStackParams>;
   Albums: undefined;
   Contacts: undefined;
   Chat: undefined;

example/src/Screens/SimpleStack.tsx

@@ -10,7 +10,7 @@ import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 import NewsFeed from '../Shared/NewsFeed';
 
-type SimpleStackParams = {
+export type SimpleStackParams = {
   Article: { author: string } | undefined;
   NewsFeed: { date: number };
   Albums: undefined;

example/src/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
   ScrollView,
-  YellowBox,
   Platform,
   StatusBar,
   I18nManager,
   Dimensions,
   ScaledSize,
   Linking,
+  LogBox,
 } from 'react-native';
 import { enableScreens } from 'react-native-screens';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
@@ -38,9 +38,9 @@ import {
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { restartApp } from './Restart';
-import AsyncStorage from './AsyncStorage';
 import LinkingPrefixes from './LinkingPrefixes';
 import SettingsItem from './Shared/SettingsItem';
 import SimpleStack from './Screens/SimpleStack';
@@ -58,7 +58,9 @@ import PreventRemove from './Screens/PreventRemove';
 import CompatAPI from './Screens/CompatAPI';
 import LinkComponent from './Screens/LinkComponent';
 
-YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
+if (Platform.OS !== 'web') {
+  LogBox.ignoreLogs(['Require cycle:']);
+}
 
 enableScreens();
 

package.json

@@ -26,14 +26,14 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@types/jest": "^26.0.14",
-    "babel-jest": "^26.3.0",
-    "codecov": "^3.7.2",
+    "@types/jest": "^26.0.15",
+    "babel-jest": "^26.6.1",
+    "codecov": "^3.8.0",
     "commitlint": "^11.0.0",
-    "eslint": "^7.9.0",
+    "eslint": "^7.12.0",
     "eslint-config-satya164": "^3.1.8",
     "husky": "^4.3.0",
-    "jest": "^26.4.2",
+    "jest": "^26.6.1",
     "lerna": "^3.22.1",
     "metro-react-native-babel-preset": "^0.63.0",
     "prettier": "^2.1.2",

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.10.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.5...@react-navigation/bottom-tabs@5.10.6) (2020-11-04)
+
+
+### Bug Fixes
+
+* disable react-native-screens on iOS for older versions ([ce7d20e](https://github.com/react-navigation/react-navigation/commit/ce7d20e3366415b07a537e01ee0b17ce7e72cad6))
+
+
+
+
+
+## [5.10.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.4...@react-navigation/bottom-tabs@5.10.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.3...@react-navigation/bottom-tabs@5.10.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.2...@react-navigation/bottom-tabs@5.10.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.1...@react-navigation/bottom-tabs@5.10.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+## [5.10.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.10.0...@react-navigation/bottom-tabs@5.10.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.10.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.9.2...@react-navigation/bottom-tabs@5.10.0) (2020-10-24)
+
+
+### Features
+
+* add optional screens per navigator ([#8805](https://github.com/react-navigation/react-navigation/issues/8805)) ([7196889](https://github.com/react-navigation/react-navigation/commit/7196889bf1218eb6a736d9475e33a909c2248c3b))
+* add sceneContainerStyle prop to bottom-tabs navigator ([#8947](https://github.com/react-navigation/react-navigation/issues/8947)) ([f01bb48](https://github.com/react-navigation/react-navigation/commit/f01bb4834b01e13ab9a6b220328349f77ca49428))
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.9.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.9.1...@react-navigation/bottom-tabs@5.9.2) (2020-10-07)
+
+
+### Bug Fixes
+
+* use route keys instead of index for lazy load ([c49dab3](https://github.com/react-navigation/react-navigation/commit/c49dab31b2c63a1735f0ed0a1936ecf7bbcd8b13))
+
+
+
+
+
 ## [5.9.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@5.9.0...@react-navigation/bottom-tabs@5.9.1) (2020-09-28)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.9.1",
+  "version": "5.10.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,16 +36,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "color": "^3.1.2",
-    "react-native-iphone-x-helper": "^1.2.1"
+    "color": "^3.1.3",
+    "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.7.5",
-    "@testing-library/react-native": "^7.0.2",
+    "@react-navigation/native": "^5.8.6",
+    "@testing-library/react-native": "^7.1.0",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.49",
-    "@types/react-native": "^0.63.20",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",

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

@@ -6,6 +6,8 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  TabActionHelpers,
+  ParamListBase,
 } from '@react-navigation/native';
 import BottomTabView from '../views/BottomTabView';
 import type {
@@ -23,11 +25,13 @@ function BottomTabNavigator({
   backBehavior,
   children,
   screenOptions,
+  sceneContainerStyle,
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
     BottomTabNavigationOptions,
     BottomTabNavigationEventMap
   >(TabRouter, {
@@ -43,12 +47,13 @@ function BottomTabNavigator({
       state={state}
       navigation={navigation}
       descriptors={descriptors}
+      sceneContainerStyle={sceneContainerStyle}
     />
   );
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,
   typeof BottomTabNavigator

packages/bottom-tabs/src/types.tsx

@@ -33,7 +33,8 @@ export type LabelPosition = 'beside-icon' | 'below-icon';
 export type BottomTabNavigationHelpers = NavigationHelpers<
   ParamListBase,
   BottomTabNavigationEventMap
->;
+> &
+  TabActionHelpers<ParamListBase>;
 
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
@@ -41,7 +42,7 @@ export type BottomTabNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  TabNavigationState,
+  TabNavigationState<ParamList>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap
 > &
@@ -148,7 +149,7 @@ export type BottomTabNavigationOptions = {
 export type BottomTabDescriptor = Descriptor<
   ParamListBase,
   string,
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions
 >;
 
@@ -170,6 +171,16 @@ export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
    * Options for the tab bar which will be passed as props to the tab bar component.
    */
   tabBarOptions?: T;
+  /**
+   * Whether inactive screens should be detached from the view hierarchy to save memory.
+   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
+   * Defaults to `true` on Android.
+   */
+  detachInactiveScreens?: boolean;
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
 };
 
 export type BottomTabBarOptions = {
@@ -240,7 +251,7 @@ export type BottomTabBarOptions = {
 };
 
 export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   descriptors: BottomTabDescriptorMap;
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
 };

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 
 import {
   NavigationHelpersContext,
+  ParamListBase,
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
@@ -19,21 +20,23 @@ import type {
 } from '../types';
 
 type Props = BottomTabNavigationConfig & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   navigation: BottomTabNavigationHelpers;
   descriptors: BottomTabDescriptorMap;
 };
 
 type State = {
-  loaded: number[];
+  loaded: string[];
 };
 
 function SceneContent({
   isFocused,
   children,
+  style,
 }: {
   isFocused: boolean;
   children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
 }) {
   const { colors } = useTheme();
 
@@ -41,7 +44,7 @@ function SceneContent({
     <View
       accessibilityElementsHidden={!isFocused}
       importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
-      style={[styles.content, { backgroundColor: colors.background }]}
+      style={[styles.content, { backgroundColor: colors.background }, style]}
     >
       {children}
     </View>
@@ -54,18 +57,18 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    const { index } = nextProps.state;
+    const focusedRouteKey = nextProps.state.routes[nextProps.state.index].key;
 
     return {
       // Set the current tab to be loaded if it was not loaded before
-      loaded: prevState.loaded.includes(index)
+      loaded: prevState.loaded.includes(focusedRouteKey)
         ? prevState.loaded
-        : [...prevState.loaded, index],
+        : [...prevState.loaded, focusedRouteKey],
     };
   }
 
-  state = {
-    loaded: [this.props.state.index],
+  state: State = {
+    loaded: [this.props.state.routes[this.props.state.index].key],
   };
 
   private renderTabBar = () => {
@@ -85,7 +88,14 @@ export default class BottomTabView extends React.Component<Props, State> {
   };
 
   render() {
-    const { state, descriptors, navigation, lazy } = this.props;
+    const {
+      state,
+      descriptors,
+      navigation,
+      lazy,
+      detachInactiveScreens = true,
+      sceneContainerStyle,
+    } = this.props;
     const { routes } = state;
     const { loaded } = this.state;
 
@@ -93,7 +103,11 @@ export default class BottomTabView extends React.Component<Props, State> {
       <NavigationHelpersContext.Provider value={navigation}>
         <SafeAreaProviderCompat>
           <View style={styles.container}>
-            <ScreenContainer style={styles.pages}>
+            <ScreenContainer
+              // @ts-ignore
+              enabled={detachInactiveScreens}
+              style={styles.pages}
+            >
               {routes.map((route, index) => {
                 const descriptor = descriptors[route.key];
                 const { unmountOnBlur } = descriptor.options;
@@ -103,7 +117,7 @@ export default class BottomTabView extends React.Component<Props, State> {
                   return null;
                 }
 
-                if (lazy && !loaded.includes(index) && !isFocused) {
+                if (lazy && !loaded.includes(route.key) && !isFocused) {
                   // Don't render a screen if we've never navigated to it
                   return null;
                 }
@@ -113,8 +127,12 @@ export default class BottomTabView extends React.Component<Props, State> {
                     key={route.key}
                     style={StyleSheet.absoluteFill}
                     isVisible={isFocused}
+                    enabled={detachInactiveScreens}
                   >
-                    <SceneContent isFocused={isFocused}>
+                    <SceneContent
+                      isFocused={isFocused}
+                      style={sceneContainerStyle}
+                    >
                       {descriptor.render()}
                     </SceneContent>
                   </ResourceSavingScene>

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

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-import { Screen, screensEnabled } from 'react-native-screens';
+import {
+  Screen,
+  screensEnabled,
+  // @ts-ignore
+  shouldUseActivityState,
+} from 'react-native-screens';
 
 type Props = {
   isVisible: boolean;
   children: React.ReactNode;
+  enabled: boolean;
   style?: any;
 };
 
@@ -16,8 +22,17 @@ export default class ResourceSavingScene extends React.Component<Props> {
     if (screensEnabled?.() && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
-      // @ts-expect-error: stackPresentation is incorrectly marked as required
-      return <Screen active={isVisible ? 1 : 0} {...rest} />;
+      if (shouldUseActivityState) {
+        return (
+          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+          <Screen activityState={isVisible ? 2 : 0} {...rest} />
+        );
+      } else {
+        return (
+          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+          <Screen active={isVisible ? 1 : 0} {...rest} />
+        );
+      }
     }
 
     const { isVisible, children, style, ...rest } = this.props;

packages/compat/CHANGELOG.md

@@ -3,6 +3,74 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.5...@react-navigation/compat@5.3.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.4...@react-navigation/compat@5.3.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.3...@react-navigation/compat@5.3.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.2...@react-navigation/compat@5.3.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.1...@react-navigation/compat@5.3.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.3.0...@react-navigation/compat@5.3.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.8...@react-navigation/compat@5.3.0) (2020-10-24)
+
+
+### Features
+
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.2.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.7...@react-navigation/compat@5.2.8) (2020-10-07)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.2.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/compat@5.2.6...@react-navigation/compat@5.2.7) (2020-09-28)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.2.7",
+  "version": "5.3.6",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.7.5",
-    "@types/react": "^16.9.49",
+    "@react-navigation/native": "^5.8.6",
+    "@types/react": "^16.9.53",
     "react": "~16.13.1",
     "typescript": "^4.0.3"
   },

packages/compat/src/createCompatNavigationProp.tsx

@@ -19,7 +19,11 @@ type EventName =
 export default function createCompatNavigationProp<
   NavigationPropType extends NavigationProp<ParamListBase>,
   ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
-    infer P
+    infer P,
+    any,
+    any,
+    any,
+    any
   >
     ? P
     : ParamListBase

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -32,7 +32,11 @@ export default function createCompatNavigatorFactory<
   const createCompatNavigator = <
     NavigationPropType extends NavigationProp<any, any, any, any, any>,
     ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
-      infer P
+      infer P,
+      any,
+      any,
+      any,
+      any
     >
       ? P
       : ParamListBase,

packages/compat/src/createSwitchNavigator.tsx

@@ -5,6 +5,8 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  TabActionHelpers,
+  ParamListBase,
 } from '@react-navigation/native';
 import createCompatNavigatorFactory from './createCompatNavigatorFactory';
 
@@ -12,17 +14,21 @@ type Props = DefaultNavigatorOptions<{}> & TabRouterOptions;
 
 function SwitchNavigator(props: Props) {
   const { state, descriptors } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
     {},
-    {}
+    {},
+    TabActionHelpers<ParamListBase>
   >(TabRouter, props);
 
   return descriptors[state.routes[state.index].key].render();
 }
 
 export default createCompatNavigatorFactory(
-  createNavigatorFactory<TabNavigationState, {}, {}, typeof SwitchNavigator>(
-    SwitchNavigator
-  )
+  createNavigatorFactory<
+    TabNavigationState<ParamListBase>,
+    {},
+    {},
+    typeof SwitchNavigator
+  >(SwitchNavigator)
 );

packages/compat/src/types.tsx

@@ -8,7 +8,11 @@ import type * as helpers from './helpers';
 export type CompatNavigationProp<
   NavigationPropType extends NavigationProp<ParamListBase>,
   ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
-    infer P
+    infer P,
+    any,
+    any,
+    any,
+    any
   >
     ? P
     : ParamListBase,
@@ -67,7 +71,11 @@ export type CompatScreenType<
 export type CompatRouteConfig<
   NavigationPropType extends NavigationProp<ParamListBase>,
   ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
-    infer P
+    infer P,
+    any,
+    any,
+    any,
+    any
   >
     ? P
     : ParamListBase

packages/core/CHANGELOG.md

@@ -3,6 +3,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.14.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.5...@react-navigation/core@5.14.0) (2020-11-04)
+
+
+### Bug Fixes
+
+* always respect key in the route object when generating action ([cb2e744](https://github.com/react-navigation/react-navigation/commit/cb2e744dcebf7f71ddaa5462d393a6dbfd971fcd))
+
+
+### Features
+
+* add a NavigatorScreenParams type. closes [#6931](https://github.com/react-navigation/react-navigation/issues/6931) ([e3e58c2](https://github.com/react-navigation/react-navigation/commit/e3e58c2d890e7fab75d78371e349aea55a402fcd))
+* add warning on accessing the state object on route prop ([ec7b02a](https://github.com/react-navigation/react-navigation/commit/ec7b02af2ca835122b9000799e2366d7009da6e3))
+
+
+
+
+
+## [5.13.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.4...@react-navigation/core@5.13.5) (2020-11-04)
+
+
+### Bug Fixes
+
+* don't use use-subscription to avoid peer dep related errors ([66f3a4a](https://github.com/react-navigation/react-navigation/commit/66f3a4a0bb39475434668bc94fb1750dbe618ee0)), closes [/github.com/react-navigation/react-navigation/issues/9021#issuecomment-721679760](https://github.com//github.com/react-navigation/react-navigation/issues/9021/issues/issuecomment-721679760)
+* use useDebugValue in more places ([b20f2d1](https://github.com/react-navigation/react-navigation/commit/b20f2d1f7ccb82db70df9cddf5746557912daa99))
+
+
+
+
+
+## [5.13.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.3...@react-navigation/core@5.13.4) (2020-11-03)
+
+
+### Bug Fixes
+
+* fix nested navigation not working the first time ([ebc7f9e](https://github.com/react-navigation/react-navigation/commit/ebc7f9ea75bbf6e3b6303027cfa023d7c97342ff))
+
+
+
+
+
+## [5.13.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.2...@react-navigation/core@5.13.3) (2020-11-03)
+
+
+### Bug Fixes
+
+* handle navigating to same screen again for nested screens ([0945689](https://github.com/react-navigation/react-navigation/commit/0945689b70d71a4b5d766c61d57009761c460bf6))
+
+
+
+
+
+## [5.13.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.1...@react-navigation/core@5.13.2) (2020-10-30)
+
+
+### Bug Fixes
+
+* fix params from for the root screen when creating action ([e8515f9](https://github.com/react-navigation/react-navigation/commit/e8515f9cd94a912c107a407dea3d953c4172393f)), closes [#9006](https://github.com/react-navigation/react-navigation/issues/9006)
+* trim routes if an index is specified in state ([fb7ac96](https://github.com/react-navigation/react-navigation/commit/fb7ac960c8e1ffca200ecb12696ce5531a139e50))
+
+
+
+
+
+## [5.13.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.13.0...@react-navigation/core@5.13.1) (2020-10-28)
+
+
+### Bug Fixes
+
+* improve types for route prop in screenOptions ([d26bcc0](https://github.com/react-navigation/react-navigation/commit/d26bcc057ef31f8950f909adf83e263171a42d74))
+
+
+
+
+
+# [5.13.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.5...@react-navigation/core@5.13.0) (2020-10-24)
+
+
+### Bug Fixes
+
+* fix imports from query-string. closes [#8971](https://github.com/react-navigation/react-navigation/issues/8971) ([#8976](https://github.com/react-navigation/react-navigation/issues/8976)) ([261a33a](https://github.com/react-navigation/react-navigation/commit/261a33a0d03150c87b06f01aeace4926b1c03eb6))
+
+
+### Features
+
+* add an unhandled action listener ([#8895](https://github.com/react-navigation/react-navigation/issues/8895)) ([80ff5a9](https://github.com/react-navigation/react-navigation/commit/80ff5a9c543a44fa2fd7ba7fda0598f1b0d52a64))
+* allow deep linking to reset state ([#8973](https://github.com/react-navigation/react-navigation/issues/8973)) ([7f3b27a](https://github.com/react-navigation/react-navigation/commit/7f3b27a9ec8edd9604ac19774baa1f60963ccdc9)), closes [#8952](https://github.com/react-navigation/react-navigation/issues/8952)
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.12.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.4...@react-navigation/core@5.12.5) (2020-10-07)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
 ## [5.12.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@5.12.3...@react-navigation/core@5.12.4) (2020-09-22)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.12.4",
+  "version": "5.14.0",
   "keywords": [
     "react",
     "react-native",
@@ -35,19 +35,17 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.4.12",
+    "@react-navigation/routers": "^5.6.0",
     "escape-string-regexp": "^4.0.0",
-    "nanoid": "^3.1.12",
-    "query-string": "^6.13.1",
-    "react-is": "^16.13.0",
-    "use-subscription": "^1.4.0"
+    "nanoid": "^3.1.15",
+    "query-string": "^6.13.6",
+    "react-is": "^16.13.0"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@testing-library/react-native": "^7.0.2",
-    "@types/react": "^16.9.49",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/react": "^16.9.53",
     "@types/react-is": "^16.7.1",
-    "@types/use-subscription": "^1.0.0",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-test-renderer": "~16.13.1",

packages/core/src/BaseNavigationContainer.tsx

@@ -94,6 +94,7 @@ const BaseNavigationContainer = React.forwardRef(
     {
       initialState,
       onStateChange,
+      onUnhandledAction,
       independent,
       children,
     }: NavigationContainerProps,
@@ -342,51 +343,56 @@ const BaseNavigationContainer = React.forwardRef(
       isFirstMountRef.current = false;
     }, [getRootState, emitter, state]);
 
-    const onUnhandledAction = React.useCallback((action: NavigationAction) => {
-      if (process.env.NODE_ENV === 'production') {
-        return;
-      }
+    const defaultOnUnhandledAction = React.useCallback(
+      (action: NavigationAction) => {
+        if (process.env.NODE_ENV === 'production') {
+          return;
+        }
 
-      const payload: Record<string, any> | undefined = action.payload;
+        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.`;
+        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.`;
-          }
+        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;
-      }
+            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.`;
+        message += `\n\nThis is a development-only warning and won't be shown in production.`;
 
-      console.error(message);
-    }, []);
+        console.error(message);
+      },
+      []
+    );
 
     return (
       <ScheduleUpdateContext.Provider value={scheduleContext}>
         <NavigationBuilderContext.Provider value={builderContext}>
           <NavigationStateContext.Provider value={context}>
-            <UnhandledActionContext.Provider value={onUnhandledAction}>
+            <UnhandledActionContext.Provider
+              value={onUnhandledAction ?? defaultOnUnhandledAction}
+            >
               <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
             </UnhandledActionContext.Provider>
           </NavigationStateContext.Provider>

packages/core/src/SceneView.tsx

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

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

@@ -721,3 +721,39 @@ it("throws if the ref hasn't finished initializing", () => {
 
   render(element);
 });
+
+it('invokes the unhandled action listener with the unhandled action', () => {
+  const ref = React.createRef<NavigationContainerRef>();
+  const fn = jest.fn();
+
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return (
+      <React.Fragment>
+        {state.routes.map((route) => descriptors[route.key].render())}
+      </React.Fragment>
+    );
+  };
+
+  const TestScreen = () => <></>;
+
+  render(
+    <BaseNavigationContainer ref={ref} onUnhandledAction={fn}>
+      <TestNavigator>
+        <Screen name="foo" component={TestScreen} />
+        <Screen name="bar" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  act(() => ref.current!.navigate('bar'));
+  act(() => ref.current!.navigate('baz'));
+
+  expect(fn).toHaveBeenCalledWith({
+    payload: {
+      name: 'baz',
+    },
+    type: 'NAVIGATE',
+  });
+});

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

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

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

@@ -43,11 +43,58 @@ it('gets navigate action from state', () => {
     },
     type: 'NAVIGATE',
   });
+});
 
-  expect(
-    getActionFromState({
+it('gets navigate action from state for top-level screen', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: { answer: 42 },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets reset action from state with 1 route with key at root', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        key: 'test',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    key: 'test',
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
       routes: [
         {
+          key: 'test',
           name: 'foo',
           state: {
             routes: [
@@ -55,11 +102,7 @@ it('gets navigate action from state', () => {
                 name: 'bar',
                 state: {
                   routes: [
-                    {
-                      name: 'qux',
-                      params: { author: 'jane' },
-                    },
-                    { name: 'quz' },
+                    { key: 'test', name: 'qux', params: { author: 'jane' } },
                   ],
                 },
               },
@@ -67,8 +110,459 @@ it('gets navigate action from state', () => {
           },
         },
       ],
-    })
-  ).toEqual({
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets reset action from state for top-level screen with 2 screens', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      routes: [
+        {
+          name: 'foo',
+          params: { answer: 42 },
+        },
+        {
+          name: 'bar',
+          params: { author: 'jane' },
+        },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets reset action from state for top-level screen with more than 2 screens with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+      { name: 'baz' },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      routes: [
+        {
+          name: 'foo',
+          params: { answer: 42 },
+        },
+        {
+          name: 'bar',
+          params: { author: 'jane' },
+        },
+        { name: 'baz' },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets reset action from state for top-level screen with 2 screens with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        key: 'test',
+        params: { author: 'jane' },
+      },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      routes: [
+        {
+          name: 'foo',
+          params: { answer: 42 },
+        },
+        {
+          name: 'bar',
+          key: 'test',
+          params: { author: 'jane' },
+        },
+      ],
+    },
+    type: 'RESET',
+  });
+});
+
+it('gets navigate action from state for top-level screen with 2 screens with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'bar',
+      params: { author: 'jane' },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state for top-level screen with more than 2 screens with config with lower index', () => {
+  const state = {
+    index: 1,
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+      {
+        name: 'bar',
+        params: { author: 'jane' },
+      },
+      { name: 'baz' },
+    ],
+  };
+
+  const config = {
+    initialRouteName: 'foo',
+    screens: {
+      bar: 'bar',
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'bar',
+      params: { author: 'jane' },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with 2 screens', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        screen: 'bar',
+        initial: true,
+        params: {
+          state: {
+            routes: [
+              {
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              { name: 'quz' },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with 2 screens with lower index', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                index: 0,
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        screen: 'bar',
+        initial: true,
+        params: {
+          screen: 'qux',
+          initial: true,
+          params: {
+            author: 'jane',
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with more than 2 screens', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                  { name: 'qua' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        screen: 'bar',
+        initial: true,
+        params: {
+          state: {
+            routes: [
+              {
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              { name: 'quz' },
+              { name: 'qua' },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              params: { answer: 42 },
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'qux',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        params: {
+          answer: 42,
+          params: {
+            author: 'jane',
+          },
+          screen: 'qux',
+          initial: true,
+        },
+        screen: 'bar',
+        initial: true,
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state for top-level screen with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        params: { answer: 42 },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      initialRouteName: 'bar',
+      foo: {
+        path: 'some-path/:answer',
+        parse: {
+          answer: Number,
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: { answer: 42 },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with 2 screens including initial route and with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'qux',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
     payload: {
       name: 'foo',
       params: {
@@ -84,7 +578,332 @@ it('gets navigate action from state', () => {
   });
 });
 
-it('gets reset action from state', () => {
+it('gets navigate action from state with 2 screens without initial route and with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'quz',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        initial: true,
+        screen: 'bar',
+        params: {
+          state: {
+            routes: [
+              {
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              { name: 'quz' },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with 2 screens including route with key on initial route and with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    key: 'test',
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'qux',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        initial: true,
+        screen: 'bar',
+        params: {
+          state: {
+            routes: [
+              {
+                key: 'test',
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              { name: 'quz' },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with 2 screens including route with key on 2nd route and with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  {
+                    key: 'test',
+                    name: 'quz',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'qux',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        initial: true,
+        screen: 'bar',
+        params: {
+          state: {
+            routes: [
+              {
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              {
+                key: 'test',
+                name: 'quz',
+              },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with more than 2 screens and with config', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                  { name: 'qua' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'qux',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        initial: true,
+        screen: 'bar',
+        params: {
+          state: {
+            routes: [
+              {
+                name: 'qux',
+                params: {
+                  author: 'jane',
+                },
+              },
+              { name: 'quz' },
+              { name: 'qua' },
+            ],
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets navigate action from state with more than 2 screens with lower index', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                index: 1,
+                routes: [
+                  { name: 'quu' },
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  const config = {
+    screens: {
+      foo: {
+        initialRouteName: 'bar',
+        screens: {
+          bar: {
+            initialRouteName: 'quu',
+          },
+        },
+      },
+    },
+  };
+
+  expect(getActionFromState(state, config)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        screen: 'bar',
+        initial: true,
+        params: {
+          screen: 'qux',
+          initial: false,
+          params: {
+            author: 'jane',
+          },
+        },
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it("doesn't return action if no routes are provided'", () => {
+  expect(getActionFromState({ routes: [] })).toBe(undefined);
+});
+
+it('gets undefined action from state', () => {
   const state = {
     routes: [
       {

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

@@ -735,6 +735,20 @@ it('navigates to nested child in a navigator', () => {
   expect(element).toMatchInlineSnapshot(
     `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
   );
+
+  act(() => navigation.current?.navigate('bar', { screen: 'bar-b' }));
+
+  act(() => navigation.current?.goBack());
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-a, {\\"lol\\":\\"why\\",\\"whoa\\":\\"test\\"}]"`
+  );
+
+  act(() => navigation.current?.navigate('bar', { screen: 'bar-b' }));
+
+  expect(element).toMatchInlineSnapshot(
+    `"[bar-b, {\\"some\\":\\"stuff\\",\\"test\\":42,\\"whoa\\":\\"test\\"}]"`
+  );
 });
 
 it('navigates to nested child in a navigator with initial: false', () => {
@@ -1093,6 +1107,194 @@ it('navigates to nested child in a navigator with initial: false', () => {
   });
 });
 
+it('resets state of a nested child in a navigator', () => {
+  const TestNavigator = (props: any): any => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestComponent = ({ route }: any): any =>
+    `[${route.name}, ${JSON.stringify(route.params)}]`;
+
+  const onStateChange = jest.fn();
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const first = render(
+    <BaseNavigationContainer ref={navigation} onStateChange={onStateChange}>
+      <TestNavigator>
+        <Screen name="foo">
+          {() => (
+            <TestNavigator>
+              <Screen name="foo-a" component={TestComponent} />
+              <Screen name="foo-b" component={TestComponent} />
+            </TestNavigator>
+          )}
+        </Screen>
+        <Screen name="bar">
+          {() => (
+            <TestNavigator initialRouteName="bar-a">
+              <Screen name="bar-a" component={TestComponent} />
+              <Screen
+                name="bar-b"
+                component={TestComponent}
+                initialParams={{ some: 'stuff' }}
+              />
+            </TestNavigator>
+          )}
+        </Screen>
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  expect(first).toMatchInlineSnapshot(`"[foo-a, undefined]"`);
+
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 0,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      {
+        key: 'foo',
+        name: 'foo',
+        state: {
+          index: 0,
+          key: '1',
+          routeNames: ['foo-a', 'foo-b'],
+          routes: [
+            {
+              key: 'foo-a',
+              name: 'foo-a',
+            },
+            {
+              key: 'foo-b',
+              name: 'foo-b',
+            },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+      { key: 'bar', name: 'bar' },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  act(() =>
+    navigation.current?.navigate('bar', {
+      state: {
+        routes: [{ name: 'bar-a' }, { name: 'bar-b' }],
+      },
+    })
+  );
+
+  expect(first).toMatchInlineSnapshot(`"[bar-a, undefined]"`);
+
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 1,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      {
+        key: 'bar',
+        name: 'bar',
+        params: {
+          state: {
+            routes: [{ name: 'bar-a' }, { name: 'bar-b' }],
+          },
+        },
+        state: {
+          index: 0,
+          key: '4',
+          routeNames: ['bar-a', 'bar-b'],
+          routes: [
+            {
+              key: 'bar-a-2',
+              name: 'bar-a',
+            },
+            {
+              key: 'bar-b-3',
+              name: 'bar-b',
+              params: { some: 'stuff' },
+            },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+    ],
+    stale: false,
+    type: 'test',
+  });
+
+  act(() =>
+    navigation.current?.navigate('bar', {
+      state: {
+        index: 2,
+        routes: [
+          { key: '37', name: 'bar-b' },
+          { name: 'bar-b' },
+          { name: 'bar-a', params: { test: 18 } },
+        ],
+      },
+    })
+  );
+
+  expect(first).toMatchInlineSnapshot(`"[bar-a, {\\"test\\":18}]"`);
+
+  expect(navigation.current?.getRootState()).toEqual({
+    index: 1,
+    key: '0',
+    routeNames: ['foo', 'bar'],
+    routes: [
+      { key: 'foo', name: 'foo' },
+      {
+        key: 'bar',
+        name: 'bar',
+        params: {
+          state: {
+            index: 2,
+            routes: [
+              { key: '37', name: 'bar-b' },
+              { name: 'bar-b' },
+              { name: 'bar-a', params: { test: 18 } },
+            ],
+          },
+        },
+        state: {
+          index: 2,
+          key: '7',
+          routeNames: ['bar-a', 'bar-b'],
+          routes: [
+            {
+              key: '37',
+              name: 'bar-b',
+              params: { some: 'stuff' },
+            },
+            {
+              key: 'bar-b-5',
+              name: 'bar-b',
+              params: { some: 'stuff' },
+            },
+            {
+              key: 'bar-a-6',
+              name: 'bar-a',
+              params: { test: 18 },
+            },
+          ],
+          stale: false,
+          type: 'test',
+        },
+      },
+    ],
+    stale: false,
+    type: 'test',
+  });
+});
+
 it('gives access to internal state', () => {
   const TestNavigator = (props: any): any => {
     const { state, descriptors } = useNavigationBuilder(MockRouter, props);

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

@@ -22,6 +22,7 @@ it('sets options with options prop as an object', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);
@@ -67,6 +68,7 @@ it('sets options with options prop as a fuction', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);
@@ -113,6 +115,7 @@ it('sets options with screenOptions prop as an object', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);
@@ -173,6 +176,7 @@ it('sets options with screenOptions prop as a fuction', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);
@@ -245,6 +249,7 @@ it('sets initial options with setOptions', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       {
         title?: string;
         color?: string;
@@ -302,6 +307,7 @@ it('updates options with setOptions', () => {
       NavigationState,
       any,
       any,
+      any,
       any
     >(MockRouter, props);
     const { render, options } = descriptors[state.routes[state.index].key];
@@ -378,6 +384,7 @@ it("returns correct value for canGoBack when it's not overridden", () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);
@@ -441,6 +448,7 @@ it(`returns false for canGoBack when current router doesn't handle GO_BACK`, ()
       NavigationState,
       any,
       any,
+      any,
       any
     >(TestRouter, props);
 
@@ -491,6 +499,7 @@ it('returns true for canGoBack when current router handles GO_BACK', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(ParentRouter, props);
@@ -501,6 +510,7 @@ it('returns true for canGoBack when current router handles GO_BACK', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);
@@ -558,6 +568,7 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(OverrodeRouter, props);
@@ -568,6 +579,7 @@ it('returns true for canGoBack when parent router handles GO_BACK', () => {
     const { state, descriptors } = useNavigationBuilder<
       NavigationState,
       any,
+      {},
       { title?: string },
       any
     >(MockRouter, props);

packages/core/src/getActionFromState.tsx

@@ -1,56 +1,144 @@
-import type { PartialState, NavigationState } from '@react-navigation/routers';
+import type {
+  Route,
+  PartialRoute,
+  ParamListBase,
+  NavigationState,
+  PartialState,
+  CommonActions,
+} from '@react-navigation/routers';
+import type { PathConfig, PathConfigMap, NavigatorScreenParams } from './types';
 
-type NavigateParams = {
-  screen?: string;
-  params?: NavigateParams;
-  initial?: boolean;
+type ConfigItem = {
+  initialRouteName?: string;
+  screens?: Record<string, ConfigItem>;
 };
 
-type NavigateAction = {
+type Options = { initialRouteName?: string; screens: PathConfigMap };
+
+type NavigateAction<State extends NavigationState> = {
   type: 'NAVIGATE';
-  payload: { name: string; params: NavigateParams };
+  payload: {
+    name: string;
+    params?: NavigatorScreenParams<State>;
+  };
 };
 
 export default function getActionFromState(
-  state: PartialState<NavigationState>
-): NavigateAction | undefined {
-  if (state.routes.length === 0) {
+  state: PartialState<NavigationState>,
+  options?: Options
+): NavigateAction<NavigationState> | CommonActions.Action | undefined {
+  // Create a normalized configs object which will be easier to use
+  const normalizedConfig = options ? createNormalizedConfigItem(options) : {};
+
+  const routes =
+    state.index != null ? state.routes.slice(0, state.index + 1) : state.routes;
+
+  if (routes.length === 0) {
     return undefined;
   }
 
-  // Try to construct payload for a `NAVIGATE` action from the state
-  // This lets us preserve the navigation state and not lose it
-  let route = state.routes[state.routes.length - 1];
+  if (
+    !(
+      (routes.length === 1 && routes[0].key === undefined) ||
+      (routes.length === 2 &&
+        routes[0].key === undefined &&
+        routes[0].name === normalizedConfig?.initialRouteName &&
+        routes[1].key === undefined)
+    )
+  ) {
+    return {
+      type: 'RESET',
+      payload: state,
+    };
+  }
 
-  let payload: { name: string; params: NavigateParams } = {
-    name: route.name,
-    params: { ...route.params },
-  };
+  const route = state.routes[state.index ?? state.routes.length - 1];
 
-  let current = route.state;
-  let params = payload.params;
+  let current: PartialState<NavigationState> | undefined = route?.state;
+  let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
+  let params = { ...route.params } as NavigatorScreenParams<
+    ParamListBase,
+    NavigationState
+  >;
+
+  let payload = route ? { name: route.name, params } : undefined;
 
   while (current) {
     if (current.routes.length === 0) {
       return undefined;
     }
 
-    route = current.routes[current.routes.length - 1];
-    params.initial = current.routes.length === 1;
-    params.screen = route.name;
+    const routes =
+      current.index != null
+        ? current.routes.slice(0, current.index + 1)
+        : current.routes;
+
+    const route: Route<string> | PartialRoute<Route<string>> =
+      routes[routes.length - 1];
+
+    // Explicitly set to override existing value when merging params
+    Object.assign(params, {
+      initial: undefined,
+      screen: undefined,
+      params: undefined,
+      state: undefined,
+    });
+
+    if (routes.length === 1 && routes[0].key === undefined) {
+      params.initial = true;
+      params.screen = route.name;
+    } else if (
+      routes.length === 2 &&
+      routes[0].key === undefined &&
+      routes[0].name === config?.initialRouteName &&
+      routes[1].key === undefined
+    ) {
+      params.initial = false;
+      params.screen = route.name;
+    } else {
+      params.state = current;
+      break;
+    }
 
     if (route.state) {
       params.params = { ...route.params };
-      params = params.params;
+      params = params.params as NavigatorScreenParams<
+        ParamListBase,
+        NavigationState
+      >;
     } else {
       params.params = route.params;
     }
 
     current = route.state;
+    config = config?.screens?.[route.name];
   }
 
+  if (!payload) {
+    return;
+  }
+
+  // Try to construct payload for a `NAVIGATE` action from the state
+  // This lets us preserve the navigation state and not lose it
   return {
     type: 'NAVIGATE',
     payload,
   };
 }
+
+const createNormalizedConfigItem = (config: PathConfig | string) =>
+  typeof config === 'object' && config != null
+    ? {
+        initialRouteName: config.initialRouteName,
+        screens:
+          config.screens != null
+            ? createNormalizedConfigs(config.screens)
+            : undefined,
+      }
+    : {};
+
+const createNormalizedConfigs = (options: PathConfigMap) =>
+  Object.entries(options).reduce<Record<string, ConfigItem>>((acc, [k, v]) => {
+    acc[k] = createNormalizedConfigItem(v);
+    return acc;
+  }, {});

packages/core/src/getFocusedRouteNameFromRoute.tsx

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

packages/core/src/getPathFromState.tsx

@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import * as queryString from 'query-string';
 import type {
   NavigationState,
   PartialState,
@@ -35,7 +35,7 @@ const getActiveRoute = (state: State): { name: string; params?: object } => {
 /**
  * Utility to serialize a navigation state object to a path string.
  *
- * Example:
+ * @example
  * ```js
  * getPathFromState(
  *   {

packages/core/src/getStateFromPath.tsx

@@ -1,5 +1,5 @@
 import escape from 'escape-string-regexp';
-import queryString from 'query-string';
+import * as queryString from 'query-string';
 import type {
   NavigationState,
   PartialState,
@@ -37,7 +37,7 @@ type ResultState = PartialState<NavigationState> & {
  * Utility to parse a path string to initial state object accepted by the container.
  * This is useful for deep linking when we need to handle the incoming URL.
  *
- * Example:
+ * @example
  * ```js
  * getStateFromPath(
  *   '/chat/jane/42',

packages/core/src/types.tsx

@@ -10,8 +10,9 @@ import type {
 } from '@react-navigation/routers';
 
 export type DefaultNavigatorOptions<
-  ScreenOptions extends {}
-> = DefaultRouterOptions & {
+  ScreenOptions extends {},
+  ParamList extends ParamListBase = ParamListBase
+> = DefaultRouterOptions<Extract<keyof ParamList, string>> & {
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen` components are supported as children.
@@ -23,7 +24,7 @@ export type DefaultNavigatorOptions<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamListBase, string>;
+        route: RouteProp<ParamList, keyof ParamList>;
         navigation: any;
       }) => ScreenOptions);
 };
@@ -237,6 +238,10 @@ export type NavigationContainerProps = {
    * Callback which is called with the latest navigation state when it changes.
    */
   onStateChange?: (state: NavigationState | undefined) => void;
+  /**
+   * Callback which is called when an action is not handled.
+   */
+  onUnhandledAction?: (action: NavigationAction) => void;
   /**
    * Whether this navigation container should be independent of parent containers.
    * If this is not set to `true`, this container cannot be nested inside another container.
@@ -252,7 +257,7 @@ export type NavigationContainerProps = {
 export type NavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
-  State extends NavigationState = NavigationState,
+  State extends NavigationState = NavigationState<ParamList>,
   ScreenOptions extends {} = {},
   EventMap extends EventMapBase = {}
 > = NavigationHelpersCommon<ParamList, State> & {
@@ -277,20 +282,7 @@ export type NavigationProp<
 export type RouteProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList
-> = Omit<Route<Extract<RouteName, string>>, 'params'> &
-  (undefined extends ParamList[RouteName]
-    ? Readonly<{
-        /**
-         * Params for this route
-         */
-        params?: Readonly<ParamList[RouteName]>;
-      }>
-    : Readonly<{
-        /**
-         * Params for this route
-         */
-        params: Readonly<ParamList[RouteName]>;
-      }>);
+> = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
 export type CompositeNavigationProp<
   A extends NavigationProp<ParamListBase, string, any, any>,
@@ -498,14 +490,11 @@ export type TypedNavigator<
    * Navigator component which manages the child screens.
    */
   Navigator: React.ComponentType<
-    Omit<React.ComponentProps<Navigator>, keyof DefaultNavigatorOptions<any>> &
-      Omit<DefaultNavigatorOptions<ScreenOptions>, 'initialRouteName'> & {
-        /**
-         * Name of the route to focus by on initial render.
-         * If not specified, usually the first route is used.
-         */
-        initialRouteName?: keyof ParamList;
-      }
+    Omit<
+      React.ComponentProps<Navigator>,
+      keyof DefaultNavigatorOptions<any, any>
+    > &
+      DefaultNavigatorOptions<ScreenOptions, ParamList>
   >;
   /**
    * Component used for specifying route configuration.
@@ -515,6 +504,32 @@ export type TypedNavigator<
   ) => null;
 };
 
+export type NavigatorScreenParams<
+  ParamList,
+  State extends NavigationState = NavigationState
+> =
+  | {
+      screen?: never;
+      params?: never;
+      initial?: never;
+      state: PartialState<State> | State | undefined;
+    }
+  | {
+      [RouteName in keyof ParamList]: undefined extends ParamList[RouteName]
+        ? {
+            screen: RouteName;
+            params?: ParamList[RouteName];
+            initial?: boolean;
+            state?: never;
+          }
+        : {
+            screen: RouteName;
+            params: ParamList[RouteName];
+            initial?: boolean;
+            state?: never;
+          };
+    }[keyof ParamList];
+
 export type PathConfig = {
   path?: string;
   exact?: boolean;

packages/core/src/useDescriptors.tsx

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

packages/core/src/useIsFocused.tsx

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

packages/core/src/useNavigationBuilder.tsx

@@ -23,30 +23,27 @@ import useFocusEvents from './useFocusEvents';
 import useOnRouteFocus from './useOnRouteFocus';
 import useChildListeners from './useChildListeners';
 import useFocusedListenersChildrenAdapter from './useFocusedListenersChildrenAdapter';
+import useKeyedChildListeners from './useKeyedChildListeners';
+import useOnGetState from './useOnGetState';
+import useScheduleUpdate from './useScheduleUpdate';
+import useCurrentRender from './useCurrentRender';
+import isArrayEqual from './isArrayEqual';
 import {
   DefaultNavigatorOptions,
   RouteConfig,
   PrivateValueStore,
   EventMapBase,
   EventMapCore,
+  NavigatorScreenParams,
 } from './types';
-import useKeyedChildListeners from './useKeyedChildListeners';
-import useOnGetState from './useOnGetState';
-import useScheduleUpdate from './useScheduleUpdate';
-import useCurrentRender from './useCurrentRender';
-import isArrayEqual from './isArrayEqual';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
 PrivateValueStore;
 
-type NavigatorRoute = {
+type NavigatorRoute<State extends NavigationState> = {
   key: string;
-  params?: {
-    screen?: string;
-    params?: object;
-    initial?: boolean;
-  };
+  params?: NavigatorScreenParams<ParamListBase, State>;
 };
 
 /**
@@ -182,6 +179,7 @@ const getRouteConfigsFromChildren = <
 export default function useNavigationBuilder<
   State extends NavigationState,
   RouterOptions extends DefaultRouterOptions,
+  ActionHelpers extends Record<string, () => void>,
   ScreenOptions extends {},
   EventMap extends Record<string, any>
 >(
@@ -191,20 +189,15 @@ export default function useNavigationBuilder<
   const navigatorKey = useRegisterNavigator();
 
   const route = React.useContext(NavigationRouteContext) as
-    | NavigatorRoute
+    | NavigatorRoute<State>
     | undefined;
 
-  const previousNestedParamsRef = React.useRef(route?.params);
-
-  React.useEffect(() => {
-    previousNestedParamsRef.current = route?.params;
-  }, [route]);
-
   const { children, ...rest } = options;
   const { current: router } = React.useRef<Router<State, any>>(
     createRouter({
       ...((rest as unknown) as RouterOptions),
       ...(route?.params &&
+      route.params.state == null &&
       route.params.initial !== false &&
       typeof route.params.screen === 'string'
         ? { initialRouteName: route.params.screen }
@@ -239,7 +232,9 @@ export default function useNavigationBuilder<
     (acc, curr) => {
       const { initialParams } = screens[curr];
       const initialParamsFromParams =
-        route?.params?.initial !== false && route?.params?.screen === curr
+        route?.params?.state == null &&
+        route?.params?.initial !== false &&
+        route?.params?.screen === curr
           ? route.params.params
           : undefined;
 
@@ -287,7 +282,10 @@ export default function useNavigationBuilder<
     // We also need to re-initialize it if the state passed from parent was changed (maybe due to reset)
     // Otherwise assume that the state was provided as initial state
     // So we need to rehydrate it to make it usable
-    if (currentState === undefined || !isStateValid(currentState)) {
+    if (
+      (currentState === undefined || !isStateValid(currentState)) &&
+      route?.params?.state == null
+    ) {
       return [
         router.getInitialState({
           routeNames,
@@ -297,10 +295,13 @@ export default function useNavigationBuilder<
       ];
     } else {
       return [
-        router.getRehydratedState(currentState as PartialState<State>, {
-          routeNames,
-          routeParamList,
-        }),
+        router.getRehydratedState(
+          route?.params?.state ?? (currentState as PartialState<State>),
+          {
+            routeNames,
+            routeParamList,
+          }
+        ),
         false,
       ];
     }
@@ -331,21 +332,41 @@ export default function useNavigationBuilder<
     });
   }
 
-  if (
-    typeof route?.params?.screen === 'string' &&
-    (route.params !== previousNestedParamsRef.current ||
-      (route.params.initial === false && isFirstStateInitialization))
-  ) {
-    // If the route was updated with new name and/or params, we should navigate there
+  const previousNestedParamsRef = React.useRef(route?.params);
+
+  React.useEffect(() => {
+    previousNestedParamsRef.current = route?.params;
+  }, [route?.params]);
+
+  if (route?.params) {
+    const previousParams = previousNestedParamsRef.current;
+
+    let action: CommonActions.Action | undefined;
+
+    if (
+      typeof route.params.state === 'object' &&
+      route.params.state != null &&
+      route.params.state !== previousParams?.state
+    ) {
+      // If the route was updated with new state, we should reset to it
+      action = CommonActions.reset(route.params.state);
+    } else if (
+      typeof route.params.screen === 'string' &&
+      ((route.params.initial === false && isFirstStateInitialization) ||
+        route.params !== previousParams)
+    ) {
+      // FIXME: Since params are merged, `route.params.params` might contain params from an older route
+      // If the route was updated with new screen name and/or params, we should navigate there
+      action = CommonActions.navigate(route.params.screen, route.params.params);
+    }
+
     // The update should be limited to current navigator only, so we call the router manually
-    const updatedState = router.getStateForAction(
-      nextState,
-      CommonActions.navigate(route.params.screen, route.params.params),
-      {
-        routeNames,
-        routeParamList,
-      }
-    );
+    const updatedState = action
+      ? router.getStateForAction(nextState, action, {
+          routeNames,
+          routeParamList,
+        })
+      : null;
 
     nextState =
       updatedState !== null
@@ -484,7 +505,12 @@ export default function useNavigationBuilder<
     setState,
   });
 
-  const navigation = useNavigationHelpers<State, NavigationAction, EventMap>({
+  const navigation = useNavigationHelpers<
+    State,
+    ActionHelpers,
+    NavigationAction,
+    EventMap
+  >({
     onAction,
     getState,
     emitter,

packages/core/src/useNavigationHelpers.tsx

@@ -31,6 +31,7 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
  */
 export default function useNavigationHelpers<
   State extends NavigationState,
+  ActionHelpers extends Record<string, () => void>,
   Action extends NavigationAction,
   EventMap extends Record<string, any>
 >({ onAction, getState, emitter, router }: Options<State, Action>) {
@@ -85,7 +86,8 @@ export default function useNavigationHelpers<
       dangerouslyGetParent: () => parentNavigationHelpers as any,
       dangerouslyGetState: getState,
     } as NavigationHelpers<ParamListBase, EventMap> &
-      (NavigationProp<ParamListBase, string, any, any, any> | undefined);
+      (NavigationProp<ParamListBase, string, any, any, any> | undefined) &
+      ActionHelpers;
   }, [
     emitter.emit,
     getState,

packages/core/src/useRouteCache.tsx

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

packages/core/src/useSyncState.tsx

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

packages/devtools/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.14](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.13...@react-navigation/devtools@5.1.14) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.12...@react-navigation/devtools@5.1.13) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.11...@react-navigation/devtools@5.1.12) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.10...@react-navigation/devtools@5.1.11) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.9...@react-navigation/devtools@5.1.10) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.8...@react-navigation/devtools@5.1.9) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.7...@react-navigation/devtools@5.1.8) (2020-10-24)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
+## [5.1.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.6...@react-navigation/devtools@5.1.7) (2020-10-07)
+
+**Note:** Version bump only for package @react-navigation/devtools
+
+
+
+
+
 ## [5.1.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@5.1.5...@react-navigation/devtools@5.1.6) (2020-09-22)
 
 **Note:** Version bump only for package @react-navigation/devtools

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "5.1.6",
+  "version": "5.1.14",
   "keywords": [
     "react",
     "react-native",
@@ -36,14 +36,14 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.12.4",
-    "deep-equal": "^2.0.3"
+    "@react-navigation/core": "^5.14.0",
+    "deep-equal": "^2.0.4"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@testing-library/react-native": "^7.0.2",
+    "@testing-library/react-native": "^7.1.0",
     "@types/deep-equal": "^1.0.1",
-    "@types/react": "^16.9.49",
+    "@types/react": "^16.9.53",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "typescript": "^4.0.3"

packages/drawer/CHANGELOG.md

@@ -3,6 +3,78 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.10.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.5...@react-navigation/drawer@5.10.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.4...@react-navigation/drawer@5.10.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.3...@react-navigation/drawer@5.10.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.2...@react-navigation/drawer@5.10.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.1...@react-navigation/drawer@5.10.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+## [5.10.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.10.0...@react-navigation/drawer@5.10.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.10.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.9.3...@react-navigation/drawer@5.10.0) (2020-10-24)
+
+
+### Features
+
+* add optional screens per navigator ([#8805](https://github.com/react-navigation/react-navigation/issues/8805)) ([7196889](https://github.com/react-navigation/react-navigation/commit/7196889bf1218eb6a736d9475e33a909c2248c3b))
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.9.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.9.2...@react-navigation/drawer@5.9.3) (2020-10-07)
+
+
+### Bug Fixes
+
+* use route keys instead of index for lazy load ([c49dab3](https://github.com/react-navigation/react-navigation/commit/c49dab31b2c63a1735f0ed0a1936ecf7bbcd8b13))
+
+
+
+
+
 ## [5.9.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@5.9.1...@react-navigation/drawer@5.9.2) (2020-09-28)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.9.2",
+  "version": "5.10.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,15 +41,15 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "color": "^3.1.2",
-    "react-native-iphone-x-helper": "^1.2.1"
+    "color": "^3.1.3",
+    "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.7.5",
-    "@testing-library/react-native": "^7.0.2",
-    "@types/react": "^16.9.49",
-    "@types/react-native": "^0.63.20",
+    "@react-navigation/native": "^5.8.6",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -6,6 +6,8 @@ import {
   DrawerNavigationState,
   DrawerRouterOptions,
   DrawerRouter,
+  DrawerActionHelpers,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import DrawerView from '../views/DrawerView';
@@ -28,8 +30,9 @@ function DrawerNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    DrawerNavigationState,
+    DrawerNavigationState<ParamListBase>,
     DrawerRouterOptions,
+    DrawerActionHelpers<ParamListBase>,
     DrawerNavigationOptions,
     DrawerNavigationEventMap
   >(DrawerRouter, {
@@ -51,7 +54,7 @@ function DrawerNavigator({
 }
 
 export default createNavigatorFactory<
-  DrawerNavigationState,
+  DrawerNavigationState<ParamListBase>,
   DrawerNavigationOptions,
   DrawerNavigationEventMap,
   typeof DrawerNavigator

packages/drawer/src/types.tsx

@@ -86,6 +86,12 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
    * You can pass a custom background color for a drawer or a custom width here.
    */
   drawerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether inactive screens should be detached from the view hierarchy to save memory.
+   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
+   * Defaults to `true`.
+   */
+  detachInactiveScreens?: boolean;
 };
 
 export type DrawerNavigationOptions = {
@@ -136,7 +142,7 @@ export type DrawerNavigationOptions = {
 };
 
 export type DrawerContentComponentProps<T = DrawerContentOptions> = T & {
-  state: DrawerNavigationState;
+  state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
   /**
@@ -195,7 +201,8 @@ export type DrawerNavigationEventMap = {
 export type DrawerNavigationHelpers = NavigationHelpers<
   ParamListBase,
   DrawerNavigationEventMap
->;
+> &
+  DrawerActionHelpers<ParamListBase>;
 
 export type DrawerNavigationProp<
   ParamList extends ParamListBase,
@@ -203,7 +210,7 @@ export type DrawerNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  DrawerNavigationState,
+  DrawerNavigationState<ParamList>,
   DrawerNavigationOptions,
   DrawerNavigationEventMap
 > &
@@ -220,7 +227,7 @@ export type DrawerScreenProps<
 export type DrawerDescriptor = Descriptor<
   ParamListBase,
   string,
-  DrawerNavigationState,
+  DrawerNavigationState<ParamListBase>,
   DrawerNavigationOptions
 >;
 

packages/drawer/src/views/DrawerItemList.tsx

@@ -3,6 +3,7 @@ import {
   CommonActions,
   DrawerActions,
   DrawerNavigationState,
+  ParamListBase,
   useLinkBuilder,
 } from '@react-navigation/native';
 import DrawerItem from './DrawerItem';
@@ -13,7 +14,7 @@ import type {
 } from '../types';
 
 type Props = Omit<DrawerContentOptions, 'contentContainerStyle' | 'style'> & {
-  state: DrawerNavigationState;
+  state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
 };

packages/drawer/src/views/DrawerView.tsx

@@ -13,6 +13,7 @@ import {
   DrawerNavigationState,
   DrawerActions,
   useTheme,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import { GestureHandlerRootView } from './GestureHandler';
@@ -31,7 +32,7 @@ import type {
 } from '../types';
 
 type Props = DrawerNavigationConfig & {
-  state: DrawerNavigationState;
+  state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
 };
@@ -82,8 +83,9 @@ export default function DrawerView({
   gestureHandlerProps,
   minSwipeDistance,
   sceneContainerStyle,
+  detachInactiveScreens = true,
 }: Props) {
-  const [loaded, setLoaded] = React.useState([state.index]);
+  const [loaded, setLoaded] = React.useState([state.routes[state.index].key]);
   const dimensions = useWindowDimensions();
 
   const { colors } = useTheme();
@@ -129,8 +131,10 @@ export default function DrawerView({
     return () => subscription?.remove();
   }, [handleDrawerClose, isDrawerOpen, navigation, state.key]);
 
-  if (!loaded.includes(state.index)) {
-    setLoaded([...loaded, state.index]);
+  const focusedRouteKey = state.routes[state.index].key;
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
   }
 
   const renderNavigationView = ({ progress }: any) => {
@@ -149,7 +153,8 @@ export default function DrawerView({
 
   const renderContent = () => {
     return (
-      <ScreenContainer style={styles.content}>
+      // @ts-ignore
+      <ScreenContainer enabled={detachInactiveScreens} style={styles.content}>
         {state.routes.map((route, index) => {
           const descriptor = descriptors[route.key];
           const { unmountOnBlur } = descriptor.options;
@@ -159,7 +164,7 @@ export default function DrawerView({
             return null;
           }
 
-          if (lazy && !loaded.includes(index) && !isFocused) {
+          if (lazy && !loaded.includes(route.key) && !isFocused) {
             // Don't render a screen if we've never navigated to it
             return null;
           }
@@ -169,6 +174,7 @@ export default function DrawerView({
               key={route.key}
               style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               isVisible={isFocused}
+              enabled={detachInactiveScreens}
             >
               {descriptor.render()}
             </ResourceSavingScene>

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-import { Screen, screensEnabled } from 'react-native-screens';
+import {
+  Screen,
+  screensEnabled,
+  // @ts-ignore
+  shouldUseActivityState,
+} from 'react-native-screens';
 
 type Props = {
   isVisible: boolean;
   children: React.ReactNode;
+  enabled: boolean;
   style?: any;
 };
 
@@ -16,8 +22,17 @@ export default class ResourceSavingScene extends React.Component<Props> {
     if (screensEnabled?.() && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
-      // @ts-expect-error: stackPresentation is incorrectly marked as required
-      return <Screen active={isVisible ? 1 : 0} {...rest} />;
+      if (shouldUseActivityState) {
+        return (
+          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+          <Screen activityState={isVisible ? 2 : 0} {...rest} />
+        );
+      } else {
+        return (
+          // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+          <Screen active={isVisible ? 1 : 0} {...rest} />
+        );
+      }
     }
 
     const { isVisible, children, style, ...rest } = this.props;

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.5...@react-navigation/material-bottom-tabs@5.3.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.4...@react-navigation/material-bottom-tabs@5.3.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.3...@react-navigation/material-bottom-tabs@5.3.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.2...@react-navigation/material-bottom-tabs@5.3.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.1...@react-navigation/material-bottom-tabs@5.3.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.3.0...@react-navigation/material-bottom-tabs@5.3.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.19...@react-navigation/material-bottom-tabs@5.3.0) (2020-10-24)
+
+
+### Features
+
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* make react-native-vector-icons optional ([#8936](https://github.com/react-navigation/react-navigation/issues/8936)) ([90ebfc4](https://github.com/react-navigation/react-navigation/commit/90ebfc40b387b209031e6275aaa0be95192f7d04)), closes [/github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx#L14](https://github.com//github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx/issues/L14) [#8821](https://github.com/react-navigation/react-navigation/issues/8821)
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.2.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.18...@react-navigation/material-bottom-tabs@5.2.19) (2020-10-07)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.2.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@5.2.17...@react-navigation/material-bottom-tabs@5.2.18) (2020-09-28)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.2.18",
+  "version": "5.3.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -42,10 +42,10 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.7.5",
-    "@testing-library/react-native": "^7.0.2",
-    "@types/react": "^16.9.49",
-    "@types/react-native": "^0.63.20",
+    "@react-navigation/native": "^5.8.6",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "^0.63.30",
     "@types/react-native-vector-icons": "^6.4.6",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",

packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx

@@ -6,6 +6,8 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  TabActionHelpers,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import MaterialBottomTabView from '../views/MaterialBottomTabView';
@@ -27,8 +29,9 @@ function MaterialBottomTabNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
     MaterialBottomTabNavigationOptions,
     MaterialBottomTabNavigationEventMap
   >(TabRouter, {
@@ -49,7 +52,7 @@ function MaterialBottomTabNavigator({
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationEventMap,
   typeof MaterialBottomTabNavigator

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

@@ -19,7 +19,8 @@ export type MaterialBottomTabNavigationEventMap = {
 export type MaterialBottomTabNavigationHelpers = NavigationHelpers<
   ParamListBase,
   MaterialBottomTabNavigationEventMap
->;
+> &
+  TabActionHelpers<ParamListBase>;
 
 export type MaterialBottomTabNavigationProp<
   ParamList extends ParamListBase,
@@ -27,7 +28,7 @@ export type MaterialBottomTabNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  TabNavigationState,
+  TabNavigationState<ParamList>,
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationEventMap
 > &
@@ -84,7 +85,7 @@ export type MaterialBottomTabNavigationOptions = {
 export type MaterialBottomTabDescriptor = Descriptor<
   ParamListBase,
   string,
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialBottomTabNavigationOptions
 >;
 

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, Platform } from 'react-native';
 import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   NavigationHelpersContext,
   Route,
@@ -10,6 +9,7 @@ import {
   useTheme,
   useLinkBuilder,
   Link,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import type {
@@ -19,13 +19,55 @@ import type {
 } from '../types';
 
 type Props = MaterialBottomTabNavigationConfig & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   navigation: MaterialBottomTabNavigationHelpers;
   descriptors: MaterialBottomTabDescriptorMap;
 };
 
 type Scene = { route: { key: string } };
 
+// Optionally require vector-icons referenced from react-native-paper:
+// https://github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx#L14
+let MaterialCommunityIcons: any;
+
+try {
+  // Optionally require vector-icons
+  MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons')
+    .default;
+} catch (e) {
+  // @ts-expect-error
+  if (global.__expo?.Icon?.MaterialCommunityIcons) {
+    // Snack doesn't properly bundle vector icons from sub-path
+    // Use icons from the __expo global if available
+    // @ts-expect-error
+    MaterialCommunityIcons = global.__expo.Icon.MaterialCommunityIcons;
+  } else {
+    let isErrorLogged = false;
+
+    // Fallback component for icons
+    MaterialCommunityIcons = () => {
+      if (!isErrorLogged) {
+        if (
+          !/(Cannot find module|Module not found|Cannot resolve module)/.test(
+            e.message
+          )
+        ) {
+          console.error(e);
+        }
+
+        console.warn(
+          `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons' could not be loaded.`,
+          `To remove this warning, try installing 'react-native-vector-icons' or use another method.`
+        );
+
+        isErrorLogged = true;
+      }
+
+      return null;
+    };
+  }
+}
+
 function MaterialBottomTabViewInner({
   state,
   navigation,

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,74 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.5...@react-navigation/material-top-tabs@5.3.6) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.4...@react-navigation/material-top-tabs@5.3.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.3...@react-navigation/material-top-tabs@5.3.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.2...@react-navigation/material-top-tabs@5.3.3) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.1...@react-navigation/material-top-tabs@5.3.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.3.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.3.0...@react-navigation/material-top-tabs@5.3.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.3.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.19...@react-navigation/material-top-tabs@5.3.0) (2020-10-24)
+
+
+### Features
+
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.2.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.18...@react-navigation/material-top-tabs@5.2.19) (2020-10-07)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.2.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@5.2.17...@react-navigation/material-top-tabs@5.2.18) (2020-09-28)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.2.18",
+  "version": "5.3.6",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,20 +41,20 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "color": "^3.1.2"
+    "color": "^3.1.3"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@react-navigation/native": "^5.7.5",
-    "@testing-library/react-native": "^7.0.2",
-    "@types/react": "^16.9.49",
-    "@types/react-native": "^0.63.20",
+    "@react-navigation/native": "^5.8.6",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",
     "react-native-gesture-handler": "~1.7.0",
     "react-native-reanimated": "~1.13.0",
-    "react-native-tab-view": "^2.15.1",
+    "react-native-tab-view": "^2.15.2",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

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

@@ -6,6 +6,8 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  TabActionHelpers,
+  ParamListBase,
 } from '@react-navigation/native';
 import MaterialTopTabView from '../views/MaterialTopTabView';
 import type {
@@ -26,8 +28,9 @@ function MaterialTopTabNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
     MaterialTopTabNavigationOptions,
     MaterialTopTabNavigationEventMap
   >(TabRouter, {
@@ -48,7 +51,7 @@ function MaterialTopTabNavigator({
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationEventMap,
   typeof MaterialTopTabNavigator

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

@@ -37,7 +37,8 @@ export type MaterialTopTabNavigationEventMap = {
 export type MaterialTopTabNavigationHelpers = NavigationHelpers<
   ParamListBase,
   MaterialTopTabNavigationEventMap
->;
+> &
+  TabActionHelpers<ParamListBase>;
 
 export type MaterialTopTabNavigationProp<
   ParamList extends ParamListBase,
@@ -45,7 +46,7 @@ export type MaterialTopTabNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  TabNavigationState,
+  TabNavigationState<ParamList>,
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationEventMap
 > &
@@ -94,7 +95,7 @@ export type MaterialTopTabNavigationOptions = {
 export type MaterialTopTabDescriptor = Descriptor<
   ParamListBase,
   string,
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialTopTabNavigationOptions
 >;
 
@@ -192,7 +193,7 @@ export type MaterialTopTabBarOptions = Partial<
 
 export type MaterialTopTabBarProps = MaterialTopTabBarOptions &
   SceneRendererProps & {
-    state: TabNavigationState;
+    state: TabNavigationState<ParamListBase>;
     navigation: NavigationHelpers<
       ParamListBase,
       MaterialTopTabNavigationEventMap

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

@@ -4,6 +4,7 @@ import {
   NavigationHelpersContext,
   TabNavigationState,
   TabActions,
+  ParamListBase,
   useTheme,
 } from '@react-navigation/native';
 
@@ -16,7 +17,7 @@ import type {
 } from '../types';
 
 type Props = MaterialTopTabNavigationConfig & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   navigation: MaterialTopTabNavigationHelpers;
   descriptors: MaterialTopTabDescriptorMap;
   tabBarPosition?: 'top' | 'bottom';

packages/native/CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.8.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.5...@react-navigation/native@5.8.6) (2020-11-04)
+
+
+### Bug Fixes
+
+* ignore any errors from deep linking ([4c2379c](https://github.com/react-navigation/react-navigation/commit/4c2379cec1e661aa132002fd1c50909ea64cb983))
+
+
+
+
+
+## [5.8.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.4...@react-navigation/native@5.8.5) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.3...@react-navigation/native@5.8.4) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.2...@react-navigation/native@5.8.3) (2020-11-03)
+
+
+### Bug Fixes
+
+* make sure that invalid linking config doesn't work if app is open ([52451d1](https://github.com/react-navigation/react-navigation/commit/52451d11094b8551e3c6950b3e005d68225c7da9))
+
+
+
+
+
+## [5.8.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.1...@react-navigation/native@5.8.2) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.8.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.8.0...@react-navigation/native@5.8.1) (2020-10-28)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+# [5.8.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.7.6...@react-navigation/native@5.8.0) (2020-10-24)
+
+
+### Features
+
+* add `getInitialURL` and `subscribe` options to linking config ([748e92f](https://github.com/react-navigation/react-navigation/commit/748e92f120b9ff73c6b1e14515f60c76701081db))
+* allow deep linking to reset state ([#8973](https://github.com/react-navigation/react-navigation/issues/8973)) ([7f3b27a](https://github.com/react-navigation/react-navigation/commit/7f3b27a9ec8edd9604ac19774baa1f60963ccdc9)), closes [#8952](https://github.com/react-navigation/react-navigation/issues/8952)
+* support wildcard string prefixes ([#8942](https://github.com/react-navigation/react-navigation/issues/8942)) ([23ab350](https://github.com/react-navigation/react-navigation/commit/23ab3504921b7e741a48d66c6a953905206df4b7)), closes [#8941](https://github.com/react-navigation/react-navigation/issues/8941)
+
+
+
+
+
+## [5.7.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.7.5...@react-navigation/native@5.7.6) (2020-10-07)
+
+
+### Bug Fixes
+
+* add missing check for initial state on web ([9e36508](https://github.com/react-navigation/react-navigation/commit/9e3650831c22b47130d2b388390f7eb7910fe91d))
+
+
+
+
+
 ## [5.7.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@5.7.4...@react-navigation/native@5.7.5) (2020-09-28)
 
 

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.7.5",
+  "version": "5.8.6",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,15 +37,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.12.4",
-    "nanoid": "^3.1.12"
+    "@react-navigation/core": "^5.14.0",
+    "escape-string-regexp": "^4.0.0",
+    "nanoid": "^3.1.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
-    "@testing-library/react-native": "^7.0.2",
-    "@types/react": "^16.9.49",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
-    "@types/react-native": "^0.63.20",
+    "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-dom": "^16.13.1",

packages/native/src/types.tsx

@@ -27,12 +27,23 @@ export type LinkingOptions = {
    * The prefixes are stripped from the URL before parsing them.
    * Usually they are the `scheme` + `host` (e.g. `myapp://chat?user=jane`)
    * Only applicable on Android and iOS.
+   *
+   * @example
+   * ```js
+   * {
+   *    prefixes: [
+   *      "myapp://", // App-specific scheme
+   *      "https://example.com", // Prefix for universal links
+   *      "https://*.example.com" // Prefix which matches any subdomain
+   *    ]
+   * }
+   * ```
    */
   prefixes: string[];
   /**
    * Config to fine-tune how to parse the path.
    *
-   * Example:
+   * @example
    * ```js
    * {
    *   Chat: {
@@ -43,13 +54,47 @@ export type LinkingOptions = {
    * ```
    */
   config?: { initialRouteName?: string; screens: PathConfigMap };
+  /**
+   * Custom function to get the initial URL used for linking.
+   * Uses `Linking.getInitialURL()` by default.
+   * Not supported on Web.
+   *
+   * @example
+   * ```js
+   * {
+   *    getInitialURL () => Linking.getInitialURL(),
+   * }
+   * ```
+   */
+  getInitialURL?: () => Promise<string | null | undefined>;
+  /**
+   * Custom function to get subscribe to URL updates.
+   * Uses `Linking.addEventListener('url', callback)` by default.
+   * Not supported on Web.
+   *
+   * @example
+   * ```js
+   * {
+   *    subscribe: (listener) => {
+   *      const onReceiveURL = ({ url }) => listener(url);
+   *
+   *      Linking.addEventListener('url', onReceiveURL);
+   *
+   *      return () => Linking.removeEventListener('url', onReceiveURL);
+   *   }
+   * }
+   * ```
+   */
+  subscribe?: (
+    listener: (url: string) => void
+  ) => undefined | void | (() => void);
   /**
    * Custom function to parse the URL to a valid navigation state (advanced).
-   * Only applicable on Web.
    */
   getStateFromPath?: typeof getStateFromPathDefault;
   /**
    * Custom function to convert the state object to a valid URL (advanced).
+   * Only applicable on Web.
    */
   getPathFromState?: typeof getPathFromStateDefault;
 };

packages/native/src/useLinkProps.tsx

@@ -22,7 +22,7 @@ export default function useLinkProps({ to, action }: Props) {
   const linkTo = useLinkTo();
 
   const onPress = (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+    e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
   ) => {
     let shouldHandle = false;
 

packages/native/src/useLinkTo.tsx

@@ -37,7 +37,7 @@ export default function useLinkTo() {
           root = current;
         }
 
-        const action = getActionFromState(state);
+        const action = getActionFromState(state, options?.config);
 
         if (action !== undefined) {
           root.dispatch(action);

packages/native/src/useLinking.native.tsx

@@ -6,6 +6,7 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/core';
 import type { LinkingOptions } from './types';
+import escapeStringRegexp from 'escape-string-regexp';
 
 let isUsingLinking = false;
 
@@ -15,6 +16,22 @@ export default function useLinking(
     enabled = true,
     prefixes,
     config,
+    getInitialURL = () =>
+      Promise.race([
+        Linking.getInitialURL(),
+        new Promise<undefined>((resolve) =>
+          // Timeout in 150ms if `getInitialState` doesn't resolve
+          // Workaround for https://github.com/facebook/react-native/issues/25675
+          setTimeout(resolve, 150)
+        ),
+      ]),
+    subscribe = (listener) => {
+      const callback = ({ url }: { url: string }) => listener(url);
+
+      Linking.addEventListener('url', callback);
+
+      return () => Linking.removeEventListener('url', callback);
+    },
     getStateFromPath = getStateFromPathDefault,
   }: LinkingOptions
 ) {
@@ -47,19 +64,29 @@ export default function useLinking(
   const enabledRef = React.useRef(enabled);
   const prefixesRef = React.useRef(prefixes);
   const configRef = React.useRef(config);
+  const getInitialURLRef = React.useRef(getInitialURL);
   const getStateFromPathRef = React.useRef(getStateFromPath);
 
   React.useEffect(() => {
     enabledRef.current = enabled;
     prefixesRef.current = prefixes;
     configRef.current = config;
+    getInitialURLRef.current = getInitialURL;
     getStateFromPathRef.current = getStateFromPath;
-  }, [config, enabled, getStateFromPath, prefixes]);
+  }, [config, enabled, prefixes, getInitialURL, getStateFromPath]);
 
   const extractPathFromURL = React.useCallback((url: string) => {
     for (const prefix of prefixesRef.current) {
-      if (url.startsWith(prefix)) {
-        return url.replace(prefix, '');
+      const protocol = prefix.match(/^[^:]+:\/\//)?.[0] ?? '';
+      const host = prefix.replace(protocol, '');
+      const prefixRegex = new RegExp(
+        `^${escapeStringRegexp(protocol)}${host
+          .split('.')
+          .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
+          .join('\\.')}`
+      );
+      if (prefixRegex.test(url)) {
+        return url.replace(prefixRegex, '');
       }
     }
 
@@ -71,15 +98,7 @@ export default function useLinking(
       return undefined;
     }
 
-    const url = await (Promise.race([
-      Linking.getInitialURL(),
-      new Promise((resolve) =>
-        // Timeout in 150ms if `getInitialState` doesn't resolve
-        // Workaround for https://github.com/facebook/react-native/issues/25675
-        setTimeout(resolve, 150)
-      ),
-    ]) as Promise<string | null | undefined>);
-
+    const url = await getInitialURLRef.current();
     const path = url ? extractPathFromURL(url) : null;
 
     if (path) {
@@ -90,7 +109,7 @@ export default function useLinking(
   }, [extractPathFromURL]);
 
   React.useEffect(() => {
-    const listener = ({ url }: { url: string }) => {
+    const listener = (url: string) => {
       if (!enabled) {
         return;
       }
@@ -102,10 +121,31 @@ export default function useLinking(
         const state = getStateFromPathRef.current(path, configRef.current);
 
         if (state) {
-          const action = getActionFromState(state);
+          // Make sure that the routes in the state exist in the root navigator
+          // Otherwise there's an error in the linking configuration
+          const rootState = navigation.getRootState();
+
+          if (
+            state.routes.some((r) => !rootState?.routeNames.includes(r.name))
+          ) {
+            console.warn(
+              "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+            );
+            return;
+          }
+
+          const action = getActionFromState(state, configRef.current);
 
           if (action !== undefined) {
-            navigation.dispatch(action);
+            try {
+              navigation.dispatch(action);
+            } catch (e) {
+              // Ignore any errors from deep linking.
+              // This could happen in case of malformed links, navigation object not being initialized etc.
+              console.warn(
+                `An error occurred when trying to handle the link '${path}': ${e.message}`
+              );
+            }
           } else {
             navigation.resetRoot(state);
           }
@@ -113,10 +153,8 @@ export default function useLinking(
       }
     };
 
-    Linking.addEventListener('url', listener);
-
-    return () => Linking.removeEventListener('url', listener);
-  }, [enabled, extractPathFromURL, ref]);
+    return subscribe(listener);
+  }, [enabled, ref, subscribe, extractPathFromURL]);
 
   return {
     getInitialState,

packages/native/src/useLinking.tsx

@@ -399,11 +399,34 @@ export default function useLinking(
 
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
-      if (state && index > previousIndex) {
-        const action = getActionFromState(state);
+      if (state) {
+        // Make sure that the routes in the state exist in the root navigator
+        // Otherwise there's an error in the linking configuration
+        const rootState = navigation.getRootState();
 
-        if (action !== undefined) {
-          navigation.dispatch(action);
+        if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
+          console.warn(
+            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
+          );
+          return;
+        }
+
+        if (index > previousIndex) {
+          const action = getActionFromState(state, configRef.current);
+
+          if (action !== undefined) {
+            try {
+              navigation.dispatch(action);
+            } catch (e) {
+              // Ignore any errors from deep linking.
+              // This could happen in case of malformed links, navigation object not being initialized etc.
+              console.warn(
+                `An error occurred when trying to handle the link '${path}': ${e.message}`
+              );
+            }
+          } else {
+            navigation.resetRoot(state);
+          }
         } else {
           navigation.resetRoot(state);
         }
@@ -423,13 +446,16 @@ export default function useLinking(
       // We need to record the current metadata on the first render if they aren't set
       // This will allow the initial state to be in the history entry
       const state = ref.current.getRootState();
-      const path = getPathFromStateRef.current(state, configRef.current);
 
-      if (previousStateRef.current === undefined) {
-        previousStateRef.current = state;
+      if (state) {
+        const path = getPathFromStateRef.current(state, configRef.current);
+
+        if (previousStateRef.current === undefined) {
+          previousStateRef.current = state;
+        }
+
+        history.replace({ path, state });
       }
-
-      history.replace({ path, state });
     }
 
     const onStateChange = async () => {

packages/routers/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.6.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.5.1...@react-navigation/routers@5.6.0) (2020-11-04)
+
+
+### Features
+
+* add a merge option to navigate to control merging params ([9beca3a](https://github.com/react-navigation/react-navigation/commit/9beca3a8027c6e2135dbef2abb8eede6b0b4bc44))
+
+
+
+
+
+## [5.5.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.5.0...@react-navigation/routers@5.5.1) (2020-10-28)
+
+
+### Bug Fixes
+
+* improve types for route prop in screenOptions ([d26bcc0](https://github.com/react-navigation/react-navigation/commit/d26bcc057ef31f8950f909adf83e263171a42d74))
+
+
+
+
+
+# [5.5.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.4.12...@react-navigation/routers@5.5.0) (2020-10-24)
+
+
+### Bug Fixes
+
+* handle pushing a route with duplicate key ([091b2a2](https://github.com/react-navigation/react-navigation/commit/091b2a2038af1097be57a1bb451623d64a1efc92))
+
+
+### Features
+
+* allow deep linking to reset state ([#8973](https://github.com/react-navigation/react-navigation/issues/8973)) ([7f3b27a](https://github.com/react-navigation/react-navigation/commit/7f3b27a9ec8edd9604ac19774baa1f60963ccdc9)), closes [#8952](https://github.com/react-navigation/react-navigation/issues/8952)
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+
+
+
+
+
 ## [5.4.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@5.4.11...@react-navigation/routers@5.4.12) (2020-09-22)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "5.4.12",
+  "version": "5.6.0",
   "keywords": [
     "react",
     "react-native",
@@ -36,7 +36,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "nanoid": "^3.1.12"
+    "nanoid": "^3.1.15"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",

packages/routers/src/CommonActions.tsx

@@ -16,8 +16,8 @@ export type Action =
   | {
       type: 'NAVIGATE';
       payload:
-        | { key: string; name?: undefined; params?: object }
-        | { name: string; key?: string; params?: object };
+        | { key: string; name?: undefined; params?: object; merge?: boolean }
+        | { name: string; key?: string; params?: object; merge?: boolean };
       source?: string;
       target?: string;
     }

packages/routers/src/DrawerRouter.tsx

@@ -25,8 +25,8 @@ export type DrawerRouterOptions = TabRouterOptions & {
   openByDefault?: boolean;
 };
 
-export type DrawerNavigationState = Omit<
-  TabNavigationState,
+export type DrawerNavigationState<ParamList extends ParamListBase> = Omit<
+  TabNavigationState<ParamList>,
   'type' | 'history'
 > & {
   /**
@@ -72,10 +72,14 @@ export const DrawerActions = {
 };
 
 const isDrawerOpen = (
-  state: DrawerNavigationState | PartialState<DrawerNavigationState>
+  state:
+    | DrawerNavigationState<ParamListBase>
+    | PartialState<DrawerNavigationState<ParamListBase>>
 ) => Boolean(state.history?.find((it) => it.type === 'drawer'));
 
-const openDrawer = (state: DrawerNavigationState): DrawerNavigationState => {
+const openDrawer = (
+  state: DrawerNavigationState<ParamListBase>
+): DrawerNavigationState<ParamListBase> => {
   if (isDrawerOpen(state)) {
     return state;
   }
@@ -86,7 +90,9 @@ const openDrawer = (state: DrawerNavigationState): DrawerNavigationState => {
   };
 };
 
-const closeDrawer = (state: DrawerNavigationState): DrawerNavigationState => {
+const closeDrawer = (
+  state: DrawerNavigationState<ParamListBase>
+): DrawerNavigationState<ParamListBase> => {
   if (!isDrawerOpen(state)) {
     return state;
   }
@@ -101,11 +107,11 @@ export default function DrawerRouter({
   openByDefault,
   ...rest
 }: DrawerRouterOptions): Router<
-  DrawerNavigationState,
+  DrawerNavigationState<ParamListBase>,
   DrawerActionType | CommonNavigationAction
 > {
   const router = (TabRouter(rest) as unknown) as Router<
-    DrawerNavigationState,
+    DrawerNavigationState<ParamListBase>,
     TabActionType | CommonNavigationAction
   >;
 

packages/routers/src/StackRouter.tsx

@@ -36,7 +36,9 @@ export type StackActionType =
 
 export type StackRouterOptions = DefaultRouterOptions;
 
-export type StackNavigationState = NavigationState & {
+export type StackNavigationState<
+  ParamList extends ParamListBase
+> = NavigationState<ParamList> & {
   /**
    * Type of the router, in this case, it's stack.
    */
@@ -96,7 +98,7 @@ export const StackActions = {
 
 export default function StackRouter(options: StackRouterOptions) {
   const router: Router<
-    StackNavigationState,
+    StackNavigationState<ParamListBase>,
     CommonNavigationAction | StackActionType
   > = {
     ...BaseRouter,
@@ -256,10 +258,35 @@ export default function StackRouter(options: StackRouterOptions) {
 
         case 'PUSH':
           if (state.routeNames.includes(action.payload.name)) {
-            return {
-              ...state,
-              index: state.index + 1,
-              routes: [
+            const route =
+              action.payload.name && action.payload.key
+                ? state.routes.find(
+                    (route) =>
+                      route.name === action.payload.name &&
+                      route.key === action.payload.key
+                  )
+                : undefined;
+
+            let routes: Route<string>[];
+
+            if (route) {
+              routes = state.routes.filter((r) => r.key !== route.key);
+              routes.push(
+                action.payload.params
+                  ? {
+                      ...route,
+                      params:
+                        action.payload.params !== undefined
+                          ? {
+                              ...route.params,
+                              ...action.payload.params,
+                            }
+                          : route.params,
+                    }
+                  : route
+              );
+            } else {
+              routes = [
                 ...state.routes,
                 {
                   key:
@@ -275,7 +302,13 @@ export default function StackRouter(options: StackRouterOptions) {
                         }
                       : action.payload.params,
                 },
-              ],
+              ];
+            }
+
+            return {
+              ...state,
+              index: routes.length - 1,
+              routes,
             };
           }
 
@@ -364,19 +397,34 @@ export default function StackRouter(options: StackRouterOptions) {
               );
             }
 
+            const route = state.routes[index];
+
+            let params;
+
+            if (action.payload.merge === false) {
+              params =
+                routeParamList[route.name] !== undefined
+                  ? {
+                      ...routeParamList[route.name],
+                      ...action.payload.params,
+                    }
+                  : action.payload.params;
+            } else {
+              params = action.payload.params
+                ? {
+                    ...route.params,
+                    ...action.payload.params,
+                  }
+                : route.params;
+            }
+
             return {
               ...state,
               index,
               routes: [
                 ...state.routes.slice(0, index),
-                action.payload.params !== undefined
-                  ? {
-                      ...state.routes[index],
-                      params: {
-                        ...state.routes[index].params,
-                        ...action.payload.params,
-                      },
-                    }
+                params !== route.params
+                  ? { ...route, params }
                   : state.routes[index],
               ],
             };

packages/routers/src/TabRouter.tsx

@@ -23,7 +23,10 @@ export type TabRouterOptions = DefaultRouterOptions & {
   backBehavior?: BackBehavior;
 };
 
-export type TabNavigationState = Omit<NavigationState, 'history'> & {
+export type TabNavigationState<ParamList extends ParamListBase> = Omit<
+  NavigationState<ParamList>,
+  'history'
+> & {
   /**
    * Type of the router, in this case, it's tab.
    */
@@ -93,7 +96,7 @@ const getRouteHistory = (
 };
 
 const changeIndex = (
-  state: TabNavigationState,
+  state: TabNavigationState<ParamListBase>,
   index: number,
   backBehavior: BackBehavior,
   initialRouteName: string | undefined
@@ -127,7 +130,7 @@ export default function TabRouter({
   backBehavior = 'history',
 }: TabRouterOptions) {
   const router: Router<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabActionType | CommonNavigationAction
   > = {
     ...BaseRouter,
@@ -172,9 +175,9 @@ export default function TabRouter({
       }
 
       const routes = routeNames.map((name) => {
-        const route = (state as PartialState<TabNavigationState>).routes.find(
-          (r) => r.name === name
-        );
+        const route = (state as PartialState<
+          TabNavigationState<ParamListBase>
+        >).routes.find((r) => r.name === name);
 
         return {
           ...route,
@@ -268,7 +271,7 @@ export default function TabRouter({
       return changeIndex(state, index, backBehavior, initialRouteName);
     },
 
-    getStateForAction(state, action) {
+    getStateForAction(state, action, { routeParamList }) {
       switch (action.type) {
         case 'JUMP_TO':
         case 'NAVIGATE': {
@@ -293,17 +296,37 @@ export default function TabRouter({
               ...state,
               routes:
                 action.payload.params !== undefined
-                  ? state.routes.map((route, i) =>
-                      i === index
-                        ? {
-                            ...route,
-                            params: {
+                  ? state.routes.map((route, i) => {
+                      if (i !== index) {
+                        return route;
+                      }
+
+                      let params;
+
+                      if (
+                        action.type === 'NAVIGATE' &&
+                        action.payload.merge === false
+                      ) {
+                        params =
+                          routeParamList[route.name] !== undefined
+                            ? {
+                                ...routeParamList[route.name],
+                                ...action.payload.params,
+                              }
+                            : action.payload.params;
+                      } else {
+                        params = action.payload.params
+                          ? {
                               ...route.params,
                               ...action.payload.params,
-                            },
-                          }
-                        : route
-                    )
+                            }
+                          : route.params;
+                      }
+
+                      return params !== route.params
+                        ? { ...route, params }
+                        : route;
+                    })
                   : state.routes,
             },
             index,

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

@@ -3,6 +3,7 @@ import {
   DrawerRouter,
   DrawerActions,
   DrawerNavigationState,
+  ParamListBase,
 } from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
@@ -199,7 +200,7 @@ it('gets rehydrated state from partial state', () => {
 it("doesn't rehydrate state if it's not stale", () => {
   const router = DrawerRouter({});
 
-  const state: DrawerNavigationState = {
+  const state: DrawerNavigationState<ParamListBase> = {
     index: 0,
     key: 'drawer-test',
     routeNames: ['bar', 'baz', 'qux'],
@@ -340,7 +341,7 @@ it('handles open drawer action', () => {
     history: [{ type: 'route', key: 'bar' }, { type: 'drawer' }],
   });
 
-  const state: DrawerNavigationState = {
+  const state: DrawerNavigationState<ParamListBase> = {
     stale: false as const,
     type: 'drawer' as const,
     key: 'root',
@@ -395,7 +396,7 @@ it('handles close drawer action', () => {
     history: [{ type: 'route', key: 'bar' }],
   });
 
-  const state: DrawerNavigationState = {
+  const state: DrawerNavigationState<ParamListBase> = {
     stale: false as const,
     type: 'drawer' as const,
     key: 'root',
@@ -487,7 +488,7 @@ it('handles toggle drawer action', () => {
 it('updates history on focus change', () => {
   const router = DrawerRouter({ backBehavior: 'history' });
 
-  const state: DrawerNavigationState = {
+  const state: DrawerNavigationState<ParamListBase> = {
     index: 0,
     key: 'drawer-test',
     routeNames: ['baz', 'bar'],

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

@@ -848,7 +848,7 @@ it('handles push action', () => {
     stale: false,
     type: 'stack',
     key: 'root',
-    index: 3,
+    index: 1,
     routeNames: ['baz', 'bar', 'qux'],
     routes: [
       { key: 'bar', name: 'bar' },
@@ -873,7 +873,7 @@ it('handles push action', () => {
     stale: false,
     type: 'stack',
     key: 'root',
-    index: 3,
+    index: 1,
     routeNames: ['baz', 'bar', 'qux'],
     routes: [
       { key: 'bar', name: 'bar' },
@@ -895,6 +895,73 @@ it('handles push action', () => {
       options
     )
   ).toBe(null);
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar-3', name: 'bar' },
+          { key: 'bar-4', name: 'bar', params: { foo: 21 } },
+          { key: 'baz-5', name: 'baz' },
+        ],
+      },
+      {
+        type: 'PUSH',
+        payload: { name: 'bar', key: 'bar-4', params: { bar: 29 } },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar-3', name: 'bar' },
+      { key: 'baz-5', name: 'baz' },
+      { key: 'bar-4', name: 'bar', params: { foo: 21, bar: 29 } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'bar-3', name: 'bar' },
+          { key: 'bar-4', name: 'bar' },
+          { key: 'baz-5', name: 'baz' },
+        ],
+      },
+      {
+        type: 'PUSH',
+        payload: { name: 'bar', key: 'bar-6', params: { bar: 29 } },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 3,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'bar-3', name: 'bar' },
+      { key: 'bar-4', name: 'bar' },
+      { key: 'baz-5', name: 'baz' },
+      { key: 'bar-6', name: 'bar', params: { bar: 29 } },
+    ],
+  });
 });
 
 it('changes index on focus change', () => {
@@ -1007,3 +1074,115 @@ it('merges params on navigate to an existing screen', () => {
     ],
   });
 });
+
+it("doesn't merge params on navigate to an existing screen if merge: false", () => {
+  const router = StackRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {
+      baz: { foo: 12 },
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 2,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar', params: { answer: 42 } },
+          { key: 'qux', name: 'qux' },
+        ],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: {
+          name: 'bar',
+          merge: false,
+        },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar', params: { answer: 42 } },
+        ],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: {
+          name: 'bar',
+          params: { fruit: 'orange' },
+          merge: false,
+        },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar', params: { fruit: 'orange' } },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'stack',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz', params: { test: 99 } },
+          { key: 'bar', name: 'bar', params: { answer: 42 } },
+        ],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: {
+          name: 'baz',
+          params: { color: 'black' },
+          merge: false,
+        },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'stack',
+    key: 'root',
+    index: 0,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [{ key: 'baz', name: 'baz', params: { foo: 12, color: 'black' } }],
+  });
+});

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

@@ -1,4 +1,10 @@
-import { CommonActions, TabRouter, TabActions, TabNavigationState } from '..';
+import {
+  CommonActions,
+  TabRouter,
+  TabActions,
+  TabNavigationState,
+  ParamListBase,
+} from '..';
 
 jest.mock('nanoid/non-secure', () => ({ nanoid: () => 'test' }));
 
@@ -217,7 +223,7 @@ it('gets rehydrated state from partial state', () => {
 it("doesn't rehydrate state if it's not stale", () => {
   const router = TabRouter({});
 
-  const state: TabNavigationState = {
+  const state: TabNavigationState<ParamListBase> = {
     index: 0,
     key: 'tab-test',
     routeNames: ['bar', 'baz', 'qux'],
@@ -699,7 +705,7 @@ it('handles back action with backBehavior: history', () => {
     state,
     TabActions.jumpTo('qux'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -721,7 +727,7 @@ it('handles back action with backBehavior: history', () => {
     state,
     TabActions.jumpTo('baz'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -746,7 +752,7 @@ it('handles back action with backBehavior: history', () => {
     state,
     TabActions.jumpTo('bar'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -785,7 +791,7 @@ it('handles back action with backBehavior: order', () => {
     state,
     TabActions.jumpTo('qux'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -810,7 +816,7 @@ it('handles back action with backBehavior: order', () => {
     state,
     TabActions.jumpTo('baz'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -832,7 +838,7 @@ it('handles back action with backBehavior: order', () => {
     state,
     TabActions.jumpTo('bar'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -856,7 +862,7 @@ it('handles back action with backBehavior: initialRoute', () => {
     state,
     TabActions.jumpTo('qux'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -878,7 +884,7 @@ it('handles back action with backBehavior: initialRoute', () => {
     state,
     TabActions.jumpTo('baz'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -900,7 +906,7 @@ it('handles back action with backBehavior: initialRoute', () => {
     state,
     TabActions.jumpTo('bar'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -928,7 +934,7 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
     state,
     TabActions.jumpTo('qux'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -950,7 +956,7 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
     state,
     TabActions.jumpTo('bar'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -972,7 +978,7 @@ it('handles back action with backBehavior: initialRoute and initialRouteName', (
     state,
     TabActions.jumpTo('baz'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -992,7 +998,7 @@ it('handles back action with backBehavior: none', () => {
     state,
     TabActions.jumpTo('baz'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(
     router.getStateForAction(state, CommonActions.goBack(), options)
@@ -1006,7 +1012,7 @@ it('updates route key history on navigate and jump to', () => {
     routeParamList: {},
   };
 
-  let state: TabNavigationState = {
+  let state: TabNavigationState<ParamListBase> = {
     index: 1,
     key: 'tab-test',
     routeNames: ['bar', 'baz', 'qux'],
@@ -1024,7 +1030,7 @@ it('updates route key history on navigate and jump to', () => {
     state,
     TabActions.jumpTo('qux'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(state.history).toEqual([
     { type: 'route', key: 'baz-0' },
@@ -1035,7 +1041,7 @@ it('updates route key history on navigate and jump to', () => {
     state,
     CommonActions.navigate('bar'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(state.history).toEqual([
     { type: 'route', key: 'baz-0' },
@@ -1047,7 +1053,7 @@ it('updates route key history on navigate and jump to', () => {
     state,
     TabActions.jumpTo('baz'),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(state.history).toEqual([
     { type: 'route', key: 'qux-0' },
@@ -1059,7 +1065,7 @@ it('updates route key history on navigate and jump to', () => {
     state,
     CommonActions.goBack(),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(state.history).toEqual([
     { type: 'route', key: 'qux-0' },
@@ -1070,7 +1076,7 @@ it('updates route key history on navigate and jump to', () => {
     state,
     CommonActions.goBack(),
     options
-  ) as TabNavigationState;
+  ) as TabNavigationState<ParamListBase>;
 
   expect(state.history).toEqual([{ type: 'route', key: 'qux-0' }]);
 });
@@ -1180,6 +1186,141 @@ it('merges params on navigate to an existing screen', () => {
   });
 });
 
+it("doesn't merge params on navigate to an existing screen if merge: false", () => {
+  const router = TabRouter({});
+  const options = {
+    routeNames: ['baz', 'bar', 'qux'],
+    routeParamList: {
+      qux: { color: 'indigo' },
+    },
+  };
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'tab',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar', params: { answer: 42 } },
+          { key: 'qux', name: 'qux' },
+        ],
+        history: [{ type: 'route', key: 'baz' }],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: {
+          name: 'bar',
+          merge: false,
+        },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'tab',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar', params: { answer: 42 } },
+      { key: 'qux', name: 'qux' },
+    ],
+    history: [
+      { type: 'route', key: 'baz' },
+      { type: 'route', key: 'bar' },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'tab',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+          { key: 'qux', name: 'qux' },
+        ],
+        history: [{ type: 'route', key: 'baz' }],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: {
+          name: 'bar',
+          params: { fruit: 'orange' },
+          merge: false,
+        },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'tab',
+    key: 'root',
+    index: 1,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar', params: { fruit: 'orange' } },
+      { key: 'qux', name: 'qux' },
+    ],
+    history: [
+      { type: 'route', key: 'baz' },
+      { type: 'route', key: 'bar' },
+    ],
+  });
+
+  expect(
+    router.getStateForAction(
+      {
+        stale: false,
+        type: 'tab',
+        key: 'root',
+        index: 1,
+        routeNames: ['baz', 'bar', 'qux'],
+        routes: [
+          { key: 'baz', name: 'baz' },
+          { key: 'bar', name: 'bar' },
+          { key: 'qux', name: 'qux' },
+        ],
+        history: [{ type: 'route', key: 'baz' }],
+      },
+      {
+        type: 'NAVIGATE',
+        payload: {
+          name: 'qux',
+          params: { test: 12 },
+          merge: false,
+        },
+      },
+      options
+    )
+  ).toEqual({
+    stale: false,
+    type: 'tab',
+    key: 'root',
+    index: 2,
+    routeNames: ['baz', 'bar', 'qux'],
+    routes: [
+      { key: 'baz', name: 'baz' },
+      { key: 'bar', name: 'bar' },
+      { key: 'qux', name: 'qux', params: { color: 'indigo', test: 12 } },
+    ],
+    history: [
+      { type: 'route', key: 'baz' },
+      { type: 'route', key: 'qux' },
+    ],
+  });
+});
+
 it('merges params on jump to an existing screen', () => {
   const router = TabRouter({});
   const options = {

packages/routers/src/types.tsx

@@ -2,7 +2,16 @@ import type * as CommonActions from './CommonActions';
 
 export type CommonNavigationAction = CommonActions.Action;
 
-export type NavigationState = Readonly<{
+type NavigationRoute<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList
+> = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
+  state?: NavigationState | PartialState<NavigationState>;
+};
+
+export type NavigationState<
+  ParamList extends ParamListBase = ParamListBase
+> = Readonly<{
   /**
    * Unique key for the navigation state.
    */
@@ -14,7 +23,7 @@ export type NavigationState = Readonly<{
   /**
    * List of valid route names as defined in the screen components.
    */
-  routeNames: string[];
+  routeNames: Extract<keyof ParamList, string>[];
   /**
    * Alternative entries for history.
    */
@@ -22,9 +31,7 @@ export type NavigationState = Readonly<{
   /**
    * List of rendered routes.
    */
-  routes: (Route<string> & {
-    state?: NavigationState | PartialState<NavigationState>;
-  })[];
+  routes: NavigationRoute<ParamList, keyof ParamList>[];
   /**
    * Custom type for the state, whether it's for tab, stack, drawer etc.
    * During rehydration, the state will be discarded if type doesn't match with router type.
@@ -43,19 +50,24 @@ export type InitialState = Readonly<
   }
 >;
 
+export type PartialRoute<R extends Route<string>> = Omit<R, 'key'> & {
+  key?: string;
+  state?: PartialState<NavigationState>;
+};
+
 export type PartialState<State extends NavigationState> = Partial<
   Omit<State, 'stale' | 'type' | 'key' | 'routes' | 'routeNames'>
 > &
   Readonly<{
     stale?: true;
     type?: string;
-    routes: (Omit<Route<string>, 'key'> & {
-      key?: string;
-      state?: InitialState;
-    })[];
+    routes: PartialRoute<Route<string>>[];
   }>;
 
-export type Route<RouteName extends string> = Readonly<{
+export type Route<
+  RouteName extends string,
+  Params extends object | undefined = object | undefined
+> = Readonly<{
   /**
    * Unique key for the route.
    */
@@ -64,11 +76,20 @@ export type Route<RouteName extends string> = Readonly<{
    * User-provided name for the route.
    */
   name: RouteName;
-  /**
-   * Params for the route.
-   */
-  params?: object;
-}>;
+}> &
+  (undefined extends Params
+    ? Readonly<{
+        /**
+         * Params for this route
+         */
+        params?: Readonly<Params>;
+      }>
+    : Readonly<{
+        /**
+         * Params for this route
+         */
+        params: Readonly<Params>;
+      }>);
 
 export type ParamListBase = Record<string, object | undefined>;
 
@@ -95,12 +116,12 @@ export type ActionCreators<Action extends NavigationAction> = {
   [key: string]: (...args: any) => Action;
 };
 
-export type DefaultRouterOptions = {
+export type DefaultRouterOptions<RouteName extends string = string> = {
   /**
    * Name of the route to focus by on initial render.
    * If not specified, usually the first route is used.
    */
-  initialRouteName?: string;
+  initialRouteName?: RouteName;
 };
 
 export type RouterFactory<

packages/stack/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.12.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.2...@react-navigation/stack@5.12.3) (2020-11-04)
+
+
+### Bug Fixes
+
+* android textinput gets blurred after navigating back ([1169ed0](https://github.com/react-navigation/react-navigation/commit/1169ed0946df609cb7e5c52c4bdda0aa91b5737f))
+* disable react-native-screens on iOS for older versions ([ce7d20e](https://github.com/react-navigation/react-navigation/commit/ce7d20e3366415b07a537e01ee0b17ce7e72cad6))
+
+
+
+
+
+## [5.12.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.1...@react-navigation/stack@5.12.2) (2020-11-04)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+## [5.12.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.0...@react-navigation/stack@5.12.1) (2020-11-03)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.12.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.11.1...@react-navigation/stack@5.12.0) (2020-11-03)
+
+
+### Features
+
+* add a headerBackAccessibilityLabel option in stack ([c326c10](https://github.com/react-navigation/react-navigation/commit/c326c106f9a2492ff45bdc8da9bfbc404e48786a)), closes [#9016](https://github.com/react-navigation/react-navigation/issues/9016)
+
+
+
+
+
+## [5.11.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.11.0...@react-navigation/stack@5.11.1) (2020-10-30)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.11.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.10.0...@react-navigation/stack@5.11.0) (2020-10-28)
+
+
+### Features
+
+* enable react-native-screens in Stack by default on iOS ([45dbe5c](https://github.com/react-navigation/react-navigation/commit/45dbe5c40ebc66c62593b3fad35cff3048b888a4))
+
+
+
+
+
+# [5.10.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.9.3...@react-navigation/stack@5.10.0) (2020-10-24)
+
+
+### Bug Fixes
+
+* add missing check for parent header when calculating height ([da91cec](https://github.com/react-navigation/react-navigation/commit/da91cec941e7dec352ba1910901904d769c9f3a3))
+* don't set statusbar height on nested header by default ([38e17aa](https://github.com/react-navigation/react-navigation/commit/38e17aae939974b47fe5c77d8670b9a4544250f2))
+* fix header buttons not pressable when headerTransparent=true & headerMode=float ([#8804](https://github.com/react-navigation/react-navigation/issues/8804)) ([d6cac67](https://github.com/react-navigation/react-navigation/commit/d6cac6713a51e4de320fc1c7ece72a2b92241574)), closes [#8731](https://github.com/react-navigation/react-navigation/issues/8731)
+* set needsOffscreenAlphaCompositing and update default android animation ([8ee0dda](https://github.com/react-navigation/react-navigation/commit/8ee0dda155b4cde43be1e58170e44823b54e7d4f)), closes [#8696](https://github.com/react-navigation/react-navigation/issues/8696)
+
+
+### Features
+
+* add optional screens per navigator ([#8805](https://github.com/react-navigation/react-navigation/issues/8805)) ([7196889](https://github.com/react-navigation/react-navigation/commit/7196889bf1218eb6a736d9475e33a909c2248c3b))
+* improve types for navigation state ([#8980](https://github.com/react-navigation/react-navigation/issues/8980)) ([7dc2f58](https://github.com/react-navigation/react-navigation/commit/7dc2f5832e371473f3263c01ab39824eb9e2057d))
+* update helper types to have navigator specific methods ([f51086e](https://github.com/react-navigation/react-navigation/commit/f51086edea42f2382dac8c6914aac8574132114b))
+
+
+
+
+
+## [5.9.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.9.2...@react-navigation/stack@5.9.3) (2020-10-07)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
 ## [5.9.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.9.1...@react-navigation/stack@5.9.2) (2020-09-28)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.9.2",
+  "version": "5.12.3",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,17 +40,17 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "color": "^3.1.2",
-    "react-native-iphone-x-helper": "^1.2.1"
+    "color": "^3.1.3",
+    "react-native-iphone-x-helper": "^1.3.0"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-navigation/native": "^5.7.5",
-    "@testing-library/react-native": "^7.0.2",
+    "@react-navigation/native": "^5.8.6",
+    "@testing-library/react-native": "^7.1.0",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.49",
-    "@types/react-native": "^0.63.20",
+    "@types/react": "^16.9.53",
+    "@types/react-native": "^0.63.30",
     "del-cli": "^3.0.1",
     "react": "~16.13.1",
     "react-native": "~0.63.2",

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -289,8 +289,8 @@ export function forScaleFromCenterAndroid({
   );
 
   const opacity = progress.interpolate({
-    inputRange: [0, 0.8, 1, 1.2, 2],
-    outputRange: [0, 0.5, 1, 0.33, 0],
+    inputRange: [0, 0.75, 0.875, 1, 1.0825, 1.2075, 2],
+    outputRange: [0, 0, 1, 1, 1, 1, 0],
   });
 
   const scale = conditional(

packages/stack/src/TransitionConfigs/TransitionPresets.tsx

@@ -18,6 +18,7 @@ import {
 import type { TransitionPreset } from '../types';
 
 const ANDROID_VERSION_PIE = 28;
+const ANDROID_VERSION_10 = 29;
 
 /**
  * Standard iOS navigation transition.
@@ -102,10 +103,13 @@ export const ScaleFromCenterAndroid: TransitionPreset = {
  */
 export const DefaultTransition = Platform.select({
   ios: SlideFromRightIOS,
-  default:
-    Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE
+  android:
+    Platform.Version >= ANDROID_VERSION_10
+      ? ScaleFromCenterAndroid
+      : Platform.Version >= ANDROID_VERSION_PIE
       ? RevealFromBottomAndroid
       : FadeFromBottomAndroid,
+  default: ScaleFromCenterAndroid,
 });
 
 /**

packages/stack/src/navigators/createStackNavigator.tsx

@@ -9,6 +9,8 @@ import {
   StackRouterOptions,
   StackNavigationState,
   StackActions,
+  ParamListBase,
+  StackActionHelpers,
 } from '@react-navigation/native';
 import StackView from '../views/Stack/StackView';
 import type {
@@ -36,8 +38,9 @@ function StackNavigator({
   };
 
   const { state, descriptors, navigation } = useNavigationBuilder<
-    StackNavigationState,
+    StackNavigationState<ParamListBase>,
     StackRouterOptions,
+    StackActionHelpers<ParamListBase>,
     StackNavigationOptions,
     StackNavigationEventMap
   >(StackRouter, {
@@ -91,7 +94,7 @@ function StackNavigator({
 }
 
 export default createNavigatorFactory<
-  StackNavigationState,
+  StackNavigationState<ParamListBase>,
   StackNavigationOptions,
   StackNavigationEventMap,
   typeof StackNavigator

packages/stack/src/types.tsx

@@ -44,7 +44,8 @@ export type StackNavigationEventMap = {
 export type StackNavigationHelpers = NavigationHelpers<
   ParamListBase,
   StackNavigationEventMap
->;
+> &
+  StackActionHelpers<ParamListBase>;
 
 export type StackNavigationProp<
   ParamList extends ParamListBase,
@@ -52,7 +53,7 @@ export type StackNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  StackNavigationState,
+  StackNavigationState<ParamList>,
   StackNavigationOptions,
   StackNavigationEventMap
 > &
@@ -144,6 +145,10 @@ export type StackHeaderOptions = {
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */
   headerBackAllowFontScaling?: boolean;
+  /**
+   * Accessibility label for the header back button.
+   */
+  headerBackAccessibilityLabel?: string;
   /**
    * Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
    * Use `headerBackTitleVisible: false` to hide it.
@@ -250,7 +255,7 @@ export type StackHeaderProps = {
 export type StackDescriptor = Descriptor<
   ParamListBase,
   string,
-  StackNavigationState,
+  StackNavigationState<ParamListBase>,
   StackNavigationOptions
 >;
 
@@ -320,11 +325,11 @@ export type StackNavigationOptions = StackHeaderOptions &
      */
     gestureResponseDistance?: {
       /**
-       * Distance for horizontal direction. Defaults to 25.
+       * Distance for vertical direction. Defaults to 135.
        */
       vertical?: number;
       /**
-       * Distance for vertical direction. Defaults to 135.
+       * Distance for horizontal direction. Defaults to 25.
        */
       horizontal?: number;
     };
@@ -344,6 +349,13 @@ export type StackNavigationOptions = StackHeaderOptions &
       bottom?: number;
       left?: number;
     };
+    /**
+     * Whether to detach the previous screen from the view hierarchy to save memory.
+     * Set it to `false` if you need the previous screen to be seen through the active screen.
+     * Only applicable if `detachInactiveScreens` isn't set to `false`.
+     * Defaults to `false` for the last screen when mode='modal', otherwise `true`.
+     */
+    detachPreviousScreen?: boolean;
   };
 
 export type StackNavigationConfig = {
@@ -354,6 +366,12 @@ export type StackNavigationConfig = {
    * Defaults to `true`.
    */
   keyboardHandlingEnabled?: boolean;
+  /**
+   * Whether inactive screens should be detached from the view hierarchy to save memory.
+   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
+   * Defaults to `true` on Android, depends on the version of `react-native-screens` on iOS.
+   */
+  detachInactiveScreens?: boolean;
 };
 
 export type StackHeaderLeftButtonProps = {

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import {
   NavigationContext,
   NavigationRouteContext,
@@ -60,7 +60,7 @@ export default function HeaderContainer({
   const parentPreviousScene = React.useContext(PreviousSceneContext);
 
   return (
-    <View pointerEvents="box-none" style={style}>
+    <Animated.View pointerEvents="box-none" style={style}>
       {scenes.slice(-3).map((scene, i, self) => {
         if ((mode === 'screen' && i !== self.length - 1) || !scene) {
           return null;
@@ -130,11 +130,14 @@ export default function HeaderContainer({
               <View
                 onLayout={
                   onContentHeightChange
-                    ? (e) =>
+                    ? (e) => {
+                        const { height } = e.nativeEvent.layout;
+
                         onContentHeightChange({
                           route: scene.route,
-                          height: e.nativeEvent.layout.height,
-                        })
+                          height,
+                        });
+                      }
                     : undefined
                 }
                 pointerEvents={isFocused ? 'box-none' : 'none'}
@@ -156,7 +159,7 @@ export default function HeaderContainer({
           </NavigationContext.Provider>
         );
       })}
-    </View>
+    </Animated.View>
   );
 }
 

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -11,6 +11,7 @@ import type { EdgeInsets } from 'react-native-safe-area-context';
 import type { Route } from '@react-navigation/native';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderBackground from './HeaderBackground';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 import memoize from '../../utils/memoize';
 import type {
   Layout,
@@ -32,11 +33,6 @@ type Props = StackHeaderOptions & {
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
-type State = {
-  titleLayout?: Layout;
-  leftLabelLayout?: Layout;
-};
-
 const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
   Object.keys(styles).forEach((styleProp) => {
     const value = styles[styleProp];
@@ -76,30 +72,35 @@ export const getDefaultHeaderHeight = (
   return headerHeight + statusBarHeight;
 };
 
-export default class HeaderSegment extends React.Component<Props, State> {
-  state: State = {};
+export default function HeaderSegment(props: Props) {
+  const [leftLabelLayout, setLeftLabelLayout] = React.useState<
+    Layout | undefined
+  >(undefined);
 
-  private handleTitleLayout = (e: LayoutChangeEvent) => {
+  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
+    undefined
+  );
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+
+  const handleTitleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
 
-    this.setState(({ titleLayout }) => {
+    setTitleLayout((titleLayout) => {
       if (
         titleLayout &&
         height === titleLayout.height &&
         width === titleLayout.width
       ) {
-        return null;
+        return titleLayout;
       }
 
-      return {
-        titleLayout: { height, width },
-      };
+      return { height, width };
     });
   };
 
-  private handleLeftLabelLayout = (e: LayoutChangeEvent) => {
+  const handleLeftLabelLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
-    const { leftLabelLayout } = this.state;
 
     if (
       leftLabelLayout &&
@@ -109,10 +110,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
       return;
     }
 
-    this.setState({ leftLabelLayout: { height, width } });
+    setLeftLabelLayout({ height, width });
   };
 
-  private getInterpolatedStyle = memoize(
+  const getInterpolatedStyle = memoize(
     (
       styleInterpolator: StackHeaderStyleInterpolator,
       layout: Layout,
@@ -137,258 +138,253 @@ export default class HeaderSegment extends React.Component<Props, State> {
       })
   );
 
-  render() {
-    const {
-      scene,
-      layout,
-      insets,
-      title: currentTitle,
-      leftLabel: previousTitle,
-      onGoBack,
-      headerTitle,
-      headerTitleAlign = Platform.select({
-        ios: 'center',
-        default: 'left',
-      }),
-      headerLeft: left = onGoBack
-        ? (props: StackHeaderLeftButtonProps) => <HeaderBackButton {...props} />
-        : undefined,
-      headerTransparent,
-      headerTintColor,
-      headerBackground,
-      headerRight: right,
-      headerBackImage: backImage,
-      headerBackTitle: leftLabel,
-      headerBackTitleVisible,
-      headerTruncatedBackTitle: truncatedLabel,
-      headerPressColorAndroid: pressColorAndroid,
-      headerBackAllowFontScaling: backAllowFontScaling,
-      headerTitleAllowFontScaling: titleAllowFontScaling,
-      headerTitleStyle: customTitleStyle,
-      headerBackTitleStyle: customLeftLabelStyle,
-      headerLeftContainerStyle: leftContainerStyle,
-      headerRightContainerStyle: rightContainerStyle,
-      headerTitleContainerStyle: titleContainerStyle,
-      headerStyle: customHeaderStyle,
-      headerStatusBarHeight = insets.top,
-      styleInterpolator,
-    } = this.props;
+  const {
+    scene,
+    layout,
+    insets,
+    title: currentTitle,
+    leftLabel: previousTitle,
+    onGoBack,
+    headerTitle,
+    headerTitleAlign = Platform.select({
+      ios: 'center',
+      default: 'left',
+    }),
+    headerLeft: left = onGoBack
+      ? (props: StackHeaderLeftButtonProps) => <HeaderBackButton {...props} />
+      : undefined,
+    headerTransparent,
+    headerTintColor,
+    headerBackground,
+    headerRight: right,
+    headerBackImage: backImage,
+    headerBackTitle: leftLabel,
+    headerBackTitleVisible,
+    headerTruncatedBackTitle: truncatedLabel,
+    headerPressColorAndroid: pressColorAndroid,
+    headerBackAccessibilityLabel: backAccessibilityLabel,
+    headerBackAllowFontScaling: backAllowFontScaling,
+    headerTitleAllowFontScaling: titleAllowFontScaling,
+    headerTitleStyle: customTitleStyle,
+    headerBackTitleStyle: customLeftLabelStyle,
+    headerLeftContainerStyle: leftContainerStyle,
+    headerRightContainerStyle: rightContainerStyle,
+    headerTitleContainerStyle: titleContainerStyle,
+    headerStyle: customHeaderStyle,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+    styleInterpolator,
+  } = props;
 
-    const { leftLabelLayout, titleLayout } = this.state;
+  const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
 
-    const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
+  const {
+    height = defaultHeight,
+    minHeight,
+    maxHeight,
+    backgroundColor,
+    borderBottomColor,
+    borderBottomEndRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStartRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndColor,
+    borderEndWidth,
+    borderLeftColor,
+    borderLeftWidth,
+    borderRadius,
+    borderRightColor,
+    borderRightWidth,
+    borderStartColor,
+    borderStartWidth,
+    borderStyle,
+    borderTopColor,
+    borderTopEndRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopStartRadius,
+    borderTopWidth,
+    borderWidth,
+    // @ts-expect-error: web support for shadow
+    boxShadow,
+    elevation,
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    opacity,
+    transform,
+    ...unsafeStyles
+  } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
 
-    const {
-      height = defaultHeight,
-      minHeight,
-      maxHeight,
-      backgroundColor,
-      borderBottomColor,
-      borderBottomEndRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      borderBottomStartRadius,
-      borderBottomWidth,
-      borderColor,
-      borderEndColor,
-      borderEndWidth,
-      borderLeftColor,
-      borderLeftWidth,
-      borderRadius,
-      borderRightColor,
-      borderRightWidth,
-      borderStartColor,
-      borderStartWidth,
-      borderStyle,
-      borderTopColor,
-      borderTopEndRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderTopStartRadius,
-      borderTopWidth,
-      borderWidth,
-      // @ts-expect-error: web support for shadow
-      boxShadow,
-      elevation,
-      shadowColor,
-      shadowOffset,
-      shadowOpacity,
-      shadowRadius,
-      opacity,
-      transform,
-      ...unsafeStyles
-    } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
+  if (process.env.NODE_ENV !== 'production') {
+    warnIfHeaderStylesDefined(unsafeStyles);
+  }
 
-    if (process.env.NODE_ENV !== 'production') {
-      warnIfHeaderStylesDefined(unsafeStyles);
+  const safeStyles: ViewStyle = {
+    backgroundColor,
+    borderBottomColor,
+    borderBottomEndRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomStartRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndColor,
+    borderEndWidth,
+    borderLeftColor,
+    borderLeftWidth,
+    borderRadius,
+    borderRightColor,
+    borderRightWidth,
+    borderStartColor,
+    borderStartWidth,
+    borderStyle,
+    borderTopColor,
+    borderTopEndRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopStartRadius,
+    borderTopWidth,
+    borderWidth,
+    // @ts-expect-error: boxShadow is only for Web
+    boxShadow,
+    elevation,
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    opacity,
+    transform,
+  };
+
+  // Setting a property to undefined triggers default style
+  // So we need to filter them out
+  // Users can use `null` instead
+  for (const styleProp in safeStyles) {
+    // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles
+    if (safeStyles[styleProp] === undefined) {
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete safeStyles[styleProp];
     }
+  }
 
-    const safeStyles: ViewStyle = {
-      backgroundColor,
-      borderBottomColor,
-      borderBottomEndRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      borderBottomStartRadius,
-      borderBottomWidth,
-      borderColor,
-      borderEndColor,
-      borderEndWidth,
-      borderLeftColor,
-      borderLeftWidth,
-      borderRadius,
-      borderRightColor,
-      borderRightWidth,
-      borderStartColor,
-      borderStartWidth,
-      borderStyle,
-      borderTopColor,
-      borderTopEndRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderTopStartRadius,
-      borderTopWidth,
-      borderWidth,
-      // @ts-expect-error: boxShadow is only for Web
-      boxShadow,
-      elevation,
-      shadowColor,
-      shadowOffset,
-      shadowOpacity,
-      shadowRadius,
-      opacity,
-      transform,
-    };
+  const {
+    titleStyle,
+    leftButtonStyle,
+    leftLabelStyle,
+    rightButtonStyle,
+    backgroundStyle,
+  } = getInterpolatedStyle(
+    styleInterpolator,
+    layout,
+    scene.progress.current,
+    scene.progress.next,
+    titleLayout,
+    previousTitle ? leftLabelLayout : undefined,
+    typeof height === 'number' ? height : defaultHeight
+  );
 
-    // Setting a property to undefined triggers default style
-    // So we need to filter them out
-    // Users can use `null` instead
-    for (const styleProp in safeStyles) {
-      // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles
-      if (safeStyles[styleProp] === undefined) {
-        // @ts-expect-error
-        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-        delete safeStyles[styleProp];
-      }
-    }
+  const leftButton = left
+    ? left({
+        backImage,
+        pressColorAndroid,
+        accessibilityLabel: backAccessibilityLabel,
+        allowFontScaling: backAllowFontScaling,
+        onPress: onGoBack,
+        labelVisible: headerBackTitleVisible,
+        label: leftLabel !== undefined ? leftLabel : previousTitle,
+        truncatedLabel,
+        labelStyle: [leftLabelStyle, customLeftLabelStyle],
+        onLabelLayout: handleLeftLabelLayout,
+        screenLayout: layout,
+        titleLayout,
+        tintColor: headerTintColor,
+        canGoBack: Boolean(onGoBack),
+      })
+    : null;
 
-    const {
-      titleStyle,
-      leftButtonStyle,
-      leftLabelStyle,
-      rightButtonStyle,
-      backgroundStyle,
-    } = this.getInterpolatedStyle(
-      styleInterpolator,
-      layout,
-      scene.progress.current,
-      scene.progress.next,
-      titleLayout,
-      previousTitle ? leftLabelLayout : undefined,
-      typeof height === 'number' ? height : defaultHeight
-    );
+  const rightButton = right ? right({ tintColor: headerTintColor }) : null;
 
-    const leftButton = left
-      ? left({
-          backImage,
-          pressColorAndroid,
-          allowFontScaling: backAllowFontScaling,
-          onPress: onGoBack,
-          labelVisible: headerBackTitleVisible,
-          label: leftLabel !== undefined ? leftLabel : previousTitle,
-          truncatedLabel,
-          labelStyle: [leftLabelStyle, customLeftLabelStyle],
-          onLabelLayout: this.handleLeftLabelLayout,
-          screenLayout: layout,
-          titleLayout,
-          tintColor: headerTintColor,
-          canGoBack: Boolean(onGoBack),
-        })
-      : null;
-
-    const rightButton = right ? right({ tintColor: headerTintColor }) : null;
-
-    return (
-      <React.Fragment>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[StyleSheet.absoluteFill, { zIndex: 0 }, backgroundStyle]}
-        >
-          {headerBackground ? (
-            headerBackground({ style: safeStyles })
-          ) : headerTransparent ? null : (
-            <HeaderBackground style={safeStyles} />
-          )}
-        </Animated.View>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[{ height, minHeight, maxHeight, opacity, transform }]}
-        >
-          <View
-            pointerEvents="none"
-            style={{ height: headerStatusBarHeight }}
-          />
-          <View pointerEvents="box-none" style={styles.content}>
-            {leftButton ? (
-              <Animated.View
-                pointerEvents="box-none"
-                style={[
-                  styles.left,
-                  { left: insets.left },
-                  leftButtonStyle,
-                  leftContainerStyle,
-                ]}
-              >
-                {leftButton}
-              </Animated.View>
-            ) : null}
+  return (
+    <React.Fragment>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[StyleSheet.absoluteFill, { zIndex: 0 }, backgroundStyle]}
+      >
+        {headerBackground ? (
+          headerBackground({ style: safeStyles })
+        ) : headerTransparent ? null : (
+          <HeaderBackground style={safeStyles} />
+        )}
+      </Animated.View>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[{ height, minHeight, maxHeight, opacity, transform }]}
+      >
+        <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+        <View pointerEvents="box-none" style={styles.content}>
+          {leftButton ? (
             <Animated.View
               pointerEvents="box-none"
               style={[
-                headerTitleAlign === 'left'
-                  ? {
-                      position: 'absolute',
-                      left: (leftButton ? 72 : 16) + insets.left,
-                      right: (rightButton ? 72 : 16) + insets.right,
-                    }
-                  : {
-                      marginHorizontal:
-                        (leftButton ? 32 : 16) +
-                        (leftButton && headerBackTitleVisible !== false
-                          ? 40
-                          : 0) +
-                        Math.max(insets.left, insets.right),
-                    },
-                titleStyle,
-                titleContainerStyle,
+                styles.left,
+                { left: insets.left },
+                leftButtonStyle,
+                leftContainerStyle,
               ]}
             >
-              {headerTitle({
-                children: currentTitle,
-                onLayout: this.handleTitleLayout,
-                allowFontScaling: titleAllowFontScaling,
-                tintColor: headerTintColor,
-                style: customTitleStyle,
-              })}
+              {leftButton}
             </Animated.View>
-            {rightButton ? (
-              <Animated.View
-                pointerEvents="box-none"
-                style={[
-                  styles.right,
-                  { right: insets.right },
-                  rightButtonStyle,
-                  rightContainerStyle,
-                ]}
-              >
-                {rightButton}
-              </Animated.View>
-            ) : null}
-          </View>
-        </Animated.View>
-      </React.Fragment>
-    );
-  }
+          ) : null}
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              headerTitleAlign === 'left'
+                ? {
+                    position: 'absolute',
+                    left: (leftButton ? 72 : 16) + insets.left,
+                    right: (rightButton ? 72 : 16) + insets.right,
+                  }
+                : {
+                    marginHorizontal:
+                      (leftButton ? 32 : 16) +
+                      (leftButton && headerBackTitleVisible !== false
+                        ? 40
+                        : 0) +
+                      Math.max(insets.left, insets.right),
+                  },
+              titleStyle,
+              titleContainerStyle,
+            ]}
+          >
+            {headerTitle({
+              children: currentTitle,
+              onLayout: handleTitleLayout,
+              allowFontScaling: titleAllowFontScaling,
+              tintColor: headerTintColor,
+              style: customTitleStyle,
+            })}
+          </Animated.View>
+          {rightButton ? (
+            <Animated.View
+              pointerEvents="box-none"
+              style={[
+                styles.right,
+                { right: insets.right },
+                rightButtonStyle,
+                rightContainerStyle,
+              ]}
+            >
+              {rightButton}
+            </Animated.View>
+          ) : null}
+        </View>
+      </Animated.View>
+    </React.Fragment>
+  );
 }
 
 const styles = StyleSheet.create({

packages/stack/src/views/KeyboardManager.tsx

@@ -58,10 +58,12 @@ export default class KeyboardManager extends React.Component<Props> {
 
     const input = this.previouslyFocusedTextInput;
 
-    if (Platform.OS === 'android') {
-      Keyboard.dismiss();
-    } else if (input) {
-      TextInput.State.blurTextInput(input);
+    if (input) {
+      if (Platform.OS === 'android') {
+        Keyboard.dismiss();
+      } else {
+        TextInput.State.blurTextInput(input);
+      }
     }
 
     // Cleanup the ID on successful page change

packages/stack/src/views/Screens.tsx

@@ -34,6 +34,9 @@ class WebScreen extends React.Component<
 
 const AnimatedWebScreen = Animated.createAnimatedComponent(WebScreen);
 
+// @ts-ignore
+export const shouldUseActivityState = Screens?.shouldUseActivityState;
+
 export const MaybeScreenContainer = ({
   enabled,
   ...rest
@@ -41,8 +44,11 @@ export const MaybeScreenContainer = ({
   enabled: boolean;
   children: React.ReactNode;
 }) => {
-  if (enabled && Platform.OS !== 'web' && Screens && Screens.screensEnabled()) {
-    return <Screens.ScreenContainer {...rest} />;
+  if (enabled && Platform.OS !== 'web' && Screens?.screensEnabled()) {
+    return (
+      // @ts-ignore
+      <Screens.ScreenContainer enabled={enabled} {...rest} />
+    );
   }
 
   return <View {...rest} />;
@@ -54,16 +60,25 @@ export const MaybeScreen = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
-  active: 0 | 1 | Animated.AnimatedInterpolation;
+  active: 0 | 1 | 2 | Animated.AnimatedInterpolation;
   children: React.ReactNode;
 }) => {
   if (enabled && Platform.OS === 'web') {
     return <AnimatedWebScreen active={active} {...rest} />;
   }
 
-  if (enabled && Screens && Screens.screensEnabled()) {
-    // @ts-expect-error: stackPresentation is incorrectly marked as required
-    return <Screens.Screen active={active} {...rest} />;
+  if (enabled && Screens?.screensEnabled()) {
+    if (shouldUseActivityState) {
+      return (
+        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+        <Screens.Screen enabled={enabled} activityState={active} {...rest} />
+      );
+    } else {
+      return (
+        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
+        <Screens.Screen enabled={enabled} active={active} {...rest} />
+      );
+    }
   }
 
   return <View {...rest} />;

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

@@ -79,6 +79,15 @@ const GESTURE_RESPONSE_DISTANCE_VERTICAL = 135;
 
 const useNativeDriver = Platform.OS !== 'web';
 
+const hasOpacityStyle = (style: any) => {
+  if (style) {
+    const flattenedStyle = StyleSheet.flatten(style);
+    return flattenedStyle.opacity != null;
+  }
+
+  return false;
+};
+
 export default class Card extends React.Component<Props> {
   static defaultProps = {
     overlayEnabled: Platform.OS !== 'ios',
@@ -533,6 +542,7 @@ export default class Card extends React.Component<Props> {
             </View>
           ) : null}
           <Animated.View
+            needsOffscreenAlphaCompositing={hasOpacityStyle(containerStyle)}
             style={[styles.container, containerStyle, customContainerStyle]}
             pointerEvents="box-none"
           >

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

@@ -66,6 +66,7 @@ type Props = TransitionPreset & {
     route: Route<string>;
     height: number;
   }) => void;
+  isParentHeaderShown: boolean;
 };
 
 const EPSILON = 0.1;
@@ -93,6 +94,7 @@ function CardContainer({
   hasAbsoluteHeader,
   headerHeight,
   onHeaderHeightChange,
+  isParentHeaderShown,
   index,
   layout,
   onCloseRoute,
@@ -181,7 +183,6 @@ function CardContainer({
     };
   }, [pointerEvents, scene.progress.next]);
 
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
   const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
   const previousScene = getPreviousScene({ route: scene.route });
 

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

@@ -4,12 +4,19 @@ import {
   StyleSheet,
   LayoutChangeEvent,
   Dimensions,
-  Platform,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
-import type { Route, StackNavigationState } from '@react-navigation/native';
+import type {
+  ParamListBase,
+  Route,
+  StackNavigationState,
+} from '@react-navigation/native';
 
-import { MaybeScreenContainer, MaybeScreen } from '../Screens';
+import {
+  MaybeScreenContainer,
+  MaybeScreen,
+  shouldUseActivityState,
+} from '../Screens';
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import CardContainer from './CardContainer';
@@ -19,7 +26,6 @@ import {
 } from '../../TransitionConfigs/TransitionPresets';
 import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import type {
   Layout,
@@ -38,7 +44,7 @@ type GestureValues = {
 type Props = {
   mode: StackCardMode;
   insets: EdgeInsets;
-  state: StackNavigationState;
+  state: StackNavigationState<ParamListBase>;
   descriptors: StackDescriptorMap;
   routes: Route<string>[];
   openingRouteKeys: string[];
@@ -52,6 +58,7 @@ type Props = {
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
   headerMode: StackHeaderMode;
+  isParentHeaderShown: boolean;
   onTransitionStart: (
     props: { route: Route<string> },
     closing: boolean
@@ -63,6 +70,7 @@ type Props = {
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
   onGestureCancel?: (props: { route: Route<string> }) => void;
+  detachInactiveScreens?: boolean;
 };
 
 type State = {
@@ -76,11 +84,16 @@ type State = {
 
 const EPSILON = 0.01;
 
+const STATE_INACTIVE = 0;
+const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
+const STATE_ON_TOP = 2;
+
 const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
 
 const getHeaderHeights = (
   routes: Route<string>[],
   insets: EdgeInsets,
+  isParentHeaderShown: boolean,
   descriptors: StackDescriptorMap,
   layout: Layout,
   previous: Record<string, number>
@@ -97,7 +110,9 @@ const getHeaderHeights = (
       ...options.safeAreaInsets,
     };
 
-    const { headerStatusBarHeight = safeAreaInsets.top } = options;
+    const {
+      headerStatusBarHeight = isParentHeaderShown ? 0 : safeAreaInsets.top,
+    } = options;
 
     acc[curr.key] =
       typeof height === 'number'
@@ -260,6 +275,7 @@ export default class CardStack extends React.Component<Props, State> {
       headerHeights: getHeaderHeights(
         props.routes,
         props.insets,
+        props.isParentHeaderShown,
         state.descriptors,
         state.layout,
         state.headerHeights
@@ -302,6 +318,7 @@ export default class CardStack extends React.Component<Props, State> {
         headerHeights: getHeaderHeights(
           props.routes,
           props.insets,
+          props.isParentHeaderShown,
           state.descriptors,
           layout,
           state.headerHeights
@@ -370,6 +387,7 @@ export default class CardStack extends React.Component<Props, State> {
       renderHeader,
       renderScene,
       headerMode,
+      isParentHeaderShown,
       onTransitionStart,
       onTransitionEnd,
       onPageChangeStart,
@@ -378,6 +396,9 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureStart,
       onGestureEnd,
       onGestureCancel,
+      // Enable on new versions of `react-native-screens`
+      // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction.
+      detachInactiveScreens = shouldUseActivityState,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;
@@ -385,6 +406,7 @@ export default class CardStack extends React.Component<Props, State> {
     const focusedRoute = state.routes[state.index];
     const focusedDescriptor = descriptors[focusedRoute.key];
     const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
+    const focusedHeaderHeight = headerHeights[focusedRoute.key];
 
     let defaultTransitionPreset =
       mode === 'modal' ? ModalTransition : DefaultTransition;
@@ -403,212 +425,250 @@ export default class CardStack extends React.Component<Props, State> {
       left = insets.left,
     } = focusedOptions.safeAreaInsets || {};
 
-    // Screens is buggy on iOS and web, so we only enable it on Android
-    // For modals, usually we want the screen underneath to be visible, so also disable it there
-    const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
+    let activeScreensLimit = 1;
+
+    for (let i = scenes.length - 1; i >= 0; i--) {
+      const {
+        // By default, we don't want to detach the previous screen of the active one for modals
+        detachPreviousScreen = mode === 'modal'
+          ? i !== scenes.length - 1
+          : true,
+      } = scenes[i].descriptor.options;
+
+      if (detachPreviousScreen === false) {
+        activeScreensLimit++;
+      } else {
+        break;
+      }
+    }
+
+    const isFloatHeaderAbsolute =
+      headerMode === 'float'
+        ? this.state.scenes.slice(-2).some((scene) => {
+            const { descriptor } = scene;
+            const options = descriptor ? descriptor.options : {};
+            const {
+              headerTransparent,
+              headerShown = isParentHeaderShown === false,
+            } = options;
+
+            if (headerTransparent || headerShown === false) {
+              return true;
+            }
+
+            return false;
+          })
+        : false;
+
+    const floatingHeader =
+      headerMode === 'float' ? (
+        <React.Fragment key="header">
+          {renderHeader({
+            mode: 'float',
+            layout,
+            insets: { top, right, bottom, left },
+            scenes,
+            getPreviousScene: this.getPreviousScene,
+            getFocusedRoute: this.getFocusedRoute,
+            onContentHeightChange: this.handleHeaderLayout,
+            gestureDirection:
+              focusedOptions.gestureDirection !== undefined
+                ? focusedOptions.gestureDirection
+                : defaultTransitionPreset.gestureDirection,
+            styleInterpolator:
+              focusedOptions.headerStyleInterpolator !== undefined
+                ? focusedOptions.headerStyleInterpolator
+                : defaultTransitionPreset.headerStyleInterpolator,
+            style: [
+              styles.floating,
+              isFloatHeaderAbsolute && [
+                // Without this, the header buttons won't be touchable on Android when headerTransparent: true
+                { height: focusedHeaderHeight },
+                styles.absolute,
+              ],
+            ],
+          })}
+        </React.Fragment>
+      ) : null;
 
     return (
-      <HeaderShownContext.Consumer>
-        {(isParentHeaderShown) => {
-          const isFloatHeaderAbsolute =
-            headerMode === 'float'
-              ? this.state.scenes.slice(-2).some((scene) => {
-                  const { descriptor } = scene;
-                  const options = descriptor ? descriptor.options : {};
-                  const {
-                    headerTransparent,
-                    headerShown = isParentHeaderShown === false,
-                  } = options;
+      <React.Fragment>
+        {isFloatHeaderAbsolute ? null : floatingHeader}
+        <MaybeScreenContainer
+          enabled={detachInactiveScreens}
+          style={styles.container}
+          onLayout={this.handleLayout}
+        >
+          {routes.map((route, index, self) => {
+            const focused = focusedRoute.key === route.key;
+            const gesture = gestures[route.key];
+            const scene = scenes[index];
 
-                  if (headerTransparent || headerShown === false) {
-                    return true;
-                  }
+            // For the screens that shouldn't be active, the value is 0
+            // For those that should be active, but are not the top screen, the value is 1
+            // For those on top of the stack and with interaction enabled, the value is 2
+            // For the old implementation, it stays the same it was
+            let isScreenActive: Animated.AnimatedInterpolation | 2 | 1 | 0 = 1;
 
-                  return false;
-                })
-              : false;
+            if (shouldUseActivityState) {
+              if (index < self.length - activeScreensLimit - 1) {
+                // screen should be inactive because it is too deep in the stack
+                isScreenActive = STATE_INACTIVE;
+              } else {
+                const sceneForActivity = scenes[self.length - 1];
+                const outputValue =
+                  index === self.length - 1
+                    ? STATE_ON_TOP // the screen is on top after the transition
+                    : index >= self.length - activeScreensLimit
+                    ? STATE_TRANSITIONING_OR_BELOW_TOP // the screen should stay active after the transition, it is not on top but is in activeLimit
+                    : STATE_INACTIVE; // the screen should be active only during the transition, it is at the edge of activeLimit
+                isScreenActive = sceneForActivity
+                  ? sceneForActivity.progress.current.interpolate({
+                      inputRange: [0, 1 - EPSILON, 1],
+                      outputRange: [1, 1, outputValue],
+                      extrapolate: 'clamp',
+                    })
+                  : STATE_TRANSITIONING_OR_BELOW_TOP;
+              }
+            } else {
+              isScreenActive = scene.progress.next
+                ? scene.progress.next.interpolate({
+                    inputRange: [0, 1 - EPSILON, 1],
+                    outputRange: [1, 1, 0],
+                    extrapolate: 'clamp',
+                  })
+                : 1;
+            }
 
-          const floatingHeader =
-            headerMode === 'float' ? (
-              <React.Fragment key="header">
-                {renderHeader({
-                  mode: 'float',
-                  layout,
-                  insets: { top, right, bottom, left },
-                  scenes,
-                  getPreviousScene: this.getPreviousScene,
-                  getFocusedRoute: this.getFocusedRoute,
-                  onContentHeightChange: this.handleHeaderLayout,
-                  gestureDirection:
-                    focusedOptions.gestureDirection !== undefined
-                      ? focusedOptions.gestureDirection
-                      : defaultTransitionPreset.gestureDirection,
-                  styleInterpolator:
-                    focusedOptions.headerStyleInterpolator !== undefined
-                      ? focusedOptions.headerStyleInterpolator
-                      : defaultTransitionPreset.headerStyleInterpolator,
-                  style: [
-                    styles.floating,
-                    isFloatHeaderAbsolute && styles.absolute,
-                  ],
-                })}
-              </React.Fragment>
-            ) : null;
+            const {
+              safeAreaInsets,
+              headerShown = isParentHeaderShown === false,
+              headerTransparent,
+              cardShadowEnabled,
+              cardOverlayEnabled,
+              cardOverlay,
+              cardStyle,
+              animationEnabled,
+              gestureResponseDistance,
+              gestureVelocityImpact,
+              gestureDirection = defaultTransitionPreset.gestureDirection,
+              transitionSpec = defaultTransitionPreset.transitionSpec,
+              cardStyleInterpolator = animationEnabled === false
+                ? forNoAnimationCard
+                : defaultTransitionPreset.cardStyleInterpolator,
+              headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+            } = scene.descriptor
+              ? scene.descriptor.options
+              : ({} as StackNavigationOptions);
 
-          return (
-            <React.Fragment>
-              {isFloatHeaderAbsolute ? null : floatingHeader}
-              <MaybeScreenContainer
-                enabled={isScreensEnabled}
-                style={styles.container}
-                onLayout={this.handleLayout}
+            let transitionConfig = {
+              gestureDirection,
+              transitionSpec,
+              cardStyleInterpolator,
+              headerStyleInterpolator,
+            };
+
+            // When a screen is not the last, it should use next screen's transition config
+            // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
+            // For example combining a slide and a modal transition would look wrong otherwise
+            // With this approach, combining different transition styles in the same navigator mostly looks right
+            // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
+            // but majority of the transitions look alright
+            if (index !== self.length - 1) {
+              const nextScene = scenes[index + 1];
+
+              if (nextScene) {
+                const {
+                  animationEnabled,
+                  gestureDirection = defaultTransitionPreset.gestureDirection,
+                  transitionSpec = defaultTransitionPreset.transitionSpec,
+                  cardStyleInterpolator = animationEnabled === false
+                    ? forNoAnimationCard
+                    : defaultTransitionPreset.cardStyleInterpolator,
+                  headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+                } = nextScene.descriptor
+                  ? nextScene.descriptor.options
+                  : ({} as StackNavigationOptions);
+
+                transitionConfig = {
+                  gestureDirection,
+                  transitionSpec,
+                  cardStyleInterpolator,
+                  headerStyleInterpolator,
+                };
+              }
+            }
+
+            const {
+              top: safeAreaInsetTop = insets.top,
+              right: safeAreaInsetRight = insets.right,
+              bottom: safeAreaInsetBottom = insets.bottom,
+              left: safeAreaInsetLeft = insets.left,
+            } = safeAreaInsets || {};
+
+            const headerHeight =
+              headerMode !== 'none' && headerShown !== false
+                ? headerHeights[route.key]
+                : 0;
+
+            return (
+              <MaybeScreen
+                key={route.key}
+                style={StyleSheet.absoluteFill}
+                enabled={detachInactiveScreens}
+                active={isScreenActive}
+                pointerEvents="box-none"
               >
-                {routes.map((route, index, self) => {
-                  const focused = focusedRoute.key === route.key;
-                  const gesture = gestures[route.key];
-                  const scene = scenes[index];
-
-                  const isScreenActive = scene.progress.next
-                    ? scene.progress.next.interpolate({
-                        inputRange: [0, 1 - EPSILON, 1],
-                        outputRange: [1, 1, 0],
-                        extrapolate: 'clamp',
-                      })
-                    : 1;
-
-                  const {
-                    safeAreaInsets,
-                    headerShown = isParentHeaderShown === false,
-                    headerTransparent,
-                    cardShadowEnabled,
-                    cardOverlayEnabled,
-                    cardOverlay,
-                    cardStyle,
-                    animationEnabled,
-                    gestureResponseDistance,
-                    gestureVelocityImpact,
-                    gestureDirection = defaultTransitionPreset.gestureDirection,
-                    transitionSpec = defaultTransitionPreset.transitionSpec,
-                    cardStyleInterpolator = animationEnabled === false
-                      ? forNoAnimationCard
-                      : defaultTransitionPreset.cardStyleInterpolator,
-                    headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-                  } = scene.descriptor
-                    ? scene.descriptor.options
-                    : ({} as StackNavigationOptions);
-
-                  let transitionConfig = {
-                    gestureDirection,
-                    transitionSpec,
-                    cardStyleInterpolator,
-                    headerStyleInterpolator,
-                  };
-
-                  // When a screen is not the last, it should use next screen's transition config
-                  // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-                  // For example combining a slide and a modal transition would look wrong otherwise
-                  // With this approach, combining different transition styles in the same navigator mostly looks right
-                  // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-                  // but majority of the transitions look alright
-                  if (index !== self.length - 1) {
-                    const nextScene = scenes[index + 1];
-
-                    if (nextScene) {
-                      const {
-                        animationEnabled,
-                        gestureDirection = defaultTransitionPreset.gestureDirection,
-                        transitionSpec = defaultTransitionPreset.transitionSpec,
-                        cardStyleInterpolator = animationEnabled === false
-                          ? forNoAnimationCard
-                          : defaultTransitionPreset.cardStyleInterpolator,
-                        headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-                      } = nextScene.descriptor
-                        ? nextScene.descriptor.options
-                        : ({} as StackNavigationOptions);
-
-                      transitionConfig = {
-                        gestureDirection,
-                        transitionSpec,
-                        cardStyleInterpolator,
-                        headerStyleInterpolator,
-                      };
-                    }
+                <CardContainer
+                  index={index}
+                  active={index === self.length - 1}
+                  focused={focused}
+                  closing={closingRouteKeys.includes(route.key)}
+                  layout={layout}
+                  gesture={gesture}
+                  scene={scene}
+                  safeAreaInsetTop={safeAreaInsetTop}
+                  safeAreaInsetRight={safeAreaInsetRight}
+                  safeAreaInsetBottom={safeAreaInsetBottom}
+                  safeAreaInsetLeft={safeAreaInsetLeft}
+                  cardOverlay={cardOverlay}
+                  cardOverlayEnabled={cardOverlayEnabled}
+                  cardShadowEnabled={cardShadowEnabled}
+                  cardStyle={cardStyle}
+                  onPageChangeStart={onPageChangeStart}
+                  onPageChangeConfirm={onPageChangeConfirm}
+                  onPageChangeCancel={onPageChangeCancel}
+                  onGestureStart={onGestureStart}
+                  onGestureCancel={onGestureCancel}
+                  onGestureEnd={onGestureEnd}
+                  gestureResponseDistance={gestureResponseDistance}
+                  headerHeight={headerHeight}
+                  isParentHeaderShown={isParentHeaderShown}
+                  onHeaderHeightChange={this.handleHeaderLayout}
+                  getPreviousScene={this.getPreviousScene}
+                  getFocusedRoute={this.getFocusedRoute}
+                  mode={mode}
+                  headerMode={headerMode}
+                  headerShown={headerShown}
+                  hasAbsoluteHeader={
+                    isFloatHeaderAbsolute && !headerTransparent
                   }
-
-                  const {
-                    top: safeAreaInsetTop = insets.top,
-                    right: safeAreaInsetRight = insets.right,
-                    bottom: safeAreaInsetBottom = insets.bottom,
-                    left: safeAreaInsetLeft = insets.left,
-                  } = safeAreaInsets || {};
-
-                  const headerHeight =
-                    headerMode !== 'none' && headerShown !== false
-                      ? headerHeights[route.key]
-                      : 0;
-
-                  return (
-                    <MaybeScreen
-                      key={route.key}
-                      style={StyleSheet.absoluteFill}
-                      enabled={isScreensEnabled}
-                      active={isScreenActive}
-                      pointerEvents="box-none"
-                    >
-                      <CardContainer
-                        index={index}
-                        active={index === self.length - 1}
-                        focused={focused}
-                        closing={closingRouteKeys.includes(route.key)}
-                        layout={layout}
-                        gesture={gesture}
-                        scene={scene}
-                        safeAreaInsetTop={safeAreaInsetTop}
-                        safeAreaInsetRight={safeAreaInsetRight}
-                        safeAreaInsetBottom={safeAreaInsetBottom}
-                        safeAreaInsetLeft={safeAreaInsetLeft}
-                        cardOverlay={cardOverlay}
-                        cardOverlayEnabled={cardOverlayEnabled}
-                        cardShadowEnabled={cardShadowEnabled}
-                        cardStyle={cardStyle}
-                        onPageChangeStart={onPageChangeStart}
-                        onPageChangeConfirm={onPageChangeConfirm}
-                        onPageChangeCancel={onPageChangeCancel}
-                        onGestureStart={onGestureStart}
-                        onGestureCancel={onGestureCancel}
-                        onGestureEnd={onGestureEnd}
-                        gestureResponseDistance={gestureResponseDistance}
-                        headerHeight={headerHeight}
-                        onHeaderHeightChange={this.handleHeaderLayout}
-                        getPreviousScene={this.getPreviousScene}
-                        getFocusedRoute={this.getFocusedRoute}
-                        mode={mode}
-                        headerMode={headerMode}
-                        headerShown={headerShown}
-                        hasAbsoluteHeader={
-                          isFloatHeaderAbsolute && !headerTransparent
-                        }
-                        renderHeader={renderHeader}
-                        renderScene={renderScene}
-                        onOpenRoute={onOpenRoute}
-                        onCloseRoute={onCloseRoute}
-                        onTransitionStart={onTransitionStart}
-                        onTransitionEnd={onTransitionEnd}
-                        gestureEnabled={
-                          index !== 0 && getGesturesEnabled({ route })
-                        }
-                        gestureVelocityImpact={gestureVelocityImpact}
-                        {...transitionConfig}
-                      />
-                    </MaybeScreen>
-                  );
-                })}
-              </MaybeScreenContainer>
-              {isFloatHeaderAbsolute ? floatingHeader : null}
-            </React.Fragment>
-          );
-        }}
-      </HeaderShownContext.Consumer>
+                  renderHeader={renderHeader}
+                  renderScene={renderScene}
+                  onOpenRoute={onOpenRoute}
+                  onCloseRoute={onCloseRoute}
+                  onTransitionStart={onTransitionStart}
+                  onTransitionEnd={onTransitionEnd}
+                  gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
+                  gestureVelocityImpact={gestureVelocityImpact}
+                  {...transitionConfig}
+                />
+              </MaybeScreen>
+            );
+          })}
+        </MaybeScreenContainer>
+        {isFloatHeaderAbsolute ? floatingHeader : null}
+      </React.Fragment>
     );
   }
 }

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

@@ -6,6 +6,7 @@ import {
   StackActions,
   StackNavigationState,
   Route,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import { GestureHandlerRootView } from '../GestureHandler';
@@ -20,9 +21,10 @@ import type {
   StackNavigationConfig,
   StackDescriptorMap,
 } from '../../types';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 
 type Props = StackNavigationConfig & {
-  state: StackNavigationState;
+  state: StackNavigationState<ParamListBase>;
   navigation: StackNavigationHelpers;
   descriptors: StackDescriptorMap;
 };
@@ -455,29 +457,34 @@ export default class StackView extends React.Component<Props, State> {
               {(insets) => (
                 <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
                   {(props) => (
-                    <CardStack
-                      mode={mode}
-                      insets={insets as EdgeInsets}
-                      getPreviousRoute={this.getPreviousRoute}
-                      getGesturesEnabled={this.getGesturesEnabled}
-                      routes={routes}
-                      openingRouteKeys={openingRouteKeys}
-                      closingRouteKeys={closingRouteKeys}
-                      onOpenRoute={this.handleOpenRoute}
-                      onCloseRoute={this.handleCloseRoute}
-                      onTransitionStart={this.handleTransitionStart}
-                      onTransitionEnd={this.handleTransitionEnd}
-                      renderHeader={this.renderHeader}
-                      renderScene={this.renderScene}
-                      headerMode={headerMode}
-                      state={state}
-                      descriptors={descriptors}
-                      onGestureStart={this.handleGestureStart}
-                      onGestureEnd={this.handleGestureEnd}
-                      onGestureCancel={this.handleGestureCancel}
-                      {...rest}
-                      {...props}
-                    />
+                    <HeaderShownContext.Consumer>
+                      {(isParentHeaderShown) => (
+                        <CardStack
+                          mode={mode}
+                          insets={insets as EdgeInsets}
+                          isParentHeaderShown={isParentHeaderShown}
+                          getPreviousRoute={this.getPreviousRoute}
+                          getGesturesEnabled={this.getGesturesEnabled}
+                          routes={routes}
+                          openingRouteKeys={openingRouteKeys}
+                          closingRouteKeys={closingRouteKeys}
+                          onOpenRoute={this.handleOpenRoute}
+                          onCloseRoute={this.handleCloseRoute}
+                          onTransitionStart={this.handleTransitionStart}
+                          onTransitionEnd={this.handleTransitionEnd}
+                          renderHeader={this.renderHeader}
+                          renderScene={this.renderScene}
+                          headerMode={headerMode}
+                          state={state}
+                          descriptors={descriptors}
+                          onGestureStart={this.handleGestureStart}
+                          onGestureEnd={this.handleGestureEnd}
+                          onGestureCancel={this.handleGestureCancel}
+                          {...rest}
+                          {...props}
+                        />
+                      )}
+                    </HeaderShownContext.Consumer>
                   )}
                 </KeyboardManager>
               )}