react-navigation-stack - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [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)
@@ -8,0 +19,0 @@

lib/commonjs/vendor/views/GestureHandler.native.js

@@ -38,2 +38,4 @@ "use strict";
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function PanGestureHandler(props) {
@@ -43,4 +45,6 @@ const gestureRef = React.useRef(null);
     value: gestureRef
-  }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.PanGestureHandler, props));
+  }, /*#__PURE__*/React.createElement(_reactNativeGestureHandler.PanGestureHandler, _extends({}, props, {
+    ref: gestureRef
+  })));
 }
 //# sourceMappingURL=GestureHandler.native.js.map

lib/commonjs/vendor/views/Header/HeaderContainer.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _HeaderShownContext = _interopRequireDefault(require("../../utils/HeaderShownContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,2 +40,3 @@
   const focusedRoute = getFocusedRoute();
+  const isParentHeaderShown = React.useContext(_HeaderShownContext.default);
   return /*#__PURE__*/React.createElement(_reactNative.View, {
@@ -48,4 +51,11 @@ pointerEvents: "box-none",
     const {
-      options
-    } = scene.descriptor;
+      header,
+      headerShown = isParentHeaderShown === false,
+      headerTransparent
+    } = scene.descriptor.options || {};
+
+    if (!headerShown) {
+      return null;
+    }
+
     const isFocused = focusedRoute.key === scene.route.key;
@@ -74,5 +84,11 @@ const previousRoute = getPreviousRoute({
     const nextScene = self[i + 1];
-    const isHeaderStatic = previousScene && previousScene.descriptor.options.headerShown === false && // We still need to animate when coming back from next scene
+    const {
+      headerShown: previousHeaderShown = isParentHeaderShown === false
+    } = (previousScene === null || previousScene === void 0 ? void 0 : previousScene.descriptor.options) || {};
+    const {
+      headerShown: nextHeaderShown = isParentHeaderShown === false
+    } = (nextScene === null || nextScene === void 0 ? void 0 : nextScene.descriptor.options) || {};
+    const isHeaderStatic = 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;
+    !nextScene || nextHeaderShown === false;
     const props = {
@@ -100,4 +116,4 @@ mode,
       // Otherwise accessibility tools don't seem to be able to find it
-      mode === 'float' && !isFocused || options.headerTransparent ? styles.header : null
-    }, options.headerShown !== false ? options.header !== undefined ? options.header(props) : /*#__PURE__*/React.createElement(_Header.default, props) : null)));
+      mode === 'float' && !isFocused || headerTransparent ? styles.header : null
+    }, header !== undefined ? header(props) : /*#__PURE__*/React.createElement(_Header.default, props))));
   }));
@@ -104,0 +120,0 @@ }

lib/commonjs/vendor/views/Stack/Card.js

@@ -404,3 +404,10 @@ "use strict";
 
-    const isTransparent = backgroundColor ? (0, _color.default)(backgroundColor).alpha() === 0 : false;
+    const isTransparent = backgroundColor ? (0, _color.default)(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: _reactNative.Animated.diffClamp(current, 1, 1)
+    };
     return /*#__PURE__*/React.createElement(_CardAnimationContext.default.Provider, {
@@ -416,3 +423,3 @@ value: animationContext
     })) : null, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-      style: [styles.container, containerStyle, customContainerStyle],
+      style: [styles.container, dummyStyle, containerStyle, customContainerStyle],
       pointerEvents: "box-none"
