chore: publish

- react-navigation-animated-switch@0.6.2
 - @react-navigation/core@3.7.8
 - react-navigation-drawer@2.5.2
 - react-navigation-material-bottom-tabs@2.3.2
 - @react-navigation/native@3.8.2
 - react-navigation@4.4.2
 - react-navigation-stack@2.8.4
 - react-navigation-tabs@2.9.2

.eslintrc.json

@@ -14,5 +14,8 @@
       "react-native-screens"
     ]
   },
-  "env": { "browser": true, "node": true }
+  "env": { "browser": true, "node": true },
+  "rules": {
+    "import/named": "off"
+  }
 }

example/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { registerRootComponent } from 'expo';
 import {
   Animated,
@@ -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/app.json

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

example/package.json

@@ -8,29 +8,29 @@
     "ios": "expo start --ios"
   },
   "dependencies": {
-    "@babel/runtime": "^7.8.7",
-    "@expo/vector-icons": "^10.0.6",
-    "@react-native-community/masked-view": "0.1.7",
-    "expo": "^36.0.0",
-    "expo-asset": "~8.0.0",
-    "expo-barcode-scanner": "^8.0.0",
-    "expo-blur": "~8.0.0",
-    "expo-constants": "~8.0.0",
+    "@babel/runtime": "^7.11.0",
+    "@expo/vector-icons": "^10.0.0",
+    "@react-native-community/masked-view": "0.1.10",
+    "expo": "^39.0.0",
+    "expo-asset": "~8.2.0",
+    "expo-barcode-scanner": "~9.0.0",
+    "expo-blur": "~8.2.0",
+    "expo-constants": "~9.2.0",
     "hoist-non-react-statics": "^3.3.1",
-    "react": "16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
-    "react-native-gesture-handler": "~1.6.0",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-native-gesture-handler": "~1.7.0",
     "react-native-iphone-x-helper": "^1.2.1",
-    "react-native-maps": "0.27.0",
-    "react-native-paper": "^3.4.0",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "2.3.0",
-    "react-native-webview": "8.1.2",
+    "react-native-maps": "0.27.1",
+    "react-native-paper": "^4.0.1",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-safe-area-context": "3.1.4",
+    "react-native-screens": "~2.10.1",
+    "react-native-webview": "10.7.0",
     "react-navigation-header-buttons": "^3.0.5"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^4.0.0",
-    "expo-cli": "^3.13.8"
+    "expo-cli": "^3.27.8"
   }
 }

example/src/CustomTabUI.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   Alert,
   TouchableOpacity,

