chore: publish

- react-navigation-animated-switch@0.6.4
 - react-navigation-drawer@2.7.0
 - react-navigation-material-bottom-tabs@2.3.4
 - @react-navigation/native@3.8.4
 - react-navigation@4.4.4
 - react-navigation-stack@2.10.3
 - react-navigation-tabs@2.11.0

packages/animated-switch/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.4](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.6.3...react-navigation-animated-switch@0.6.4) (2021-02-21)
+
+**Note:** Version bump only for package react-navigation-animated-switch
+
+
+
+
+
 ## [0.6.3](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.6.2...react-navigation-animated-switch@0.6.3) (2020-10-26)
 
 **Note:** Version bump only for package react-navigation-animated-switch

packages/animated-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-animated-switch",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Animated switch for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -28,7 +28,7 @@
     "react": "~16.13.1",
     "react-native": "~0.63.2",
     "react-native-reanimated": "~1.13.0",
-    "react-navigation": "^4.4.3",
+    "react-navigation": "^4.4.4",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

packages/core/src/__tests__/getChildrenNavigationCache.test.js

@@ -0,0 +1,60 @@
+import getChildrenNavigationCache from '../getChildrenNavigationCache';
+
+it('should return empty table if navigation arg not provided', () => {
+  expect(getChildrenNavigationCache()._childrenNavigation).toBeUndefined();
+});
+
+it('should populate navigation._childrenNavigation as a side-effect', () => {
+  const navigation = {
+    state: {
+      routes: [{ key: 'one' }],
+    },
+  };
+  const result = getChildrenNavigationCache(navigation);
+  expect(result).toBeDefined();
+  expect(navigation._childrenNavigation).toBe(result);
+});
+
+it('should delete children cache keys that are no longer valid', () => {
+  const navigation = {
+    state: {
+      routes: [{ key: 'one' }, { key: 'two' }, { key: 'three' }],
+    },
+    _childrenNavigation: {
+      one: {},
+      two: {},
+      three: {},
+      four: {},
+    },
+  };
+
+  const result = getChildrenNavigationCache(navigation);
+  expect(result).toEqual({
+    one: {},
+    two: {},
+    three: {},
+  });
+});
+
+it('should not delete children cache keys if in transitioning state', () => {
+  const navigation = {
+    state: {
+      routes: [{ key: 'one' }, { key: 'two' }, { key: 'three' }],
+      isTransitioning: true,
+    },
+    _childrenNavigation: {
+      one: {},
+      two: {},
+      three: {},
+      four: {},
+    },
+  };
+
+  const result = getChildrenNavigationCache(navigation);
+  expect(result).toEqual({
+    one: {},
+    two: {},
+    three: {},
+    four: {},
+  });
+});

packages/core/src/__tests__/getEventManager.test.js

@@ -0,0 +1,48 @@
+import getEventManager from '../getEventManager';
+
+const TARGET = 'target';
+
+it('calls listeners to emitted event', () => {
+  const eventManager = getEventManager(TARGET);
+  const callback = jest.fn();
+  eventManager.addListener('didFocus', callback);
+
+  eventManager.emit('didFocus');
+
+  expect(callback).toHaveBeenCalledTimes(1);
+});
+
+it('does not call listeners connected to a different event', () => {
+  const eventManager = getEventManager(TARGET);
+  const callback = jest.fn();
+  eventManager.addListener('didFocus', callback);
+
+  eventManager.emit('didBlur');
+
+  expect(callback).not.toHaveBeenCalled();
+});
+
+it('does not call removed listeners', () => {
+  const eventManager = getEventManager(TARGET);
+  const callback = jest.fn();
+  const { remove } = eventManager.addListener('didFocus', callback);
+
+  eventManager.emit('didFocus');
+  expect(callback).toHaveBeenCalled();
+
+  remove();
+
+  eventManager.emit('didFocus');
+  expect(callback).toHaveBeenCalledTimes(1);
+});
+
+it('calls the listeners with the given payload', () => {
+  const eventManager = getEventManager(TARGET);
+  const callback = jest.fn();
+  eventManager.addListener('didFocus', callback);
+
+  const payload = { foo: 0 };
+  eventManager.emit('didFocus', payload);
+
+  expect(callback).toHaveBeenCalledWith(payload);
+});