@@ -419,0 +426,0 @@ }, /*#__PURE__*/React.createElement(_GestureHandler.PanGestureHandler, _extends({

lib/commonjs/vendor/views/Stack/CardContainer.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _HeaderShownContext = _interopRequireDefault(require("../../utils/HeaderShownContext"));
+
 var _useTheme = _interopRequireDefault(require("../../../utils/useTheme"));
@@ -45,2 +47,3 @@
   headerMode,
+  headerShown,
   headerStyleInterpolator,
@@ -134,2 +137,4 @@ hasAbsoluteHeader,
   }, [pointerEvents, scene.progress.next]);
+  const isParentHeaderShown = React.useContext(_HeaderShownContext.default);
+  const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
   return /*#__PURE__*/React.createElement(_Card.default, {
@@ -172,2 +177,4 @@ index: index,
     style: styles.scene
+  }, /*#__PURE__*/React.createElement(_HeaderShownContext.default.Provider, {
+    value: isParentHeaderShown || isCurrentHeaderShown
   }, /*#__PURE__*/React.createElement(_HeaderHeightContext.default.Provider, {
@@ -177,3 +184,3 @@ value: headerHeight
     route: scene.route
-  }))), headerMode === 'screen' ? renderHeader({
+  })))), headerMode === 'screen' ? renderHeader({
     mode: 'screen',
@@ -180,0 +187,0 @@ layout,

lib/commonjs/vendor/views/Stack/CardStack.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _HeaderShownContext = _interopRequireDefault(require("../../utils/HeaderShownContext"));
+
 var _getDistanceForDirection = _interopRequireDefault(require("../../utils/getDistanceForDirection"));
@@ -198,25 +200,2 @@
 
-    _defineProperty(this, "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;
-      });
-    });
-
     const {
@@ -275,3 +254,2 @@ height: _height = 0,
     const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
-    const isFloatHeaderAbsolute = this.doesFloatHeaderNeedAbsolutePositioning();
     let defaultTransitionPreset = mode === 'modal' ? _TransitionPresets.ModalTransition : _TransitionPresets.DefaultTransition;
@@ -294,6 +272,20 @@
     const isScreensEnabled = _reactNative.Platform.OS !== 'ios' && mode !== 'modal';
-    let floatingHeader;
+    return /*#__PURE__*/React.createElement(_HeaderShownContext.default.Consumer, null, isParentHeaderShown => {
+      const isFloatHeaderAbsolute = headerMode === 'float' ? this.state.scenes.slice(-2).some(scene => {
+        const {
+          descriptor
+        } = scene;
+        const options = descriptor ? descriptor.options : {};
+        const {
+          headerTransparent,
+          headerShown = isParentHeaderShown === false
+        } = options;
 
-    if (headerMode === 'float') {
-      floatingHeader = /*#__PURE__*/React.createElement(React.Fragment, {
+        if (headerTransparent || headerShown === false) {
+          return true;
+        }
+
+        return false;
+      }) : false;
+      const floatingHeader = headerMode === 'float' ? /*#__PURE__*/React.createElement(React.Fragment, {
         key: "header"
@@ -315,137 +307,138 @@ }, renderHeader({
         styleInterpolator: focusedOptions.headerStyleInterpolator !== undefined ? focusedOptions.headerStyleInterpolator : defaultTransitionPreset.headerStyleInterpolator,
-        style: isFloatHeaderAbsolute ? styles.floating : undefined
-      }));
-    }
+        style: [styles.floating, isFloatHeaderAbsolute && styles.absolute]
+      })) : null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isFloatHeaderAbsolute ? null : floatingHeader, /*#__PURE__*/React.createElement(_Screens.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 ? _CardStyleInterpolators.forNoAnimation : defaultTransitionPreset.cardStyleInterpolator,
+          headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator
+        } = scene.descriptor ? scene.descriptor.options : {};
+        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
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isFloatHeaderAbsolute ? null : floatingHeader, /*#__PURE__*/React.createElement(_Screens.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,
-        headerTransparent,
-        cardShadowEnabled,
-        cardOverlayEnabled,
-        cardOverlay,
-        cardStyle,
-        animationEnabled,
-        gestureResponseDistance,
-        gestureVelocityImpact,
-        gestureDirection = defaultTransitionPreset.gestureDirection,
-        transitionSpec = defaultTransitionPreset.transitionSpec,
-        cardStyleInterpolator = animationEnabled === false ? _CardStyleInterpolators.forNoAnimation : defaultTransitionPreset.cardStyleInterpolator,
-        headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator
-      } = scene.descriptor ? scene.descriptor.options : {};
-      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 (index !== self.length - 1) {
-        const nextScene = scenes[index + 1];
-
-        if (nextScene) {
-          const {
-            animationEnabled,
-            gestureDirection = defaultTransitionPreset.gestureDirection,
-            transitionSpec = defaultTransitionPreset.transitionSpec,
-            cardStyleInterpolator = animationEnabled === false ? _CardStyleInterpolators.forNoAnimation : defaultTransitionPreset.cardStyleInterpolator,
-            headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator
-          } = nextScene.descriptor ? nextScene.descriptor.options : {};
-          transitionConfig = {
-            gestureDirection,
-            transitionSpec,
-            cardStyleInterpolator,
-            headerStyleInterpolator
-          };
+          if (nextScene) {
+            const {
+              animationEnabled,
+              gestureDirection = defaultTransitionPreset.gestureDirection,
+              transitionSpec = defaultTransitionPreset.transitionSpec,
+              cardStyleInterpolator = animationEnabled === false ? _CardStyleInterpolators.forNoAnimation : defaultTransitionPreset.cardStyleInterpolator,
+              headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator
+            } = nextScene.descriptor ? nextScene.descriptor.options : {};
+            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];
+        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 (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;
+            if (s && s.route.key === previousRoute.key) {
+              previousScene = s;
+              break;
+            }
           }
         }
-      }
 
-      return /*#__PURE__*/React.createElement(_Screens.MaybeScreen, {
-        key: route.key,
-        style: _reactNative.StyleSheet.absoluteFill,
-        enabled: isScreensEnabled,
-        active: isScreenActive,
-        pointerEvents: "box-none"
-      }, /*#__PURE__*/React.createElement(_CardContainer.default, _extends({
-        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,
-        onOpenRoute: onOpenRoute,
-        onCloseRoute: onCloseRoute,
-        onTransitionStart: onTransitionStart,
-        onTransitionEnd: onTransitionEnd,
-        gestureEnabled: index !== 0 && getGesturesEnabled({
-          route
-        }),
-        gestureVelocityImpact: gestureVelocityImpact
-      }, transitionConfig)));
-    })), isFloatHeaderAbsolute ? floatingHeader : null);
+        const headerHeight = headerMode !== 'none' && headerShown !== false ? headerHeights[route.key] : 0;
+        return /*#__PURE__*/React.createElement(_Screens.MaybeScreen, {
+          key: route.key,
+          style: _reactNative.StyleSheet.absoluteFill,
+          enabled: isScreensEnabled,
+          active: isScreenActive,
+          pointerEvents: "box-none"
+        }, /*#__PURE__*/React.createElement(_CardContainer.default, _extends({
+          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)));
+      })), isFloatHeaderAbsolute ? floatingHeader : null);
+    });
   }