example/src/CustomTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 import {

example/src/DragLimitedToModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { View, Text, StyleSheet, Dimensions } from 'react-native';
 import { NavigationStackScreenComponent } from 'react-navigation-stack';
 

example/src/Drawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ScrollView, StyleProp, TextStyle } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import {

example/src/FocusEvents.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Button, ScrollView, View, Text } from 'react-native';
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import {

example/src/ParallaxDrawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   Button,
   Dimensions,
@@ -114,7 +114,7 @@ const MyNavScreen = ({
                 title="Set unlocked"
               />
             ),
-            unlocked: (
+            'unlocked': (
               <Button
                 onPress={() =>
                   navigation.setParams({ drawerLockMode: 'locked-open' })

example/src/Shared/Button.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import * as React from 'react';
 import {
-  AccessibilityStates,
   Platform,
   StyleSheet,
   Text,
@@ -88,11 +87,9 @@ export default class Button extends React.Component<ButtonProps> {
         buttonStyles.push({ backgroundColor: color });
       }
     }
-    const accessibilityStates: AccessibilityStates[] = [];
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
-      accessibilityStates.push('disabled');
     }
     const formattedTitle =
       Platform.OS === 'android' ? title.toUpperCase() : title;
@@ -100,7 +97,7 @@ export default class Button extends React.Component<ButtonProps> {
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
-        accessibilityStates={accessibilityStates}
+        accessibilityState={{ disabled }}
         testID={testID}
         disabled={disabled}
         onPress={onPress}

example/src/Shared/ButtonWithMargin.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import BaseButton, { ButtonProps } from './Button';
 

example/src/Shared/PhotoGrid.tsx

@@ -23,13 +23,13 @@ class NavigationAwareScrollViewBase extends React.Component<{
   componentDidMount() {
     this.subscription = this.props.navigation.addListener('refocus', () => {
       if (this.props.navigation.isFocused()) {
-        this.root.current && this.root.current.scrollTo({ x: 0, y: 0 });
+        this.root.current?.scrollTo({ x: 0, y: 0 });
       }
     });
   }
 
   componentWillUnmount() {
-    this.subscription && this.subscription.remove();
+    this.subscription?.remove();
   }
 
   setNativeProps(props: ScrollViewProperties) {

example/src/SimpleDrawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Button, ScrollView, StyleSheet, View } from 'react-native';
 import {
   ThemeColors,
@@ -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/StacksAndKeys.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Text, View } from 'react-native';
 import { Themed } from 'react-navigation';
 import {

example/src/StacksInTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Text } from 'react-native';
 import {
   Themed,

example/src/StacksOverTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ScrollView, StatusBar } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import {

example/src/StacksOverTopTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   ScrollView,
   StatusBar,

example/src/StyledDrawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Button, ScrollView } from 'react-native';
 import { Themed, SafeAreaView } from 'react-navigation';
 import {
@@ -91,8 +91,4 @@ const DrawerExample = createDrawerNavigator(
   }
 );
 
-DrawerExample.navigationOptions = {
-  headerShown: false,
-};
-
 export default DrawerExample;

example/src/TabsInDrawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { MaterialIcons } from '@expo/vector-icons';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import SimpleTabs from './SimpleTabs';

package.json

@@ -25,28 +25,28 @@
     "example": "yarn --cwd example"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
-    "@babel/runtime": "^7.8.7",
-    "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^25.1.4",
-    "babel-jest": "^25.2.3",
-    "commitlint": "^8.3.5",
-    "core-js": "^3.6.4",
-    "eslint": "^6.8.0",
-    "eslint-config-satya164": "^3.1.5",
-    "husky": "^4.2.1",
-    "jest": "^25.1.0",
-    "lerna": "^3.20.2",
-    "prettier": "^2.0.1",
-    "typescript": "~3.8.3"
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@babel/runtime": "^7.11.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@types/jest": "^26.0.8",
+    "babel-jest": "^26.2.2",
+    "commitlint": "^11.0.0",
+    "core-js": "^3.6.5",
+    "eslint": "^7.6.0",
+    "eslint-config-satya164": "^3.1.8",
+    "husky": "^4.2.5",
+    "jest": "^26.2.2",
+    "lerna": "^3.22.1",
+    "prettier": "^2.1.2",
+    "typescript": "^4.0.3"
   },
   "resolutions": {
-    "react": "~16.9.0",
-    "react-native": "~0.61.5"
+    "react": "~16.13.1",
+    "react-native": "~0.63.2"
   },
   "husky": {
     "hooks": {

packages/animated-switch/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.2](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.6.1...react-navigation-animated-switch@0.6.2) (2020-10-02)
+
+**Note:** Version bump only for package react-navigation-animated-switch
+
+
+
+
+
+## [0.6.1](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.6.0...react-navigation-animated-switch@0.6.1) (2020-09-24)
+
+**Note:** Version bump only for package react-navigation-animated-switch
+
+
+
+
+
+# [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
+
+
+
+
+
 ## [0.5.11](https://github.com/react-navigation/react-navigation/compare/react-navigation-animated-switch@0.5.10...react-navigation-animated-switch@0.5.11) (2020-04-22)
 
 **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.11",
+  "version": "0.6.2",
   "description": "Animated switch for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -21,15 +21,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "@react-native-community/bob": "0.10.0",
-    "@types/react": "16.9.23",
-    "@types/react-native": "0.61.22",
-    "del-cli": "^3.0.0",
-    "react": "~16.9.0",
-    "react-native": "~0.61.5",
-    "react-native-reanimated": "~1.7.0",
-    "react-navigation": "^4.3.8",
-    "typescript": "~3.8.3"
+    "@react-native-community/bob": "0.16.2",
+    "@types/react": "16.9.49",
+    "@types/react-native": "0.63.20",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-native-reanimated": "~1.13.0",
+    "react-navigation": "^4.4.2",
+    "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*",

packages/core/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.8](https://github.com/react-navigation/react-navigation-core/compare/@react-navigation/core@3.7.7...@react-navigation/core@3.7.8) (2020-10-02)
+
+
+### Bug Fixes
+
+* NavigationEvents subscribe events on new nav state ([#8920](https://github.com/react-navigation/react-navigation-core/issues/8920)) ([6390aac](https://github.com/react-navigation/react-navigation-core/commit/6390aacd07fd647d925dfec842a766c8aad5272f))
+
+
+
+
+
+## [3.7.7](https://github.com/react-navigation/react-navigation-core/compare/@react-navigation/core@3.7.6...@react-navigation/core@3.7.7) (2020-09-24)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+## [3.7.6](https://github.com/react-navigation/react-navigation-core/compare/@react-navigation/core@3.7.5...@react-navigation/core@3.7.6) (2020-04-30)
+
+
+### Bug Fixes
+
+* change old docUrl to new docUrl due v5 ([e09906a](https://github.com/react-navigation/react-navigation-core/commit/e09906a4235a0fca09140923ebe7af34b50b491a))
+
+
+
+
+
 ## [3.7.5](https://github.com/react-navigation/react-navigation-core/compare/@react-navigation/core@3.7.4...@react-navigation/core@3.7.5) (2020-04-02)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-navigation/core",
-  "version": "3.7.5",
+  "version": "3.7.8",
   "description": "Core utilities for the react-navigation framework",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -37,16 +37,16 @@
   "dependencies": {
     "hoist-non-react-statics": "^3.3.2",
     "path-to-regexp": "^1.8.0",
-    "query-string": "^6.11.1",
+    "query-string": "^6.13.1",
     "react-is": "^16.13.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "del-cli": "^3.0.0",
-    "react": "~16.9.0",
-    "react-native": "~0.61.5",
-    "react-native-testing-library": "^1.12.0",
-    "react-test-renderer": "^16.9.2"
+    "@react-native-community/bob": "^0.16.2",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-native-testing-library": "^6.0.0",
+    "react-test-renderer": "~16.13.1"
   },
   "peerDependencies": {
     "react": "*"

packages/core/src/StateUtils.js

@@ -93,6 +93,7 @@ const StateUtils = {
    */
   jumpTo(state, key) {
     const index = StateUtils.indexOf(state, key);
+    invariant(index !== -1, 'attempt to jump to unknown key "%s"', key);
     return StateUtils.jumpToIndex(state, index);
   },
 

packages/core/src/__fixtures__/createNavigationContainer.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/sort-comp */
 
-import React from 'react';
+import * as React from 'react';
 import { NavigationActions, getNavigation, NavigationProvider } from '../index';
 
 export default function createNavigationContainer(Component) {

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

@@ -3,32 +3,51 @@ import NavigationStateUtils from '../StateUtils';
 const routeName = 'Anything';
 
 describe('StateUtils', () => {
-  // Getters
-  it('gets route', () => {
-    const state = {
-      index: 0,
-      routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.get(state, 'a')).toEqual({
-      key: 'a',
-      routeName,
+  describe('get', () => {
+    it('gets route', () => {
+      const state = {
+        index: 0,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.get(state, 'a')).toEqual({
+        key: 'a',
+        routeName,
+      });
+    });
+
+    it('returns null when getting an unknown route', () => {
+      const state = {
+        index: 0,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.get(state, 'b')).toBe(null);
     });
-    expect(NavigationStateUtils.get(state, 'b')).toBe(null);
   });
 
-  it('gets route index', () => {
-    const state = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.indexOf(state, 'a')).toBe(0);
-    expect(NavigationStateUtils.indexOf(state, 'b')).toBe(1);
-    expect(NavigationStateUtils.indexOf(state, 'c')).toBe(-1);
+  describe('indexOf', () => {
+    it('gets route index', () => {
+      const state = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.indexOf(state, 'a')).toBe(0);
+      expect(NavigationStateUtils.indexOf(state, 'b')).toBe(1);
+    });
+
+    it('returns -1 when getting an unknown route index', () => {
+      const state = {
+        index: 1,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.indexOf(state, 'b')).toBe(-1);
+    });
   });
 
   it('has a route', () => {
@@ -44,303 +63,390 @@ describe('StateUtils', () => {
     expect(NavigationStateUtils.has(state, 'c')).toBe(false);
   });
 
-  // Push
-  it('pushes a route', () => {
-    const state = {
-      index: 0,
-      routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      isTransitioning: false,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-    };
-    expect(NavigationStateUtils.push(state, { key: 'b', routeName })).toEqual(
-      newState
-    );
-  });
-
-  it('does not push duplicated route', () => {
-    const state = {
-      index: 0,
-      routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
-    };
-    expect(() =>
-      NavigationStateUtils.push(state, { key: 'a', routeName })
-    ).toThrow('should not push route with duplicated key a');
-  });
-
-  // Pop
-  it('pops route', () => {
-    const state = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 0,
-      routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.pop(state)).toEqual(newState);
-  });
-
-  it('does not pop route if not applicable', () => {
-    const state = {
-      index: 0,
-      routes: [{ key: 'a', routeName }],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.pop(state)).toBe(state);
-  });
-
-  // Jump
-  it('jumps to new index', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.jumpToIndex(state, 0)).toBe(state);
-    expect(NavigationStateUtils.jumpToIndex(state, 1)).toEqual(newState);
-  });
-
-  it('throws if jumps to invalid index', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(() => NavigationStateUtils.jumpToIndex(state, 2)).toThrow(
-      'invalid index 2 to jump to'
-    );
-  });
-
-  it('jumps to new key', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.jumpTo(state, 'a')).toBe(state);
-    expect(NavigationStateUtils.jumpTo(state, 'b')).toEqual(newState);
-  });
-
-  it('throws if jumps to invalid key', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(() => NavigationStateUtils.jumpTo(state, 'c')).toThrow(
-      'invalid index -1 to jump to'
-    );
-  });
-
-  it('move backwards', () => {
-    const state = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.back(state)).toEqual(newState);
-    expect(NavigationStateUtils.back(newState)).toBe(newState);
-  });
-
-  it('move forwards', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(NavigationStateUtils.forward(state)).toEqual(newState);
-    expect(NavigationStateUtils.forward(newState)).toBe(newState);
-  });
-
-  // Replace
-  it('Replaces by key', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'c', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(
-      NavigationStateUtils.replaceAt(state, 'b', { key: 'c', routeName })
-    ).toEqual(newState);
-  });
-
-  it('Replaces by index', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'c', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(
-      NavigationStateUtils.replaceAtIndex(state, 1, { key: 'c', routeName })
-    ).toEqual(newState);
-  });
-
-  it('Returns the state with updated index if route is unchanged but index changes', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(
-      NavigationStateUtils.replaceAtIndex(state, 1, state.routes[1])
-    ).toEqual({ ...state, index: 1 });
-  });
-
-  // Reset
-  it('Resets routes', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 1,
-      routes: [
-        { key: 'x', routeName },
-        { key: 'y', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(
-      NavigationStateUtils.reset(state, [
-        { key: 'x', routeName },
-        { key: 'y', routeName },
-      ])
-    ).toEqual(newState);
-
-    expect(() => {
-      NavigationStateUtils.reset(state, []);
-    }).toThrow('invalid routes to replace');
-  });
-
-  it('Resets routes with index', () => {
-    const state = {
-      index: 0,
-      routes: [
-        { key: 'a', routeName },
-        { key: 'b', routeName },
-      ],
-      isTransitioning: false,
-    };
-    const newState = {
-      index: 0,
-      routes: [
-        { key: 'x', routeName },
-        { key: 'y', routeName },
-      ],
-      isTransitioning: false,
-    };
-    expect(
-      NavigationStateUtils.reset(
-        state,
-        [
-          { key: 'x', routeName },
-          { key: 'y', routeName },
+  describe('push', () => {
+    it('pushes a route', () => {
+      const state = {
+        index: 0,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        isTransitioning: false,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
         ],
-        0
-      )
-    ).toEqual(newState);
-
-    expect(() => {
-      NavigationStateUtils.reset(
-        state,
-        [
-          { key: 'x', routeName },
-          { key: 'y', routeName },
-        ],
-        100
+      };
+      expect(NavigationStateUtils.push(state, { key: 'b', routeName })).toEqual(
+        newState
       );
-    }).toThrow('invalid index 100 to reset');
+    });
+
+    it('does not push duplicated route', () => {
+      const state = {
+        index: 0,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      expect(() =>
+        NavigationStateUtils.push(state, { key: 'a', routeName })
+      ).toThrow('should not push route with duplicated key a');
+    });
+  });
+
+  describe('pop', () => {
+    it('pops route', () => {
+      const state = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 0,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.pop(state)).toEqual(newState);
+    });
+
+    it('does not pop route if not applicable with single route config', () => {
+      const state = {
+        index: 0,
+        routes: [{ key: 'a', routeName }],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.pop(state)).toBe(state);
+    });
+
+    it('does not pop route if not applicable with multiple route config', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.pop(state)).toBe(state);
+    });
+  });
+
+  describe('jumpToIndex', () => {
+    it('jumps to new index', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.jumpToIndex(state, 0)).toBe(state);
+      expect(NavigationStateUtils.jumpToIndex(state, 1)).toEqual(newState);
+    });
+
+    it('throws if jumps to invalid index', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(() => NavigationStateUtils.jumpToIndex(state, 2)).toThrow(
+        'invalid index 2 to jump to'
+      );
+    });
+  });
+
+  describe('jumpTo', () => {
+    it('jumps to the current key', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.jumpTo(state, 'a')).toBe(state);
+    });
+
+    it('jumps to new key', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.jumpTo(state, 'b')).toEqual(newState);
+    });
+
+    it('throws if jumps to invalid key', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(() => NavigationStateUtils.jumpTo(state, 'c')).toThrow(
+        'attempt to jump to unknown key "c"'
+      );
+    });
+  });
+
+  describe('back', () => {
+    it('move backwards', () => {
+      const state = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.back(state)).toEqual(newState);
+    });
+
+    it('does not move backwards when the active route is the first', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.back(state)).toBe(state);
+    });
+  });
+
+  describe('forward', () => {
+    it('move forwards', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.forward(state)).toEqual(newState);
+    });
+
+    it('does not move forward when active route is already the top-most', () => {
+      const state = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(NavigationStateUtils.forward(state)).toEqual(state);
+    });
+  });
+
+  describe('replace', () => {
+    it('Replaces by key', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'c', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(
+        NavigationStateUtils.replaceAt(state, 'b', { key: 'c', routeName })
+      ).toEqual(newState);
+    });
+
+    it('Replaces by index', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'c', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(
+        NavigationStateUtils.replaceAtIndex(state, 1, { key: 'c', routeName })
+      ).toEqual(newState);
+    });
+
+    it('Returns the state with updated index if route is unchanged but index changes', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(
+        NavigationStateUtils.replaceAtIndex(state, 1, state.routes[1])
+      ).toEqual({ ...state, index: 1 });
+    });
+  });
+
+  describe('reset', () => {
+    it('Resets routes', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 1,
+        routes: [
+          { key: 'x', routeName },
+          { key: 'y', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(
+        NavigationStateUtils.reset(state, [
+          { key: 'x', routeName },
+          { key: 'y', routeName },
+        ])
+      ).toEqual(newState);
+    });
+
+    it('throws when attempting to set empty state', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(() => {
+        NavigationStateUtils.reset(state, []);
+      }).toThrow('invalid routes to replace');
+    });
+
+    it('Resets routes with index', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      const newState = {
+        index: 0,
+        routes: [
+          { key: 'x', routeName },
+          { key: 'y', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(
+        NavigationStateUtils.reset(
+          state,
+          [
+            { key: 'x', routeName },
+            { key: 'y', routeName },
+          ],
+          0
+        )
+      ).toEqual(newState);
+
+      expect(() => {
+        NavigationStateUtils.reset(
+          state,
+          [
+            { key: 'x', routeName },
+            { key: 'y', routeName },
+          ],
+          100
+        );
+      }).toThrow('invalid index 100 to reset');
+    });
+
+    it('throws when attempting to set an out of range route index', () => {
+      const state = {
+        index: 0,
+        routes: [
+          { key: 'a', routeName },
+          { key: 'b', routeName },
+        ],
+        isTransitioning: false,
+      };
+      expect(() => {
+        NavigationStateUtils.reset(
+          state,
+          [
+            { key: 'x', routeName },
+            { key: 'y', routeName },
+          ],
+          100
+        );
+      }).toThrow('invalid index 100 to reset');
+    });
   });
 });

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