packages/drawer/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.6.0...react-navigation-drawer@2.7.0) (2021-02-21)
+
+
+### Features
+
+* add activityState to other navigators ([5c7f892](https://github.com/react-navigation/drawer/commit/5c7f892d77298f5c89534fa78a1a6a59c7f35a60))
+
+
+
+
+
 # [2.6.0](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.5.2...react-navigation-drawer@2.6.0) (2020-10-26)
 
 

packages/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-drawer",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Drawer navigator component for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -49,7 +49,7 @@
     "react-native-reanimated": "~1.13.0",
     "react-native-screens": "~2.10.1",
     "react-native-testing-library": "^6.0.0",
-    "react-navigation": "^4.4.3",
+    "react-navigation": "^4.4.4",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -1,6 +1,11 @@
 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;
@@ -17,8 +22,17 @@ export default class ResourceSavingScene extends React.Component<Props> {
     if (screensEnabled?.() && this.props.enabled && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
-      // @ts-ignore
-      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,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.4](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.3.3...react-navigation-material-bottom-tabs@2.3.4) (2021-02-21)
+
+**Note:** Version bump only for package react-navigation-material-bottom-tabs
+
+
+
+
+
 ## [2.3.3](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.3.2...react-navigation-material-bottom-tabs@2.3.3) (2020-10-26)
 
 **Note:** Version bump only for package react-navigation-material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-material-bottom-tabs",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Material Bottom Tab Navigation component for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -46,7 +46,7 @@
     "react": "~16.13.1",
     "react-native": "~0.63.2",
     "react-native-paper": "^4.2.0",
-    "react-navigation": "^4.4.3",
+    "react-navigation": "^4.4.4",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

packages/native/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.4](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.8.3...@react-navigation/native@3.8.4) (2021-02-21)
+
+
+### Bug Fixes
+
+* address breaking change in react-native for Linking ([fb1e8d4](https://github.com/react-navigation/react-navigation-native/commit/fb1e8d4a077cece663633408d279459df66033a4))
+
+
+
+
+
 ## [3.8.3](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.8.2...@react-navigation/native@3.8.3) (2020-10-26)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-navigation/native",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "description": "React Native support for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",

packages/native/src/createAppContainer.js

@@ -214,7 +214,7 @@ export default function createNavigationContainer(Component) {
         }
       }
       _statefulContainerCount++;
-      Linking.addEventListener('url', this._handleOpenURL);
+      this._linkingSub = Linking.addEventListener('url', this._handleOpenURL);
 
       // Pull out anything that can impact state
       let parsedUrl = null;
@@ -331,7 +331,14 @@ export default function createNavigationContainer(Component) {
 
     componentWillUnmount() {
       this._isMounted = false;
-      Linking.removeEventListener('url', this._handleOpenURL);
+
+      // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
+      if (this._linkingSub?.remove) {
+        this._linkingSub?.remove();
+      } else {
+        Linking.removeEventListener('url', this._handleOpenURL);
+      }
+
       this.subs && this.subs.remove();
 
       if (this._isStateful()) {

packages/react-navigation/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.4](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.4.3...react-navigation@4.4.4) (2021-02-21)
+
+**Note:** Version bump only for package react-navigation
+
+
+
+
+
 ## [4.4.3](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.4.2...react-navigation@4.4.3) (2020-10-26)
 
 **Note:** Version bump only for package react-navigation

packages/react-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "4.4.3",
+  "version": "4.4.4",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/index.js",
   "types": "typescript/react-navigation.d.ts",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@react-navigation/core": "^3.7.9",
-    "@react-navigation/native": "^3.8.3"
+    "@react-navigation/native": "^3.8.4"
   },
   "devDependencies": {
     "@types/react": "^16.9.53",

packages/stack/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.10.3](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.10.2...react-navigation-stack@2.10.3) (2021-02-21)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+## [2.10.2](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.10.1...react-navigation-stack@2.10.2) (2020-11-22)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+## [2.10.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.10.0...react-navigation-stack@2.10.1) (2020-11-04)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+# [2.10.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.9.0...react-navigation-stack@2.10.0) (2020-10-30)
+
+
+### Features
+
+* enable react-native-screens in Stack by default on iOS ([8411e6f](https://github.com/react-navigation/react-navigation-stack/commit/8411e6f764b86341e747cb7ca1ff4a775b4a827a))
+
+
+
+
+
 # [2.9.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.8.4...react-navigation-stack@2.9.0) (2020-10-26)
 
 

packages/stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-stack",
-  "version": "2.9.0",
+  "version": "2.10.3",
   "description": "Stack navigator component for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/stack": "^5.10.0",
+    "@react-navigation/stack": "^5.14.3",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.53",
     "@types/react-native": "^0.63.30",
@@ -56,7 +56,7 @@
     "react-native-gesture-handler": "~1.7.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
-    "react-navigation": "^4.4.3",
+    "react-navigation": "^4.4.4",
     "react-test-renderer": "~16.13.1",
     "typescript": "^4.0.3"
   },

packages/stack/scripts/stack.patch

@@ -1,10 +1,10 @@
 diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
---- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/index.tsx	2020-10-26 16:08:35.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/index.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -3,11 +3,6 @@
  import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
  import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
- 
+
 -/**
 - * Navigators
 - */
@@ -28,7 +28,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
    StackHeaderLeftButtonProps,
    StackHeaderTitleProps,
 diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
---- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-10-26 16:07:00.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-11-10 21:02:55.000000000 +0100
 +++ src/vendor/navigators/createStackNavigator.tsx	1970-01-01 01:00:00.000000000 +0100
 @@ -1,101 +0,0 @@
 -import * as React from 'react';
@@ -133,8 +133,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
 -  typeof StackNavigator
 ->(StackNavigator);
 diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
---- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/types.tsx	2020-10-26 16:13:50.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/types.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -8,15 +8,29 @@
  } from 'react-native';
  import type { EdgeInsets } from 'react-native-safe-area-context';
@@ -170,20 +170,20 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 +  | 'didFocus'
 +  | 'willBlur'
 +  | 'didBlur';
- 
+
  export type StackNavigationEventMap = {
    /**
 @@ -41,30 +55,29 @@
    gestureCancel: { data: undefined };
  };
- 
+
 -export type StackNavigationHelpers = NavigationHelpers<
 -  ParamListBase,
 -  StackNavigationEventMap
 -> &
 -  StackActionHelpers<ParamListBase>;
 +export type StackNavigationHelpers = NavigationProp<NavigationStackState>;
- 
+
  export type StackNavigationProp<
 -  ParamList extends ParamListBase,
 -  RouteName extends keyof ParamList = string
@@ -223,9 +223,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 +    callback: NavigationEventCallback
 +  ) => NavigationEventSubscription;
  };
- 
+
  export type Layout = { width: number; height: number };
-@@ -241,24 +254,27 @@
+@@ -245,24 +258,27 @@
    /**
     * Navigation prop for the header.
     */
@@ -236,7 +236,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
     */
    styleInterpolator: StackHeaderStyleInterpolator;
  };
- 
+
 -export type StackDescriptor = Descriptor<
 -  ParamListBase,
 -  string,
@@ -247,11 +247,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 +  StackNavigationOptions,
 +  StackNavigationProp
  >;
- 
+
  export type StackDescriptorMap = {
    [key: string]: StackDescriptor;
  };
- 
+
 +export type TransitionCallbackProps = {
 +  closing: boolean;
 +};
@@ -259,38 +259,29 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
  export type StackNavigationOptions = StackHeaderOptions &
    Partial<TransitionPreset> & {
      /**
-@@ -352,6 +368,8 @@
+@@ -356,6 +372,8 @@
       * Defaults to `false` for the last screen when mode='modal', otherwise `true`.
       */
      detachPreviousScreen?: boolean;
 +    onTransitionStart?: (props: TransitionCallbackProps) => void;
 +    onTransitionEnd?: (props: TransitionCallbackProps) => void;
    };
- 
+
  export type StackNavigationConfig = {
-@@ -365,7 +383,7 @@
-   /**
-    * 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`.
-+   * Defaults to `true` on Android, `false` on iOS.
-    */
-   detachInactiveScreens?: boolean;
- };
 diff -Naur ../../node_modules/@react-navigation/stack/src/utils/PreviousSceneContext.tsx src/vendor/utils/PreviousSceneContext.tsx
---- ../../node_modules/@react-navigation/stack/src/utils/PreviousSceneContext.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/utils/PreviousSceneContext.tsx	2020-10-26 16:08:40.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/utils/PreviousSceneContext.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/utils/PreviousSceneContext.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -1,6 +1,5 @@
  import * as React from 'react';
 -import type { Route } from '@react-navigation/native';
 -import type { Scene } from '../types';
 +import type { Route, Scene } from '../types';
- 
+
  const PreviousSceneContext = React.createContext<
    Scene<Route<string>> | undefined
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx src/vendor/views/Header/Header.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Header/Header.tsx	2020-10-26 16:08:40.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Header/Header.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -1,12 +1,15 @@
  import * as React from 'react';
 -import { StackActions } from '@react-navigation/native';
@@ -299,12 +290,12 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 +import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 +
 +import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
- 
+
 -import HeaderSegment from './HeaderSegment';
  import HeaderTitle from './HeaderTitle';
  import debounce from '../../utils/debounce';
  import type { StackHeaderProps, StackHeaderTitleProps } from '../../types';
- 
+
 -export default React.memo(function Header(props: StackHeaderProps) {
 +const Header = React.memo(function Header(props: StackHeaderProps) {
    const {
@@ -316,9 +307,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
        ? options.title
 -      : scene.route.name;
 +      : scene.route.routeName;
- 
+
    let leftLabel;
- 
+
 @@ -38,17 +41,20 @@
          ? o.headerTitle
          : o.title !== undefined
@@ -326,7 +317,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 -        : previous.route.name;
 +        : previous.route.routeName;
    }
- 
+
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const goBack = React.useCallback(
      debounce(() => {
@@ -378,8 +369,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 +
 +export default Header;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Header/HeaderBackButton.tsx	2020-10-26 16:14:24.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Header/HeaderBackButton.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -8,9 +8,9 @@
    StyleSheet,
    LayoutChangeEvent,
@@ -389,23 +380,23 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
  import TouchableItem from '../TouchableItem';
 +import useTheme from '../../../utils/useTheme';
  import type { StackHeaderLeftButtonProps } from '../../types';
- 
+
  type Props = StackHeaderLeftButtonProps;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx src/vendor/views/Header/HeaderBackground.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Header/HeaderBackground.tsx	2020-10-26 16:08:40.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Header/HeaderBackground.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -7,7 +7,7 @@
    StyleProp,
    ViewStyle,
  } from 'react-native';
 -import { useTheme } from '@react-navigation/native';
 +import useTheme from '../../../utils/useTheme';
- 
+
  type Props = ViewProps & {
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Header/HeaderContainer.tsx	2020-10-26 16:15:18.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Header/HeaderContainer.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -1,11 +1,6 @@
  import * as React from 'react';
  import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -417,9 +408,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
 -} from '@react-navigation/native';
 +import { NavigationContext } from 'react-navigation';
  import type { EdgeInsets } from 'react-native-safe-area-context';
- 
+
  import Header from './Header';
-@@ -19,6 +14,7 @@
+@@ -18,6 +13,7 @@
  import PreviousSceneContext from '../../utils/PreviousSceneContext';
  import type {
    Layout,
@@ -427,7 +418,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
    Scene,
    StackHeaderStyleInterpolator,
    StackNavigationProp,
-@@ -105,9 +101,7 @@
+@@ -99,9 +95,7 @@
            insets,
            scene,
            previous,
@@ -438,7 +429,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
            styleInterpolator:
              mode === 'float'
                ? isHeaderStatic
-@@ -126,7 +120,7 @@
+@@ -120,7 +114,7 @@
              key={scene.route.key}
              value={scene.descriptor.navigation}
            >
@@ -447,7 +438,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
                <View
                  onLayout={
                    onContentHeightChange
-@@ -155,7 +149,7 @@
+@@ -149,7 +143,7 @@
                >
                  {header !== undefined ? header(props) : <Header {...props} />}
                </View>
@@ -457,8 +448,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
          );
        })}
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Header/HeaderSegment.tsx	2020-10-26 16:08:40.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Header/HeaderSegment.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -8,7 +8,7 @@
    ViewStyle,
  } from 'react-native';
@@ -476,34 +467,34 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
 +  scene: Scene<NavigationRoute>;
    styleInterpolator: StackHeaderStyleInterpolator;
  };
- 
+
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx src/vendor/views/Header/HeaderTitle.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Header/HeaderTitle.tsx	2020-10-26 16:14:52.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Header/HeaderTitle.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -7,7 +7,7 @@
    StyleProp,
    TextStyle,
  } from 'react-native';
 -import { useTheme } from '@react-navigation/native';
 +import useTheme from '../../../utils/useTheme';
- 
+
  type Props = Omit<TextProps, 'style'> & {
    tintColor?: string;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx src/vendor/views/Stack/Card.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Stack/Card.tsx	2020-10-26 16:08:40.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Stack/Card.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -162,7 +162,7 @@
- 
+
    private interactionHandle: number | undefined;
- 
+
 -  private pendingGestureCallback: number | undefined;
 +  private pendingGestureCallback: any;
- 
+
    private lastToValue: number | undefined;
- 
+
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx src/vendor/views/Stack/CardContainer.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Stack/CardContainer.tsx	2020-10-26 16:08:40.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Stack/CardContainer.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -1,12 +1,13 @@
  import * as React from 'react';
  import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -520,10 +511,10 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
    Layout,
    StackHeaderMode,
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Stack/CardStack.tsx	2020-10-26 16:17:14.000000000 +0100
-@@ -7,11 +7,7 @@
-   Platform,
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Stack/CardStack.tsx	2020-11-10 21:04:07.000000000 +0100
+@@ -6,11 +6,7 @@
+   Dimensions,
  } from 'react-native';
  import type { EdgeInsets } from 'react-native-safe-area-context';
 -import type {
@@ -532,10 +523,10 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
 -  StackNavigationState,
 -} from '@react-navigation/native';
 +import type { NavigationState as StackNavigationState } from 'react-navigation';
- 
+
  import {
    MaybeScreenContainer,
-@@ -32,6 +28,7 @@
+@@ -31,6 +27,7 @@
    Layout,
    StackHeaderMode,
    StackCardMode,
@@ -543,7 +534,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
    Scene,
    StackDescriptorMap,
    StackNavigationOptions,
-@@ -45,7 +42,7 @@
+@@ -44,7 +41,7 @@
  type Props = {
    mode: StackCardMode;
    insets: EdgeInsets;
@@ -553,8 +544,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
    routes: Route<string>[];
    openingRouteKeys: string[];
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx src/vendor/views/Stack/StackView.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-10-26 16:07:00.000000000 +0100
-+++ src/vendor/views/Stack/StackView.tsx	2020-10-26 16:20:15.000000000 +0100
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-11-10 21:02:55.000000000 +0100
++++ src/vendor/views/Stack/StackView.tsx	2020-11-10 21:04:07.000000000 +0100
 @@ -2,12 +2,11 @@
  import { View, Platform, StyleSheet } from 'react-native';
  import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
@@ -569,7 +560,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 +  NavigationActions,
 +  SceneView,
 +} from 'react-navigation';
- 
+
  import { GestureHandlerRootView } from '../GestureHandler';
  import CardStack from './CardStack';
 @@ -17,6 +16,7 @@
@@ -582,7 +573,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
    StackDescriptorMap,
 @@ -24,9 +24,10 @@
  import HeaderShownContext from '../../utils/HeaderShownContext';
- 
+
  type Props = StackNavigationConfig & {
 -  state: StackNavigationState<ParamListBase>;
 +  state: StackNavigationState;
@@ -590,23 +581,23 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
    descriptors: StackDescriptorMap;
 +  screenProps: unknown;
  };
- 
+
  type State = {
 @@ -295,7 +296,9 @@
          return false;
        }
- 
+
 -      return gestureEnabled !== false;
 +      return gestureEnabled !== undefined
 +        ? gestureEnabled
 +        : Platform.OS !== 'android';
      }
- 
+
      return false;
 @@ -323,26 +326,49 @@
        return null;
      }
- 
+
 -    return descriptor.render();
 +    const { navigation, getComponent } = descriptor;
 +    const SceneComponent = getComponent();
@@ -619,11 +610,11 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 +      />
 +    );
    };
- 
+
    private renderHeader = (props: HeaderContainerProps) => {
      return <HeaderContainer {...props} />;
    };
- 
+
 +  private handleTransitionComplete = () => {
 +    const { state, navigation } = this.props;
 +
@@ -640,7 +631,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
    private handleOpenRoute = ({ route }: { route: Route<string> }) => {
      const { state, navigation } = this.props;
      const { closingRouteKeys, replacingRouteKeys } = this.state;
- 
+
 +    this.handleTransitionComplete();
 +
      if (
@@ -690,7 +681,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 +
 +    descriptor?.options.onTransitionStart?.({ closing });
 +  };
- 
+
    private handleTransitionEnd = (
      { route }: { route: Route<string> },
      closing: boolean
@@ -739,7 +730,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 +  private handleGestureCancel = () => {
 +    // Do nothing
    };
- 
+
    render() {
      const {
        state,
@@ -749,7 +740,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
        mode = 'card',
 @@ -450,7 +469,7 @@
      } = this.state;
- 
+
      return (
 -      <NavigationHelpersContext.Provider value={navigation}>
 +      <>

packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap

@@ -152,16 +152,21 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
         onGestureCanceled={[Function]}
         onGestureEnd={[Function]}
         onOpen={[Function]}
-        onTransitionStart={[Function]}
+        onTransition={[Function]}
         pointerEvents="box-none"
         style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          Array [
+            Object {
+              "overflow": undefined,
+            },
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+          ]
         }
         transitionSpec={
           Object {
@@ -283,6 +288,112 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                         }
                       }
                     >
+                      <View
+                        pointerEvents="box-none"
+                        style={
+                          Object {
+                            "zIndex": 1,
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityElementsHidden={false}
+                          importantForAccessibility="auto"
+                          onLayout={[Function]}
+                          pointerEvents="box-none"
+                          style={null}
+                        >
+                          <View
+                            pointerEvents="box-none"
+                            style={
+                              Object {
+                                "bottom": 0,
+                                "left": 0,
+                                "opacity": 1,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                                "zIndex": 0,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#fff",
+                                  "borderBottomColor": "#a7a7aa",
+                                  "flex": 1,
+                                  "shadowColor": "#a7a7aa",
+                                  "shadowOffset": Object {
+                                    "height": 0.5,
+                                    "width": 0,
+                                  },
+                                  "shadowOpacity": 0.85,
+                                  "shadowRadius": 0,
+                                }
+                              }
+                            />
+                          </View>
+                          <View
+                            pointerEvents="box-none"
+                            style={
+                              Object {
+                                "height": 44,
+                                "maxHeight": undefined,
+                                "minHeight": undefined,
+                                "opacity": undefined,
+                                "transform": undefined,
+                              }
+                            }
+                          >
+                            <View
+                              pointerEvents="none"
+                              style={
+                                Object {
+                                  "height": 0,
+                                }
+                              }
+                            />
+                            <View
+                              pointerEvents="box-none"
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                }
+                              }
+                            >
+                              <View
+                                pointerEvents="box-none"
+                                style={
+                                  Object {
+                                    "marginHorizontal": 16,
+                                    "opacity": 1,
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityRole="header"
+                                  aria-level="1"
+                                  numberOfLines={1}
+                                  onLayout={[Function]}
+                                  style={
+                                    Object {
+                                      "color": "rgba(0, 0, 0, 0.9)",
+                                      "fontSize": 17,
+                                      "fontWeight": "600",
+                                    }
+                                  }
+                                >
+                                  Home
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                       <View
                         onLayout={[Function]}
                         style={
@@ -321,16 +432,21 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                             onGestureCanceled={[Function]}
                             onGestureEnd={[Function]}
                             onOpen={[Function]}
-                            onTransitionStart={[Function]}
+                            onTransition={[Function]}
                             pointerEvents="box-none"
                             style={
-                              Object {
-                                "bottom": 0,
-                                "left": 0,
-                                "position": "absolute",
-                                "right": 0,
-                                "top": 0,
-                              }
+                              Array [
+                                Object {
+                                  "overflow": undefined,
+                                },
+                                Object {
+                                  "bottom": 0,
+                                  "left": 0,
+                                  "position": "absolute",
+                                  "right": 0,
+                                  "top": 0,
+                                },
+                              ]
                             }
                             transitionSpec={
                               Object {
@@ -365,7 +481,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                               style={
                                 Object {
                                   "flex": 1,
-                                  "marginTop": 0,
                                 }
                               }
                             >
@@ -454,19 +569,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                           </View>
                         </View>
                       </View>
-                      <View
-                        pointerEvents="box-none"
-                        style={
-                          Object {
-                            "height": 44,
-                            "left": 0,
-                            "position": "absolute",
-                            "right": 0,
-                            "top": 0,
-                            "zIndex": 1,
-                          }
-                        }
-                      />
                     </View>
                   </View>
                 </View>

packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap

@@ -169,16 +169,21 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
         onGestureCanceled={[Function]}
         onGestureEnd={[Function]}
         onOpen={[Function]}
-        onTransitionStart={[Function]}
+        onTransition={[Function]}
         pointerEvents="box-none"
         style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          Array [
+            Object {
+              "overflow": undefined,
+            },
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+          ]
         }
         transitionSpec={
           Object {
@@ -457,16 +462,21 @@ exports[`StackNavigator renders successfully 1`] = `
         onGestureCanceled={[Function]}
         onGestureEnd={[Function]}
         onOpen={[Function]}
-        onTransitionStart={[Function]}
+        onTransition={[Function]}
         pointerEvents="box-none"
         style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          Array [
+            Object {
+              "overflow": undefined,
+            },
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+          ]
         }
         transitionSpec={
           Object {

packages/stack/src/vendor/index.tsx

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

packages/stack/src/vendor/types.tsx

@@ -158,6 +158,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.
@@ -383,7 +387,7 @@ export type StackNavigationConfig = {
   /**
    * 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, `false` on iOS.
+   * Defaults to `true` on Android, depends on the version of `react-native-screens` on iOS.
    */
   detachInactiveScreens?: boolean;
 };

packages/stack/src/vendor/views/BorderlessButton.tsx

@@ -5,7 +5,7 @@ import { BaseButton } from 'react-native-gesture-handler';
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
 type Props = React.ComponentProps<typeof BaseButton> & {
-  activeOpacity: number;
+  pressOpacity: number;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -27,7 +27,7 @@ export default class BorderlessButton extends React.Component<Props> {
         overshootClamping: true,
         restDisplacementThreshold: 0.01,
         restSpeedThreshold: 0.01,
-        toValue: active ? this.props.activeOpacity : 1,
+        toValue: active ? this.props.pressOpacity : 1,
         useNativeDriver,
       }).start();
     }

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

@@ -10,7 +10,6 @@ import {
   forNoAnimation,
   forSlideRight,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
-import HeaderShownContext from '../../utils/HeaderShownContext';
 import PreviousSceneContext from '../../utils/PreviousSceneContext';
 import type {
   Layout,
@@ -52,7 +51,6 @@ export default function HeaderContainer({
   style,
 }: Props) {
   const focusedRoute = getFocusedRoute();
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
   const parentPreviousScene = React.useContext(PreviousSceneContext);
 
   return (
@@ -62,11 +60,8 @@ export default function HeaderContainer({
           return null;
         }
 
-        const {
-          header,
-          headerShown = isParentHeaderShown === false,
-          headerTransparent,
-        } = scene.descriptor.options || {};
+        const { header, headerShown = true, headerTransparent } =
+          scene.descriptor.options || {};
 
         if (!headerShown) {
           return null;
@@ -81,11 +76,10 @@ export default function HeaderContainer({
         const previousScene = self[i - 1];
         const nextScene = self[i + 1];
 
-        const {
-          headerShown: previousHeaderShown = isParentHeaderShown === false,
-        } = previousScene?.descriptor.options || {};
+        const { headerShown: previousHeaderShown = true } =
+          previousScene?.descriptor.options || {};
 
-        const { headerShown: nextHeaderShown = isParentHeaderShown === false } =
+        const { headerShown: nextHeaderShown = true } =
           nextScene?.descriptor.options || {};
 
         const isHeaderStatic =

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

@@ -162,6 +162,7 @@ export default function HeaderSegment(props: Props) {
     headerBackTitleVisible,
     headerTruncatedBackTitle: truncatedLabel,
     headerPressColorAndroid: pressColorAndroid,
+    headerBackAccessibilityLabel: backAccessibilityLabel,
     headerBackAllowFontScaling: backAllowFontScaling,
     headerTitleAllowFontScaling: titleAllowFontScaling,
     headerTitleStyle: customTitleStyle,
@@ -290,6 +291,7 @@ export default function HeaderSegment(props: Props) {
     ? left({
         backImage,
         pressColorAndroid,
+        accessibilityLabel: backAccessibilityLabel,
         allowFontScaling: backAllowFontScaling,
         onPress: onGoBack,
         labelVisible: headerBackTitleVisible,

packages/stack/src/vendor/views/KeyboardManager.tsx

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

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

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

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

@@ -47,7 +47,7 @@ type Props = TransitionPreset & {
   ) => void;
   onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
   onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
+  onPageChangeConfirm?: (force: boolean) => void;
   onPageChangeCancel?: () => void;
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -117,42 +117,58 @@ function CardContainer({
   scene,
   transitionSpec,
 }: Props) {
-  React.useEffect(() => {
-    onPageChangeConfirm?.();
-  }, [active, onPageChangeConfirm]);
-
   const handleOpen = () => {
-    onTransitionEnd?.({ route: scene.route }, false);
-    onOpenRoute({ route: scene.route });
+    const { route } = scene;
+
+    onTransitionEnd?.({ route }, false);
+    onOpenRoute({ route });
   };
 
   const handleClose = () => {
-    onTransitionEnd?.({ route: scene.route }, true);
-    onCloseRoute({ route: scene.route });
+    const { route } = scene;
+
+    onTransitionEnd?.({ route }, true);
+    onCloseRoute({ route });
   };
 
   const handleGestureBegin = () => {
+    const { route } = scene;
+
     onPageChangeStart?.();
-    onGestureStart?.({ route: scene.route });
+    onGestureStart?.({ route });
   };
 
   const handleGestureCanceled = () => {
+    const { route } = scene;
+
     onPageChangeCancel?.();
-    onGestureCancel?.({ route: scene.route });
+    onGestureCancel?.({ route });
   };
 
   const handleGestureEnd = () => {
-    onGestureEnd?.({ route: scene.route });
+    const { route } = scene;
+
+    onGestureEnd?.({ route });
   };
 
-  const handleTransitionStart = ({ closing }: { closing: boolean }) => {
-    if (active && closing) {
-      onPageChangeConfirm?.();
+  const handleTransition = ({
+    closing,
+    gesture,
+  }: {
+    closing: boolean;
+    gesture: boolean;
+  }) => {
+    const { route } = scene;
+
+    if (!gesture) {
+      onPageChangeConfirm?.(true);
+    } else if (active && closing) {
+      onPageChangeConfirm?.(false);
     } else {
       onPageChangeCancel?.();
     }
 
-    onTransitionStart?.({ route: scene.route }, closing);
+    onTransitionStart?.({ route }, closing);
   };
 
   const insets = {
@@ -202,7 +218,7 @@ function CardContainer({
       overlay={cardOverlay}
       overlayEnabled={cardOverlayEnabled}
       shadowEnabled={cardShadowEnabled}
-      onTransitionStart={handleTransitionStart}
+      onTransition={handleTransition}
       onGestureBegin={handleGestureBegin}
       onGestureCanceled={handleGestureCanceled}
       onGestureEnd={handleGestureEnd}
@@ -217,7 +233,14 @@ function CardContainer({
       pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
       containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
       contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
-      style={StyleSheet.absoluteFill}
+      style={[
+        {
+          // This is necessary to avoid unfocused larger pages increasing scroll area
+          // The issue can be seen on the web when a smaller screen is pushed over a larger one
+          overflow: active ? undefined : 'hidden',
+        },
+        StyleSheet.absoluteFill,
+      ]}
     >
       <View style={styles.container}>
         <View style={styles.scene}>

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

@@ -63,7 +63,7 @@ type Props = {
   ) => void;
   onTransitionEnd: (props: { route: Route<string> }, closing: boolean) => void;
   onPageChangeStart?: () => void;
-  onPageChangeConfirm?: () => void;
+  onPageChangeConfirm?: (force: boolean) => void;
   onPageChangeCancel?: () => void;
   onGestureStart?: (props: { route: Route<string> }) => void;
   onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -394,9 +394,9 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureStart,
       onGestureEnd,
       onGestureCancel,
-      detachInactiveScreens = Platform.OS === 'ios'
-        ? false // Disable `react-native-screens` on iOS by default since it's buggy
-        : shouldUseActivityState || mode !== 'modal', // Enable on new versions of screens or for non modals on older versions
+      // 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 = Platform.OS === 'web' || shouldUseActivityState,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;
@@ -445,10 +445,7 @@ export default class CardStack extends React.Component<Props, State> {
         ? this.state.scenes.slice(-2).some((scene) => {
             const { descriptor } = scene;
             const options = descriptor ? descriptor.options : {};
-            const {
-              headerTransparent,
-              headerShown = isParentHeaderShown === false,
-            } = options;
+            const { headerTransparent, headerShown = true } = options;
 
             if (headerTransparent || headerShown === false) {
               return true;
@@ -508,7 +505,7 @@ export default class CardStack extends React.Component<Props, State> {
             // For the old implementation, it stays the same it was
             let isScreenActive: Animated.AnimatedInterpolation | 2 | 1 | 0 = 1;
 
-            if (shouldUseActivityState) {
+            if (shouldUseActivityState || Platform.OS === 'web') {
               if (index < self.length - activeScreensLimit - 1) {
                 // screen should be inactive because it is too deep in the stack
                 isScreenActive = STATE_INACTIVE;
@@ -540,7 +537,7 @@ export default class CardStack extends React.Component<Props, State> {
 
             const {
               safeAreaInsets,
-              headerShown = isParentHeaderShown === false,
+              headerShown = true,
               headerTransparent,
               cardShadowEnabled,
               cardOverlayEnabled,

packages/stack/src/vendor/views/TouchableItem.ios.tsx

@@ -5,7 +5,7 @@ import { BaseButton } from 'react-native-gesture-handler';
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
 type Props = React.ComponentProps<typeof BaseButton> & {
-  activeOpacity: number;
+  pressOpacity: number;
 };
 
 const useNativeDriver = Platform.OS !== 'web';
@@ -27,7 +27,7 @@ export default class TouchableItem extends React.Component<Props> {
       overshootClamping: true,
       restDisplacementThreshold: 0.01,
       restSpeedThreshold: 0.01,
-      toValue: active ? this.props.activeOpacity : 1,
+      toValue: active ? this.props.pressOpacity : 1,
       useNativeDriver,
     }).start();
 

packages/tabs/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.10.1...react-navigation-tabs@2.11.0) (2021-02-21)
+
+
+### Features
+
+* add activityState to other navigators ([5c7f892](https://github.com/react-navigation/tabs/commit/5c7f892d77298f5c89534fa78a1a6a59c7f35a60))
+
+
+
+
+
+## [2.10.1](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.10.0...react-navigation-tabs@2.10.1) (2020-10-28)
+
+
+### Bug Fixes
+
+* add bottom insets to custom height for bottom tabs ([ffe3bdd](https://github.com/react-navigation/tabs/commit/ffe3bddcb27ecb3d663b13b433263d18f792ad4d))
+
+
+
+
+
 # [2.10.0](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.9.2...react-navigation-tabs@2.10.0) (2020-10-26)
 
 

packages/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-tabs",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Tab Navigation components for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -56,7 +56,7 @@
     "react-native-gesture-handler": "~1.7.0",
     "react-native-reanimated": "~1.13.0",
     "react-native-tab-view": "^2.13.0",
-    "react-navigation": "^4.4.3",
+    "react-navigation": "^4.4.4",
     "typescript": "^4.0.3"
   },
   "peerDependencies": {

packages/tabs/src/views/BottomTabBar.tsx

@@ -423,6 +423,7 @@ class TabBarBottom extends React.Component<BottomTabBarProps, State> {
       marginRight,
       marginHorizontal,
       marginVertical,
+      height,
       ...innerStyle
     } = StyleSheet.flatten(style || {});
 
@@ -467,10 +468,14 @@ class TabBarBottom extends React.Component<BottomTabBarProps, State> {
     const tabBarStyle = [
       {
         height:
-          // @ts-ignore: isPad exists in runtime but not available in type defs
-          (this._shouldUseHorizontalLabels() && !Platform.isPad
-            ? COMPACT_HEIGHT
-            : DEFAULT_HEIGHT) + insets.bottom,
+          height != null
+            ? typeof height === 'number'
+              ? height + insets.bottom
+              : height
+            : // @ts-ignore: isPad exists in runtime but not available in type defs
+              (this._shouldUseHorizontalLabels() && !Platform.isPad
+                ? COMPACT_HEIGHT
+                : DEFAULT_HEIGHT) + insets.bottom,
         paddingBottom: insets.bottom,
         paddingLeft: insets.left,
         paddingRight: insets.right,

packages/tabs/src/views/ResourceSavingScene.tsx

@@ -1,6 +1,11 @@
 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;
@@ -17,8 +22,17 @@ export default class ResourceSavingScene extends React.Component<Props> {
     if (screensEnabled?.() && this.props.enabled && Platform.OS !== 'web') {
       const { isVisible, ...rest } = this.props;
 
-      // @ts-ignore
-      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;

yarn.lock

@@ -4179,10 +4179,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
 
-"@react-navigation/stack@^5.10.0":
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.10.0.tgz#2d4b644067165e304de67cab79cab3a4c486272c"
-  integrity sha512-1+OVWPHTXc0HT4iMedVHWmIi4RnDOCfxmEjmEZfPCV+7BuzAJKAMW0KxJBFj3uAJscS/FxlZ3Qnjo5Z4aSNXqA==
+"@react-navigation/stack@^5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.3.tgz#3d15fcd2cf8d0d2a1248686565c6a85e2d8e1c55"
+  integrity sha512-7rHc13DHsYP7l7GcgBcLEyX2/IAuCcRZ1Iu3MtOZSayjvFXxBBYKFKw0OyY9NxOfZUdLl3Q3mLiUHVFZkHMcuA==
   dependencies:
     color "^3.1.3"
     react-native-iphone-x-helper "^1.3.0"