@@ -461,3 +454,3 @@
   },
-  floating: {
+  absolute: {
     position: 'absolute',
@@ -467,4 +460,7 @@ top: 0,
     right: 0
+  },
+  floating: {
+    zIndex: 1
   }
 });
 //# sourceMappingURL=CardStack.js.map

lib/commonjs/vendor/views/Stack/StackView.js

@@ -143,6 +143,10 @@ "use strict";
       } = this.props;
+      const {
+        closingRouteKeys,
+        replacingRouteKeys
+      } = this.state;
       this.handleTransitionComplete();
 
-      if (this.state.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 (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, but was closing, assume that a close animation was cancelled
         // So we need to add this route back to the state
@@ -363,5 +367,6 @@ navigation.dispatch(_reactNavigation.NavigationActions.navigate(route));
       keyboardHandlingEnabled,
-      mode = 'card'
+      mode = 'card',
+      headerMode = mode === 'card' && _reactNative.Platform.OS === 'ios' ? 'float' : 'screen'
     } = _this$props,
-          rest = _objectWithoutProperties(_this$props, ["state", "navigation", "keyboardHandlingEnabled", "mode"]);
+          rest = _objectWithoutProperties(_this$props, ["state", "navigation", "keyboardHandlingEnabled", "mode", "headerMode"]);
 
@@ -374,3 +379,2 @@ const {
     } = this.state;
-    const headerMode = mode === 'card' && _reactNative.Platform.OS === 'ios' ? 'float' : 'screen';
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GestureHandlerWrapper, {
@@ -377,0 +381,0 @@ style: styles.container

lib/module/vendor/views/GestureHandler.native.js

@@ -0,1 +1,3 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import * as React from 'react';
@@ -8,5 +10,7 @@ import { PanGestureHandler as PanGestureHandlerNative } from 'react-native-gesture-handler';
     value: gestureRef
-  }, /*#__PURE__*/React.createElement(PanGestureHandlerNative, props));
+  }, /*#__PURE__*/React.createElement(PanGestureHandlerNative, _extends({}, props, {
+    ref: gestureRef
+  })));
 }
 export { GestureHandlerRootView, State as GestureState, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
 //# sourceMappingURL=GestureHandler.native.js.map

lib/module/vendor/views/Header/HeaderContainer.js

@@ -6,2 +6,3 @@ import * as React from 'react';
 import { forSlideLeft, forSlideUp, forNoAnimation, forSlideRight } from '../../TransitionConfigs/HeaderStyleInterpolators';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 export default function HeaderContainer({
@@ -20,2 +21,3 @@ mode,
   const focusedRoute = getFocusedRoute();
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
   return /*#__PURE__*/React.createElement(View, {
@@ -30,4 +32,11 @@ pointerEvents: "box-none",
     const {
-      options
-    } = scene.descriptor;
+      header,
+      headerShown = isParentHeaderShown === false,
+      headerTransparent
+    } = scene.descriptor.options || {};
+
+    if (!headerShown) {
+      return null;
+    }
+
     const isFocused = focusedRoute.key === scene.route.key;
@@ -56,5 +65,11 @@ const previousRoute = getPreviousRoute({
     const nextScene = self[i + 1];
-    const isHeaderStatic = previousScene && previousScene.descriptor.options.headerShown === false && // We still need to animate when coming back from next scene
+    const {
+      headerShown: previousHeaderShown = isParentHeaderShown === false
+    } = (previousScene === null || previousScene === void 0 ? void 0 : previousScene.descriptor.options) || {};
+    const {
+      headerShown: nextHeaderShown = isParentHeaderShown === false
+    } = (nextScene === null || nextScene === void 0 ? void 0 : nextScene.descriptor.options) || {};
+    const isHeaderStatic = 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;
+    !nextScene || nextHeaderShown === false;
     const props = {
@@ -82,4 +97,4 @@ mode,
       // Otherwise accessibility tools don't seem to be able to find it
-      mode === 'float' && !isFocused || options.headerTransparent ? styles.header : null
-    }, options.headerShown !== false ? options.header !== undefined ? options.header(props) : /*#__PURE__*/React.createElement(Header, props) : null)));
+      mode === 'float' && !isFocused || headerTransparent ? styles.header : null
+    }, header !== undefined ? header(props) : /*#__PURE__*/React.createElement(Header, props))));
   }));