@@ -1,4 +1,5 @@
 import getNavigation from '../getNavigation';
+import * as NavigationActions from '../NavigationActions';
 
 it('getNavigation provides default action helpers', () => {
   const router = {
@@ -22,12 +23,11 @@ it('getNavigation provides default action helpers', () => {
   topNav.navigate('GreatRoute');
 
   expect(dispatch.mock.calls.length).toBe(1);
-  expect(dispatch.mock.calls[0][0].type).toBe('Navigation/NAVIGATE');
+  expect(dispatch.mock.calls[0][0].type).toBe(NavigationActions.NAVIGATE);
   expect(dispatch.mock.calls[0][0].routeName).toBe('GreatRoute');
 });
 
-// eslint-disable-next-line jest/no-disabled-tests
-it.skip('getNavigation provides router action helpers', () => {
+it('getNavigation provides router action helpers', () => {
   const router = {
     getActionCreators: () => ({
       foo: (bar) => ({ type: 'FooBarAction', bar }),
@@ -39,7 +39,8 @@ it.skip('getNavigation provides router action helpers', () => {
 
   const dispatch = jest.fn();
 
-  const topNav = getNavigation(
+  let topNav;
+  topNav = getNavigation(
     router,
     {},
     dispatch,

packages/core/src/getChildRouter.ts

@@ -1,5 +1,5 @@
 export default function getChildRouter(router: any, routeName: string) {
-  if (router.childRouters && router.childRouters[routeName]) {
+  if (router.childRouters?.[routeName]) {
     return router.childRouters[routeName];
   }
 

packages/core/src/navigators/createNavigator.js

@@ -36,7 +36,7 @@ function createNavigator(NavigatorView, router, navigationConfig) {
         );
       }
 
-      const descriptors = routes.reduce((acc, route) => {
+      const descriptors = routes.reduce((descriptors, route) => {
         if (
           prevDescriptors &&
           prevDescriptors[route.key] &&
@@ -44,8 +44,8 @@ function createNavigator(NavigatorView, router, navigationConfig) {
           screenProps === currentState.screenProps &&
           currentState.themeContext === currentState.theme
         ) {
-          acc[route.key] = prevDescriptors[route.key];
-          return acc;
+          descriptors[route.key] = prevDescriptors[route.key];
+          return descriptors;
         }
         const getComponent = router.getComponentForRouteName.bind(
           null,
@@ -57,14 +57,14 @@ function createNavigator(NavigatorView, router, navigationConfig) {
           screenProps,
           currentState.themeContext
         );
-        acc[route.key] = {
+        descriptors[route.key] = {
           key: route.key,
           getComponent,
           options,
           state: route,
           navigation: childNavigation,
         };
-        return acc;
+        return descriptors;
       }, {});
 
       return { descriptors, screenProps, theme: state.themeContext };

packages/core/src/routers/SwitchRouter.js

@@ -19,7 +19,7 @@ export default (routeConfigs, config = {}) => {
   const getCustomActionCreators =
     config.getCustomActionCreators || defaultActionCreators;
 
-  const initialRouteParams = config.initialRouteParams;
+  const { initialRouteParams } = config;
   const initialRouteName = config.initialRouteName || order[0];
   const backBehavior = config.backBehavior || 'none';
   const resetOnBlur = config.hasOwnProperty('resetOnBlur')
@@ -59,7 +59,7 @@ export default (routeConfigs, config = {}) => {
 
   function resetChildRoute(routeName) {
     let initialParams =
-      routeName === initialRouteName ? initialRouteParams : undefined;
+      routeName === initialRouteName ? initialRouteParams : null;
     // note(brentvatne): merging initialRouteParams *on top* of default params
     // on the route seems incorrect but it's consistent with existing behavior
     // in stackrouter
@@ -71,13 +71,13 @@ export default (routeConfigs, config = {}) => {
         ...childRouter.getStateForAction(childAction),
         key: routeName,
         routeName,
-        params,
+        ...(params ? { params } : {}),
       };
     }
     return {
       key: routeName,
       routeName,
-      params,
+      ...(params ? { params } : {}),
     };
   }
 

packages/core/src/routers/__tests__/KeyGenerator.test.js

@@ -0,0 +1,12 @@
+import { _TESTING_ONLY_normalize_keys, generateKey } from '../KeyGenerator';
+
+it('should generate a new string key when called', () => {
+  _TESTING_ONLY_normalize_keys();
+
+  expect(generateKey()).toBe('id-0');
+  expect(generateKey()).toBe('id-1');
+});
+
+it('should generate unique string keys without being normalized', () => {
+  expect(generateKey()).not.toBe(generateKey());
+});

packages/core/src/routers/__tests__/PathHandling.test.js

@@ -1,6 +1,6 @@
 /* eslint no-shadow:0, react/no-multi-comp:0, react/display-name:0 */
 
-import React from 'react';
+import * as React from 'react';
 
 import SwitchRouter from '../SwitchRouter';
 import StackRouter from '../StackRouter';

packages/core/src/routers/__tests__/Routers.test.js

@@ -1,6 +1,6 @@
 /* eslint react/no-multi-comp:0, react/display-name:0 */
 
-import React from 'react';
+import * as React from 'react';
 
 import StackRouter from '../StackRouter';
 import TabRouter from '../TabRouter';
@@ -114,6 +114,51 @@ Object.keys(ROUTERS).forEach((routerName) => {
       );
       expect(state0.routes[state0.index].params.foo).toEqual(42);
     });
+
+    it('merges existing params when set params on existing state', () => {
+      const Screen = () => <div />;
+
+      const router = Router({
+        Foo: {
+          screen: Screen,
+          params: { a: 1 },
+        },
+      });
+      const key = 'Foo';
+      const state = router.getStateForAction({
+        type: NavigationActions.INIT,
+        key,
+      });
+
+      expect(state).toMatchObject({
+        index: 0,
+        routes: [{ key, params: { a: 1 } }],
+      });
+
+      const newState = router.getStateForAction(
+        NavigationActions.setParams({ key, params: { b: 2 } }),
+        state
+      );
+
+      expect(newState.routes[newState.index].params).toEqual({ a: 1, b: 2 });
+    });
+
+    it('merges params when setting params during init', () => {
+      const Screen = () => <div />;
+
+      const router = Router({
+        Foo: {
+          screen: Screen,
+          params: { a: 1 },
+        },
+      });
+
+      const newState = router.getStateForAction(
+        NavigationActions.setParams({ key: 'Foo', params: { b: 2 } })
+      );
+
+      expect(newState.routes[newState.index].params).toEqual({ a: 1, b: 2 });
+    });
   });
 });
 

packages/core/src/routers/__tests__/StackRouter.test.js

@@ -1,6 +1,6 @@
 /* eslint no-shadow:0, react/no-multi-comp:0, react/display-name:0 */
 
-import React from 'react';
+import * as React from 'react';
 
 import StackRouter from '../StackRouter';
 import * as StackActions from '../StackActions';

packages/core/src/routers/__tests__/SwitchRouter.test.js

@@ -1,6 +1,6 @@
 /* eslint react/display-name:0 */
 
-import React from 'react';
+import * as React from 'react';
 import SwitchRouter from '../SwitchRouter';
 import StackRouter from '../StackRouter';
 import * as NavigationActions from '../../NavigationActions';
@@ -158,7 +158,7 @@ describe('SwitchRouter', () => {
     expect(getSubState(1).routeName).toEqual('A');
 
     // The back action should not switch to B. It should stay on A
-    back({ key: null });
+    back(null);
     expect(getSubState(1).routeName).toEqual('A');
   });
 

packages/core/src/routers/__tests__/TabRouter.test.js

@@ -1,6 +1,6 @@
 /* eslint react/display-name:0 */
 
-import React from 'react';
+import * as React from 'react';
 import TabRouter from '../TabRouter';
 
 import * as NavigationActions from '../../NavigationActions';

packages/core/src/routers/__tests__/validateRouteConfigMap.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import validateRouteConfigMap from '../validateRouteConfigMap';
 import StackRouter from '../StackRouter';

packages/core/src/utils/docsUrl.ts

@@ -1,3 +1,3 @@
 export default function docsUrl(path: string) {
-  return `https://reactnavigation.org/docs/${path}`;
+  return `https://reactnavigation.org/docs/4.x/${path}`;
 }

packages/core/src/views/NavigationEvents.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import withNavigation from './withNavigation';
 
 const EventNameToPropName = {
@@ -12,11 +12,28 @@ const EventNames = Object.keys(EventNameToPropName);
 
 class NavigationEvents extends React.Component {
   componentDidMount() {
-    this.subscriptions = {};
-
     // We register all navigation listeners on mount to ensure listener stability across re-render
     // A former implementation was replacing (removing/adding) listeners on all update (if prop provided)
     // but there were issues (see https://github.com/react-navigation/react-navigation/issues/5058)
+    this.subscribeAll();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.navigation !== prevProps.navigation) {
+      this.removeAll();
+      this.subscribeAll();
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeAll();
+  }
+
+  getPropListener = (eventName) => this.props[EventNameToPropName[eventName]];
+
+  subscribeAll() {
+    this.subscriptions = {};
+
     EventNames.forEach((eventName) => {
       this.subscriptions[eventName] = this.props.navigation.addListener(
         eventName,
@@ -28,14 +45,12 @@ class NavigationEvents extends React.Component {
     });
   }
 
-  componentWillUnmount() {
+  removeAll() {
     EventNames.forEach((eventName) => {
       this.subscriptions[eventName].remove();
     });
   }
 
-  getPropListener = (eventName) => this.props[EventNameToPropName[eventName]];
-
   render() {
     return null;
   }

packages/core/src/views/SceneView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import NavigationContext from './NavigationContext';
 
 export default class SceneView extends React.PureComponent {

packages/core/src/views/SwitchView/SwitchView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import SceneView from '../SceneView';
 
 export default class SwitchView extends React.Component {

packages/core/src/views/__tests__/NavigationEvents.test.js

@@ -1,10 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 import renderer from 'react-test-renderer';
 import NavigationEvents from '../NavigationEvents';
 import NavigationContext from '../NavigationContext';
 
 const createPropListener = () => jest.fn();
 
+const EVENT_TO_PROP_NAME = {
+  willFocus: 'onWillFocus',
+  didFocus: 'onDidFocus',
+  willBlur: 'onWillBlur',
+  didBlur: 'onDidBlur',
+};
+
 // An easy way to create the 4 listeners prop
 const createEventListenersProp = () => ({
   onWillFocus: createPropListener(),
@@ -122,6 +129,39 @@ describe('NavigationEvents', () => {
     checkPropListenerIsCalled('didBlur', 'onDidBlur');
   });
 
+  it('wires props listeners to latest navigation updates', () => {
+    const {
+      navigation,
+      NavigationListenersAPI,
+    } = createTestNavigationAndHelpers();
+    const {
+      navigation: nextNavigation,
+      NavigationListenersAPI: nextNavigationListenersAPI,
+    } = createTestNavigationAndHelpers();
+
+    const eventListenerProps = createEventListenersProp();
+    const component = renderer.create(
+      <NavigationEvents navigation={navigation} {...eventListenerProps} />
+    );
+
+    Object.entries(EVENT_TO_PROP_NAME).forEach(([eventName, propName]) => {
+      expect(eventListenerProps[propName]).toHaveBeenCalledTimes(0);
+      NavigationListenersAPI.call(eventName);
+      expect(eventListenerProps[propName]).toHaveBeenCalledTimes(1);
+    });
+
+    component.update(
+      <NavigationEvents navigation={nextNavigation} {...eventListenerProps} />
+    );
+
+    Object.entries(EVENT_TO_PROP_NAME).forEach(([eventName, propName]) => {
+      NavigationListenersAPI.call(eventName);
+      expect(eventListenerProps[propName]).toHaveBeenCalledTimes(1);
+      nextNavigationListenersAPI.call(eventName);
+      expect(eventListenerProps[propName]).toHaveBeenCalledTimes(2);
+    });
+  });
+
   it('wire latest props listener to navigation listeners on updates (support closure/arrow functions update)', () => {
     const {
       navigation,

packages/core/src/views/withNavigation.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 import invariant from '../utils/invariant';
 import NavigationContext from './NavigationContext';

packages/core/src/views/withNavigationFocus.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 import withNavigation from './withNavigation';
 

packages/drawer/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.5.2](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.5.1...react-navigation-drawer@2.5.2) (2020-10-02)
+
+**Note:** Version bump only for package react-navigation-drawer
+
+
+
+
+
+## [2.5.1](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.5.0...react-navigation-drawer@2.5.1) (2020-09-24)
+
+**Note:** Version bump only for package react-navigation-drawer
+
+
+
+
+
+# [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
+
+
+
+
+
 ## [2.4.12](https://github.com/react-navigation/drawer/compare/react-navigation-drawer@2.4.11...react-navigation-drawer@2.4.12) (2020-04-22)
 
 **Note:** Version bump only for package react-navigation-drawer

packages/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-drawer",
-  "version": "2.4.12",
+  "version": "2.5.2",
   "description": "Drawer navigator component for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -38,19 +38,19 @@
   },
   "homepage": "https://github.com/react-navigation/drawer#readme",
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
-    "del-cli": "^3.0.0",
-    "react": "~16.9.0",
+    "@react-native-community/bob": "^0.16.2",
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
     "react-lifecycles-compat": "^3.0.4",
-    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-native-reanimated": "^1.2.0",
-    "react-native-screens": "^2.3.0",
-    "react-native-testing-library": "^1.12.0",
-    "react-navigation": "^4.3.8",
-    "typescript": "~3.8.3"
+    "react-native": "~0.63.2",
+    "react-native-gesture-handler": "~1.7.0",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-screens": "~2.10.1",
+    "react-native-testing-library": "^6.0.0",
+    "react-navigation": "^4.4.2",
+    "typescript": "^4.0.3"
   },
   "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(DrawerView, drawerRouter, mergedConfig);
+  const navigator = createNavigator(
+    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,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.2](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.3.1...react-navigation-material-bottom-tabs@2.3.2) (2020-10-02)
+
+**Note:** Version bump only for package react-navigation-material-bottom-tabs
+
+
+
+
+
+## [2.3.1](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.3.0...react-navigation-material-bottom-tabs@2.3.1) (2020-09-24)
+
+**Note:** Version bump only for package react-navigation-material-bottom-tabs
+
+
+
+
+
+# [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
+
+
+
+
+
 ## [2.2.11](https://github.com/react-navigation/react-navigation-material-bottom-tabs/compare/react-navigation-material-bottom-tabs@2.2.10...react-navigation-material-bottom-tabs@2.2.11) (2020-04-22)
 
 **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.11",
+  "version": "2.3.2",
   "description": "Material Bottom Tab Navigation component for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -38,18 +38,16 @@
   },
   "homepage": "https://github.com/react-navigation/react-navigation-material-bottom-tabs#readme",
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
+    "@react-native-community/bob": "^0.16.2",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
-    "del-cli": "^3.0.0",
-    "react": "~16.9.0",
-    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-native-paper": "^3.1.1",
-    "react-native-reanimated": "^1.2.0",
-    "react-navigation": "^4.3.8",
-    "typescript": "~3.8.3"
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-native-paper": "^4.2.0",
+    "react-navigation": "^4.4.2",
+    "typescript": "^4.0.3"
   },
   "peerDependencies": {
     "react": "*",

packages/native/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.2](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.8.1...@react-navigation/native@3.8.2) (2020-10-02)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [3.8.1](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.8.0...@react-navigation/native@3.8.1) (2020-09-24)
+
+
+### Bug Fixes
+
+* don't use deprecated currentlyFocusedField ([#8684](https://github.com/react-navigation/react-navigation-native/issues/8684)) ([06a69f1](https://github.com/react-navigation/react-navigation-native/commit/06a69f1bfd81fe06b784ff4e6da290fee0c6467d)), closes [#8457](https://github.com/react-navigation/react-navigation-native/issues/8457)
+
+
+
+
+
+# [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
+
+
+
+
+
 ## [3.7.12](https://github.com/react-navigation/react-navigation-native/compare/@react-navigation/native@3.7.11...@react-navigation/native@3.7.12) (2020-04-22)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-navigation/native",
-  "version": "3.7.12",
+  "version": "3.8.2",
   "description": "React Native support for React Navigation",
   "main": "lib/commonjs/index.js",
   "react-native": "lib/module/index.js",
@@ -39,14 +39,14 @@
     "react-native-safe-area-view": "^0.14.9"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/core": "^3.7.5",
-    "@types/react-test-renderer": "^16.9.2",
-    "del-cli": "^3.0.0",
-    "react": "~16.9.0",
-    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-test-renderer": "^16.9.2"
+    "@react-native-community/bob": "^0.16.2",
+    "@react-navigation/core": "^3.7.8",
+    "@types/react-test-renderer": "^16.9.3",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-native-gesture-handler": "~1.7.0",
+    "react-test-renderer": "~16.13.1"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/native/src/ResourceSavingSceneView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { SceneView } from '@react-navigation/core';
 

packages/native/src/Scrollables.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   ScrollView,
   Platform,
@@ -6,7 +6,6 @@ import {
   SectionList,
   RefreshControl,
 } from 'react-native';
-// eslint-disable-next-line import/named
 import { ScrollView as GHScrollView } from 'react-native-gesture-handler';
 import createNavigationAwareScrollable from './createNavigationAwareScrollable';
 import invariant from './utils/invariant';

packages/native/src/__tests__/createAppContainer.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { View } from 'react-native';
 
 import renderer from 'react-test-renderer';

packages/native/src/__tests__/withOrientation.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 import withOrientation, { isOrientationLandscape } from '../withOrientation';

packages/native/src/createAppContainer.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/sort-comp */
 
-import React from 'react';
+import * as React from 'react';
 import { Linking, Platform, BackHandler } from 'react-native';
 import {
   NavigationActions,

packages/native/src/createKeyboardAwareNavigator.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TextInput } from 'react-native';
 
 export default (Navigator, navigatorConfig) =>
@@ -8,7 +8,9 @@ export default (Navigator, navigatorConfig) =>
     _previouslyFocusedTextInput = null;
 
     _handleGestureBegin = () => {
-      this._previouslyFocusedTextInput = TextInput.State.currentlyFocusedField();
+      this._previouslyFocusedTextInput = TextInput.State.currentlyFocusedInput
+        ? TextInput.State.currentlyFocusedInput()
+        : TextInput.State.currentlyFocusedField();
       if (this._previouslyFocusedTextInput) {
         TextInput.State.blurTextInput(this._previouslyFocusedTextInput);
       }
@@ -32,7 +34,9 @@ export default (Navigator, navigatorConfig) =>
       // in the case where the index did not change, I believe. We
       // should revisit this after 2.0 release.
       if (transitionProps.index !== prevTransitionProps.index) {
-        const currentField = TextInput.State.currentlyFocusedField();
+        const currentField = TextInput.State.currentlyFocusedInput
+          ? TextInput.State.currentlyFocusedInput()
+          : TextInput.State.currentlyFocusedField();
         if (currentField) {
           TextInput.State.blurTextInput(currentField);
         }

packages/native/src/createNavigationAwareScrollable.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
 import { withNavigation } from '@react-navigation/core';
 

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/native/src/withOrientation.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Dimensions } from 'react-native';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 

packages/react-navigation/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.2](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.4.1...react-navigation@4.4.2) (2020-10-02)
+
+**Note:** Version bump only for package react-navigation
+
+
+
+
+
+## [4.4.1](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.4.0...react-navigation@4.4.1) (2020-09-24)
+
+**Note:** Version bump only for package react-navigation
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* change old docUrl to new docUrl due v5 ([e09906a](https://github.com/react-navigation/react-navigation/commit/e09906a4235a0fca09140923ebe7af34b50b491a))
+
+
+
+
+
 ## [4.3.8](https://github.com/react-navigation/react-navigation/compare/react-navigation@4.3.7...react-navigation@4.3.8) (2020-04-22)
 
 **Note:** Version bump only for package react-navigation

packages/react-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "4.3.8",
+  "version": "4.4.2",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/index.js",
   "types": "typescript/react-navigation.d.ts",
@@ -24,16 +24,16 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "^3.7.5",
-    "@react-navigation/native": "^3.7.12"
+    "@react-navigation/core": "^3.7.8",
+    "@react-navigation/native": "^3.8.2"
   },
   "devDependencies": {
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
-    "@types/react-test-renderer": "^16.9.2",
-    "react": "~16.9.0",
-    "react-native": "~0.61.5",
-    "react-test-renderer": "^16.9.2",
-    "typescript": "~3.8.3"
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
+    "@types/react-test-renderer": "^16.9.3",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-test-renderer": "~16.13.1",
+    "typescript": "^4.0.3"
   }
 }

packages/react-navigation/src/navigators/__tests__/SwitchNavigator.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 

packages/react-navigation/src/utils/docsUrl.js

@@ -1,3 +1,3 @@
 export default function docsUrl(path) {
-  return `https://reactnavigation.org/docs/${path}`;
+  return `https://reactnavigation.org/docs/4.x/${path}`;
 }

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,16 @@ export interface NavigationDescriptor<
   getComponent: () => React.ComponentType;
 }
 
-export type NavigationView<
-  Options,
-  State,
-  ScreenProps = unknown
-> = React.ComponentType<
-  {
-    descriptors: { [key: string]: NavigationDescriptor };
-    navigationConfig: Options;
-    screenProps?: ScreenProps;
-  } & NavigationInjectedProps
->;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type NavigationView<Options, State, ScreenProps = unknown> =
+  | React.ComponentType<
+      {
+        descriptors: { [key: string]: NavigationDescriptor };
+        navigationConfig: Options;
+        screenProps?: ScreenProps;
+      } & NavigationInjectedProps
+    >
+  | React.ComponentType<any>;
 
 export type CreateNavigatorConfig<
   NavigatorConfig,
@@ -897,11 +898,13 @@ export function withNavigation<
   }
 >;
 
+// eslint-disable-next-line no-redeclare
 export function withNavigation<P extends NavigationInjectedProps>(
   Component: React.ComponentType<P>
 ): React.ComponentType<Omit<P, keyof NavigationInjectedProps>>;
 
 // For backwards compatibility
+// eslint-disable-next-line no-redeclare
 export function withNavigation<T = {}, P = NavigationParams>(
   Component: React.ComponentType<T & NavigationInjectedProps<P>>
 ): React.ComponentType<
@@ -929,11 +932,13 @@ export function withNavigationFocus<
   }
 >;
 
+// eslint-disable-next-line no-redeclare
 export function withNavigationFocus<P extends NavigationFocusInjectedProps>(
   Component: React.ComponentType<P>
 ): React.ComponentType<Omit<P, keyof NavigationFocusInjectedProps>>;
 
 // For backwards compatibility
+// eslint-disable-next-line no-redeclare
 export function withNavigationFocus<T = {}, P = NavigationParams>(
   Component: React.ComponentType<T & NavigationFocusInjectedProps<P>>
 ): React.ComponentType<

packages/stack/CHANGELOG.md

@@ -3,6 +3,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.4](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.8.3...react-navigation-stack@2.8.4) (2020-10-02)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+## [2.8.3](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.8.2...react-navigation-stack@2.8.3) (2020-09-24)
+
+**Note:** Version bump only for package react-navigation-stack
+
+
+
+
+
+## [2.8.2](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.8.1...react-navigation-stack@2.8.2) (2020-06-25)
+
+
+### Bug Fixes
+
+* sync latest stack ([46b797d](https://github.com/react-navigation/react-navigation-stack/commit/46b797dd297f789e3c92ff6f5c4432fedc891767))
+
+
+
+
+
+## [2.8.1](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.8.0...react-navigation-stack@2.8.1) (2020-06-25)
+
+
+### Bug Fixes
+
+* pop with correct key from nested stack ([2e7f4a6](https://github.com/react-navigation/react-navigation-stack/commit/2e7f4a6d10a00930bd5c53ef6f4bf964c9638db5))
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* sync latest stack ([8b79e9b](https://github.com/react-navigation/react-navigation-stack/commit/8b79e9bee65c3ba6a788ca76771379319168f117))
+
+
+
+
+
 ## [2.3.13](https://github.com/react-navigation/react-navigation-stack/compare/react-navigation-stack@2.3.12...react-navigation-stack@2.3.13) (2020-04-22)
 
 **Note:** Version bump only for package react-navigation-stack

packages/stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-stack",
-  "version": "2.3.13",
+  "version": "2.8.4",
   "description": "Stack navigator component for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -43,22 +43,22 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.10.0",
-    "@react-native-community/masked-view": "^0.1.7",
-    "@react-navigation/stack": "^5.2.12",
+    "@react-native-community/bob": "^0.16.2",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/stack": "^5.9.0",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.23",
-    "@types/react-native": "^0.61.22",
-    "@types/react-test-renderer": "^16.9.2",
-    "del-cli": "^3.0.0",
-    "react": "~16.9.0",
-    "react-native": "~0.61.4",
-    "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.8",
-    "react-test-renderer": "~16.9.0",
-    "typescript": "~3.8.3"
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
+    "@types/react-test-renderer": "^16.9.3",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.2",
+    "react-native-gesture-handler": "~1.7.0",
+    "react-native-safe-area-context": "3.1.4",
+    "react-native-screens": "~2.10.1",
+    "react-navigation": "^4.4.2",
+    "react-test-renderer": "~16.13.1",
+    "typescript": "^4.0.3"
   },
   "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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/index.tsx	2020-04-22 16:34:39.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-06-25 01:58:50.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-04-22 16:34:01.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-06-25 01:58:50.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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/types.tsx	2020-04-22 16:34:39.000000000 +0200
-@@ -8,14 +8,28 @@
+--- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/types.tsx	2020-06-24 23:18:40.000000000 +0200
+@@ -8,15 +8,28 @@
  } from 'react-native';
- import { EdgeInsets } from 'react-native-safe-area-context';
- import {
+ import type { EdgeInsets } from 'react-native-safe-area-context';
+ 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 };
- 
-@@ -218,24 +239,27 @@
+@@ -228,24 +240,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> & {
      /**
-@@ -317,6 +341,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-25 01:58:50.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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Header/Header.tsx	2020-04-22 16:34:39.000000000 +0200
-@@ -1,12 +1,14 @@
+--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/views/Header/Header.tsx	2020-06-25 03:01:13.000000000 +0200
+@@ -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,20 @@
          ? 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,18 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 -          ...StackActions.pop(),
 -          source: scene.route.key,
 -        });
--      }
-+      navigation.dispatch(StackActions.pop({ key: scene.route.key }));
++      const key = navigation.isFirstRouteInParent()
++        ? // If we're the first route, we're going back to a parent navigator
++          // So we need to get the key of the route we're nested in
++          navigation.dangerouslyGetParent()?.state.key
++        : scene.route.key;
++
++      if (key !== undefined) {
++        navigation.dispatch(StackActions.pop({ key }));
+       }
      }, 50),
      [navigation, scene.route.key]
-   );
-@@ -63,7 +60,10 @@
+@@ -64,7 +70,10 @@
        leftLabel={leftLabel}
        headerTitle={
          typeof options.headerTitle !== 'function'
@@ -315,7 +342,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 +81,18 @@
      />
    );
  });
@@ -335,33 +362,34 @@ 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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Header/HeaderBackButton.tsx	2020-04-22 16:34:39.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/views/Header/HeaderBackButton.tsx	2020-06-24 23:21:49.000000000 +0200
 @@ -8,9 +8,9 @@
    StyleSheet,
    LayoutChangeEvent,
  } from 'react-native';
 -import { useTheme } from '@react-navigation/native';
  import MaskedView from '../MaskedView';
- import TouchableItem from '../TouchableItem';
+ 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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Header/HeaderBackground.tsx	2020-04-22 16:34:39.000000000 +0200
-@@ -1,6 +1,6 @@
- import * as React from 'react';
- import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/views/Header/HeaderBackground.tsx	2020-06-24 23:16:23.000000000 +0200
+@@ -7,7 +7,7 @@
+   StyleProp,
+   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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Header/HeaderContainer.tsx	2020-04-22 16:34:39.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-06-25 01:58:50.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 +400,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 @@
-   forSlideRight,
- } from '../../TransitionConfigs/HeaderStyleInterpolators';
- import {
-+  Route,
+@@ -19,6 +14,7 @@
+ import PreviousSceneContext from '../../utils/PreviousSceneContext';
+ import type {
    Layout,
++  Route,
    Scene,
    StackHeaderStyleInterpolator,
-@@ -99,9 +95,7 @@
+   StackNavigationProp,
+@@ -109,9 +105,7 @@
            insets,
            scene,
            previous,
@@ -394,7 +422,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 +431,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
                <View
                  onLayout={
                    onContentHeightChange
-@@ -152,7 +146,7 @@
-                   )
-                 ) : null}
+@@ -156,7 +150,7 @@
+               >
+                 {header !== undefined ? header(props) : <Header {...props} />}
                </View>
 -            </NavigationRouteContext.Provider>
 +            </>
@@ -413,14 +441,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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Header/HeaderSegment.tsx	2020-04-22 16:34:39.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-06-25 01:58:50.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 { Route } from '@react-navigation/native';
-+import { NavigationRoute } from 'react-navigation';
+ import type { EdgeInsets } from 'react-native-safe-area-context';
+-import type { Route } from '@react-navigation/native';
++import type { NavigationRoute } from 'react-navigation';
  import HeaderBackButton from './HeaderBackButton';
  import HeaderBackground from './HeaderBackground';
  import memoize from '../../utils/memoize';
@@ -434,20 +462,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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Header/HeaderTitle.tsx	2020-04-22 16:34:39.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-06-25 01:58:50.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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Stack/Card.tsx	2020-04-22 16:34:39.000000000 +0200
-@@ -138,7 +138,7 @@
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/views/Stack/Card.tsx	2020-06-24 23:16:23.000000000 +0200
+@@ -146,7 +146,7 @@
  
    private interactionHandle: number | undefined;
  
@@ -457,62 +485,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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Stack/CardContainer.tsx	2020-04-22 16:34:39.000000000 +0200
-@@ -1,10 +1,16 @@
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/views/Stack/CardContainer.tsx	2020-06-24 23:20:38.000000000 +0200
+@@ -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 { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types';
+ import HeaderShownContext from '../../utils/HeaderShownContext';
+ import PreviousSceneContext from '../../utils/PreviousSceneContext';
 +import useTheme from '../../../utils/useTheme';
-+import {
+ import type {
 +  Route,
-+  Scene,
-+  Layout,
-+  StackHeaderMode,
-+  TransitionPreset,
-+} from '../../types';
- 
- type Props = TransitionPreset & {
-   index: number;
-@@ -183,7 +189,7 @@
-           ? { marginTop: headerHeight }
-           : null
-       }
--      contentStyle={[{ backgroundColor: colors.background }, cardStyle]}
-+      contentStyle={[{ backgroundColor: colors.background }, cardStyle] as any}
-       style={StyleSheet.absoluteFill}
-     >
-       <View style={styles.container}>
+   Scene,
+   Layout,
+   StackHeaderMode,
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Stack/CardStack.tsx	2020-04-22 16:35:12.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-06-25 01:58:50.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 { Route, StackNavigationState } from '@react-navigation/native';
-+import { NavigationState as StackNavigationState } from 'react-navigation';
+ import type { EdgeInsets } from 'react-native-safe-area-context';
+-import type { Route, StackNavigationState } from '@react-navigation/native';
++import type { NavigationState as StackNavigationState } from 'react-navigation';
  
  import { MaybeScreenContainer, MaybeScreen } from '../Screens';
  import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
-@@ -21,6 +21,7 @@
- import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
- import getDistanceForDirection from '../../utils/getDistanceForDirection';
- import {
-+  Route,
+@@ -25,6 +25,7 @@
    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-04-22 16:34:01.000000000 +0200
-+++ src/vendor/views/Stack/StackView.tsx	2020-04-22 16:38:12.000000000 +0200
-@@ -4,9 +4,10 @@
- import { GestureHandlerRootView } from 'react-native-gesture-handler';
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-06-25 01:58:50.000000000 +0200
++++ src/vendor/views/Stack/StackView.tsx	2020-06-24 23:19:46.000000000 +0200
+@@ -2,11 +2,11 @@
+ import { View, Platform, StyleSheet } from 'react-native';
+ import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
  import {
+-  NavigationHelpersContext,
    StackActions,
 -  StackNavigationState,
 -  Route,
@@ -522,17 +539,17 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 +  SceneView,
 +} from 'react-navigation';
  
+ import { GestureHandlerRootView } from '../GestureHandler';
  import CardStack from './CardStack';
- import KeyboardManager from '../KeyboardManager';
-@@ -15,6 +16,7 @@
+@@ -16,6 +16,7 @@
  } from '../Header/HeaderContainer';
  import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
- import {
+ import type {
 +  Route,
    StackNavigationHelpers,
    StackNavigationConfig,
    StackDescriptorMap,
-@@ -24,6 +26,7 @@
+@@ -25,6 +26,7 @@
    state: StackNavigationState;
    navigation: StackNavigationHelpers;
    descriptors: StackDescriptorMap;
@@ -540,7 +557,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
  };
  
  type State = {
-@@ -292,7 +295,9 @@
+@@ -293,7 +295,9 @@
          return false;
        }
  
@@ -551,7 +568,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
      }
  
      return false;
-@@ -320,23 +325,44 @@
+@@ -321,26 +325,49 @@
        return null;
      }
  
@@ -587,22 +604,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;
  
--    if (
--      state.routeNames.includes(route.name) &&
--      !state.routes.some((r) => r.key === route.key)
--    ) {
 +    this.handleTransitionComplete();
 +
-+    if (!state.routes.some((r) => r.key === route.key)) {
-       // If route isn't present in current state, assume that a close animation was cancelled
+     if (
+       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, 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
-@@ -362,12 +388,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
@@ -619,7 +638,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),
-@@ -384,22 +409,24 @@
+@@ -388,26 +414,29 @@
    private handleTransitionStart = (
      { route }: { route: Route<string> },
      closing: boolean
@@ -656,3 +675,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,120 @@ 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"
+              aria-level="1"
+              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 +137,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
         }
       }
     >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      />
       <View
         accessibilityElementsHidden={false}
         closing={false}
@@ -37,6 +153,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
         onClose={[Function]}
         onGestureBegin={[Function]}
         onGestureCanceled={[Function]}
+        onGestureEnd={[Function]}
         onOpen={[Function]}
         onTransitionStart={[Function]}
         pointerEvents="box-none"
@@ -57,8 +174,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
-                "restSpeedThreshold": 0.01,
+                "restDisplacementThreshold": 10,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -68,8 +185,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
-                "restSpeedThreshold": 0.01,
+                "restDisplacementThreshold": 10,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -81,7 +198,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
           style={
             Object {
               "flex": 1,
-              "marginTop": 44,
             }
           }
         >
@@ -174,7 +290,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                         style={
                           Object {
                             "flex": 1,
-                            "overflow": "hidden",
                           }
                         }
                       >
@@ -190,6 +305,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                             }
                           }
                         >
+                          <View
+                            collapsable={false}
+                            style={
+                              Object {
+                                "opacity": 1,
+                              }
+                            }
+                          />
                           <View
                             accessibilityElementsHidden={false}
                             closing={false}
@@ -198,6 +321,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                             onClose={[Function]}
                             onGestureBegin={[Function]}
                             onGestureCanceled={[Function]}
+                            onGestureEnd={[Function]}
                             onOpen={[Function]}
                             onTransitionStart={[Function]}
                             pointerEvents="box-none"
@@ -218,8 +342,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                                     "damping": 500,
                                     "mass": 3,
                                     "overshootClamping": true,
-                                    "restDisplacementThreshold": 0.01,
-                                    "restSpeedThreshold": 0.01,
+                                    "restDisplacementThreshold": 10,
+                                    "restSpeedThreshold": 10,
                                     "stiffness": 1000,
                                   },
                                 },
@@ -229,8 +353,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                                     "damping": 500,
                                     "mass": 3,
                                     "overshootClamping": true,
-                                    "restDisplacementThreshold": 0.01,
-                                    "restSpeedThreshold": 0.01,
+                                    "restDisplacementThreshold": 10,
+                                    "restSpeedThreshold": 10,
                                     "stiffness": 1000,
                                   },
                                 },
@@ -242,7 +366,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                               style={
                                 Object {
                                   "flex": 1,
-                                  "marginTop": 44,
+                                  "marginTop": 0,
                                 }
                               }
                             >
@@ -334,110 +458,19 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                       <View
                         pointerEvents="box-none"
                         style={
-                          Object {
-                            "left": 0,
-                            "position": "absolute",
-                            "right": 0,
-                            "top": 0,
-                          }
+                          Array [
+                            Object {
+                              "zIndex": 1,
+                            },
+                            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 +481,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 {
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
+      Array [
+        Object {
+          "zIndex": 1,
+        },
+        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,13 +93,14 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
             pointerEvents="box-none"
             style={
               Object {
-                "marginHorizontal": 18,
+                "marginHorizontal": 16,
                 "opacity": 1,
               }
             }
           >
             <Text
               accessibilityRole="header"
+              aria-level="1"
               numberOfLines={1}
               onLayout={[Function]}
               style={
@@ -294,23 +134,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 +154,14 @@ exports[`StackNavigator renders successfully 1`] = `
         }
       }
     >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      />
       <View
         accessibilityElementsHidden={false}
         closing={false}
@@ -334,6 +170,7 @@ exports[`StackNavigator renders successfully 1`] = `
         onClose={[Function]}
         onGestureBegin={[Function]}
         onGestureCanceled={[Function]}
+        onGestureEnd={[Function]}
         onOpen={[Function]}
         onTransitionStart={[Function]}
         pointerEvents="box-none"
@@ -354,8 +191,8 @@ exports[`StackNavigator renders successfully 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
-                "restSpeedThreshold": 0.01,
+                "restDisplacementThreshold": 10,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -365,8 +202,8 @@ exports[`StackNavigator renders successfully 1`] = `
                 "damping": 500,
                 "mass": 3,
                 "overshootClamping": true,
-                "restDisplacementThreshold": 0.01,
-                "restSpeedThreshold": 0.01,
+                "restDisplacementThreshold": 10,
+                "restSpeedThreshold": 10,
                 "stiffness": 1000,
               },
             },
@@ -378,7 +215,6 @@ exports[`StackNavigator renders successfully 1`] = `
           style={
             Object {
               "flex": 1,
-              "marginTop": 44,
             }
           }
         >
@@ -467,15 +303,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 {
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
+      Array [
+        Object {
+          "zIndex": 1,
+        },
+        false,
+      ]
     }
   >
     <View
@@ -486,7 +333,7 @@ exports[`StackNavigator renders successfully 1`] = `
       style={null}
     >
       <View
-        pointerEvents="none"
+        pointerEvents="box-none"
         style={
           Object {
             "bottom": 0,
@@ -495,6 +342,7 @@ exports[`StackNavigator renders successfully 1`] = `
             "position": "absolute",
             "right": 0,
             "top": 0,
+            "zIndex": 0,
           }
         }
       >
@@ -551,13 +399,14 @@ exports[`StackNavigator renders successfully 1`] = `
             pointerEvents="box-none"
             style={
               Object {
-                "marginHorizontal": 18,
+                "marginHorizontal": 16,
                 "opacity": 1,
               }
             }
           >
             <Text
               accessibilityRole="header"
+              aria-level="1"
               numberOfLines={1}
               onLayout={[Function]}
               style={
@@ -575,5 +424,174 @@ 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]}
+        onGestureEnd={[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 { StackNavigationOptions, StackNavigationConfig } from '../vendor/types';
+import type { StyleProp, ViewStyle } from 'react-native';
+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 { StackNavigationOptions } from '../vendor/types';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+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 { Platform } from 'react-native';
+import type { TransitionPreset } from '../types';
 
 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,
-    restSpeedThreshold: 0.01,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
   },
 };
 

packages/stack/src/vendor/types.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
   Animated,
   StyleProp,
   TextStyle,
   ViewStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
-import {
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import type {
   NavigationRoute,
   NavigationState,
   NavigationScreenProp,
@@ -21,6 +21,7 @@ import {
 } from 'react-navigation';
 
 // @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type Route<T extends string> = NavigationRoute;
 
 export type NavigationStackState = NavigationState;
@@ -40,6 +41,18 @@ export type StackNavigationEventMap = {
    * Event which fires when a transition animation ends.
    */
   transitionEnd: { data: { closing: boolean } };
+  /**
+   * Event which fires when navigation gesture starts.
+   */
+  gestureStart: { data: undefined };
+  /**
+   * Event which fires when navigation gesture is completed.
+   */
+  gestureEnd: { data: undefined };
+  /**
+   * Event which fires when navigation gesture is canceled.
+   */
+  gestureCancel: { data: undefined };
 };
 
 export type StackNavigationHelpers = NavigationProp<NavigationStackState>;
@@ -124,14 +137,14 @@ export type StackHeaderOptions = {
   /**
    * Style object for the title component.
    */
-  headerTitleStyle?: React.ComponentProps<typeof Animated.Text>['style'];
+  headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
   /**
    * Style object for the container of the `headerTitle` component, for example to add padding.
    * By default, `headerTitleContainerStyle` is with an absolute position style and offsets both `left` and `right`.
    * 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 +158,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 +183,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 +191,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 +213,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.
@@ -287,7 +301,9 @@ export type StackNavigationOptions = StackHeaderOptions &
     /**
      * Function that returns a React Element to display as a overlay for the card.
      */
-    cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
+    cardOverlay?: (props: {
+      style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    }) => React.ReactNode;
     /**
      * Style object for the card in stack.
      * You can provide a custom background color to use instead of the default background here.
@@ -300,7 +316,8 @@ export type StackNavigationOptions = StackHeaderOptions &
     cardStyle?: StyleProp<ViewStyle>;
     /**
      * Whether transition animation should be enabled the screen.
-     * If you set it to `false`, the screen won't animate when pushing or popping. Defaults to `true`.
+     * If you set it to `false`, the screen won't animate when pushing or popping.
+     * Defaults to `true` on Android and iOS, `false` on Web.
      */
     animationEnabled?: boolean;
     /**
@@ -310,10 +327,12 @@ export type StackNavigationOptions = StackHeaderOptions &
     animationTypeForReplace?: 'push' | 'pop';
     /**
      * Whether you can use gestures to dismiss this screen. Defaults to `true` on iOS, `false` on Android.
+     * Not supported on Web.
      */
     gestureEnabled?: boolean;
     /**
      * Object to override the distance of touch start from the edge of the screen to recognize gestures.
+     * Not supported on Web.
      */
     gestureResponseDistance?: {
       /**
@@ -326,8 +345,8 @@ export type StackNavigationOptions = StackHeaderOptions &
       horizontal?: number;
     };
     /**
-     * Number which determines the relevance of velocity for the gesture.
-     * Defaults to 0.3.
+     * Number which determines the relevance of velocity for the gesture. Defaults to 0.3.
+     * Not supported on Web.
      */
     gestureVelocityImpact?: number;
     /**
@@ -394,7 +413,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.
    */
@@ -419,6 +438,10 @@ export type StackHeaderLeftButtonProps = {
    * Accessibility label for the button for screen readers.
    */
   accessibilityLabel?: string;
+  /**
+   * Style object for the button.
+   */
+  style?: StyleProp<ViewStyle>;
 };
 
 export type StackHeaderTitleProps = {
@@ -441,7 +464,7 @@ export type StackHeaderTitleProps = {
   /**
    * Style object for the title element.
    */
-  style?: React.ComponentProps<typeof Animated.Text>['style'];
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
 
 export type TransitionSpec =

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/GestureHandlerRefContext.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { PanGestureHandler } from 'react-native-gesture-handler';
 
-export default React.createContext<React.Ref<PanGestureHandler> | undefined>(
-  undefined
-);
+export default React.createContext<React.Ref<
+  import('react-native-gesture-handler').PanGestureHandler
+> | null>(null);

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,6 @@ export default class BorderlessButton extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
-      // @ts-ignore
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}

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

@@ -0,0 +1 @@
+export * from './GestureHandlerNative';

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

@@ -0,0 +1 @@
+export * from './GestureHandlerNative';

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

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

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

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

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,18 @@ 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 }));
+      const key = navigation.isFirstRouteInParent()
+        ? // If we're the first route, we're going back to a parent navigator
+          // So we need to get the key of the route we're nested in
+          navigation.dangerouslyGetParent()?.state.key
+        : scene.route.key;
+
+      if (key !== undefined) {
+        navigation.dispatch(StackActions.pop({ key }));
+      }
     }, 50),
     [navigation, scene.route.key]
   );

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

@@ -8,10 +8,10 @@ import {
   StyleSheet,
   LayoutChangeEvent,
 } from 'react-native';
+import useTheme from '../../../utils/useTheme';
 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;
 
@@ -30,6 +30,7 @@ export default function HeaderBackButton({
   titleLayout,
   truncatedLabel = 'Back',
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  style,
 }: Props) {
   const { dark, colors } = useTheme();
 
@@ -160,7 +161,7 @@ export default function HeaderBackButton({
       delayPressIn={0}
       onPress={disabled ? undefined : handlePress}
       pressColor={pressColorAndroid}
-      style={[styles.container, disabled && styles.disabled]}
+      style={[styles.container, disabled && styles.disabled, style]}
       hitSlop={Platform.select({
         ios: undefined,
         default: { top: 16, right: 16, bottom: 16, left: 16 },

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 {
-  Route,
+import HeaderShownContext from '../../utils/HeaderShownContext';
+import PreviousSceneContext from '../../utils/PreviousSceneContext';
+import type {
   Layout,
+  Route,
   Scene,
   StackHeaderStyleInterpolator,
   StackNavigationProp,
@@ -24,9 +26,9 @@ export type Props = {
   layout: Layout;
   insets: EdgeInsets;
   scenes: (Scene<Route<string>> | undefined)[];
-  getPreviousRoute: (props: {
+  getPreviousScene: (props: {
     route: Route<string>;
-  }) => Route<string> | undefined;
+  }) => Scene<Route<string>> | undefined;
   getFocusedRoute: () => Route<string>;
   onContentHeightChange?: (props: {
     route: Route<string>;
@@ -42,14 +44,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 +62,38 @@ export default function HeaderContainer({
           return null;
         }
 
-        const { options } = scene.descriptor;
-        const isFocused = focusedRoute.key === scene.route.key;
-        const previousRoute = getPreviousRoute({ route: scene.route });
+        const {
+          header,
+          headerShown = isParentHeaderShown === false,
+          headerTransparent,
+        } = scene.descriptor.options || {};
 
-        let previous;
-
-        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;
-            }
-          }
+        if (!headerShown) {
+          return null;
         }
 
+        const isFocused = focusedRoute.key === scene.route.key;
+        const previous =
+          getPreviousScene({ route: scene.route }) ?? 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 &&
-            previousScene.descriptor.options.headerShown === false &&
+          (previousHeaderShown === 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 +139,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 ? (
-                  options.header !== undefined ? (
-                    options.header(props)
-                  ) : (
-                    <Header {...props} />
-                  )
-                ) : null}
+                {header !== undefined ? header(props) : <Header {...props} />}
               </View>
             </>
           </NavigationContext.Provider>