chore: publish

- react-navigation-stack@2.7.0

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>

packages/stack/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0](https://github.com/react-navigation/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)
 
 

packages/stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-stack",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Stack navigator component for React Navigation",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
     "@react-native-community/masked-view": "^0.1.7",
-    "@react-navigation/stack": "^5.4.2",
+    "@react-navigation/stack": "^5.5.1",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",

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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/index.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/index.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/index.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -3,11 +3,6 @@
  import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
  import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
@@ -28,7 +28,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/index.tsx src/vendor/i
    StackHeaderLeftButtonProps,
    StackHeaderTitleProps,
 diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx src/vendor/navigators/createStackNavigator.tsx
---- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/navigators/createStackNavigator.tsx	2020-06-08 11:22:56.000000000 +0200
 +++ src/vendor/navigators/createStackNavigator.tsx	1970-01-01 01:00:00.000000000 +0100
 @@ -1,96 +0,0 @@
 -import * as React from 'react';
@@ -128,8 +128,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/navigators/createStack
 -  typeof StackNavigator
 ->(StackNavigator);
 diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/types.tsx
---- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/types.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/types.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/types.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -8,15 +8,28 @@
  } from 'react-native';
  import { EdgeInsets } from 'react-native-safe-area-context';
@@ -218,7 +218,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
  };
  
  export type Layout = { width: number; height: number };
-@@ -227,24 +239,27 @@
+@@ -228,24 +240,27 @@
    /**
     * Navigation prop for the header.
     */
