chore: publish

- react-navigation-animated-switch@0.6.0
 - react-navigation-drawer@2.5.0
 - react-navigation-material-bottom-tabs@2.3.0
 - @react-navigation/native@3.8.0
 - react-navigation@4.4.0
 - react-navigation-stack@2.8.0
 - react-navigation-tabs@2.9.0

example/App.tsx

@@ -346,6 +346,7 @@ class MainScreen extends React.Component<any, State> {
                         if (route.screen || route.path || route.params) {
                           // @ts-ignore
                           const { path, params, screen } = route;
+                          // @ts-ignore
                           const { router } = screen;
                           const action =
                             path &&
@@ -386,6 +387,7 @@ class MainScreen extends React.Component<any, State> {
 
 const Navigation = createAppContainer(
   createStackNavigator(
+    // @ts-ignore
     {
       ...ExampleInfo,
       Index: {

example/src/ParallaxDrawer.tsx

@@ -114,7 +114,7 @@ const MyNavScreen = ({
                 title="Set unlocked"
               />
             ),
-            unlocked: (
+            'unlocked': (
               <Button
                 onPress={() =>
                   navigation.setParams({ drawerLockMode: 'locked-open' })

example/src/SimpleDrawer.tsx

@@ -106,7 +106,7 @@ const MyNavScreen = ({
                 title="Set unlocked"
               />
             ),
-            unlocked: (
+            'unlocked': (
               <Button
                 onPress={() =>
                   navigation.setParams({ drawerLockMode: 'locked-open' })

example/src/SimpleStack.tsx

@@ -64,7 +64,7 @@ class ListScreen extends React.Component {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: '#fff',
+          // backgroundColor: '#fff',
         }}
       >
         <Text>List Screen</Text>
@@ -96,7 +96,7 @@ class DetailsScreen extends React.Component<NavigationStackScreenProps> {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: '#fff',
+          // backgroundColor: '#fff',
         }}
       >
         <Text>Details Screen</Text>
@@ -119,7 +119,7 @@ class HeaderlessScreen extends React.Component {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: '#fff',
+          // backgroundColor: '#fff',
         }}
       >
         <Text>Headerless Screen</Text>

example/src/StyledDrawer.tsx

@@ -91,8 +91,4 @@ const DrawerExample = createDrawerNavigator(
   }
 );
 
-DrawerExample.navigationOptions = {
-  headerShown: false,
-};
-
 export default DrawerExample;

package.json

@@ -36,13 +36,13 @@
     "babel-jest": "^25.2.3",
     "commitlint": "^8.3.5",
     "core-js": "^3.6.4",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
-    "eslint-config-satya164": "^3.1.5",
+    "eslint-config-satya164": "^3.1.7",
     "husky": "^4.2.1",
     "jest": "^25.1.0",
     "lerna": "^3.20.2",
-    "prettier": "^2.0.1",
+    "prettier": "^2.0.5",
-    "typescript": "~3.8.3"
+     "typescript": "^3.9.5"
   },
   "resolutions": {
     "react": "~16.9.0",

packages/animated-switch/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.
 
+# [0.6.0](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.12...react-navigation-animated-switch@0.6.0) (2020-06-25)
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
 ## [0.5.12](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.11...react-navigation-animated-switch@0.5.12) (2020-04-30)
 
 **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.5.12",
+  "version": "0.6.0",
   "description": "Animated switch for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -28,8 +28,8 @@
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-reanimated": "~1.7.0",
-    "react-navigation": "^4.3.9",
+    "react-navigation": "^4.4.0",
-    "typescript": "~3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "react": "*",

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.5.0](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.13...react-navigation-drawer@2.5.0) (2020-06-25)
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/drawer/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
 ## [2.4.13](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.12...react-navigation-drawer@2.4.13) (2020-04-30)
 
 **Note:** Version bump only for package react-navigation-drawer

packages/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-drawer",
-  "version": "2.4.13",
+  "version": "2.5.0",
   "description": "Drawer navigator component for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -49,8 +49,8 @@
     "react-native-reanimated": "^1.2.0",
     "react-native-screens": "^2.3.0",
     "react-native-testing-library": "^1.12.0",
-    "react-navigation": "^4.3.9",
+    "react-navigation": "^4.4.0",
-    "typescript": "~3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "react": "*",

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -75,8 +75,11 @@ const DrawerNavigator = (
   const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);
 
   // TODO: don't have time to fix it right now
-  // @ts-ignore
+  const navigator = createNavigator(
-  const navigator = createNavigator(DrawerView, drawerRouter, mergedConfig);
+    DrawerView as any,
+    drawerRouter,
+    mergedConfig
+  );
   return navigator;
 };
 

packages/drawer/src/views/DrawerView.tsx

@@ -160,10 +160,6 @@ export default class DrawerView extends React.PureComponent<Props, State> {
         drawerOpenProgress={progress}
         navigation={this.props.navigation}
         descriptors={this.props.descriptors}
-        contentComponent={this.props.navigationConfig.contentComponent}
-        contentOptions={this.props.navigationConfig.contentOptions}
-        drawerPosition={this.props.navigationConfig.drawerPosition}
-        style={this.props.navigationConfig.style}
         {...this.props.navigationConfig}
       />
     );

packages/material-bottom-tabs/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.3.0](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.12...react-navigation-material-bottom-tabs@2.3.0) (2020-06-25)
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation-material-bottom-tabs/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
 ## [2.2.12](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.11...react-navigation-material-bottom-tabs@2.2.12) (2020-04-30)
 
 **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.2.12",
+  "version": "2.3.0",
   "description": "Material Bottom Tab Navigation component for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -48,8 +48,8 @@
     "react-native-gesture-handler": "^1.6.0",
     "react-native-paper": "^3.1.1",
     "react-native-reanimated": "^1.2.0",
-    "react-navigation": "^4.3.9",
+    "react-navigation": "^4.4.0",
-    "typescript": "~3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "react": "*",

packages/native/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.8.0](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.13...@react-navigation/native@3.8.0) (2020-06-25)
+
+
+### Bug Fixes
+
+* improve error message when installing wrong version ([442ca3e](https://github.com/react-navigation/react-navigation-native/commit/442ca3e700c5805cdc5cd02c68f49042887a5054))
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation-native/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
 ## [3.7.13](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.12...@react-navigation/native@3.7.13) (2020-04-30)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

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

packages/native/src/index.js

@@ -43,6 +43,24 @@ module.exports = {
   get createNavigationFactory() {
     return require('./throwIfWrongVersion').default;
   },
+  get useNavigationBuilder() {
+    return require('./throwIfWrongVersion').default;
+  },
+  get useNavigation() {
+    return require('./throwIfWrongVersion').default;
+  },
+  get useRoute() {
+    return require('./throwIfWrongVersion').default;
+  },
+  get useFocusEffect() {
+    return require('./throwIfWrongVersion').default;
+  },
+  get useIsFocused() {
+    return require('./throwIfWrongVersion').default;
+  },
+  get useNavigationState() {
+    return require('./throwIfWrongVersion').default;
+  },
   get NavigationContainer() {
     return require('./throwIfWrongVersion').default;
   },

packages/native/src/throwIfWrongVersion.js

@@ -1,5 +1,5 @@
 export default function () {
   throw new Error(
-    "This version of '@react-navigation/native' is not compatible with React Navigation 5. Make sure you install 5.x version of '@react-navigation/native'."
+    'Looks like you are trying to use React Navigation 5 APIs, but have React Navigation 4 installed.\n\nMixing React Navigation 4 and 5 is not supported. See the documentation for installation instructions and usage guide for appropriate versions:\n\n- React Navigation 5: https://reactnavigation.org/docs/getting-started\n- React Navigation 4: https://reactnavigation.org/docs/4.x/getting-started'
   );
 }

packages/react-navigation/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.
 
+# [4.4.0](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.9...react-navigation@4.4.0) (2020-06-25)
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
 ## [4.3.9](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.8...react-navigation@4.3.9) (2020-04-30)
 
 

packages/react-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "4.3.9",
+  "version": "4.4.0",
   "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.6",
-    "@react-navigation/native": "^3.7.13"
+    "@react-navigation/native": "^3.8.0"
   },
   "devDependencies": {
     "@types/react": "^16.9.23",
@@ -34,6 +34,6 @@
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-test-renderer": "^16.9.2",
-    "typescript": "~3.8.3"
+    "typescript": "^3.9.5"
   }
 }

packages/react-navigation/typescript/react-navigation.d.ts

@@ -734,7 +734,9 @@ export namespace StackActions {
   export const REPLACE: 'Navigation/REPLACE';
   export const COMPLETE_TRANSITION: 'Navigation/COMPLETE_TRANSITION';
 
-  export function pop(options: NavigationPopActionPayload): NavigationPopAction;
+  export function pop(
+    options?: NavigationPopActionPayload
+  ): NavigationPopAction;
   export function popToTop(
     options?: NavigationPopToTopActionPayload
   ): NavigationPopToTopAction;
@@ -810,17 +812,15 @@ export interface NavigationDescriptor<
   getComponent: () => React.ComponentType;
 }
 
-export type NavigationView<
+export type NavigationView<Options, State, ScreenProps = unknown> =
-  Options,
+  | React.ComponentType<
-  State,
+      {
-  ScreenProps = unknown
+        descriptors: { [key: string]: NavigationDescriptor };
-> = React.ComponentType<
+        navigationConfig: Options;
-  {
+        screenProps?: ScreenProps;
-    descriptors: { [key: string]: NavigationDescriptor };
+      } & NavigationInjectedProps
-    navigationConfig: Options;
+    >
-    screenProps?: ScreenProps;
+  | React.ComponentType<any>;
-  } & NavigationInjectedProps
->;
 
 export type CreateNavigatorConfig<
   NavigatorConfig,

packages/stack/CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.7.0...react-navigation-stack@2.8.0) (2020-06-25)
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/react-navigation-stack/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
+# [2.7.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.6.0...react-navigation-stack@2.7.0) (2020-06-08)
+
+
+### Features
+
+* sync latest stack ([ba6d7dc](https://github.com/react-navigation/react-navigation-stack/commit/ba6d7dcbedcfca774a53de32f92acc45140bb1fe))
+
+
+
+
+
+# [2.6.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.5.1...react-navigation-stack@2.6.0) (2020-06-06)
+
+
+### Features
+
+* sync latest stack ([03f9f8c](https://github.com/react-navigation/react-navigation-stack/commit/03f9f8cd8ec3b5fe9dc2ed1ed2024e79dd06f854))
+
+
+
+
+
+## [2.5.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.5.0...react-navigation-stack@2.5.1) (2020-05-15)
+
+
+### Bug Fixes
+
+* sync latest stack ([bc1313b](https://github.com/react-navigation/react-navigation-stack/commit/bc1313b61da6134255adff477ded2ed8f632bf4a))
+
+
+
+
+
+# [2.5.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.4.0...react-navigation-stack@2.5.0) (2020-05-11)
+
+
+### Features
+
+* sync latest stack ([bb82d50](https://github.com/react-navigation/react-navigation-stack/commit/bb82d5000f6577f421cc7f72df8064eb4c2a0650))
+
+
+
+
+
 # [2.4.0](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.3.13...react-navigation-stack@2.4.0) (2020-04-30)
 
 

packages/stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-stack",
-  "version": "2.4.0",
+  "version": "2.8.0",
   "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.10.0",
     "@react-native-community/masked-view": "^0.1.7",
-    "@react-navigation/stack": "^5.2.16",
+    "@react-navigation/stack": "^5.6.0",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
@@ -56,9 +56,9 @@
     "react-native-gesture-handler": "^1.6.0",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.3.0",
-    "react-navigation": "^4.3.9",
+    "react-navigation": "^4.4.0",
     "react-test-renderer": "~16.9.0",
-    "typescript": "~3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "@react-native-community/masked-view": ">=0.1.0",

packages/stack/scripts/stack.patch

@@ -1,6 +1,6 @@
 diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/index.tsx
---- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/index.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/index.tsx	2020-06-24 23:16:17.000000000 +0200
 @@ -3,11 +3,6 @@
  import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
  import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
@@ -13,12 +13,13 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
  export const Assets = [
    // eslint-disable-next-line import/no-commonjs
    require('./views/assets/back-icon.png'),
-@@ -49,8 +44,10 @@
+@@ -49,9 +44,10 @@
   * Types
   */
  export type {
 -  StackNavigationOptions,
 -  StackNavigationProp,
+-  StackScreenProps,
 +  NavigationStackState,
 +  StackNavigationProp as NavigationStackProp,
 +  StackNavigationOptions as NavigationStackOptions,
@@ -27,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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-06-24 23:11:52.000000000 +0200
 +++ src/vendor/navigators/createStackNavigator.tsx	1970-01-01 01:00:00.000000000 +0100
 @@ -1,96 +0,0 @@
 -import * as React from 'react';
@@ -43,7 +44,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
 -  StackActions,
 -} from '@react-navigation/native';
 -import StackView from '../views/Stack/StackView';
--import {
+-import type {
 -  StackNavigationConfig,
 -  StackNavigationOptions,
 -  StackNavigationEventMap,
@@ -127,12 +128,12 @@ 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/types.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/types.tsx	2020-06-24 23:18:40.000000000 +0200
-@@ -8,14 +8,28 @@
+@@ -8,15 +8,28 @@
  } from 'react-native';
- import { EdgeInsets } from 'react-native-safe-area-context';
+ import type { EdgeInsets } from 'react-native-safe-area-context';
- import {
+ import type {
 +  NavigationRoute,
 +  NavigationState,
 +  NavigationScreenProp,
@@ -143,6 +144,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 -  NavigationHelpers,
 -  StackNavigationState,
 -  StackActionHelpers,
+-  RouteProp,
 -} from '@react-navigation/native';
 +  NavigationParams,
 +  NavigationNavigateAction,
@@ -165,7 +167,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
  
  export type StackNavigationEventMap = {
    /**
-@@ -28,22 +42,29 @@
+@@ -29,29 +42,28 @@
    transitionEnd: { data: { closing: boolean } };
  };
  
@@ -186,6 +188,13 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 -  StackNavigationEventMap
 -> &
 -  StackActionHelpers<ParamList>;
+-
+-export type StackScreenProps<
+-  ParamList extends ParamListBase,
+-  RouteName extends keyof ParamList = string
+-> = {
+-  navigation: StackNavigationProp<ParamList, RouteName>;
+-  route: RouteProp<ParamList, RouteName>;
 +  State = NavigationRoute,
 +  Params = NavigationParams
 +> = NavigationScreenProp<State, Params> & {
@@ -206,11 +215,10 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
 +    event: NavigationStackEventName,
 +    callback: NavigationEventCallback
 +  ) => NavigationEventSubscription;
-+};
+ };
  
  export type Layout = { width: number; height: number };
- 
+@@ -228,24 +240,27 @@
-@@ -218,24 +239,27 @@
    /**
     * Navigation prop for the header.
     */
@@ -244,7 +252,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
  export type StackNavigationOptions = StackHeaderOptions &
    Partial<TransitionPreset> & {
      /**
-@@ -320,6 +344,8 @@
+@@ -330,6 +345,8 @@
        bottom?: number;
        left?: number;
      };
@@ -253,28 +261,40 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
    };
  
  export type StackNavigationConfig = {
+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-06-24 23:11:52.000000000 +0200
++++ src/vendor/utils/PreviousSceneContext.tsx	2020-06-24 23:26:38.000000000 +0200
+@@ -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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Header/Header.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Header/Header.tsx	2020-06-24 23:33:25.000000000 +0200
-@@ -1,12 +1,14 @@
+@@ -1,12 +1,15 @@
  import * as React from 'react';
 -import { StackActions } from '@react-navigation/native';
 +import { Dimensions } from 'react-native';
 +import { StackActions } from 'react-navigation';
 +import { getStatusBarHeight } from 'react-native-iphone-x-helper';
++
++import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
  
 -import HeaderSegment from './HeaderSegment';
-+import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
  import HeaderTitle from './HeaderTitle';
  import debounce from '../../utils/debounce';
- import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
+ import type { StackHeaderProps, StackHeaderTitleProps } from '../../types';
  
 -export default React.memo(function Header(props: StackHeaderProps) {
 +const Header = React.memo(function Header(props: StackHeaderProps) {
    const {
      scene,
      previous,
-@@ -22,7 +24,7 @@
+@@ -22,7 +25,7 @@
        ? options.headerTitle
        : options.title !== undefined
        ? options.title
@@ -283,7 +303,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
  
    let leftLabel;
  
-@@ -38,17 +40,12 @@
+@@ -38,17 +41,18 @@
          ? o.headerTitle
          : o.title !== undefined
          ? o.title
@@ -291,6 +311,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 +        : previous.route.routeName;
    }
  
+   // eslint-disable-next-line react-hooks/exhaustive-deps
    const goBack = React.useCallback(
      debounce(() => {
 -      if (navigation.isFocused() && navigation.canGoBack()) {
@@ -298,12 +319,16 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 -          ...StackActions.pop(),
 -          source: scene.route.key,
 -        });
--      }
++      if (navigation.isFirstRouteInParent()) {
-+      navigation.dispatch(StackActions.pop({ key: scene.route.key }));
++        // If we're the first route, we're going back to a parent navigator
++        // So we can't specify a key here
++        navigation.dispatch(StackActions.pop());
++      } else {
++        navigation.dispatch(StackActions.pop({ key: scene.route.key }));
+       }
      }, 50),
      [navigation, scene.route.key]
-   );
+@@ -64,7 +68,10 @@
-@@ -63,7 +60,10 @@
        leftLabel={leftLabel}
        headerTitle={
          typeof options.headerTitle !== 'function'
@@ -315,7 +340,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
            : options.headerTitle
        }
        onGoBack={previous ? goBack : undefined}
-@@ -71,3 +71,18 @@
+@@ -72,3 +79,18 @@
      />
    );
  });
@@ -335,8 +360,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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Header/HeaderBackButton.tsx	2020-05-01 01:33:40.000000000 +0200
++++ src/vendor/views/Header/HeaderBackButton.tsx	2020-06-24 23:21:49.000000000 +0200
 @@ -8,9 +8,9 @@
    StyleSheet,
    LayoutChangeEvent,
@@ -345,23 +370,24 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
  import MaskedView from '../MaskedView';
  import { TouchableItem } from '../TouchableItem';
 +import useTheme from '../../../utils/useTheme';
- import { StackHeaderLeftButtonProps } from '../../types';
+ 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Header/HeaderBackground.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Header/HeaderBackground.tsx	2020-06-24 23:16:23.000000000 +0200
-@@ -1,6 +1,6 @@
+@@ -7,7 +7,7 @@
- import * as React from 'react';
+   StyleProp,
- import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
+   ViewStyle,
+ } from 'react-native';
 -import { useTheme } from '@react-navigation/native';
 +import useTheme from '../../../utils/useTheme';
  
  type Props = ViewProps & {
-   children?: React.ReactNode;
+   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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Header/HeaderContainer.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Header/HeaderContainer.tsx	2020-06-24 23:21:29.000000000 +0200
 @@ -1,11 +1,6 @@
  import * as React from 'react';
  import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -372,18 +398,18 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
 -  ParamListBase,
 -} from '@react-navigation/native';
 +import { NavigationContext } from 'react-navigation';
- import { EdgeInsets } from 'react-native-safe-area-context';
+ import type { EdgeInsets } from 'react-native-safe-area-context';
  
  import Header from './Header';
-@@ -16,6 +11,7 @@
+@@ -19,6 +14,7 @@
-   forSlideRight,
+ import PreviousSceneContext from '../../utils/PreviousSceneContext';
- } from '../../TransitionConfigs/HeaderStyleInterpolators';
+ import type {
- import {
-+  Route,
    Layout,
++  Route,
    Scene,
    StackHeaderStyleInterpolator,
-@@ -99,9 +95,7 @@
+   StackNavigationProp,
+@@ -109,9 +105,7 @@
            insets,
            scene,
            previous,
@@ -394,7 +420,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
            styleInterpolator:
              mode === 'float'
                ? isHeaderStatic
-@@ -120,7 +114,7 @@
+@@ -130,7 +124,7 @@
              key={scene.route.key}
              value={scene.descriptor.navigation}
            >
@@ -403,9 +429,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
                <View
                  onLayout={
                    onContentHeightChange
-@@ -152,7 +146,7 @@
+@@ -156,7 +150,7 @@
-                   )
+               >
-                 ) : null}
+                 {header !== undefined ? header(props) : <Header {...props} />}
                </View>
 -            </NavigationRouteContext.Provider>
 +            </>
@@ -413,14 +439,14 @@ 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Header/HeaderSegment.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Header/HeaderSegment.tsx	2020-06-24 23:20:58.000000000 +0200
 @@ -8,7 +8,7 @@
    ViewStyle,
  } from 'react-native';
- import { EdgeInsets } from 'react-native-safe-area-context';
+ import type { EdgeInsets } from 'react-native-safe-area-context';
--import { Route } from '@react-navigation/native';
+-import type { Route } from '@react-navigation/native';
-+import { NavigationRoute } from 'react-navigation';
++import type { NavigationRoute } from 'react-navigation';
  import HeaderBackButton from './HeaderBackButton';
  import HeaderBackground from './HeaderBackground';
  import memoize from '../../utils/memoize';
@@ -434,20 +460,20 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSeg
  };
  
 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Header/HeaderTitle.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Header/HeaderTitle.tsx	2020-06-24 23:16:23.000000000 +0200
 @@ -1,6 +1,6 @@
  import * as React from 'react';
  import { Animated, StyleSheet, Platform } from 'react-native';
 -import { useTheme } from '@react-navigation/native';
 +import useTheme from '../../../utils/useTheme';
  
- type Props = React.ComponentProps<typeof Animated.Text> & {
+ type Props = Omit<React.ComponentProps<typeof Animated.Text>, 'key'> & {
    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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Stack/Card.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Stack/Card.tsx	2020-06-24 23:16:23.000000000 +0200
-@@ -140,7 +140,7 @@
+@@ -146,7 +146,7 @@
  
    private interactionHandle: number | undefined;
  
@@ -457,60 +483,51 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx s
    private animate = ({
      closing,
 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Stack/CardContainer.tsx	2020-05-01 01:34:25.000000000 +0200
++++ src/vendor/views/Stack/CardContainer.tsx	2020-06-24 23:20:38.000000000 +0200
-@@ -1,14 +1,14 @@
+@@ -1,12 +1,13 @@
  import * as React from 'react';
  import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 -import { Route, useTheme } from '@react-navigation/native';
- import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+ import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
  import Card from './Card';
  import HeaderHeightContext from '../../utils/HeaderHeightContext';
+ import HeaderShownContext from '../../utils/HeaderShownContext';
+ import PreviousSceneContext from '../../utils/PreviousSceneContext';
 +import useTheme from '../../../utils/useTheme';
- import {
+ import type {
 +  Route,
    Scene,
    Layout,
    StackHeaderMode,
--  StackCardMode,
-   TransitionPreset,
- } from '../../types';
- 
-@@ -192,7 +192,7 @@
-           ? { marginTop: headerHeight }
-           : null
-       }
--      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
-+      contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
-       style={StyleSheet.absoluteFill}
-     >
-       <View style={styles.container}>
 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Stack/CardStack.tsx	2020-05-01 01:32:40.000000000 +0200
++++ src/vendor/views/Stack/CardStack.tsx	2020-06-24 23:20:16.000000000 +0200
 @@ -7,7 +7,7 @@
    Platform,
  } from 'react-native';
- import { EdgeInsets } from 'react-native-safe-area-context';
+ import type { EdgeInsets } from 'react-native-safe-area-context';
--import { Route, StackNavigationState } from '@react-navigation/native';
+-import type { Route, StackNavigationState } from '@react-navigation/native';
-+import { NavigationState as StackNavigationState } from 'react-navigation';
++import type { NavigationState as StackNavigationState } from 'react-navigation';
  
  import { MaybeScreenContainer, MaybeScreen } from '../Screens';
  import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
-@@ -21,6 +21,7 @@
+@@ -25,6 +25,7 @@
- import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
- import getDistanceForDirection from '../../utils/getDistanceForDirection';
- import {
-+  Route,
    Layout,
    StackHeaderMode,
    StackCardMode,
++  Route,
+   Scene,
+   StackDescriptorMap,
+   StackNavigationOptions,
 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-05-01 01:29:42.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-06-24 23:11:52.000000000 +0200
-+++ src/vendor/views/Stack/StackView.tsx	2020-05-01 01:37:12.000000000 +0200
++++ src/vendor/views/Stack/StackView.tsx	2020-06-24 23:19:46.000000000 +0200
-@@ -4,9 +4,10 @@
+@@ -2,11 +2,11 @@
+ import { View, Platform, StyleSheet } from 'react-native';
+ import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
  import {
-   NavigationHelpersContext,
+-  NavigationHelpersContext,
    StackActions,
 -  StackNavigationState,
 -  Route,
@@ -522,15 +539,15 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
  
  import { GestureHandlerRootView } from '../GestureHandler';
  import CardStack from './CardStack';
-@@ -16,6 +17,7 @@
+@@ -16,6 +16,7 @@
  } from '../Header/HeaderContainer';
  import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
- import {
+ import type {
 +  Route,
    StackNavigationHelpers,
    StackNavigationConfig,
    StackDescriptorMap,
-@@ -25,6 +27,7 @@
+@@ -25,6 +26,7 @@
    state: StackNavigationState;
    navigation: StackNavigationHelpers;
    descriptors: StackDescriptorMap;
@@ -538,7 +555,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
  };
  
  type State = {
-@@ -293,7 +296,9 @@
+@@ -293,7 +295,9 @@
          return false;
        }
  
@@ -549,7 +566,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
      }
  
      return false;
-@@ -321,24 +326,47 @@
+@@ -321,26 +325,49 @@
        return null;
      }
  
@@ -585,22 +602,24 @@ 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 (
-       this.state.replacingRouteKeys.every((key) => key !== route.key) &&
+       closingRouteKeys.some((key) => key === route.key) &&
+       replacingRouteKeys.every((key) => key !== route.key) &&
 -      state.routeNames.includes(route.name) &&
        !state.routes.some((r) => r.key === route.key)
      ) {
-       // If route isn't present in current state, assume that a close animation was cancelled
+       // If route isn't present in current state, but was closing, assume that a close animation was cancelled
        // So we need to add this route back to the state
 -      navigation.navigate(route);
 +      navigation.dispatch(NavigationActions.navigate(route));
      } else {
        this.setState((state) => ({
          routes: state.replacingRouteKeys.length
-@@ -364,12 +392,11 @@
+@@ -366,12 +393,11 @@
        // If a route exists in state, trigger a pop
        // This will happen in when the route was closed from the card component
        // e.g. When the close animation triggered from a gesture ends
@@ -617,7 +636,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
        // We need to clean up any state tracking the route and pop it immediately
        this.setState((state) => ({
          routes: state.routes.filter((r) => r.key !== route.key),
-@@ -386,22 +413,24 @@
+@@ -388,26 +414,29 @@
    private handleTransitionStart = (
      { route }: { route: Route<string> },
      closing: boolean
@@ -654,3 +673,26 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
  
    render() {
      const {
+       state,
++      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+       navigation,
+       keyboardHandlingEnabled,
+       mode = 'card',
+@@ -427,7 +456,7 @@
+     } = this.state;
+ 
+     return (
+-      <NavigationHelpersContext.Provider value={navigation}>
++      <>
+         <GestureHandlerWrapper style={styles.container}>
+           <SafeAreaProviderCompat>
+             <SafeAreaConsumer>
+@@ -460,7 +489,7 @@
+             </SafeAreaConsumer>
+           </SafeAreaProviderCompat>
+         </GestureHandlerWrapper>
+-      </NavigationHelpersContext.Provider>
++      </>
+     );
+   }
+ }

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

@@ -9,7 +9,7 @@ import createAppContainer, {
   _TESTING_ONLY_reset_container_count,
   // @ts-ignore
 } from '../../../../native/src/createAppContainer';
-import { StackNavigationProp } from '../../vendor/types';
+import type { StackNavigationProp } from '../../vendor/types';
 
 const NavigationTestUtils = {
   resetInternalState: _TESTING_ONLY_reset_container_count,

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

@@ -8,12 +8,119 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
     }
   }
 >
+  <View
+    pointerEvents="box-none"
+    style={
+      Array [
+        Object {
+          "zIndex": 1,
+        },
+        false,
+      ]
+    }
+  >
+    <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"
+              numberOfLines={1}
+              onLayout={[Function]}
+              style={
+                Object {
+                  "color": "rgba(0, 0, 0, 0.9)",
+                  "fontSize": 17,
+                  "fontWeight": "600",
+                }
+              }
+            >
+              Sub
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
   <View
     onLayout={[Function]}
     style={
       Object {
         "flex": 1,
-        "overflow": "hidden",
       }
     }
   >
@@ -29,6 +136,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
         }
       }
     >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      />
       <View
         accessibilityElementsHidden={false}
         closing={false}
@@ -57,8 +172,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
+                "restDisplacementThreshold": 10,
-                "restSpeedThreshold": 0.01,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -68,8 +183,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
+                "restDisplacementThreshold": 10,
-                "restSpeedThreshold": 0.01,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -81,7 +196,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
           style={
             Object {
               "flex": 1,
-              "marginTop": 44,
             }
           }
         >
@@ -174,7 +288,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                         style={
                           Object {
                             "flex": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
@@ -190,6 +303,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                             }
                           }
                         >
+                          <View
+                            collapsable={false}
+                            style={
+                              Object {
+                                "opacity": 1,
+                              }
+                            }
+                          />
                           <View
                             accessibilityElementsHidden={false}
                             closing={false}
@@ -218,8 +339,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                                     "damping": 500,
                                     "mass": 3,
                                     "overshootClamping": true,
-                                    "restDisplacementThreshold": 0.01,
+                                    "restDisplacementThreshold": 10,
-                                    "restSpeedThreshold": 0.01,
+                                    "restSpeedThreshold": 10,
                                     "stiffness": 1000,
                                   },
                                 },
@@ -229,8 +350,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                                     "damping": 500,
                                     "mass": 3,
                                     "overshootClamping": true,
-                                    "restDisplacementThreshold": 0.01,
+                                    "restDisplacementThreshold": 10,
-                                    "restSpeedThreshold": 0.01,
+                                    "restSpeedThreshold": 10,
                                     "stiffness": 1000,
                                   },
                                 },
@@ -242,7 +363,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                               style={
                                 Object {
                                   "flex": 1,
-                                  "marginTop": 44,
+                                  "marginTop": 0,
                                 }
                               }
                             >
@@ -334,110 +455,19 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                       <View
                         pointerEvents="box-none"
                         style={
-                          Object {
+                          Array [
-                            "left": 0,
+                            Object {
-                            "position": "absolute",
+                              "zIndex": 1,
-                            "right": 0,
+                            },
-                            "top": 0,
+                            Object {
-                          }
+                              "left": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            },
+                          ]
                         }
-                      >
+                      />
-                        <View
-                          accessibilityElementsHidden={false}
-                          importantForAccessibility="auto"
-                          onLayout={[Function]}
-                          pointerEvents="box-none"
-                          style={null}
-                        >
-                          <View
-                            pointerEvents="none"
-                            style={
-                              Object {
-                                "bottom": 0,
-                                "left": 0,
-                                "opacity": 1,
-                                "position": "absolute",
-                                "right": 0,
-                                "top": 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": 18,
-                                    "opacity": 1,
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityRole="header"
-                                  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>
                   </View>
                 </View>
@@ -448,113 +478,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
       </View>
     </View>
   </View>
-  <View
-    pointerEvents="box-none"
-    style={
-      Object {
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      accessibilityElementsHidden={false}
-      importantForAccessibility="auto"
-      onLayout={[Function]}
-      pointerEvents="box-none"
-      style={null}
-    >
-      <View
-        pointerEvents="none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 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": 18,
-                "opacity": 1,
-              }
-            }
-          >
-            <Text
-              accessibilityRole="header"
-              numberOfLines={1}
-              onLayout={[Function]}
-              style={
-                Object {
-                  "color": "rgba(0, 0, 0, 0.9)",
-                  "fontSize": 17,
-                  "fontWeight": "600",
-                }
-              }
-            >
-              Sub
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
 </View>
 `;
 

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

@@ -8,177 +8,15 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
     }
   }
 >
-  <View
-    onLayout={[Function]}
-    style={
-      Object {
-        "flex": 1,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        Object {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        closing={false}
-        gestureVelocityImpact={0.3}
-        importantForAccessibility="auto"
-        onClose={[Function]}
-        onGestureBegin={[Function]}
-        onGestureCanceled={[Function]}
-        onOpen={[Function]}
-        onTransitionStart={[Function]}
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-        transitionSpec={
-          Object {
-            "close": Object {
-              "animation": "spring",
-              "config": Object {
-                "damping": 500,
-                "mass": 3,
-                "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
-                "restSpeedThreshold": 0.01,
-                "stiffness": 1000,
-              },
-            },
-            "open": Object {
-              "animation": "spring",
-              "config": Object {
-                "damping": 500,
-                "mass": 3,
-                "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
-                "restSpeedThreshold": 0.01,
-                "stiffness": 1000,
-              },
-            },
-          }
-        }
-      >
-        <View
-          pointerEvents="box-none"
-          style={
-            Object {
-              "flex": 1,
-              "marginTop": 44,
-            }
-          }
-        >
-          <PanGestureHandler
-            enabled={false}
-            hitSlop={
-              Object {
-                "right": -700,
-              }
-            }
-            maxDeltaY={20}
-            minOffsetX={5}
-            onHandlerStateChange={[Function]}
-          >
-            <View
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "rgb(242, 242, 242)",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "rgb(242, 242, 242)",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  />
-                </View>
-              </View>
-            </View>
-          </PanGestureHandler>
-        </View>
-      </View>
-    </View>
-  </View>
   <View
     pointerEvents="box-none"
     style={
-      Object {
+      Array [
-        "left": 0,
+        Object {
-        "position": "absolute",
+          "zIndex": 1,
-        "right": 0,
+        },
-        "top": 0,
+        false,
-      }
+      ]
     }
   >
     <View
@@ -189,7 +27,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       style={null}
     >
       <View
-        pointerEvents="none"
+        pointerEvents="box-none"
         style={
           Object {
             "bottom": 0,
@@ -198,6 +36,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
             "position": "absolute",
             "right": 0,
             "top": 0,
+            "zIndex": 0,
           }
         }
       >
@@ -254,7 +93,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
             pointerEvents="box-none"
             style={
               Object {
-                "marginHorizontal": 18,
+                "marginHorizontal": 16,
                 "opacity": 1,
               }
             }
@@ -294,23 +133,11 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       </View>
     </View>
   </View>
-</View>
-`;
-
-exports[`StackNavigator renders successfully 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
   <View
     onLayout={[Function]}
     style={
       Object {
         "flex": 1,
-        "overflow": "hidden",
       }
     }
   >
@@ -326,6 +153,14 @@ exports[`StackNavigator renders successfully 1`] = `
         }
       }
     >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      />
       <View
         accessibilityElementsHidden={false}
         closing={false}
@@ -354,8 +189,8 @@ exports[`StackNavigator renders successfully 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
+                "restDisplacementThreshold": 10,
-                "restSpeedThreshold": 0.01,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -365,8 +200,8 @@ exports[`StackNavigator renders successfully 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
+                "restDisplacementThreshold": 10,
-                "restSpeedThreshold": 0.01,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -378,7 +213,6 @@ exports[`StackNavigator renders successfully 1`] = `
           style={
             Object {
               "flex": 1,
-              "marginTop": 44,
             }
           }
         >
@@ -467,15 +301,26 @@ exports[`StackNavigator renders successfully 1`] = `
       </View>
     </View>
   </View>
+</View>
+`;
+
+exports[`StackNavigator renders successfully 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="box-none"
     style={
-      Object {
+      Array [
-        "left": 0,
+        Object {
-        "position": "absolute",
+          "zIndex": 1,
-        "right": 0,
+        },
-        "top": 0,
+        false,
-      }
+      ]
     }
   >
     <View
@@ -486,7 +331,7 @@ exports[`StackNavigator renders successfully 1`] = `
       style={null}
     >
       <View
-        pointerEvents="none"
+        pointerEvents="box-none"
         style={
           Object {
             "bottom": 0,
@@ -495,6 +340,7 @@ exports[`StackNavigator renders successfully 1`] = `
             "position": "absolute",
             "right": 0,
             "top": 0,
+            "zIndex": 0,
           }
         }
       >
@@ -551,7 +397,7 @@ exports[`StackNavigator renders successfully 1`] = `
             pointerEvents="box-none"
             style={
               Object {
-                "marginHorizontal": 18,
+                "marginHorizontal": 16,
                 "opacity": 1,
               }
             }
@@ -575,5 +421,173 @@ exports[`StackNavigator renders successfully 1`] = `
       </View>
     </View>
   </View>
+  <View
+    onLayout={[Function]}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      />
+      <View
+        accessibilityElementsHidden={false}
+        closing={false}
+        gestureVelocityImpact={0.3}
+        importantForAccessibility="auto"
+        onClose={[Function]}
+        onGestureBegin={[Function]}
+        onGestureCanceled={[Function]}
+        onOpen={[Function]}
+        onTransitionStart={[Function]}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+        transitionSpec={
+          Object {
+            "close": Object {
+              "animation": "spring",
+              "config": Object {
+                "damping": 500,
+                "mass": 3,
+                "overshootClamping": true,
+                "restDisplacementThreshold": 10,
+                "restSpeedThreshold": 10,
+                "stiffness": 1000,
+              },
+            },
+            "open": Object {
+              "animation": "spring",
+              "config": Object {
+                "damping": 500,
+                "mass": 3,
+                "overshootClamping": true,
+                "restDisplacementThreshold": 10,
+                "restSpeedThreshold": 10,
+                "stiffness": 1000,
+              },
+            },
+          }
+        }
+      >
+        <View
+          pointerEvents="box-none"
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        >
+          <PanGestureHandler
+            enabled={false}
+            hitSlop={
+              Object {
+                "right": -700,
+              }
+            }
+            maxDeltaY={20}
+            minOffsetX={5}
+            onHandlerStateChange={[Function]}
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                  "transform": Array [
+                    Object {
+                      "translateX": 0,
+                    },
+                    Object {
+                      "translateX": 0,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                pointerEvents="none"
+                style={
+                  Object {
+                    "backgroundColor": "rgb(242, 242, 242)",
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "shadowColor": "#000",
+                    "shadowOffset": Object {
+                      "height": 1,
+                      "width": -1,
+                    },
+                    "shadowOpacity": 0.3,
+                    "shadowRadius": 5,
+                    "top": 0,
+                    "width": 3,
+                  }
+                }
+              />
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    Array [
+                      Object {
+                        "backgroundColor": "rgb(242, 242, 242)",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+          </PanGestureHandler>
+        </View>
+      </View>
+    </View>
+  </View>
 </View>
 `;

packages/stack/src/navigators/createStackNavigator.tsx

@@ -7,7 +7,7 @@ import {
   CreateNavigatorConfig,
 } from 'react-navigation';
 import StackView from '../views/StackView';
-import {
+import type {
   StackNavigationConfig,
   StackNavigationOptions,
   StackNavigationProp,

packages/stack/src/types.tsx

@@ -1,10 +1,13 @@
-import {
+import type {
   NavigationRoute,
   NavigationParams,
   NavigationScreenConfig,
   SupportedThemes,
 } from 'react-navigation';
-import { StackNavigationProp, StackNavigationOptions } from './vendor/types';
+import type {
+  StackNavigationProp,
+  StackNavigationOptions,
+} from './vendor/types';
 
 export type NavigationStackScreenProps<
   Params = NavigationParams,

packages/stack/src/utils/validateDeprecatedConfig.tsx

@@ -1,5 +1,8 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
-import { StackNavigationOptions, StackNavigationConfig } from '../vendor/types';
+import type {
+  StackNavigationOptions,
+  StackNavigationConfig,
+} from '../vendor/types';
 
 type Validation = {
   message: string;

packages/stack/src/utils/validateDeprecatedOptions.tsx

@@ -1,5 +1,5 @@
-import { EdgeInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
-import { StackNavigationOptions } from '../vendor/types';
+import type { StackNavigationOptions } from '../vendor/types';
 
 type Validation = {
   check: (o: Record<string, any>) => boolean;

packages/stack/src/vendor/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,7 +1,7 @@
 import { Animated } from 'react-native';
 import { isIphoneX } from 'react-native-iphone-x-helper';
 import conditional from '../utils/conditional';
-import {
+import type {
   StackCardInterpolationProps,
   StackCardInterpolatedStyle,
 } from '../types';

packages/stack/src/vendor/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,5 +1,5 @@
 import { Animated, I18nManager } from 'react-native';
-import {
+import type {
   StackHeaderInterpolationProps,
   StackHeaderInterpolatedStyle,
 } from '../types';

packages/stack/src/vendor/TransitionConfigs/TransitionPresets.tsx

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import {
   forHorizontalIOS,
   forVerticalIOS,
@@ -14,8 +15,7 @@ import {
   FadeOutToBottomAndroidSpec,
   FadeInFromBottomAndroidSpec,
 } from './TransitionSpecs';
-import { TransitionPreset } from '../types';
+import type { TransitionPreset } from '../types';
-import { Platform } from 'react-native';
 
 const ANDROID_VERSION_PIE = 28;
 

packages/stack/src/vendor/TransitionConfigs/TransitionSpecs.tsx

@@ -1,5 +1,5 @@
 import { Easing } from 'react-native';
-import { TransitionSpec } from '../types';
+import type { TransitionSpec } from '../types';
 
 /**
  * Exact values from UINavigationController's animation configuration.
@@ -11,8 +11,8 @@ export const TransitionIOSSpec: TransitionSpec = {
     damping: 500,
     mass: 3,
     overshootClamping: true,
-    restDisplacementThreshold: 0.01,
+    restDisplacementThreshold: 10,
-    restSpeedThreshold: 0.01,
+    restSpeedThreshold: 10,
   },
 };
 

packages/stack/src/vendor/types.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import type * as React from 'react';
-import {
+import type {
   Animated,
   StyleProp,
   TextStyle,
   ViewStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
-import {
+import type {
   NavigationRoute,
   NavigationState,
   NavigationScreenProp,
@@ -131,7 +131,7 @@ export type StackHeaderOptions = {
    * This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used.
    * It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`.
    */
-  headerTitleContainerStyle?: StyleProp<ViewStyle>;
+  headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Tint color for the header.
    */
@@ -145,7 +145,8 @@ export type StackHeaderOptions = {
    */
   headerBackAllowFontScaling?: boolean;
   /**
-   * Title string used by the back button on iOS, or `null` to disable label. Defaults to the previous scene's `headerTitle`.
+   * Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
+   * Use `headerBackTitleVisible: false` to hide it.
    */
   headerBackTitle?: string;
   /**
@@ -169,7 +170,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the container of the `headerLeft` component, for example to add padding.
    */
-  headerLeftContainerStyle?: StyleProp<ViewStyle>;
+  headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
@@ -177,7 +178,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the container of the `headerRight` component, for example to add padding.
    */
-  headerRightContainerStyle?: StyleProp<ViewStyle>;
+  headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Function which returns a React Element to display custom image in header's back button.
    * It receives the `tintColor` in in the options object as an argument. object.
@@ -199,7 +200,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the header. You can specify a custom background color here, for example.
    */
-  headerStyle?: StyleProp<ViewStyle>;
+  headerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
    * The header will also float over the screen so that it overlaps the content underneath.
@@ -397,7 +398,7 @@ export type StackHeaderLeftButtonProps = {
   /**
    * Style object for the label.
    */
-  labelStyle?: React.ComponentProps<typeof Animated.Text>['style'];
+  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
   /**
    * Whether label font should scale to respect Text Size accessibility settings.
    */

packages/stack/src/vendor/utils/CardAnimationContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StackCardInterpolationProps } from '../types';
+import type { StackCardInterpolationProps } from '../types';
 
 export default React.createContext<StackCardInterpolationProps | undefined>(
   undefined

packages/stack/src/vendor/utils/HeaderShownContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const HeaderShownContext = React.createContext(false);
+
+export default HeaderShownContext;

packages/stack/src/vendor/utils/PreviousSceneContext.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { Route, Scene } from '../types';
+
+const PreviousSceneContext = React.createContext<
+  Scene<Route<string>> | undefined
+>(undefined);
+
+export default PreviousSceneContext;

packages/stack/src/vendor/utils/getDistanceForDirection.tsx

@@ -1,5 +1,5 @@
 import getInvertedMultiplier from './getInvertedMultiplier';
-import { GestureDirection, Layout } from '../types';
+import type { GestureDirection, Layout } from '../types';
 
 export default function getDistanceForDirection(
   layout: Layout,

packages/stack/src/vendor/utils/getInvertedMultiplier.tsx

@@ -1,5 +1,5 @@
 import { I18nManager } from 'react-native';
-import { GestureDirection } from '../types';
+import type { GestureDirection } from '../types';
 
 export default function getInvertedMultiplier(
   gestureDirection: GestureDirection

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

@@ -39,7 +39,7 @@ export default class BorderlessButton extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
-      // @ts-ignore
+      // @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}

packages/stack/src/vendor/views/GestureHandler.native.tsx

@@ -10,7 +10,7 @@ export function PanGestureHandler(props: PanGestureHandlerProperties) {
 
   return (
     <GestureHandlerRefContext.Provider value={gestureRef}>
-      <PanGestureHandlerNative {...props} />
+      <PanGestureHandlerNative {...props} ref={gestureRef} />
     </GestureHandlerRefContext.Provider>
   );
 }

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

@@ -4,9 +4,10 @@ import { StackActions } from 'react-navigation';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import HeaderSegment, { getDefaultHeaderHeight } from './HeaderSegment';
+
 import HeaderTitle from './HeaderTitle';
 import debounce from '../../utils/debounce';
-import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
+import type { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 
 const Header = React.memo(function Header(props: StackHeaderProps) {
   const {
@@ -43,9 +44,16 @@ const Header = React.memo(function Header(props: StackHeaderProps) {
         : previous.route.routeName;
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const goBack = React.useCallback(
     debounce(() => {
-      navigation.dispatch(StackActions.pop({ key: scene.route.key }));
+      if (navigation.isFirstRouteInParent()) {
+        // If we're the first route, we're going back to a parent navigator
+        // So we can't specify a key here
+        navigation.dispatch(StackActions.pop());
+      } else {
+        navigation.dispatch(StackActions.pop({ key: scene.route.key }));
+      }
     }, 50),
     [navigation, scene.route.key]
   );

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

@@ -11,7 +11,7 @@ import {
 import MaskedView from '../MaskedView';
 import { TouchableItem } from '../TouchableItem';
 import useTheme from '../../../utils/useTheme';
-import { StackHeaderLeftButtonProps } from '../../types';
+import type { StackHeaderLeftButtonProps } from '../../types';
 
 type Props = StackHeaderLeftButtonProps;
 

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

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
+import {
+  Animated,
+  StyleSheet,
+  Platform,
+  ViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import useTheme from '../../../utils/useTheme';
 
 type Props = ViewProps & {
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   children?: React.ReactNode;
 };
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import { NavigationContext } from 'react-navigation';
-import { EdgeInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import Header from './Header';
 import {
@@ -10,9 +10,11 @@ import {
   forNoAnimation,
   forSlideRight,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
-import {
+import HeaderShownContext from '../../utils/HeaderShownContext';
-  Route,
+import PreviousSceneContext from '../../utils/PreviousSceneContext';
+import type {
   Layout,
+  Route,
   Scene,
   StackHeaderStyleInterpolator,
   StackNavigationProp,
@@ -24,9 +26,10 @@ export type Props = {
   layout: Layout;
   insets: EdgeInsets;
   scenes: (Scene<Route<string>> | undefined)[];
-  getPreviousRoute: (props: {
+  getPreviousScene: (props: {
     route: Route<string>;
-  }) => Route<string> | undefined;
+    index: number;
+  }) => Scene<Route<string>> | undefined;
   getFocusedRoute: () => Route<string>;
   onContentHeightChange?: (props: {
     route: Route<string>;
@@ -42,14 +45,16 @@ export default function HeaderContainer({
   scenes,
   layout,
   insets,
+  getPreviousScene,
   getFocusedRoute,
-  getPreviousRoute,
   onContentHeightChange,
   gestureDirection,
   styleInterpolator,
   style,
 }: Props) {
   const focusedRoute = getFocusedRoute();
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentPreviousScene = React.useContext(PreviousSceneContext);
 
   return (
     <View pointerEvents="box-none" style={style}>
@@ -58,36 +63,41 @@ export default function HeaderContainer({
           return null;
         }
 
-        const { options } = scene.descriptor;
+        const {
-        const isFocused = focusedRoute.key === scene.route.key;
+          header,
-        const previousRoute = getPreviousRoute({ route: scene.route });
+          headerShown = isParentHeaderShown === false,
+          headerTransparent,
+        } = scene.descriptor.options || {};
 
-        let previous;
+        if (!headerShown) {
-
+          return null;
-        if (previousRoute) {
-          // The previous scene will be shortly before the current scene in the array
-          // So loop back from current index to avoid looping over the full array
-          for (let j = i - 1; j >= 0; j--) {
-            const s = self[j];
-
-            if (s && s.route.key === previousRoute.key) {
-              previous = s;
-              break;
-            }
-          }
         }
 
+        const isFocused = focusedRoute.key === scene.route.key;
+        const previous =
+          getPreviousScene({
+            route: scene.route,
+            index: i,
+          }) ?? parentPreviousScene;
+
         // If the screen is next to a headerless screen, we need to make the header appear static
         // This makes the header look like it's moving with the screen
         const previousScene = self[i - 1];
         const nextScene = self[i + 1];
+
+        const {
+          headerShown: previousHeaderShown = isParentHeaderShown === false,
+        } = previousScene?.descriptor.options || {};
+
+        const { headerShown: nextHeaderShown = isParentHeaderShown === false } =
+          nextScene?.descriptor.options || {};
+
         const isHeaderStatic =
-          (previousScene &&
+          (previousHeaderShown === false &&
-            previousScene.descriptor.options.headerShown === false &&
             // We still need to animate when coming back from next scene
             // A hacky way to check this is if the next scene exists
             !nextScene) ||
-          (nextScene && nextScene.descriptor.options.headerShown === false);
+          nextHeaderShown === false;
 
         const props = {
           mode,
@@ -133,18 +143,12 @@ export default function HeaderContainer({
                 style={
                   // Avoid positioning the focused header absolutely
                   // Otherwise accessibility tools don't seem to be able to find it
-                  (mode === 'float' && !isFocused) || options.headerTransparent
+                  (mode === 'float' && !isFocused) || headerTransparent
                     ? styles.header
                     : null
                 }
               >
-                {options.headerShown !== false ? (
+                {header !== undefined ? header(props) : <Header {...props} />}
-                  options.header !== undefined ? (
-                    options.header(props)
-                  ) : (
-                    <Header {...props} />
-                  )
-                ) : null}
               </View>
             </>
           </NavigationContext.Provider>

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

@@ -7,12 +7,12 @@ import {
   Platform,
   ViewStyle,
 } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
-import { NavigationRoute } from 'react-navigation';
+import type { NavigationRoute } from 'react-navigation';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderBackground from './HeaderBackground';
 import memoize from '../../utils/memoize';
-import {
+import type {
   Layout,
   StackHeaderStyleInterpolator,
   StackHeaderLeftButtonProps,
@@ -62,7 +62,6 @@ export const getDefaultHeaderHeight = (
   let headerHeight;
 
   if (Platform.OS === 'ios') {
-    // @ts-ignore
     if (isLandscape && !Platform.isPad) {
       headerHeight = 32;
     } else {
@@ -208,7 +207,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       borderTopStartRadius,
       borderTopWidth,
       borderWidth,
-      // @ts-ignore: web support for shadow
+      // @ts-expect-error: web support for shadow
       boxShadow,
       elevation,
       shadowColor,
@@ -250,7 +249,6 @@ export default class HeaderSegment extends React.Component<Props, State> {
       borderTopStartRadius,
       borderTopWidth,
       borderWidth,
-      // @ts-ignore
       boxShadow,
       elevation,
       shadowColor,
@@ -265,9 +263,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
     // So we need to filter them out
     // Users can use `null` instead
     for (const styleProp in safeStyles) {
-      // @ts-ignore
+      // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles
       if (safeStyles[styleProp] === undefined) {
-        // @ts-ignore
+        // @ts-expect-error
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete safeStyles[styleProp];
       }
@@ -307,11 +305,13 @@ export default class HeaderSegment extends React.Component<Props, State> {
         })
       : null;
 
+    const rightButton = right ? right({ tintColor: headerTintColor }) : null;
+
     return (
       <React.Fragment>
         <Animated.View
-          pointerEvents="none"
+          pointerEvents="box-none"
-          style={[StyleSheet.absoluteFill, backgroundStyle]}
+          style={[StyleSheet.absoluteFill, { zIndex: 0 }, backgroundStyle]}
         >
           {headerBackground ? (
             headerBackground({ style: safeStyles })
@@ -345,8 +345,19 @@ export default class HeaderSegment extends React.Component<Props, State> {
               pointerEvents="box-none"
               style={[
                 headerTitleAlign === 'left'
-                  ? { position: 'absolute', left: leftButton ? 72 : 16 }
+                  ? {
-                  : { marginHorizontal: 18 },
+                      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,
               ]}
@@ -359,7 +370,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
                 style: customTitleStyle,
               })}
             </Animated.View>
-            {right ? (
+            {rightButton ? (
               <Animated.View
                 pointerEvents="box-none"
                 style={[
@@ -369,7 +380,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
                   rightContainerStyle,
                 ]}
               >
-                {right({ tintColor: headerTintColor })}
+                {rightButton}
               </Animated.View>
             ) : null}
           </View>

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Animated, StyleSheet, Platform } from 'react-native';
 import useTheme from '../../../utils/useTheme';
 
-type Props = React.ComponentProps<typeof Animated.Text> & {
+type Props = Omit<React.ComponentProps<typeof Animated.Text>, 'key'> & {
   tintColor?: string;
   children?: string;
 };

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

@@ -35,7 +35,11 @@ export default class KeyboardManager extends React.Component<Props> {
 
     this.clearKeyboardTimeout();
 
-    const input = TextInput.State.currentlyFocusedField();
+    // @ts-expect-error: currentlyFocusedInput is pretty new, so not in the type definitions
+    const input = TextInput.State.currentlyFocusedInput
+      ? // @ts-expect-error
+        TextInput.State.currentlyFocusedInput()
+      : TextInput.State.currentlyFocusedField();
 
     // When a page change begins, blur the currently focused input
     TextInput.State.blurTextInput(input);

packages/stack/src/vendor/views/MaskedView.native.tsx

@@ -16,7 +16,6 @@ try {
 }
 
 const isMaskedViewAvailable =
-  // @ts-ignore
   UIManager.getViewManagerConfig('RNCMaskedView') != null;
 
 export default function MaskedView({ children, ...rest }: Props) {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 type Props = {
   maskElement: React.ReactElement;

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

@@ -23,7 +23,7 @@ class WebScreen extends React.Component<
 
     return (
       <View
-        // @ts-ignore
+        // @ts-expect-error: hidden exists on web, but not in React Native
         hidden={!active}
         style={[style, { display: active ? 'flex' : 'none' }]}
         {...rest}
@@ -54,16 +54,16 @@ export const MaybeScreen = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
-  active: number | Animated.AnimatedInterpolation;
+  active: 0 | 1 | Animated.AnimatedInterpolation;
   children: React.ReactNode;
 }) => {
   if (enabled && Platform.OS === 'web') {
-    // @ts-ignore
+    // @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
     return <AnimatedWebScreen active={active} {...rest} />;
   }
 
   if (enabled && Screens && Screens.screensEnabled()) {
-    // @ts-ignore
+    // @ts-expect-error: stackPresentation is incorrectly marked as required
     return <Screens.Screen active={active} {...rest} />;
   }
 

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

@@ -9,7 +9,7 @@ import {
   Platform,
   InteractionManager,
 } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
 import Color from 'color';
 
 import CardSheet from './CardSheet';
@@ -22,7 +22,7 @@ import CardAnimationContext from '../../utils/CardAnimationContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
 import memoize from '../../utils/memoize';
-import {
+import type {
   TransitionSpec,
   StackCardStyleInterpolator,
   GestureDirection,
@@ -46,7 +46,9 @@ type Props = ViewProps & {
   onGestureCanceled?: () => void;
   onGestureEnd?: () => void;
   children: React.ReactNode;
-  overlay: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
+  overlay: (props: {
+    style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  }) => React.ReactNode;
   overlayEnabled: boolean;
   shadowEnabled: boolean;
   gestureEnabled: boolean;
@@ -83,7 +85,11 @@ export default class Card extends React.Component<Props> {
     shadowEnabled: true,
     gestureEnabled: true,
     gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
-    overlay: ({ style }: { style: StyleProp<ViewStyle> }) =>
+    overlay: ({
+      style,
+    }: {
+      style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    }) =>
       style ? (
         <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
       ) : null,
@@ -489,6 +495,17 @@ export default class Card extends React.Component<Props> {
 
     return (
       <CardAnimationContext.Provider value={animationContext}>
+        <Animated.View
+          style={{
+            // This is a dummy style that doesn't actually change anything visually.
+            // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
+            // If we disable animations and hide header, it could end up making the value unused.
+            // So we have this dummy style that will always be used regardless of what else changed.
+            opacity: current,
+          }}
+          // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
+          collapsable={false}
+        />
         <View pointerEvents="box-none" {...rest}>
           {overlayEnabled ? (
             <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import HeaderHeightContext from '../../utils/HeaderHeightContext';
+import HeaderShownContext from '../../utils/HeaderShownContext';
+import PreviousSceneContext from '../../utils/PreviousSceneContext';
 import useTheme from '../../../utils/useTheme';
-import {
+import type {
   Route,
   Scene,
   Layout,
-  StackCardMode,
   StackHeaderMode,
+  StackCardMode,
   TransitionPreset,
 } from '../../types';
 
@@ -20,7 +22,6 @@ type Props = TransitionPreset & {
   closing: boolean;
   layout: Layout;
   gesture: Animated.Value;
-  previousScene?: Scene<Route<string>>;
   scene: Scene<Route<string>>;
   safeAreaInsetTop: number;
   safeAreaInsetRight: number;
@@ -30,9 +31,10 @@ type Props = TransitionPreset & {
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
   cardStyle?: StyleProp<ViewStyle>;
-  getPreviousRoute: (props: {
+  getPreviousScene: (props: {
     route: Route<string>;
-  }) => Route<string> | undefined;
+    index: number;
+  }) => Scene<Route<string>> | undefined;
   getFocusedRoute: () => Route<string>;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
@@ -54,8 +56,8 @@ type Props = TransitionPreset & {
   gestureVelocityImpact?: number;
   mode: StackCardMode;
   headerMode: StackHeaderMode;
-  headerShown?: boolean;
+  headerShown: boolean;
-  headerTransparent?: boolean;
+  hasAbsoluteHeader: boolean;
   headerHeight: number;
   onHeaderHeightChange: (props: {
     route: Route<string>;
@@ -79,13 +81,13 @@ function CardContainer({
   gestureEnabled,
   gestureResponseDistance,
   gestureVelocityImpact,
-  getPreviousRoute,
+  getPreviousScene,
   getFocusedRoute,
   mode,
   headerMode,
   headerShown,
   headerStyleInterpolator,
-  headerTransparent,
+  hasAbsoluteHeader,
   headerHeight,
   onHeaderHeightChange,
   index,
@@ -97,7 +99,6 @@ function CardContainer({
   onPageChangeStart,
   onTransitionEnd,
   onTransitionStart,
-  previousScene,
   renderHeader,
   renderScene,
   safeAreaInsetBottom,
@@ -145,8 +146,7 @@ function CardContainer({
   );
 
   React.useEffect(() => {
-    // `addListener` may not exist on web and older versions of React Native
+    // @ts-expect-error: AnimatedInterpolation optionally has addListener, but the type defs don't think so
-    // @ts-ignore
     const listener = scene.progress.next?.addListener?.(
       ({ value }: { value: number }) => {
         setPointerEvents(value <= EPSILON ? 'box-none' : 'none');
@@ -155,12 +155,16 @@ function CardContainer({
 
     return () => {
       if (listener) {
-        // @ts-ignore
+        // @ts-expect-error: AnimatedInterpolation optionally has removedListener, but the type defs don't think so
         scene.progress.next?.removeListener?.(listener);
       }
     };
   }, [pointerEvents, scene.progress.next]);
 
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
+  const previousScene = getPreviousScene({ route: scene.route, index });
+
   return (
     <Card
       index={index}
@@ -188,19 +192,21 @@ function CardContainer({
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
-      containerStyle={
+      containerStyle={hasAbsoluteHeader ? { marginTop: headerHeight } : null}
-        headerMode === 'float' && !headerTransparent && headerShown !== false
+      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
-          ? { marginTop: headerHeight }
-          : null
-      }
-      contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
       style={StyleSheet.absoluteFill}
     >
       <View style={styles.container}>
         <View style={styles.scene}>
-          <HeaderHeightContext.Provider value={headerHeight}>
+          <PreviousSceneContext.Provider value={previousScene}>
-            {renderScene({ route: scene.route })}
+            <HeaderShownContext.Provider
-          </HeaderHeightContext.Provider>
+              value={isParentHeaderShown || isCurrentHeaderShown}
+            >
+              <HeaderHeightContext.Provider value={headerHeight}>
+                {renderScene({ route: scene.route })}
+              </HeaderHeightContext.Provider>
+            </HeaderShownContext.Provider>
+          </PreviousSceneContext.Provider>
         </View>
         {headerMode === 'screen'
           ? renderHeader({
@@ -208,7 +214,7 @@ function CardContainer({
               layout,
               insets,
               scenes: [previousScene, scene],
-              getPreviousRoute,
+              getPreviousScene,
               getFocusedRoute,
               gestureDirection,
               styleInterpolator: headerStyleInterpolator,

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

@@ -6,12 +6,12 @@ import {
   Dimensions,
   Platform,
 } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
-import { NavigationState as StackNavigationState } from 'react-navigation';
+import type { NavigationState as StackNavigationState } from 'react-navigation';
 
 import { MaybeScreenContainer, MaybeScreen } from '../Screens';
 import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
-import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import CardContainer from './CardContainer';
 import {
   DefaultTransition,
@@ -19,12 +19,13 @@ 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 {
+import type {
-  Route,
   Layout,
   StackHeaderMode,
   StackCardMode,
+  Route,
   Scene,
   StackDescriptorMap,
   StackNavigationOptions,
@@ -84,9 +85,10 @@ const getHeaderHeights = (
 ) => {
   return routes.reduce<Record<string, number>>((acc, curr) => {
     const { options = {} } = descriptors[curr.key] || {};
-    const { height = previous[curr.key] } = StyleSheet.flatten(
+    const style: any = StyleSheet.flatten(options.headerStyle || {});
-      options.headerStyle || {}
+
-    );
+    const height =
+      typeof style.height === 'number' ? style.height : previous[curr.key];
 
     const safeAreaInsets = {
       ...insets,
@@ -242,7 +244,7 @@ export default class CardStack extends React.Component<Props, State> {
         if (
           oldScene &&
           scene.__memo.every((it, i) => {
-            // @ts-ignore
+            // @ts-expect-error: we haven't added __memo to the annotation to prevent usage elsewhere
             return oldScene.__memo[i] === it;
           })
         ) {
@@ -300,7 +302,7 @@ export default class CardStack extends React.Component<Props, State> {
           props.insets,
           state.descriptors,
           layout,
-          {}
+          state.headerHeights
         ),
       };
     });
@@ -335,6 +337,33 @@ export default class CardStack extends React.Component<Props, State> {
     return state.routes[state.index];
   };
 
+  private getPreviousScene = ({
+    route,
+    index,
+  }: {
+    route: Route<string>;
+    index: number;
+  }) => {
+    const previousRoute = this.props.getPreviousRoute({ route });
+
+    let previous: Scene<Route<string>> | undefined;
+
+    if (previousRoute) {
+      // The previous scene will be shortly before the current scene in the array
+      // So loop back from current index to avoid looping over the full array
+      for (let j = index - 1; j >= 0; j--) {
+        const s = this.state.scenes[j];
+
+        if (s && s.route.key === previousRoute.key) {
+          previous = s;
+          break;
+        }
+      }
+    }
+
+    return previous;
+  };
+
   render() {
     const {
       mode,
@@ -345,7 +374,6 @@ export default class CardStack extends React.Component<Props, State> {
       closingRouteKeys,
       onOpenRoute,
       onCloseRoute,
-      getPreviousRoute,
       getGesturesEnabled,
       renderHeader,
       renderScene,
@@ -385,180 +413,204 @@ export default class CardStack extends React.Component<Props, State> {
     const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
 
     return (
-      <React.Fragment>
+      <HeaderShownContext.Consumer>
-        <MaybeScreenContainer
+        {(isParentHeaderShown) => {
-          enabled={isScreensEnabled}
+          const isFloatHeaderAbsolute =
-          style={styles.container}
+            headerMode === 'float'
-          onLayout={this.handleLayout}
+              ? this.state.scenes.slice(-2).some((scene) => {
-        >
+                  const { descriptor } = scene;
-          {routes.map((route, index, self) => {
+                  const options = descriptor ? descriptor.options : {};
-            const focused = focusedRoute.key === route.key;
+                  const {
-            const gesture = gestures[route.key];
+                    headerTransparent,
-            const scene = scenes[index];
+                    headerShown = isParentHeaderShown === false,
+                  } = options;
 
-            const isScreenActive = scene.progress.next
+                  if (headerTransparent || headerShown === false) {
-              ? scene.progress.next.interpolate({
+                    return true;
-                  inputRange: [0, 1 - EPSILON, 1],
+                  }
-                  outputRange: [1, 1, 0],
+
-                  extrapolate: 'clamp',
+                  return false;
                 })
-              : 1;
+              : false;
 
-            const {
+          const floatingHeader =
-              safeAreaInsets,
+            headerMode === 'float' ? (
-              headerShown,
+              <React.Fragment key="header">
-              headerTransparent,
+                {renderHeader({
-              cardShadowEnabled,
+                  mode: 'float',
-              cardOverlayEnabled,
+                  layout,
-              cardOverlay,
+                  insets: { top, right, bottom, left },
-              cardStyle,
+                  scenes,
-              animationEnabled,
+                  getPreviousScene: this.getPreviousScene,
-              gestureResponseDistance,
+                  getFocusedRoute: this.getFocusedRoute,
-              gestureVelocityImpact,
+                  onContentHeightChange: this.handleHeaderLayout,
-              gestureDirection = defaultTransitionPreset.gestureDirection,
+                  gestureDirection:
-              transitionSpec = defaultTransitionPreset.transitionSpec,
+                    focusedOptions.gestureDirection !== undefined
-              cardStyleInterpolator = animationEnabled === false
+                      ? focusedOptions.gestureDirection
-                ? forNoAnimationCard
+                      : defaultTransitionPreset.gestureDirection,
-                : defaultTransitionPreset.cardStyleInterpolator,
+                  styleInterpolator:
-              headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+                    focusedOptions.headerStyleInterpolator !== undefined
-            } = scene.descriptor
+                      ? focusedOptions.headerStyleInterpolator
-              ? scene.descriptor.options
+                      : defaultTransitionPreset.headerStyleInterpolator,
-              : ({} as StackNavigationOptions);
+                  style: [
+                    styles.floating,
+                    isFloatHeaderAbsolute && styles.absolute,
+                  ],
+                })}
+              </React.Fragment>
+            ) : null;
 
-            let transitionConfig = {
+          return (
-              gestureDirection,
+            <React.Fragment>
-              transitionSpec,
+              {isFloatHeaderAbsolute ? null : floatingHeader}
-              cardStyleInterpolator,
+              <MaybeScreenContainer
-              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 previousRoute = getPreviousRoute({ route: scene.route });
-
-            let previousScene = scenes[index - 1];
-
-            if (previousRoute) {
-              // The previous scene will be shortly before the current scene in the array
-              // So loop back from current index to avoid looping over the full array
-              for (let j = index - 1; j >= 0; j--) {
-                const s = scenes[j];
-
-                if (s && s.route.key === previousRoute.key) {
-                  previousScene = s;
-                  break;
-                }
-              }
-            }
-
-            return (
-              <MaybeScreen
-                key={route.key}
-                style={StyleSheet.absoluteFill}
                 enabled={isScreensEnabled}
-                active={isScreenActive}
+                style={styles.container}
-                pointerEvents="box-none"
+                onLayout={this.handleLayout}
               >
-                <CardContainer
+                {routes.map((route, index, self) => {
-                  index={index}
+                  const focused = focusedRoute.key === route.key;
-                  active={index === self.length - 1}
+                  const gesture = gestures[route.key];
-                  focused={focused}
+                  const scene = scenes[index];
-                  closing={closingRouteKeys.includes(route.key)}
+
-                  layout={layout}
+                  const isScreenActive = scene.progress.next
-                  gesture={gesture}
+                    ? scene.progress.next.interpolate({
-                  scene={scene}
+                        inputRange: [0, 1 - EPSILON, 1],
-                  previousScene={previousScene}
+                        outputRange: [1, 1, 0],
-                  safeAreaInsetTop={safeAreaInsetTop}
+                        extrapolate: 'clamp',
-                  safeAreaInsetRight={safeAreaInsetRight}
+                      })
-                  safeAreaInsetBottom={safeAreaInsetBottom}
+                    : 1;
-                  safeAreaInsetLeft={safeAreaInsetLeft}
+
-                  cardOverlay={cardOverlay}
+                  const {
-                  cardOverlayEnabled={cardOverlayEnabled}
+                    safeAreaInsets,
-                  cardShadowEnabled={cardShadowEnabled}
+                    headerShown = isParentHeaderShown === false,
-                  cardStyle={cardStyle}
+                    headerTransparent,
-                  onPageChangeStart={onPageChangeStart}
+                    cardShadowEnabled,
-                  onPageChangeConfirm={onPageChangeConfirm}
+                    cardOverlayEnabled,
-                  onPageChangeCancel={onPageChangeCancel}
+                    cardOverlay,
-                  gestureResponseDistance={gestureResponseDistance}
+                    cardStyle,
-                  headerHeight={headerHeights[route.key]}
+                    animationEnabled,
-                  onHeaderHeightChange={this.handleHeaderLayout}
+                    gestureResponseDistance,
-                  getPreviousRoute={getPreviousRoute}
+                    gestureVelocityImpact,
-                  getFocusedRoute={this.getFocusedRoute}
+                    gestureDirection = defaultTransitionPreset.gestureDirection,
-                  mode={mode}
+                    transitionSpec = defaultTransitionPreset.transitionSpec,
-                  headerMode={headerMode}
+                    cardStyleInterpolator = animationEnabled === false
-                  headerShown={headerShown}
+                      ? forNoAnimationCard
-                  headerTransparent={headerTransparent}
+                      : defaultTransitionPreset.cardStyleInterpolator,
-                  renderHeader={renderHeader}
+                    headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-                  renderScene={renderScene}
+                  } = scene.descriptor
-                  onOpenRoute={onOpenRoute}
+                    ? scene.descriptor.options
-                  onCloseRoute={onCloseRoute}
+                    : ({} as StackNavigationOptions);
-                  onTransitionStart={onTransitionStart}
+
-                  onTransitionEnd={onTransitionEnd}
+                  let transitionConfig = {
-                  gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
+                    gestureDirection,
-                  gestureVelocityImpact={gestureVelocityImpact}
+                    transitionSpec,
-                  {...transitionConfig}
+                    cardStyleInterpolator,
-                />
+                    headerStyleInterpolator,
-              </MaybeScreen>
+                  };
-            );
+
-          })}
+                  // When a screen is not the last, it should use next screen's transition config
-        </MaybeScreenContainer>
+                  // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-        {headerMode === 'float'
+                  // For example combining a slide and a modal transition would look wrong otherwise
-          ? renderHeader({
+                  // With this approach, combining different transition styles in the same navigator mostly looks right
-              mode: 'float',
+                  // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-              layout,
+                  // but majority of the transitions look alright
-              insets: { top, right, bottom, left },
+                  if (index !== self.length - 1) {
-              scenes,
+                    const nextScene = scenes[index + 1];
-              getPreviousRoute,
+
-              getFocusedRoute: this.getFocusedRoute,
+                    if (nextScene) {
-              onContentHeightChange: this.handleHeaderLayout,
+                      const {
-              gestureDirection:
+                        animationEnabled,
-                focusedOptions.gestureDirection !== undefined
+                        gestureDirection = defaultTransitionPreset.gestureDirection,
-                  ? focusedOptions.gestureDirection
+                        transitionSpec = defaultTransitionPreset.transitionSpec,
-                  : defaultTransitionPreset.gestureDirection,
+                        cardStyleInterpolator = animationEnabled === false
-              styleInterpolator:
+                          ? forNoAnimationCard
-                focusedOptions.headerStyleInterpolator !== undefined
+                          : defaultTransitionPreset.cardStyleInterpolator,
-                  ? focusedOptions.headerStyleInterpolator
+                        headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-                  : defaultTransitionPreset.headerStyleInterpolator,
+                      } = nextScene.descriptor
-              style: styles.floating,
+                        ? nextScene.descriptor.options
-            })
+                        : ({} as StackNavigationOptions);
-          : null}
+
-      </React.Fragment>
+                      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={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}
+                        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>
     );
   }
 }
@@ -567,10 +619,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  floating: {
+  absolute: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
   },
+  floating: {
+    zIndex: 1,
+  },
 });

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

@@ -15,7 +15,7 @@ import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
 import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
-import {
+import type {
   Route,
   StackNavigationHelpers,
   StackNavigationConfig,
@@ -356,14 +356,16 @@ export default class StackView extends React.Component<Props, State> {
 
   private handleOpenRoute = ({ route }: { route: Route<string> }) => {
     const { state, navigation } = this.props;
+    const { closingRouteKeys, replacingRouteKeys } = this.state;
 
     this.handleTransitionComplete();
 
     if (
-      this.state.replacingRouteKeys.every((key) => key !== route.key) &&
+      closingRouteKeys.some((key) => key === route.key) &&
+      replacingRouteKeys.every((key) => key !== route.key) &&
       !state.routes.some((r) => r.key === route.key)
     ) {
-      // If route isn't present in current state, assume that a close animation was cancelled
+      // If route isn't present in current state, but was closing, assume that a close animation was cancelled
       // So we need to add this route back to the state
       navigation.dispatch(NavigationActions.navigate(route));
     } else {
@@ -438,6 +440,11 @@ export default class StackView extends React.Component<Props, State> {
       navigation,
       keyboardHandlingEnabled,
       mode = 'card',
+      headerMode = mode === 'card' && Platform.OS === 'ios'
+        ? 'float'
+        : 'screen',
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      descriptors: _,
       ...rest
     } = this.props;
 
@@ -448,9 +455,6 @@ export default class StackView extends React.Component<Props, State> {
       closingRouteKeys,
     } = this.state;
 
-    const headerMode =
-      mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
-
     return (
       <>
         <GestureHandlerWrapper style={styles.container}>

packages/stack/src/views/StackView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import validateDeprecatedOptions from '../utils/validateDeprecatedOptions';
 import validateDeprecatedConfig from '../utils/validateDeprecatedConfig';
 import StackViewBase from '../vendor/views/Stack/StackView';
-import {
+import type {
   StackNavigationHelpers,
   StackNavigationConfig,
   StackDescriptorMap,

packages/stack/tsconfig.build.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig",
   "compilerOptions": {
-    "paths": {}
+    "paths": {},
   }
 }

packages/stack/tsconfig.json

@@ -4,6 +4,7 @@
     { "path": "../react-navigation" }
   ],
   "compilerOptions": {
-    "outDir": "./lib/typescript"
+    "outDir": "./lib/typescript",
+    "importsNotUsedAsValues": "error",
   }
 }

packages/tabs/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.9.0](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.13...react-navigation-tabs@2.9.0) (2020-06-25)
+
+
+### Features
+
+* sync latest stack and upgrade typescript ([454e05b](https://github.com/react-navigation/tabs/commit/454e05b02ec97f053b381fdc801df899d8c93cb6))
+
+
+
+
+
 ## [2.8.13](https://github.com/react-navigation/tabs/compare/react-navigation-tabs@2.8.12...react-navigation-tabs@2.8.13) (2020-04-30)
 
 **Note:** Version bump only for package react-navigation-tabs

packages/tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-tabs",
-  "version": "2.8.13",
+  "version": "2.9.0",
   "description": "Tab Navigation components for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -56,8 +56,8 @@
     "react-native-gesture-handler": "^1.6.0",
     "react-native-reanimated": "^1.2.0",
     "react-native-tab-view": "^2.13.0",
-    "react-navigation": "^4.3.9",
+    "react-navigation": "^4.4.0",
-    "typescript": "~3.8.3"
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "react": "*",

yarn.lock

@@ -3202,10 +3202,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903"
   integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw==
 
-"@react-navigation/stack@^5.2.16":
+"@react-navigation/stack@^5.6.0":
-  version "5.2.16"
+  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.2.16.tgz#0ab0b8b401f13f5823de7334a643baac3bc3cd04"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.6.0.tgz#c307559ab6ba380f977f7f74efbe861bcbbdcf4b"
-  integrity sha512-0l0Aalj5RNcHLVaS2hgrs58eNDHlkAGPeyEUFcxbk2ii93F8W9MmSCYUn+Tpvruqfv/m9FnyLbQ1DpQOxsekIg==
+  integrity sha512-e5uU37qgi9cXqOac8P2oFAj+4ZY7dI2kt04jg5+psAYN0Coawk6oyowBpBy6FsMBHMQv/p8J97Hc6eUnTwgzQw==
   dependencies:
     color "^3.1.2"
     react-native-iphone-x-helper "^1.2.1"
@@ -3628,17 +3628,27 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^2.12.0":
+"@typescript-eslint/eslint-plugin@^2.31.0":
-  version "2.26.0"
+  version "2.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.26.0.tgz#04c96560c8981421e5a9caad8394192363cc423f"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz#942c921fec5e200b79593c71fafb1e3f57aa2e36"
-  integrity sha512-4yUnLv40bzfzsXcTAtZyTjbiGUXMrcIJcIMioI22tSOyAxpdXiZ4r7YQUU8Jj6XXrLz9d5aMHPQf5JFR7h27Nw==
+  integrity sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.26.0"
+    "@typescript-eslint/experimental-utils" "2.31.0"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.26.0", "@typescript-eslint/experimental-utils@^2.5.0":
+"@typescript-eslint/experimental-utils@2.31.0":
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz#a9ec514bf7fd5e5e82bc10dcb6a86d58baae9508"
+  integrity sha512-MI6IWkutLYQYTQgZ48IVnRXmLR/0Q6oAyJgiOror74arUMh7EWjJkADfirZhRsUMHeLJ85U2iySDwHTSnNi9vA==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.31.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/experimental-utils@^2.5.0":
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.26.0.tgz#063390c404d9980767d76274df386c0aa675d91d"
   integrity sha512-RELVoH5EYd+JlGprEyojUv9HeKcZqF7nZUGSblyAw1FwOGNnmQIU8kxJ69fttQvEwCsX5D6ECJT8GTozxrDKVQ==
@@ -3648,14 +3658,14 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^2.12.0":
+"@typescript-eslint/parser@^2.31.0":
-  version "2.26.0"
+  version "2.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.26.0.tgz#385463615818b33acb72a25b39c03579df93d76f"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.31.0.tgz#beddd4e8efe64995108b229b2862cd5752d40d6f"
-  integrity sha512-+Xj5fucDtdKEVGSh9353wcnseMRkPpEAOY96EEenN7kJVrLqy/EVwtIh3mxcUz8lsFXW1mT5nN5vvEam/a5HiQ==
+  integrity sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.26.0"
+    "@typescript-eslint/experimental-utils" "2.31.0"
-    "@typescript-eslint/typescript-estree" "2.26.0"
+    "@typescript-eslint/typescript-estree" "2.31.0"
     eslint-visitor-keys "^1.1.0"
 
 "@typescript-eslint/typescript-estree@2.26.0":
@@ -3671,6 +3681,19 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@2.31.0":
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz#ac536c2d46672aa1f27ba0ec2140d53670635cfd"
+  integrity sha512-vxW149bXFXXuBrAak0eKHOzbcu9cvi6iNcJDzEtOkRwGHxJG15chiAQAwhLOsk+86p9GTr/TziYvw+H9kMaIgA==
+  dependencies:
+    debug "^4.1.1"
+    eslint-visitor-keys "^1.1.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^6.3.0"
+    tsutils "^3.17.1"
+
 "@unimodules/core@~5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@unimodules/core/-/core-5.0.0.tgz#e1e3ca3f91f3d27dbc93c6eebc03a40c711da755"
@@ -4486,7 +4509,7 @@ babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-eslint@^10.0.3:
+babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
   integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
@@ -5308,7 +5331,7 @@ chalk@2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -5336,6 +5359,14 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
+  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -6111,6 +6142,15 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cross-spawn@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
+  integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypt@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
@@ -6470,7 +6510,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-is@~0.1.3:
+deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@@ -7144,30 +7184,30 @@ escodegen@^1.11.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-prettier@^6.7.0:
+eslint-config-prettier@^6.11.0:
-  version "6.10.1"
+  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.10.1.tgz#129ef9ec575d5ddc0e269667bf09defcd898642a"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
-  integrity sha512-svTy6zh1ecQojvpbJSgH3aei/Rt7C6i090l5f2WQ4aB05lYHeZIR1qL4wZyyILTbtmnbHP5Yn8MrsOJMGa8RkQ==
+  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
   dependencies:
     get-stdin "^6.0.0"
 
-eslint-config-satya164@^3.1.5:
+eslint-config-satya164@^3.1.7:
-  version "3.1.6"
+  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/eslint-config-satya164/-/eslint-config-satya164-3.1.6.tgz#f423cd24afc8396efad04b3b96d4d2458818a100"
+  resolved "https://registry.yarnpkg.com/eslint-config-satya164/-/eslint-config-satya164-3.1.7.tgz#213f2767941cd3ab4ce85d4712cb8420d8c6376c"
-  integrity sha512-DkH/iJXZD+em0E6TAfK+Ey+y2miLBv5/1KC5Gf29IEfFxS0C3LCZsDGjPBR+vRZr2Pl/ELPjKu/cvmwReIwsHQ==
+  integrity sha512-77f8eOLzntbn1pT1DPmgP2r95kWlcGLkt7vmIFD72bevgbP9hf9rcP0UaUmg2aO6PxexEMPyYSAA0GqIIwrTcQ==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "^2.12.0"
+    "@typescript-eslint/eslint-plugin" "^2.31.0"
-    "@typescript-eslint/parser" "^2.12.0"
+    "@typescript-eslint/parser" "^2.31.0"
-    babel-eslint "^10.0.3"
+    babel-eslint "^10.1.0"
-    eslint-config-prettier "^6.7.0"
+    eslint-config-prettier "^6.11.0"
     eslint-plugin-babel "^5.3.0"
     eslint-plugin-eslint-comments "^3.1.2"
-    eslint-plugin-flowtype "^4.5.2"
+    eslint-plugin-flowtype "^4.7.0"
-    eslint-plugin-import "^2.19.1"
+    eslint-plugin-import "^2.20.2"
-    eslint-plugin-jest "^23.1.1"
+    eslint-plugin-jest "^23.9.0"
-    eslint-plugin-prettier "^3.1.2"
+    eslint-plugin-prettier "^3.1.3"
-    eslint-plugin-react "^7.17.0"
+    eslint-plugin-react "^7.19.0"
-    eslint-plugin-react-hooks "^2.3.0"
+    eslint-plugin-react-hooks "^4.0.0"
     eslint-plugin-react-native "^3.8.1"
 
 eslint-import-resolver-node@^0.3.2:
@@ -7201,14 +7241,14 @@ eslint-plugin-eslint-comments@^3.1.2:
     escape-string-regexp "^1.0.5"
     ignore "^5.0.5"
 
-eslint-plugin-flowtype@^4.5.2:
+eslint-plugin-flowtype@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.7.0.tgz#903a6ea3eb5cbf4c7ba7fa73cc43fc39ab7e4a70"
   integrity sha512-M+hxhSCk5QBEValO5/UqrS4UunT+MgplIJK5wA1sCtXjzBcZkpTGRwxmLHhGpbHcrmQecgt6ZL/KDdXWqGB7VA==
   dependencies:
     lodash "^4.17.15"
 
-eslint-plugin-import@^2.19.1:
+eslint-plugin-import@^2.20.2:
   version "2.20.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz#91fc3807ce08be4837141272c8b99073906e588d"
   integrity sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==
@@ -7226,24 +7266,24 @@ eslint-plugin-import@^2.19.1:
     read-pkg-up "^2.0.0"
     resolve "^1.12.0"
 
-eslint-plugin-jest@^23.1.1:
+eslint-plugin-jest@^23.9.0:
-  version "23.8.2"
+  version "23.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.8.2.tgz#6f28b41c67ef635f803ebd9e168f6b73858eb8d4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.10.0.tgz#4738c7ca9e6513da50f4e99d7b161c1f82fa8e8f"
-  integrity sha512-xwbnvOsotSV27MtAe7s8uGWOori0nUsrXh2f1EnpmXua8sDfY6VZhHAhHg2sqK7HBNycRQExF074XSZ7DvfoFg==
+  integrity sha512-cHC//nesojSO1MLxVmFJR/bUaQQG7xvMHQD8YLbsQzevR41WKm8paKDUv2wMHlUy5XLZUmNcWuflOi4apS8D+Q==
   dependencies:
     "@typescript-eslint/experimental-utils" "^2.5.0"
 
-eslint-plugin-prettier@^3.1.2:
+eslint-plugin-prettier@^3.1.3:
-  version "3.1.2"
+  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz#ae116a0fc0e598fdae48743a4430903de5b4e6ca"
-  integrity sha512-GlolCC9y3XZfv3RQfwGew7NnuFDKsfI4lbvRK+PIIo23SFH+LemGs4cKwzAaRa+Mdb+lQO/STaIayno8T5sJJA==
+  integrity sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@^2.3.0:
+eslint-plugin-react-hooks@^4.0.0:
-  version "2.5.1"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz#4ef5930592588ce171abeb26f400c7fbcbc23cd0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.0.tgz#81196b990043cde339e25c6662aeebe32ac52d01"
-  integrity sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==
+  integrity sha512-YKBY+kilK5wrwIdQnCF395Ya6nDro3EAMoe+2xFkmyklyhF16fH83TrQOo9zbZIDxBsXFgBbywta/0JKRNFDkw==
 
 eslint-plugin-react-native-globals@^0.1.1:
   version "0.1.2"
@@ -7257,7 +7297,7 @@ eslint-plugin-react-native@^3.8.1:
   dependencies:
     eslint-plugin-react-native-globals "^0.1.1"
 
-eslint-plugin-react@^7.17.0:
+eslint-plugin-react@^7.19.0:
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
   integrity sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==
@@ -7296,13 +7336,6 @@ eslint-scope@^5.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-utils@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
 eslint-utils@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.0.0.tgz#7be1cc70f27a72a76cd14aa698bcabed6890e1cd"
@@ -7315,22 +7348,22 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^6.8.0:
+eslint@^7.0.0:
-  version "6.8.0"
+  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.0.0.tgz#c35dfd04a4372110bd78c69a8d79864273919a08"
-  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
+  integrity sha512-qY1cwdOxMONHJfGqw52UOpZDeqXy8xmD0u8CT6jIstil72jkhURC704W8CFyTPDPllz4z4lu0Ql1+07PG/XdIg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
-    chalk "^2.1.0"
+    chalk "^4.0.0"
-    cross-spawn "^6.0.5"
+    cross-spawn "^7.0.2"
     debug "^4.0.1"
     doctrine "^3.0.0"
     eslint-scope "^5.0.0"
-    eslint-utils "^1.4.3"
+    eslint-utils "^2.0.0"
     eslint-visitor-keys "^1.1.0"
-    espree "^6.1.2"
+    espree "^7.0.0"
-    esquery "^1.0.1"
+    esquery "^1.2.0"
     esutils "^2.0.2"
     file-entry-cache "^5.0.1"
     functional-red-black-tree "^1.0.1"
@@ -7343,25 +7376,24 @@ eslint@^6.8.0:
     is-glob "^4.0.0"
     js-yaml "^3.13.1"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
+    levn "^0.4.1"
     lodash "^4.17.14"
     minimatch "^3.0.4"
-    mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    optionator "^0.8.3"
+    optionator "^0.9.1"
     progress "^2.0.0"
-    regexpp "^2.0.1"
+    regexpp "^3.1.0"
-    semver "^6.1.2"
+    semver "^7.2.1"
-    strip-ansi "^5.2.0"
+    strip-ansi "^6.0.0"
-    strip-json-comments "^3.0.1"
+    strip-json-comments "^3.1.0"
     table "^5.2.3"
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^6.1.2:
+espree@^7.0.0:
-  version "6.2.1"
+  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.0.0.tgz#8a7a60f218e69f120a842dc24c5a88aa7748a74e"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  integrity sha512-/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOTw==
   dependencies:
     acorn "^7.1.1"
     acorn-jsx "^5.2.0"
@@ -7377,12 +7409,12 @@ esprima@~3.1.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
   integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
 
-esquery@^1.0.1:
+esquery@^1.2.0:
-  version "1.2.0"
+  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.2.0.tgz#a010a519c0288f2530b3404124bfb5f02e9797fe"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
-  integrity sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^5.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0, esrecurse@^4.2.1:
   version "4.2.1"
@@ -7396,10 +7428,10 @@ estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@^5.0.0:
+estraverse@^5.1.0:
-  version "5.0.0"
+  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.0.0.tgz#ac81750b482c11cca26e4b07e83ed8f75fbcdc22"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
-  integrity sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A==
+  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -7988,7 +8020,7 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fast-levenshtein@~2.0.6:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -10944,7 +10976,15 @@ levenary@^1.1.1:
   dependencies:
     leven "^3.1.0"
 
-levn@^0.3.0, levn@~0.3.0:
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
   integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
@@ -12670,7 +12710,7 @@ optimize-css-assets-webpack-plugin@^5.0.1:
     cssnano "^4.1.10"
     last-call-webpack-plugin "^3.0.0"
 
-optionator@^0.8.1, optionator@^0.8.3:
+optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
   integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
@@ -12682,6 +12722,18 @@ optionator@^0.8.1, optionator@^0.8.3:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
 options@>=0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
@@ -13708,6 +13760,11 @@ pouchdb-collections@^1.0.1:
   resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359"
   integrity sha1-/mOhfal3YRq+98uAJssalVP9g1k=
 
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -13730,10 +13787,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.0.1:
+prettier@^2.0.5:
-  version "2.0.2"
+  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
-  integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -14572,16 +14629,16 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
-  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
-
 regexpp@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.0.0.tgz#dd63982ee3300e67b41c1956f850aa680d9d330e"
   integrity sha512-Z+hNr7RAVWxznLPuA7DIh8UNX1j9CDrUQxskw9IrBE1Dxue2lyXT+shqEIeLUjrokxIP8CMy1WkjgG3rTsd5/g==
 
+regexpp@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -15141,7 +15198,7 @@ semver@6.1.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b"
   integrity sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==
 
-semver@6.3.0, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+semver@6.3.0, semver@^6.0.0, semver@^6.1.1, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -15156,6 +15213,11 @@ semver@^7.0.0, semver@^7.1.1, semver@^7.1.3:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6"
   integrity sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==
 
+semver@^7.2.1:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 send@0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
@@ -15970,10 +16032,10 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@^3.0.1:
+strip-json-comments@^3.1.0:
-  version "3.0.1"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
-  integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
+  integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
 
 strip-json-comments@~2.0.1:
   version "2.0.1"
@@ -16567,6 +16629,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
@@ -16639,10 +16708,10 @@ typescript@3.7.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
   integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
 
-typescript@~3.8.3:
+typescript@^3.9.5:
-  version "3.8.3"
+  version "3.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
-  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
+  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
 
 ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
   version "0.7.21"
@@ -17374,7 +17443,7 @@ with-open-file@^0.1.6:
     p-try "^2.1.0"
     pify "^4.0.1"
 
-word-wrap@~1.2.3:
+word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==