@@ -86,0 +101,0 @@ }

lib/module/vendor/views/Stack/Card.js

@@ -378,3 +378,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     } = StyleSheet.flatten(contentStyle || {});
-    const isTransparent = backgroundColor ? Color(backgroundColor).alpha() === 0 : false;
+    const isTransparent = backgroundColor ? 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 /*#__PURE__*/React.createElement(CardAnimationContext.Provider, {
@@ -390,3 +397,3 @@ value: animationContext
     })) : null, /*#__PURE__*/React.createElement(Animated.View, {
-      style: [styles.container, containerStyle, customContainerStyle],
+      style: [styles.container, dummyStyle, containerStyle, customContainerStyle],
       pointerEvents: "box-none"
@@ -393,0 +400,0 @@ }, /*#__PURE__*/React.createElement(PanGestureHandler, _extends({

lib/module/vendor/views/Stack/CardContainer.js

@@ -5,2 +5,3 @@ import * as React from 'react';
 import HeaderHeightContext from '../../utils/HeaderHeightContext';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 import useTheme from '../../../utils/useTheme';
@@ -27,2 +28,3 @@ const EPSILON = 0.1;
   headerMode,
+  headerShown,
   headerStyleInterpolator,
@@ -116,2 +118,4 @@ hasAbsoluteHeader,
   }, [pointerEvents, scene.progress.next]);
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isCurrentHeaderShown = headerMode !== 'none' && headerShown !== false;
   return /*#__PURE__*/React.createElement(Card, {
@@ -154,2 +158,4 @@ index: index,
     style: styles.scene
+  }, /*#__PURE__*/React.createElement(HeaderShownContext.Provider, {
+    value: isParentHeaderShown || isCurrentHeaderShown
   }, /*#__PURE__*/React.createElement(HeaderHeightContext.Provider, {
@@ -159,3 +165,3 @@ value: headerHeight
     route: scene.route
-  }))), headerMode === 'screen' ? renderHeader({
+  })))), headerMode === 'screen' ? renderHeader({
     mode: 'screen',
@@ -162,0 +168,0 @@ layout,

lib/module/vendor/views/Stack/CardStack.js

@@ -17,2 +17,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { forNoAnimation as forNoAnimationCard } from '../../TransitionConfigs/CardStyleInterpolators';
+import HeaderShownContext from '../../utils/HeaderShownContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
@@ -174,25 +175,2 @@ const EPSILON = 0.01;
 
-    _defineProperty(this, "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;
-      });
-    });
-
     const {
@@ -250,3 +228,2 @@ height: _height = 0,
     const focusedOptions = focusedDescriptor ? focusedDescriptor.options : {};
-    const isFloatHeaderAbsolute = this.doesFloatHeaderNeedAbsolutePositioning();
     let defaultTransitionPreset = mode === 'modal' ? ModalTransition : DefaultTransition;
@@ -269,6 +246,20 @@
     const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
-    let floatingHeader;
+    return /*#__PURE__*/React.createElement(HeaderShownContext.Consumer, null, isParentHeaderShown => {
+      const isFloatHeaderAbsolute = headerMode === 'float' ? this.state.scenes.slice(-2).some(scene => {
+        const {
+          descriptor
+        } = scene;
+        const options = descriptor ? descriptor.options : {};
+        const {
+          headerTransparent,
+          headerShown = isParentHeaderShown === false
+        } = options;
 
-    if (headerMode === 'float') {
-      floatingHeader = /*#__PURE__*/React.createElement(React.Fragment, {
+        if (headerTransparent || headerShown === false) {
+          return true;
+        }
+
+        return false;
+      }) : false;
+      const floatingHeader = headerMode === 'float' ? /*#__PURE__*/React.createElement(React.Fragment, {
         key: "header"
@@ -290,137 +281,138 @@ }, renderHeader({
         styleInterpolator: focusedOptions.headerStyleInterpolator !== undefined ? focusedOptions.headerStyleInterpolator : defaultTransitionPreset.headerStyleInterpolator,
-        style: isFloatHeaderAbsolute ? styles.floating : undefined
-      }));
-    }
+        style: [styles.floating, isFloatHeaderAbsolute && styles.absolute]
+      })) : null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isFloatHeaderAbsolute ? null : floatingHeader, /*#__PURE__*/React.createElement(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 : {};
+        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
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isFloatHeaderAbsolute ? null : floatingHeader, /*#__PURE__*/React.createElement(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,
-        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 : {};
-      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 (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 : {};
-          transitionConfig = {
-            gestureDirection,
-            transitionSpec,
-            cardStyleInterpolator,
-            headerStyleInterpolator
-          };
+          if (nextScene) {
+            const {
+              animationEnabled,
+              gestureDirection = defaultTransitionPreset.gestureDirection,
+              transitionSpec = defaultTransitionPreset.transitionSpec,
+              cardStyleInterpolator = animationEnabled === false ? forNoAnimationCard : defaultTransitionPreset.cardStyleInterpolator,
+              headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator
+            } = nextScene.descriptor ? nextScene.descriptor.options : {};
+            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];
+        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 (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;
+            if (s && s.route.key === previousRoute.key) {
+              previousScene = s;
+              break;
+            }
           }
         }
-      }
 
-      return /*#__PURE__*/React.createElement(MaybeScreen, {
-        key: route.key,
-        style: StyleSheet.absoluteFill,
-        enabled: isScreensEnabled,
-        active: isScreenActive,
-        pointerEvents: "box-none"
-      }, /*#__PURE__*/React.createElement(CardContainer, _extends({
-        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,
-        onOpenRoute: onOpenRoute,
-        onCloseRoute: onCloseRoute,
-        onTransitionStart: onTransitionStart,
-        onTransitionEnd: onTransitionEnd,
-        gestureEnabled: index !== 0 && getGesturesEnabled({
-          route
-        }),
-        gestureVelocityImpact: gestureVelocityImpact
-      }, transitionConfig)));
-    })), isFloatHeaderAbsolute ? floatingHeader : null);
+        const headerHeight = headerMode !== 'none' && headerShown !== false ? headerHeights[route.key] : 0;
+        return /*#__PURE__*/React.createElement(MaybeScreen, {
+          key: route.key,
+          style: StyleSheet.absoluteFill,
+          enabled: isScreensEnabled,
+          active: isScreenActive,
+          pointerEvents: "box-none"
+        }, /*#__PURE__*/React.createElement(CardContainer, _extends({
+          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)));
+      })), isFloatHeaderAbsolute ? floatingHeader : null);
+    });
   }