@@ -252,7 +252,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
  export type StackNavigationOptions = StackHeaderOptions &
    Partial<TransitionPreset> & {
      /**
-@@ -329,6 +344,8 @@
+@@ -330,6 +345,8 @@
        bottom?: number;
        left?: number;
      };
@@ -262,8 +262,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/types.tsx src/vendor/t
  
  export type StackNavigationConfig = {
 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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/Header.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Header/Header.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Header/Header.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -1,12 +1,14 @@
  import * as React from 'react';
 -import { StackActions } from '@react-navigation/native';
@@ -344,8 +344,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/Header.ts
 +
 +export default Header;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx src/vendor/views/Header/HeaderBackButton.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackButton.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Header/HeaderBackButton.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Header/HeaderBackButton.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -8,9 +8,9 @@
    StyleSheet,
    LayoutChangeEvent,
@@ -358,8 +358,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
  
  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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBackground.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Header/HeaderBackground.tsx	2020-06-06 02:23:41.000000000 +0200
++++ src/vendor/views/Header/HeaderBackground.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -7,7 +7,7 @@
    StyleProp,
    ViewStyle,
@@ -370,8 +370,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderBac
  type Props = ViewProps & {
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx src/vendor/views/Header/HeaderContainer.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderContainer.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Header/HeaderContainer.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Header/HeaderContainer.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -1,11 +1,6 @@
  import * as React from 'react';
  import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
@@ -385,15 +385,15 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
  import { EdgeInsets } from 'react-native-safe-area-context';
  
  import Header from './Header';
-@@ -16,6 +11,7 @@
+@@ -17,6 +12,7 @@
-   forSlideRight,
  } from '../../TransitionConfigs/HeaderStyleInterpolators';
+ import HeaderShownContext from '../../utils/HeaderShownContext';
  import {
 +  Route,
    Layout,
    Scene,
    StackHeaderStyleInterpolator,
-@@ -99,9 +95,7 @@
+@@ -117,9 +113,7 @@
            insets,
            scene,
            previous,
@@ -404,7 +404,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
            styleInterpolator:
              mode === 'float'
                ? isHeaderStatic
-@@ -120,7 +114,7 @@
+@@ -138,7 +132,7 @@
              key={scene.route.key}
              value={scene.descriptor.navigation}
            >
@@ -413,9 +413,9 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
                <View
                  onLayout={
                    onContentHeightChange
-@@ -152,7 +146,7 @@
+@@ -164,7 +158,7 @@
-                   )
+               >
-                 ) : null}
+                 {header !== undefined ? header(props) : <Header {...props} />}
                </View>
 -            </NavigationRouteContext.Provider>
 +            </>
@@ -423,8 +423,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderCon
          );
        })}
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx src/vendor/views/Header/HeaderSegment.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderSegment.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Header/HeaderSegment.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Header/HeaderSegment.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -8,7 +8,7 @@
    ViewStyle,
  } from 'react-native';
@@ -444,8 +444,8 @@ 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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTitle.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Header/HeaderTitle.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Header/HeaderTitle.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -1,6 +1,6 @@
  import * as React from 'react';
  import { Animated, StyleSheet, Platform } from 'react-native';
@@ -455,8 +455,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Header/HeaderTit
  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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/Card.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Stack/Card.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Stack/Card.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -146,7 +146,7 @@
  
    private interactionHandle: number | undefined;
@@ -467,15 +467,16 @@ 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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Stack/CardContainer.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Stack/CardContainer.tsx	2020-06-08 11:23:27.000000000 +0200
-@@ -1,10 +1,11 @@
+@@ -1,11 +1,12 @@
  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 Card from './Card';
  import HeaderHeightContext from '../../utils/HeaderHeightContext';
+ import HeaderShownContext from '../../utils/HeaderShownContext';
 +import useTheme from '../../../utils/useTheme';
  import {
 +  Route,
@@ -483,8 +484,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardContai
    Layout,
    StackHeaderMode,
 diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx src/vendor/views/Stack/CardStack.tsx
---- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Stack/CardStack.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Stack/CardStack.tsx	2020-06-08 11:23:27.000000000 +0200
 @@ -7,7 +7,7 @@
    Platform,
  } from 'react-native';
@@ -494,8 +495,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
  
  import { MaybeScreenContainer, MaybeScreen } from '../Screens';
  import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
-@@ -21,6 +21,7 @@
+@@ -22,6 +22,7 @@
- import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
+ import HeaderShownContext from '../../utils/HeaderShownContext';
  import getDistanceForDirection from '../../utils/getDistanceForDirection';
  import {
 +  Route,
@@ -503,8 +504,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/CardStack.
    StackHeaderMode,
    StackCardMode,
 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-06-06 02:18:25.000000000 +0200
+--- ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx	2020-06-08 11:22:56.000000000 +0200
-+++ src/vendor/views/Stack/StackView.tsx	2020-06-06 02:22:30.000000000 +0200
++++ src/vendor/views/Stack/StackView.tsx	2020-06-08 11:23:40.000000000 +0200
 @@ -2,11 +2,11 @@
  import { View, Platform, StyleSheet } from 'react-native';
  import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
@@ -548,7 +549,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
      }
  
      return false;
-@@ -321,24 +325,47 @@
+@@ -321,26 +325,49 @@
        return null;
      }
  
@@ -584,22 +585,24 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
 +
    private handleOpenRoute = ({ route }: { route: Route<string> }) => {
      const { state, navigation } = this.props;
+     const { closingRouteKeys, replacingRouteKeys } = this.state;
  
 +    this.handleTransitionComplete();
 +
      if (
-       this.state.replacingRouteKeys.every((key) => key !== route.key) &&
+       closingRouteKeys.some((key) => key === route.key) &&
+       replacingRouteKeys.every((key) => key !== route.key) &&
 -      state.routeNames.includes(route.name) &&
        !state.routes.some((r) => r.key === route.key)
      ) {
-       // If route isn't present in current state, assume that a close animation was cancelled
+       // If route isn't present in current state, but was closing, assume that a close animation was cancelled
        // So we need to add this route back to the state
 -      navigation.navigate(route);
 +      navigation.dispatch(NavigationActions.navigate(route));
      } else {
        this.setState((state) => ({
          routes: state.replacingRouteKeys.length
-@@ -364,12 +391,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
@@ -616,7 +619,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
        // We need to clean up any state tracking the route and pop it immediately
        this.setState((state) => ({
          routes: state.routes.filter((r) => r.key !== route.key),
-@@ -386,26 +412,29 @@
+@@ -388,26 +414,29 @@
    private handleTransitionStart = (
      { route }: { route: Route<string> },
      closing: boolean
@@ -658,8 +661,8 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
        navigation,
        keyboardHandlingEnabled,
        mode = 'card',
-@@ -423,7 +452,7 @@
+@@ -425,7 +454,7 @@
-       mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
+     } = this.state;
  
      return (
 -      <NavigationHelpersContext.Provider value={navigation}>
@@ -667,7 +670,7 @@ diff -Naur ../../node_modules/@react-navigation/stack/src/views/Stack/StackView.
          <GestureHandlerWrapper style={styles.container}>
            <SafeAreaProviderCompat>
              <SafeAreaConsumer>
-@@ -456,7 +485,7 @@
+@@ -458,7 +487,7 @@
              </SafeAreaConsumer>
            </SafeAreaProviderCompat>
          </GestureHandlerWrapper>

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

@@ -10,6 +10,14 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
 >
   <View
     pointerEvents="box-none"
+    style={
+      Array [
+        Object {
+          "zIndex": 1,
+        },
+        false,
+      ]
+    }
   >
     <View
       accessibilityElementsHidden={false}
@@ -180,6 +188,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
           style={
             Object {
               "flex": 1,
+              "opacity": 1,
             }
           }
         >
@@ -267,106 +276,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                         }
                       }
                     >
-                      <View
-                        pointerEvents="box-none"
-                      >
-                        <View
-                          accessibilityElementsHidden={false}
-                          importantForAccessibility="auto"
-                          onLayout={[Function]}
-                          pointerEvents="box-none"
-                          style={null}
-                        >
-                          <View
-                            pointerEvents="box-none"
-                            style={
-                              Object {
-                                "bottom": 0,
-                                "left": 0,
-                                "opacity": 1,
-                                "position": "absolute",
-                                "right": 0,
-                                "top": 0,
-                                "zIndex": 0,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                Object {
-                                  "backgroundColor": "#fff",
-                                  "borderBottomColor": "#a7a7aa",
-                                  "flex": 1,
-                                  "shadowColor": "#a7a7aa",
-                                  "shadowOffset": Object {
-                                    "height": 0.5,
-                                    "width": 0,
-                                  },
-                                  "shadowOpacity": 0.85,
-                                  "shadowRadius": 0,
-                                }
-                              }
-                            />
-                          </View>
-                          <View
-                            pointerEvents="box-none"
-                            style={
-                              Object {
-                                "height": 44,
-                                "maxHeight": undefined,
-                                "minHeight": undefined,
-                                "opacity": undefined,
-                                "transform": undefined,
-                              }
-                            }
-                          >
-                            <View
-                              pointerEvents="none"
-                              style={
-                                Object {
-                                  "height": 0,
-                                }
-                              }
-                            />
-                            <View
-                              pointerEvents="box-none"
-                              style={
-                                Object {
-                                  "alignItems": "center",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                }
-                              }
-                            >
-                              <View
-                                pointerEvents="box-none"
-                                style={
-                                  Object {
-                                    "marginHorizontal": 16,
-                                    "opacity": 1,
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityRole="header"
-                                  numberOfLines={1}
-                                  onLayout={[Function]}
-                                  style={
-                                    Object {
-                                      "color": "rgba(0, 0, 0, 0.9)",
-                                      "fontSize": 17,
-                                      "fontWeight": "600",
-                                    }
-                                  }
-                                >
-                                  Home
-                                </Text>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
                       <View
                         onLayout={[Function]}
                         style={
@@ -439,6 +348,8 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                               style={
                                 Object {
                                   "flex": 1,
+                                  "marginTop": 0,
+                                  "opacity": 1,
                                 }
                               }
                             >
@@ -527,6 +438,22 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                           </View>
                         </View>
                       </View>
+                      <View
+                        pointerEvents="box-none"
+                        style={
+                          Array [
+                            Object {
+                              "zIndex": 1,
+                            },
+                            Object {
+                              "left": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            },
+                          ]
+                        }
+                      />
                     </View>
                   </View>
                 </View>

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

@@ -10,6 +10,14 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
 >
   <View
     pointerEvents="box-none"
+    style={
+      Array [
+        Object {
+          "zIndex": 1,
+        },
+        false,
+      ]
+    }
   >
     <View
       accessibilityElementsHidden={false}
@@ -197,6 +205,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
           style={
             Object {
               "flex": 1,
+              "opacity": 1,
             }
           }
         >
@@ -298,6 +307,14 @@ exports[`StackNavigator renders successfully 1`] = `
 >
   <View
     pointerEvents="box-none"
+    style={
+      Array [
+        Object {
+          "zIndex": 1,
+        },
+        false,
+      ]
+    }
   >
     <View
       accessibilityElementsHidden={false}
@@ -469,6 +486,7 @@ exports[`StackNavigator renders successfully 1`] = `
           style={
             Object {
               "flex": 1,
+              "opacity": 1,
             }
           }
         >

packages/stack/src/vendor/types.tsx

@@ -145,7 +145,8 @@ export type StackHeaderOptions = {
    */
   headerBackAllowFontScaling?: boolean;
   /**
-   * Title string used by the back button on iOS, or `null` to disable label. Defaults to the previous scene's `headerTitle`.
+   * Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
+   * Use `headerBackTitleVisible: false` to hide it.
    */
   headerBackTitle?: string;
   /**

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/views/GestureHandler.native.tsx

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

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

@@ -10,6 +10,7 @@ import {
   forNoAnimation,
   forSlideRight,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 import {
   Route,
   Layout,
@@ -50,6 +51,7 @@ export default function HeaderContainer({
   style,
 }: Props) {
   const focusedRoute = getFocusedRoute();
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
 
   return (
     <View pointerEvents="box-none" style={style}>
@@ -58,7 +60,16 @@ export default function HeaderContainer({
           return null;
         }
 
-        const { options } = scene.descriptor;
+        const {
+          header,
+          headerShown = isParentHeaderShown === false,
+          headerTransparent,
+        } = scene.descriptor.options || {};
+
+        if (!headerShown) {
+          return null;
+        }
+
         const isFocused = focusedRoute.key === scene.route.key;
         const previousRoute = getPreviousRoute({ route: scene.route });
 
@@ -81,13 +92,20 @@ export default function HeaderContainer({
         // This makes the header look like it's moving with the screen
         const previousScene = self[i - 1];
         const nextScene = self[i + 1];
+
+        const {
+          headerShown: previousHeaderShown = isParentHeaderShown === false,
+        } = previousScene?.descriptor.options || {};
+
+        const { headerShown: nextHeaderShown = isParentHeaderShown === false } =
+          nextScene?.descriptor.options || {};
+
         const isHeaderStatic =
-          (previousScene &&
+          (previousHeaderShown === false &&
-            previousScene.descriptor.options.headerShown === false &&
             // We still need to animate when coming back from next scene
             // A hacky way to check this is if the next scene exists
             !nextScene) ||
-          (nextScene && nextScene.descriptor.options.headerShown === false);
+          nextHeaderShown === false;
 
         const props = {
           mode,
@@ -133,18 +151,12 @@ export default function HeaderContainer({
                 style={
                   // Avoid positioning the focused header absolutely
                   // Otherwise accessibility tools don't seem to be able to find it
-                  (mode === 'float' && !isFocused) || options.headerTransparent
+                  (mode === 'float' && !isFocused) || headerTransparent
                     ? styles.header
                     : null
                 }
               >
-                {options.headerShown !== false ? (
+                {header !== undefined ? header(props) : <Header {...props} />}
-                  options.header !== undefined ? (
-                    options.header(props)
-                  ) : (
-                    <Header {...props} />
-                  )
-                ) : null}
               </View>
             </>
           </NavigationContext.Provider>

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

@@ -493,6 +493,12 @@ export default class Card extends React.Component<Props> {
       ? Color(backgroundColor).alpha() === 0
       : false;
 
+    // This is a dummy style that doesn't actually change anything visually.
+    // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
+    // If we disable animations and hide header, it could end up making the value unused.
+    // So we have this dummy style that will always be used regardless of what else changed.
+    const dummyStyle = { opacity: Animated.diffClamp(current, 1, 1) };
+
     return (
       <CardAnimationContext.Provider value={animationContext}>
         <View pointerEvents="box-none" {...rest}>
@@ -502,7 +508,12 @@ export default class Card extends React.Component<Props> {
             </View>
           ) : null}
           <Animated.View
-            style={[styles.container, containerStyle, customContainerStyle]}
+            style={[
+              styles.container,
+              dummyStyle,
+              containerStyle,
+              customContainerStyle,
+            ]}
             pointerEvents="box-none"
           >
             <PanGestureHandler

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

@@ -3,6 +3,7 @@ import { Animated, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import HeaderHeightContext from '../../utils/HeaderHeightContext';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 import useTheme from '../../../utils/useTheme';
 import {
   Route,
@@ -54,6 +55,7 @@ type Props = TransitionPreset & {
   gestureVelocityImpact?: number;
   mode: StackCardMode;
   headerMode: StackHeaderMode;
+  headerShown: boolean;
   hasAbsoluteHeader: boolean;
   headerHeight: number;
   onHeaderHeightChange: (props: {
@@ -82,6 +84,7 @@ function CardContainer({
   getFocusedRoute,
   mode,
   headerMode,
+  headerShown,
   headerStyleInterpolator,
   hasAbsoluteHeader,
   headerHeight,
@@ -159,6 +162,9 @@ function CardContainer({
     };
   }, [pointerEvents, scene.progress.next]);
 
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
+
   return (
     <Card
       index={index}
@@ -192,9 +198,13 @@ function CardContainer({
     >
       <View style={styles.container}>
         <View style={styles.scene}>
-          <HeaderHeightContext.Provider value={headerHeight}>
+          <HeaderShownContext.Provider
-            {renderScene({ route: scene.route })}
+            value={isParentHeaderShown || isCurrentHeaderShown}
-          </HeaderHeightContext.Provider>
+          >
+            <HeaderHeightContext.Provider value={headerHeight}>
+              {renderScene({ route: scene.route })}
+            </HeaderHeightContext.Provider>
+          </HeaderShownContext.Provider>
         </View>
         {headerMode === 'screen'
           ? renderHeader({

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

@@ -19,6 +19,7 @@ import {
 } from '../../TransitionConfigs/TransitionPresets';
 import { forNoAnimation as forNoAnimationHeader } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import {
   Route,
@@ -336,24 +337,6 @@ export default class CardStack extends React.Component<Props, State> {
     return state.routes[state.index];
   };
 
-  private doesFloatHeaderNeedAbsolutePositioning = () => {
-    if (this.props.headerMode !== 'float') {
-      return false;
-    }
-
-    return this.state.scenes.slice(-2).some((scene) => {
-      const { descriptor } = scene;
-      const options = descriptor ? descriptor.options : {};
-      const { headerTransparent, headerShown } = options;
-
-      if (headerTransparent || headerShown === false) {
-        return true;
-      }
-
-      return false;
-    });
-  };
-
   render() {
     const {
       mode,
@@ -382,8 +365,6 @@ export default class CardStack extends React.Component<Props, State> {
     const focusedDescriptor = descriptors[focusedRoute.key];
     const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
 
-    const isFloatHeaderAbsolute = this.doesFloatHeaderNeedAbsolutePositioning();
-
     let defaultTransitionPreset =
       mode === 'modal' ? ModalTransition : DefaultTransition;
 
@@ -405,193 +386,225 @@ export default class CardStack extends React.Component<Props, State> {
     // For modals, usually we want the screen underneath to be visible, so also disable it there
     const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
 
-    let floatingHeader;
-
-    if (headerMode === 'float') {
-      floatingHeader = (
-        <React.Fragment key="header">
-          {renderHeader({
-            mode: 'float',
-            layout,
-            insets: { top, right, bottom, left },
-            scenes,
-            getPreviousRoute,
-            getFocusedRoute: this.getFocusedRoute,
-            onContentHeightChange: this.handleHeaderLayout,
-            gestureDirection:
-              focusedOptions.gestureDirection !== undefined
-                ? focusedOptions.gestureDirection
-                : defaultTransitionPreset.gestureDirection,
-            styleInterpolator:
-              focusedOptions.headerStyleInterpolator !== undefined
-                ? focusedOptions.headerStyleInterpolator
-                : defaultTransitionPreset.headerStyleInterpolator,
-            style: isFloatHeaderAbsolute ? styles.floating : undefined,
-          })}
-        </React.Fragment>
-      );
-    }
-
     return (
-      <React.Fragment>
+      <HeaderShownContext.Consumer>
-        {isFloatHeaderAbsolute ? null : floatingHeader}
+        {(isParentHeaderShown) => {
-        <MaybeScreenContainer
+          const isFloatHeaderAbsolute =
-          enabled={isScreensEnabled}
+            headerMode === 'float'
-          style={styles.container}
+              ? this.state.scenes.slice(-2).some((scene) => {
-          onLayout={this.handleLayout}
+                  const { descriptor } = scene;
-        >
+                  const options = descriptor ? descriptor.options : {};
-          {routes.map((route, index, self) => {
+                  const {
-            const focused = focusedRoute.key === route.key;
+                    headerTransparent,
-            const gesture = gestures[route.key];
+                    headerShown = isParentHeaderShown === false,
-            const scene = scenes[index];
+                  } = options;
 
-            const isScreenActive = scene.progress.next
+                  if (headerTransparent || headerShown === false) {
-              ? scene.progress.next.interpolate({
+                    return true;
-                  inputRange: [0, 1 - EPSILON, 1],
-                  outputRange: [1, 1, 0],
-                  extrapolate: 'clamp',
-                })
-              : 1;
-
-            const {
-              safeAreaInsets,
-              headerShown,
-              headerTransparent,
-              cardShadowEnabled,
-              cardOverlayEnabled,
-              cardOverlay,
-              cardStyle,
-              animationEnabled,
-              gestureResponseDistance,
-              gestureVelocityImpact,
-              gestureDirection = defaultTransitionPreset.gestureDirection,
-              transitionSpec = defaultTransitionPreset.transitionSpec,
-              cardStyleInterpolator = animationEnabled === false
-                ? forNoAnimationCard
-                : defaultTransitionPreset.cardStyleInterpolator,
-              headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-            } = scene.descriptor
-              ? scene.descriptor.options
-              : ({} as StackNavigationOptions);
-
-            let transitionConfig = {
-              gestureDirection,
-              transitionSpec,
-              cardStyleInterpolator,
-              headerStyleInterpolator,
-            };
-
-            // When a screen is not the last, it should use next screen's transition config
-            // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
-            // For example combining a slide and a modal transition would look wrong otherwise
-            // With this approach, combining different transition styles in the same navigator mostly looks right
-            // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
-            // but majority of the transitions look alright
-            if (index !== self.length - 1) {
-              const nextScene = scenes[index + 1];
-
-              if (nextScene) {
-                const {
-                  animationEnabled,
-                  gestureDirection = defaultTransitionPreset.gestureDirection,
-                  transitionSpec = defaultTransitionPreset.transitionSpec,
-                  cardStyleInterpolator = animationEnabled === false
-                    ? forNoAnimationCard
-                    : defaultTransitionPreset.cardStyleInterpolator,
-                  headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
-                } = nextScene.descriptor
-                  ? nextScene.descriptor.options
-                  : ({} as StackNavigationOptions);
-
-                transitionConfig = {
-                  gestureDirection,
-                  transitionSpec,
-                  cardStyleInterpolator,
-                  headerStyleInterpolator,
-                };
-              }
-            }
-
-            const {
-              top: safeAreaInsetTop = insets.top,
-              right: safeAreaInsetRight = insets.right,
-              bottom: safeAreaInsetBottom = insets.bottom,
-              left: safeAreaInsetLeft = insets.left,
-            } = safeAreaInsets || {};
-
-            const previousRoute = getPreviousRoute({ route: scene.route });
-
-            let previousScene = scenes[index - 1];
-
-            if (previousRoute) {
-              // The previous scene will be shortly before the current scene in the array
-              // So loop back from current index to avoid looping over the full array
-              for (let j = index - 1; j >= 0; j--) {
-                const s = scenes[j];
-
-                if (s && s.route.key === previousRoute.key) {
-                  previousScene = s;
-                  break;
-                }
-              }
-            }
-
-            return (
-              <MaybeScreen
-                key={route.key}
-                style={StyleSheet.absoluteFill}
-                enabled={isScreensEnabled}
-                active={isScreenActive}
-                pointerEvents="box-none"
-              >
-                <CardContainer
-                  index={index}
-                  active={index === self.length - 1}
-                  focused={focused}
-                  closing={closingRouteKeys.includes(route.key)}
-                  layout={layout}
-                  gesture={gesture}
-                  scene={scene}
-                  previousScene={previousScene}
-                  safeAreaInsetTop={safeAreaInsetTop}
-                  safeAreaInsetRight={safeAreaInsetRight}
-                  safeAreaInsetBottom={safeAreaInsetBottom}
-                  safeAreaInsetLeft={safeAreaInsetLeft}
-                  cardOverlay={cardOverlay}
-                  cardOverlayEnabled={cardOverlayEnabled}
-                  cardShadowEnabled={cardShadowEnabled}
-                  cardStyle={cardStyle}
-                  onPageChangeStart={onPageChangeStart}
-                  onPageChangeConfirm={onPageChangeConfirm}
-                  onPageChangeCancel={onPageChangeCancel}
-                  gestureResponseDistance={gestureResponseDistance}
-                  headerHeight={headerHeights[route.key]}
-                  onHeaderHeightChange={this.handleHeaderLayout}
-                  getPreviousRoute={getPreviousRoute}
-                  getFocusedRoute={this.getFocusedRoute}
-                  mode={mode}
-                  headerMode={headerMode}
-                  hasAbsoluteHeader={
-                    isFloatHeaderAbsolute &&
-                    headerShown !== false &&
-                    !headerTransparent
                   }
-                  renderHeader={renderHeader}
+
-                  renderScene={renderScene}
+                  return false;
-                  onOpenRoute={onOpenRoute}
+                })
-                  onCloseRoute={onCloseRoute}
+              : false;
-                  onTransitionStart={onTransitionStart}
+
-                  onTransitionEnd={onTransitionEnd}
+          const floatingHeader =
-                  gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
+            headerMode === 'float' ? (
-                  gestureVelocityImpact={gestureVelocityImpact}
+              <React.Fragment key="header">
-                  {...transitionConfig}
+                {renderHeader({
-                />
+                  mode: 'float',
-              </MaybeScreen>
+                  layout,
-            );
+                  insets: { top, right, bottom, left },
-          })}
+                  scenes,
-        </MaybeScreenContainer>
+                  getPreviousRoute,
-        {isFloatHeaderAbsolute ? floatingHeader : null}
+                  getFocusedRoute: this.getFocusedRoute,
-      </React.Fragment>
+                  onContentHeightChange: this.handleHeaderLayout,
+                  gestureDirection:
+                    focusedOptions.gestureDirection !== undefined
+                      ? focusedOptions.gestureDirection
+                      : defaultTransitionPreset.gestureDirection,
+                  styleInterpolator:
+                    focusedOptions.headerStyleInterpolator !== undefined
+                      ? focusedOptions.headerStyleInterpolator
+                      : defaultTransitionPreset.headerStyleInterpolator,
+                  style: [
+                    styles.floating,
+                    isFloatHeaderAbsolute && styles.absolute,
+                  ],
+                })}
+              </React.Fragment>
+            ) : null;
+
+          return (
+            <React.Fragment>
+              {isFloatHeaderAbsolute ? null : floatingHeader}
+              <MaybeScreenContainer
+                enabled={isScreensEnabled}
+                style={styles.container}
+                onLayout={this.handleLayout}
+              >
+                {routes.map((route, index, self) => {
+                  const focused = focusedRoute.key === route.key;
+                  const gesture = gestures[route.key];
+                  const scene = scenes[index];
+
+                  const isScreenActive = scene.progress.next
+                    ? scene.progress.next.interpolate({
+                        inputRange: [0, 1 - EPSILON, 1],
+                        outputRange: [1, 1, 0],
+                        extrapolate: 'clamp',
+                      })
+                    : 1;
+
+                  const {
+                    safeAreaInsets,
+                    headerShown = isParentHeaderShown === false,
+                    headerTransparent,
+                    cardShadowEnabled,
+                    cardOverlayEnabled,
+                    cardOverlay,
+                    cardStyle,
+                    animationEnabled,
+                    gestureResponseDistance,
+                    gestureVelocityImpact,
+                    gestureDirection = defaultTransitionPreset.gestureDirection,
+                    transitionSpec = defaultTransitionPreset.transitionSpec,
+                    cardStyleInterpolator = animationEnabled === false
+                      ? forNoAnimationCard
+                      : defaultTransitionPreset.cardStyleInterpolator,
+                    headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+                  } = scene.descriptor
+                    ? scene.descriptor.options
+                    : ({} as StackNavigationOptions);
+
+                  let transitionConfig = {
+                    gestureDirection,
+                    transitionSpec,
+                    cardStyleInterpolator,
+                    headerStyleInterpolator,
+                  };
+
+                  // When a screen is not the last, it should use next screen's transition config
+                  // Many transitions also animate the previous screen, so using 2 different transitions doesn't look right
+                  // For example combining a slide and a modal transition would look wrong otherwise
+                  // With this approach, combining different transition styles in the same navigator mostly looks right
+                  // This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
+                  // but majority of the transitions look alright
+                  if (index !== self.length - 1) {
+                    const nextScene = scenes[index + 1];
+
+                    if (nextScene) {
+                      const {
+                        animationEnabled,
+                        gestureDirection = defaultTransitionPreset.gestureDirection,
+                        transitionSpec = defaultTransitionPreset.transitionSpec,
+                        cardStyleInterpolator = animationEnabled === false
+                          ? forNoAnimationCard
+                          : defaultTransitionPreset.cardStyleInterpolator,
+                        headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
+                      } = nextScene.descriptor
+                        ? nextScene.descriptor.options
+                        : ({} as StackNavigationOptions);
+
+                      transitionConfig = {
+                        gestureDirection,
+                        transitionSpec,
+                        cardStyleInterpolator,
+                        headerStyleInterpolator,
+                      };
+                    }
+                  }
+
+                  const {
+                    top: safeAreaInsetTop = insets.top,
+                    right: safeAreaInsetRight = insets.right,
+                    bottom: safeAreaInsetBottom = insets.bottom,
+                    left: safeAreaInsetLeft = insets.left,
+                  } = safeAreaInsets || {};
+
+                  const previousRoute = getPreviousRoute({
+                    route: scene.route,
+                  });
+
+                  let previousScene = scenes[index - 1];
+
+                  if (previousRoute) {
+                    // The previous scene will be shortly before the current scene in the array
+                    // So loop back from current index to avoid looping over the full array
+                    for (let j = index - 1; j >= 0; j--) {
+                      const s = scenes[j];
+
+                      if (s && s.route.key === previousRoute.key) {
+                        previousScene = s;
+                        break;
+                      }
+                    }
+                  }
+
+                  const headerHeight =
+                    headerMode !== 'none' && headerShown !== false
+                      ? headerHeights[route.key]
+                      : 0;
+
+                  return (
+                    <MaybeScreen
+                      key={route.key}
+                      style={StyleSheet.absoluteFill}
+                      enabled={isScreensEnabled}
+                      active={isScreenActive}
+                      pointerEvents="box-none"
+                    >
+                      <CardContainer
+                        index={index}
+                        active={index === self.length - 1}
+                        focused={focused}
+                        closing={closingRouteKeys.includes(route.key)}
+                        layout={layout}
+                        gesture={gesture}
+                        scene={scene}
+                        previousScene={previousScene}
+                        safeAreaInsetTop={safeAreaInsetTop}
+                        safeAreaInsetRight={safeAreaInsetRight}
+                        safeAreaInsetBottom={safeAreaInsetBottom}
+                        safeAreaInsetLeft={safeAreaInsetLeft}
+                        cardOverlay={cardOverlay}
+                        cardOverlayEnabled={cardOverlayEnabled}
+                        cardShadowEnabled={cardShadowEnabled}
+                        cardStyle={cardStyle}
+                        onPageChangeStart={onPageChangeStart}
+                        onPageChangeConfirm={onPageChangeConfirm}
+                        onPageChangeCancel={onPageChangeCancel}
+                        gestureResponseDistance={gestureResponseDistance}
+                        headerHeight={headerHeight}
+                        onHeaderHeightChange={this.handleHeaderLayout}
+                        getPreviousRoute={getPreviousRoute}
+                        getFocusedRoute={this.getFocusedRoute}
+                        mode={mode}
+                        headerMode={headerMode}
+                        headerShown={headerShown}
+                        hasAbsoluteHeader={
+                          isFloatHeaderAbsolute && !headerTransparent
+                        }
+                        renderHeader={renderHeader}
+                        renderScene={renderScene}
+                        onOpenRoute={onOpenRoute}
+                        onCloseRoute={onCloseRoute}
+                        onTransitionStart={onTransitionStart}
+                        onTransitionEnd={onTransitionEnd}
+                        gestureEnabled={
+                          index !== 0 && getGesturesEnabled({ route })
+                        }
+                        gestureVelocityImpact={gestureVelocityImpact}
+                        {...transitionConfig}
+                      />
+                    </MaybeScreen>
+                  );
+                })}
+              </MaybeScreenContainer>
+              {isFloatHeaderAbsolute ? floatingHeader : null}
+            </React.Fragment>
+          );
+        }}
+      </HeaderShownContext.Consumer>
     );
   }
 }
@@ -600,10 +613,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  floating: {
+  absolute: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
   },
+  floating: {
+    zIndex: 1,
+  },
 });

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

@@ -356,14 +356,16 @@ export default class StackView extends React.Component<Props, State> {
 
   private handleOpenRoute = ({ route }: { route: Route<string> }) => {
     const { state, navigation } = this.props;
+    const { closingRouteKeys, replacingRouteKeys } = this.state;
 
     this.handleTransitionComplete();
 
     if (
-      this.state.replacingRouteKeys.every((key) => key !== route.key) &&
+      closingRouteKeys.some((key) => key === route.key) &&
+      replacingRouteKeys.every((key) => key !== route.key) &&
       !state.routes.some((r) => r.key === route.key)
     ) {
-      // If route isn't present in current state, assume that a close animation was cancelled
+      // If route isn't present in current state, but was closing, assume that a close animation was cancelled
       // So we need to add this route back to the state
       navigation.dispatch(NavigationActions.navigate(route));
     } else {
@@ -438,6 +440,9 @@ export default class StackView extends React.Component<Props, State> {
       navigation,
       keyboardHandlingEnabled,
       mode = 'card',
+      headerMode = mode === 'card' && Platform.OS === 'ios'
+        ? 'float'
+        : 'screen',
       ...rest
     } = this.props;
 
@@ -448,9 +453,6 @@ export default class StackView extends React.Component<Props, State> {
       closingRouteKeys,
     } = this.state;
 
-    const headerMode =
-      mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
-
     return (
       <>
         <GestureHandlerWrapper style={styles.container}>

yarn.lock

@@ -3202,10 +3202,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903"
   integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw==
 
-"@react-navigation/stack@^5.4.2":
+"@react-navigation/stack@^5.5.1":
-  version "5.4.2"
+  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.4.2.tgz#ca4e77e8ab55b446e44f656068702825ec3b29d3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.5.1.tgz#95efa28edbfd1323e5ad9f01f539d43ffad8decc"
-  integrity sha512-EG8DqHsfg257XeNaO6MIeAnPClekmr8po3PYikezyXon02rJUmHU4px25/PWOvh1hTFiH40W4WYBKzrzMBFaOQ==
+  integrity sha512-oU2FEm+Ba6jMd5VA2WnuNfCO2HlZmGhrEX9yjBCyFj7fFCG1SB7WJdKLhZShtx3KxG/qWKphICeTLlYvkHdSpQ==
   dependencies:
     color "^3.1.2"
     react-native-iphone-x-helper "^1.2.1"