@@ -433,3 +425,3 @@
   },
-  floating: {
+  absolute: {
     position: 'absolute',
@@ -439,4 +431,7 @@ top: 0,
     right: 0
+  },
+  floating: {
+    zIndex: 1
   }
 });
 //# sourceMappingURL=CardStack.js.map

lib/module/vendor/views/Stack/StackView.js

@@ -121,6 +121,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       } = this.props;
+      const {
+        closingRouteKeys,
+        replacingRouteKeys
+      } = this.state;
       this.handleTransitionComplete();
 
-      if (this.state.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 (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, but was closing, assume that a close animation was cancelled
         // So we need to add this route back to the state
@@ -341,5 +345,6 @@ navigation.dispatch(NavigationActions.navigate(route));
       keyboardHandlingEnabled,
-      mode = 'card'
+      mode = 'card',
+      headerMode = mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen'
     } = _this$props,
-          rest = _objectWithoutProperties(_this$props, ["state", "navigation", "keyboardHandlingEnabled", "mode"]);
+          rest = _objectWithoutProperties(_this$props, ["state", "navigation", "keyboardHandlingEnabled", "mode", "headerMode"]);
 
@@ -352,3 +357,2 @@ const {
     } = this.state;
-    const headerMode = mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GestureHandlerWrapper, {
@@ -355,0 +359,0 @@ style: styles.container

lib/typescript/src/vendor/types.d.ts

@@ -112,3 +112,4 @@ import * as React from 'react';
     /**
-     * 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.
      */
@@ -115,0 +116,0 @@ headerBackTitle?: string;

lib/typescript/src/vendor/views/Stack/CardContainer.d.ts

@@ -55,2 +55,3 @@ import * as React from 'react';
     headerMode: StackHeaderMode;
+    headerShown: boolean;
     hasAbsoluteHeader: boolean;
@@ -63,4 +64,4 @@ headerHeight: number;
 };
-declare function CardContainer({ active, cardOverlay, cardOverlayEnabled, cardShadowEnabled, cardStyle, cardStyleInterpolator, closing, gesture, focused, gestureDirection, gestureEnabled, gestureResponseDistance, gestureVelocityImpact, getPreviousRoute, getFocusedRoute, mode, headerMode, headerStyleInterpolator, hasAbsoluteHeader, headerHeight, onHeaderHeightChange, index, layout, onCloseRoute, onOpenRoute, onPageChangeCancel, onPageChangeConfirm, onPageChangeStart, onTransitionEnd, onTransitionStart, previousScene, renderHeader, renderScene, safeAreaInsetBottom, safeAreaInsetLeft, safeAreaInsetRight, safeAreaInsetTop, scene, transitionSpec, }: Props): JSX.Element;
+declare function CardContainer({ active, cardOverlay, cardOverlayEnabled, cardShadowEnabled, cardStyle, cardStyleInterpolator, closing, gesture, focused, gestureDirection, gestureEnabled, gestureResponseDistance, gestureVelocityImpact, getPreviousRoute, getFocusedRoute, mode, headerMode, headerShown, headerStyleInterpolator, hasAbsoluteHeader, headerHeight, onHeaderHeightChange, index, layout, onCloseRoute, onOpenRoute, onPageChangeCancel, onPageChangeConfirm, onPageChangeStart, onTransitionEnd, onTransitionStart, previousScene, renderHeader, renderScene, safeAreaInsetBottom, safeAreaInsetLeft, safeAreaInsetRight, safeAreaInsetTop, scene, transitionSpec, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CardContainer>;
 export default _default;

lib/typescript/src/vendor/views/Stack/CardStack.d.ts

@@ -65,5 +65,4 @@ import * as React from 'react';
     private getFocusedRoute;
-    private doesFloatHeaderNeedAbsolutePositioning;
     render(): JSX.Element;
 }
 export {};

package.json

 {
   "name": "react-navigation-stack",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Stack navigator component for React Navigation",
@@ -48,3 +48,3 @@ "main": "lib/commonjs/index.js",
     "@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",
@@ -87,3 +87,3 @@ "@types/react": "^16.9.23",
   },
-  "gitHead": "2ca8c34b2d47916d22889d7272470515cea7333d"
+  "gitHead": "e00c63e32b0f8b6122c8a612d81ee3d3c47802d4"
 }

No alert changes

Improved metrics

Total package byte prevSize

1162055

1.4%

Number of package files

324

1.89%

Lines of code

13980

0.98%

No dependency changes