@react-navigation/native-stack - npm Package Compare versions

Comparing version 6.8.0 to 6.9.14

lib/commonjs/index.js

@@ -18,8 +18,5 @@ "use strict";
 });
-
 var _createNativeStackNavigator = _interopRequireDefault(require("./navigators/createNativeStackNavigator"));
-
 var _NativeStackView = _interopRequireDefault(require("./views/NativeStackView"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

lib/commonjs/navigators/createNativeStackNavigator.js

@@ -7,17 +7,9 @@ "use strict";
 exports.default = void 0;
-
 var _native = require("@react-navigation/native");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _NativeStackView = _interopRequireDefault(require("../views/NativeStackView"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 NativeStackNavigator(_ref) {
@@ -46,8 +38,8 @@ let {
     var _navigation$addListen;
-
     return (// @ts-expect-error: there may not be a tab navigator in parent
       navigation === null || navigation === void 0 ? void 0 : (_navigation$addListen = navigation.addListener) === null || _navigation$addListen === void 0 ? void 0 : _navigation$addListen.call(navigation, 'tabPress', e => {
-        const isFocused = navigation.isFocused(); // Run the operation in the next frame so we're sure all listeners have been run
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
         // This is necessary to know if preventDefault() has been called
-
         requestAnimationFrame(() => {
@@ -57,3 +49,4 @@ if (state.index > 0 && isFocused && !e.defaultPrevented) {
             // reset the stack to replicate native behaviour
-            navigation.dispatch({ ..._native.StackActions.popToTop(),
+            navigation.dispatch({
+              ..._native.StackActions.popToTop(),
               target: state.key
@@ -72,6 +65,4 @@ });
 }
-
 var _default = (0, _native.createNavigatorFactory)(NativeStackNavigator);
-
 exports.default = _default;
 //# sourceMappingURL=createNativeStackNavigator.js.map

lib/commonjs/utils/useDismissedRouteError.js

@@ -7,12 +7,7 @@ "use strict";
 exports.default = useInvalidPreventRemoveError;
-
 var React = _interopRequireWildcard(require("react"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function useInvalidPreventRemoveError(state) {
   var _state$routes$find;
-
   const [nextDismissedKey, setNextDismissedKey] = React.useState(null);
@@ -19,0 +14,0 @@ const dismissedRouteName = nextDismissedKey ? (_state$routes$find = state.routes.find(route => route.key === nextDismissedKey)) === null || _state$routes$find === void 0 ? void 0 : _state$routes$find.name : null;

lib/commonjs/utils/useInvalidPreventRemoveError.js

@@ -7,14 +7,8 @@ "use strict";
 exports.default = useInvalidPreventRemoveError;
-
 var _native = require("@react-navigation/native");
-
 var React = _interopRequireWildcard(require("react"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function useInvalidPreventRemoveError(descriptors) {
   var _preventedDescriptor$, _preventedDescriptor$2;
-
   const {
@@ -21,0 +15,0 @@ preventedRoutes

lib/commonjs/views/DebugContainer.js

@@ -7,11 +7,6 @@ "use strict";
 exports.default = Container;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function Container(props) {
@@ -18,0 +13,0 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars

lib/commonjs/views/DebugContainer.native.js

@@ -7,20 +7,21 @@ "use strict";
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 var _AppContainer = _interopRequireDefault(require("react-native/Libraries/ReactNative/AppContainer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// @ts-ignore Getting private component
-let Container = _reactNative.View;
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 view must *not* be flattened.
+ * See https://github.com/software-mansion/react-native-screens/pull/1825
+ * for detailed explanation.
+ */
+let DebugContainer = props => {
+  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({}, props, {
+    collapsable: false
+  }));
+};
 if (process.env.NODE_ENV !== 'production') {
-  const DebugContainer = props => {
+  DebugContainer = props => {
     const {
@@ -30,16 +31,15 @@ stackPresentation,
     } = props;
-
     if (_reactNative.Platform.OS === 'ios' && stackPresentation !== 'push') {
       // This is necessary for LogBox
-      return /*#__PURE__*/React.createElement(_AppContainer.default, null, /*#__PURE__*/React.createElement(_reactNative.View, rest));
+      return /*#__PURE__*/React.createElement(_AppContainer.default, null, /*#__PURE__*/React.createElement(_reactNative.View, _extends({}, rest, {
+        collapsable: false
+      })));
     }
-
-    return /*#__PURE__*/React.createElement(_reactNative.View, rest);
+    return /*#__PURE__*/React.createElement(_reactNative.View, _extends({}, rest, {
+      collapsable: false
+    }));
   };
-
-  Container = DebugContainer;
 }
-
-var _default = Container;
+var _default = DebugContainer;
 exports.default = _default;
 //# sourceMappingURL=DebugContainer.native.js.map

lib/commonjs/views/FontProcessor.js

@@ -7,3 +7,2 @@ "use strict";
 exports.processFonts = processFonts;
-
 function processFonts(_) {
@@ -10,0 +9,0 @@ throw new Error('Not supported on Web');

lib/commonjs/views/FontProcessor.native.js

@@ -7,20 +7,15 @@ "use strict";
 exports.processFonts = processFonts;
-
 var _ReactNativeStyleAttributes = _interopRequireDefault(require("react-native/Libraries/Components/View/ReactNativeStyleAttributes"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// @ts-ignore: No declaration available
 
-// @ts-ignore: No declaration available
 function processFonts(fontFamilies) {
   var _ReactNativeStyleAttr;
-
   // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
   const fontFamilyProcessor = (_ReactNativeStyleAttr = _ReactNativeStyleAttributes.default.fontFamily) === null || _ReactNativeStyleAttr === void 0 ? void 0 : _ReactNativeStyleAttr.process;
-
   if (typeof fontFamilyProcessor === 'function') {
     return fontFamilies.map(fontFamilyProcessor);
   }
-
   return fontFamilies;
 }
 //# sourceMappingURL=FontProcessor.native.js.map

lib/commonjs/views/HeaderConfig.js

@@ -7,24 +7,11 @@ "use strict";
 exports.default = HeaderConfig;
-
 var _elements = require("@react-navigation/elements");
-
 var _native = require("@react-navigation/native");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-
 var _reactNativeScreens = require("react-native-screens");
-
 var _FontProcessor = require("./FontProcessor");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function HeaderConfig(_ref) {
-  var _ref2, _headerTitleStyleFlat, _headerStyleFlattened;
-
   let {
@@ -55,2 +42,3 @@ headerHeight,
     headerSearchBarOptions,
+    headerTopInsetEnabled,
     route,
@@ -60,7 +48,6 @@ title,
   } = _ref;
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const {
     colors
   } = (0, _native.useTheme)();
-  const tintColor = headerTintColor !== null && headerTintColor !== void 0 ? headerTintColor : _reactNative.Platform.OS === 'ios' ? colors.primary : colors.text;
+  const tintColor = headerTintColor ?? (_reactNative.Platform.OS === 'ios' ? colors.primary : colors.text);
   const headerBackTitleStyleFlattened = _reactNative.StyleSheet.flatten(headerBackTitleStyle) || {};
@@ -76,3 +63,3 @@ const headerLargeTitleStyleFlattened = _reactNative.StyleSheet.flatten(headerLargeTitleStyle) || {};
   }, route.name);
-  const titleColor = (_ref2 = (_headerTitleStyleFlat = headerTitleStyleFlattened.color) !== null && _headerTitleStyleFlat !== void 0 ? _headerTitleStyleFlat : headerTintColor) !== null && _ref2 !== void 0 ? _ref2 : colors.text;
+  const titleColor = headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
   const titleFontSize = headerTitleStyleFlattened.fontSize;
@@ -83,15 +70,11 @@ const titleFontWeight = headerTitleStyleFlattened.fontWeight;
   };
-
   if (headerTitleStyleFlattened.fontFamily != null) {
     headerTitleStyleSupported.fontFamily = headerTitleStyleFlattened.fontFamily;
   }
-
   if (titleFontSize != null) {
     headerTitleStyleSupported.fontSize = titleFontSize;
   }
-
   if (titleFontWeight != null) {
     headerTitleStyleSupported.fontWeight = titleFontWeight;
   }
-
   const headerLeftElement = headerLeft === null || headerLeft === void 0 ? void 0 : headerLeft({
@@ -110,9 +93,10 @@ tintColor,
   }) : null;
-  const supportsHeaderSearchBar = typeof _reactNativeScreens.isSearchBarAvailableForCurrentPlatform === 'boolean' ? _reactNativeScreens.isSearchBarAvailableForCurrentPlatform : // Fallback for older versions of react-native-screens
+  const supportsHeaderSearchBar = typeof _reactNativeScreens.isSearchBarAvailableForCurrentPlatform === 'boolean' ? _reactNativeScreens.isSearchBarAvailableForCurrentPlatform :
+  // Fallback for older versions of react-native-screens
   _reactNative.Platform.OS === 'ios' && _reactNativeScreens.SearchBar != null;
   const hasHeaderSearchBar = supportsHeaderSearchBar && headerSearchBarOptions != null;
-
   if (headerSearchBarOptions != null && !supportsHeaderSearchBar) {
     throw new Error(`The current version of 'react-native-screens' doesn't support SearchBar in the header. Please update to the latest version to use this option.`);
   }
+
   /**
@@ -123,6 +107,5 @@ * We need to set this in if:
    */
-
-
   const backButtonInCustomView = headerBackVisible ? headerLeftElement != null : _reactNative.Platform.OS === 'android' && headerTitleElement != null;
-  const translucent = headerBackground != null || headerTransparent || // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
+  const translucent = headerBackground != null || headerTransparent ||
+  // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
   (hasHeaderSearchBar || headerLargeTitle) && _reactNative.Platform.OS === 'ios' && headerTransparent !== false;
@@ -135,4 +118,7 @@ return /*#__PURE__*/React.createElement(React.Fragment, null, headerBackground != null ? /*#__PURE__*/React.createElement(_reactNative.View, {
     backButtonInCustomView: backButtonInCustomView,
-    backgroundColor: (_headerStyleFlattened = headerStyleFlattened.backgroundColor) !== null && _headerStyleFlattened !== void 0 ? _headerStyleFlattened : headerBackground != null || headerTransparent ? 'transparent' : colors.card,
-    backTitle: headerBackTitleVisible ? headerBackTitle : ' ',
+    backgroundColor: headerStyleFlattened.backgroundColor ?? (headerBackground != null || headerTransparent ? 'transparent' : colors.card),
+    backTitle: _reactNativeScreens.isNewBackTitleImplementation || headerBackTitleVisible ? headerBackTitle : ' '
+    // @ts-expect-error: Available since react-native-screens v3.21
+    ,
+    backTitleVisible: headerBackTitleVisible,
     backTitleFontFamily: backTitleFontFamily,
@@ -146,3 +132,3 @@ backTitleFontSize: headerBackTitleStyleFlattened.fontSize,
     hideBackButton: headerBackVisible === false,
-    hideShadow: headerShadowVisible === false || headerBackground != null || headerTransparent,
+    hideShadow: headerShadowVisible === false || headerBackground != null || headerTransparent && headerShadowVisible !== true,
     largeTitle: headerLargeTitle,
@@ -160,4 +146,5 @@ largeTitleBackgroundColor: headerLargeStyleFlattened.backgroundColor,
     titleFontWeight: titleFontWeight,
-    topInsetEnabled: insets.top !== 0,
-    translucent: // This defaults to `true`, so we can't pass `undefined`
+    topInsetEnabled: headerTopInsetEnabled,
+    translucent:
+    // This defaults to `true`, so we can't pass `undefined`
     translucent === true
@@ -176,3 +163,2 @@ }, _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(React.Fragment, null, headerLeftElement != null ? /*#__PURE__*/React.createElement(_reactNativeScreens.ScreenStackHeaderLeftView, null, headerLeftElement) : null, headerTitleElement != null ? /*#__PURE__*/React.createElement(_reactNativeScreens.ScreenStackHeaderCenterView, null, headerTitleElement) : null) : /*#__PURE__*/React.createElement(React.Fragment, null, headerLeftElement != null || typeof headerTitle === 'function' ? /*#__PURE__*/React.createElement(_reactNativeScreens.ScreenStackHeaderLeftView, null, /*#__PURE__*/React.createElement(_reactNative.View, {
 }
-
 const styles = _reactNative.StyleSheet.create({
@@ -188,3 +174,4 @@ row: {
     right: 0,
-    zIndex: 1
+    zIndex: 1,
+    elevation: 1
   },
@@ -191,0 +178,0 @@ background: {

lib/commonjs/views/NativeStackView.js

@@ -7,15 +7,8 @@ "use strict";
 exports.default = NativeStackView;
-
 var _elements = require("@react-navigation/elements");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const TRANSPARENT_PRESENTATIONS = ['transparentModal', 'containedTransparentModal'];
-
 function NativeStackView(_ref) {
@@ -31,3 +24,2 @@ let {
     var _state$routes, _state$routes2;
-
     const isFocused = state.index === i;
@@ -144,3 +136,2 @@ const previousKey = (_state$routes = state.routes[i - 1]) === null || _state$routes === void 0 ? void 0 : _state$routes.key;
 }
-
 const styles = _reactNative.StyleSheet.create({
@@ -147,0 +138,0 @@ container: {

lib/commonjs/views/NativeStackView.native.js

@@ -7,35 +7,18 @@ "use strict";
 exports.default = NativeStackView;
-
 var _elements = require("@react-navigation/elements");
-
 var _native = require("@react-navigation/native");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-
 var _reactNativeScreens = require("react-native-screens");
-
 var _warnOnce = _interopRequireDefault(require("warn-once"));
-
 var _useDismissedRouteError = _interopRequireDefault(require("../utils/useDismissedRouteError"));
-
 var _useInvalidPreventRemoveError = _interopRequireDefault(require("../utils/useInvalidPreventRemoveError"));
-
 var _DebugContainer = _interopRequireDefault(require("./DebugContainer"));
-
 var _HeaderConfig = _interopRequireDefault(require("./HeaderConfig"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 const isAndroid = _reactNative.Platform.OS === 'android';
-
 const MaybeNestedStack = _ref => {
@@ -47,2 +30,3 @@ let {
     headerHeight,
+    headerTopInsetEnabled,
     children
@@ -70,3 +54,2 @@ } = _ref;
   }, children);
-
   if (isHeaderInModal) {
@@ -78,20 +61,19 @@ return /*#__PURE__*/React.createElement(_reactNativeScreens.ScreenStack, {
       style: _reactNative.StyleSheet.absoluteFill
-    }, /*#__PURE__*/React.createElement(_HeaderConfig.default, _extends({}, options, {
+    }, content, /*#__PURE__*/React.createElement(_HeaderConfig.default, _extends({}, options, {
       route: route,
       headerHeight: headerHeight,
+      headerTopInsetEnabled: headerTopInsetEnabled,
       canGoBack: true
-    })), content));
+    }))));
   }
-
   return content;
 };
-
 const SceneView = _ref2 => {
   var _preventedRoutes$rout;
-
   let {
+    index,
+    focused,
     descriptor,
     previousDescriptor,
     nextDescriptor,
-    index,
     onWillDisappear,
@@ -117,2 +99,3 @@ onAppear,
     headerShown,
+    headerTransparent,
     autoHideHomeIndicator,
@@ -126,3 +109,4 @@ navigationBarColor,
     statusBarTranslucent,
-    statusBarColor
+    statusBarColor,
+    freezeOnBlur
   } = options;
@@ -136,3 +120,2 @@ let {
   } = options;
-
   if (gestureDirection === 'vertical' && _reactNative.Platform.OS === 'ios') {
@@ -147,17 +130,14 @@ // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
     }
-
     if (customAnimationOnGesture === undefined) {
       customAnimationOnGesture = true;
     }
-
     if (animation === undefined) {
       animation = 'slide_from_bottom';
     }
-  } // workaround for rn-screens where gestureDirection has to be set on both
+  }
+
+  // workaround for rn-screens where gestureDirection has to be set on both
   // current and previous screen - software-mansion/react-native-screens/pull/1509
-
-
   const nextGestureDirection = nextDescriptor === null || nextDescriptor === void 0 ? void 0 : nextDescriptor.options.gestureDirection;
   const gestureDirectionOverride = nextGestureDirection != null ? nextGestureDirection : gestureDirection;
-
   if (index === 0) {
@@ -168,15 +148,15 @@ // first screen should always be treated as `card`, it resolves problems with no header animation
   }
-
-  const isHeaderInPush = isAndroid ? headerShown : presentation === 'card' && headerShown !== false;
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const frame = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)(); // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const frame = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)();
 
-  const isModal = presentation === 'modal' || presentation === 'formSheet'; // Modals are fullscreen in landscape only on iPhone
+  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const isModal = presentation === 'modal' || presentation === 'formSheet';
 
-  const isIPhone = _reactNative.Platform.OS === 'ios' && !(_reactNative.Platform.isPad || _reactNative.Platform.isTVOS);
+  // Modals are fullscreen in landscape only on iPhone
+  const isIPhone = _reactNative.Platform.OS === 'ios' && !(_reactNative.Platform.isPad || _reactNative.Platform.isTV);
   const isLandscape = frame.width > frame.height;
-  const topInset = isModal || isIPhone && isLandscape ? 0 : insets.top;
   const isParentHeaderShown = React.useContext(_elements.HeaderShownContext);
   const parentHeaderHeight = React.useContext(_elements.HeaderHeightContext);
   const parentHeaderBack = React.useContext(_elements.HeaderBackContext);
+  const topInset = isParentHeaderShown || _reactNative.Platform.OS === 'ios' && isModal || isIPhone && isLandscape ? 0 : insets.top;
   const {
@@ -187,2 +167,3 @@ preventedRoutes
   const [customHeaderHeight, setCustomHeaderHeight] = React.useState(defaultHeaderHeight);
+  const headerTopInsetEnabled = topInset !== 0;
   const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;
@@ -199,3 +180,4 @@ const headerBack = previousDescriptor ? {
     fullScreenSwipeEnabled: fullScreenGestureEnabled,
-    gestureEnabled: isAndroid ? // This prop enables handling of system back gestures on Android
+    gestureEnabled: isAndroid ?
+    // This prop enables handling of system back gestures on Android
     // Since we handle them in JS side, we disable this
@@ -221,11 +203,14 @@ false : gestureEnabled,
     onDismissed: onDismissed,
-    isNativeStack: true // Props for enabling preventing removal in native-stack
-    ,
+    isNativeStack: true,
     nativeBackButtonDismissalEnabled: false // on Android
-    // @ts-expect-error prop not publicly exported from rn-screens
     ,
+    onHeaderBackButtonClicked: onHeaderBackButtonClicked
+    // @ts-ignore props not exported from rn-screens
+    ,
     preventNativeDismiss: isRemovePrevented // on iOS
     ,
-    onHeaderBackButtonClicked: onHeaderBackButtonClicked,
     onNativeDismissCancelled: onNativeDismissCancelled
+    // this prop is available since rn-screens 3.16
+    ,
+    freezeOnBlur: freezeOnBlur
   }, /*#__PURE__*/React.createElement(_native.NavigationContext.Provider, {
@@ -236,9 +221,22 @@ value: navigation
   }, /*#__PURE__*/React.createElement(_elements.HeaderShownContext.Provider, {
-    value: isParentHeaderShown || isHeaderInPush !== false
+    value: isParentHeaderShown || headerShown !== false
   }, /*#__PURE__*/React.createElement(_elements.HeaderHeightContext.Provider, {
-    value: isHeaderInPush !== false ? headerHeight : parentHeaderHeight !== null && parentHeaderHeight !== void 0 ? parentHeaderHeight : 0
-  }, header !== undefined && headerShown !== false ? /*#__PURE__*/React.createElement(_reactNative.View, {
+    value: headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    accessibilityElementsHidden: !focused,
+    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
+    style: styles.scene
+  }, /*#__PURE__*/React.createElement(MaybeNestedStack, {
+    options: options,
+    route: route,
+    presentation: presentation,
+    headerHeight: headerHeight,
+    headerTopInsetEnabled: headerTopInsetEnabled
+  }, /*#__PURE__*/React.createElement(_elements.HeaderBackContext.Provider, {
+    value: headerBack
+  }, render())), header !== undefined && headerShown !== false ? /*#__PURE__*/React.createElement(_reactNative.View, {
     onLayout: e => {
       setCustomHeaderHeight(e.nativeEvent.layout.height);
-    }
+    },
+    style: headerTransparent ? styles.absolute : null
   }, header({
@@ -249,19 +247,12 @@ back: headerBack,
     navigation
-  })) : /*#__PURE__*/React.createElement(_HeaderConfig.default, _extends({}, options, {
+  })) : null), /*#__PURE__*/React.createElement(_HeaderConfig.default, _extends({}, options, {
     route: route,
     headerBackButtonMenuEnabled: isRemovePrevented !== undefined ? !isRemovePrevented : headerBackButtonMenuEnabled,
-    headerShown: isHeaderInPush,
+    headerShown: header !== undefined ? false : headerShown,
     headerHeight: headerHeight,
-    headerBackTitle: options.headerBackTitle !== undefined ? options.headerBackTitle : headerBack === null || headerBack === void 0 ? void 0 : headerBack.title,
+    headerBackTitle: options.headerBackTitle !== undefined ? options.headerBackTitle : undefined,
+    headerTopInsetEnabled: headerTopInsetEnabled,
     canGoBack: headerBack !== undefined
-  })), /*#__PURE__*/React.createElement(MaybeNestedStack, {
-    options: options,
-    route: route,
-    presentation: presentation,
-    headerHeight: headerHeight
-  }, /*#__PURE__*/React.createElement(_elements.HeaderBackContext.Provider, {
-    value: headerBack
-  }, render())))))));
+  })))))));
 };
-
 function NativeStackViewInner(_ref3) {
@@ -281,4 +272,4 @@ let {
     var _state$routes, _state$routes2;
-
     const descriptor = descriptors[route.key];
+    const isFocused = state.index === index;
     const previousKey = (_state$routes = state.routes[index - 1]) === null || _state$routes === void 0 ? void 0 : _state$routes.key;
@@ -291,2 +282,3 @@ const nextKey = (_state$routes2 = state.routes[index + 1]) === null || _state$routes2 === void 0 ? void 0 : _state$routes2.key;
       index: index,
+      focused: isFocused,
       descriptor: descriptor,
@@ -323,3 +315,4 @@ previousDescriptor: previousDescriptor,
       onDismissed: event => {
-        navigation.dispatch({ ..._native.StackActions.pop(event.nativeEvent.dismissCount),
+        navigation.dispatch({
+          ..._native.StackActions.pop(event.nativeEvent.dismissCount),
           source: route.key,
@@ -331,3 +324,4 @@ target: state.key
       onHeaderBackButtonClicked: () => {
-        navigation.dispatch({ ..._native.StackActions.pop(),
+        navigation.dispatch({
+          ..._native.StackActions.pop(),
           source: route.key,
@@ -338,3 +332,4 @@ target: state.key
       onNativeDismissCancelled: event => {
-        navigation.dispatch({ ..._native.StackActions.pop(event.nativeEvent.dismissCount),
+        navigation.dispatch({
+          ..._native.StackActions.pop(event.nativeEvent.dismissCount),
           source: route.key,
@@ -347,12 +342,20 @@ target: state.key
 }
-
 function NativeStackView(props) {
   return /*#__PURE__*/React.createElement(_elements.SafeAreaProviderCompat, null, /*#__PURE__*/React.createElement(NativeStackViewInner, props));
 }
-
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1
+  },
+  scene: {
+    flex: 1,
+    flexDirection: 'column-reverse'
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
   }
 });
 //# sourceMappingURL=NativeStackView.native.js.map

lib/module/index.js

@@ -5,7 +5,8 @@ /**
 export { default as createNativeStackNavigator } from './navigators/createNativeStackNavigator';
+
 /**
  * Views
  */
+export { default as NativeStackView } from './views/NativeStackView';
 
-export { default as NativeStackView } from './views/NativeStackView';
 /**
@@ -12,0 +13,0 @@ * Types

lib/module/navigators/createNativeStackNavigator.js

@@ -1,7 +0,5 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { createNavigatorFactory, StackActions, StackRouter, useNavigationBuilder } from '@react-navigation/native';
 import * as React from 'react';
 import NativeStackView from '../views/NativeStackView';
-
 function NativeStackNavigator(_ref) {
@@ -30,8 +28,8 @@ let {
     var _navigation$addListen;
-
     return (// @ts-expect-error: there may not be a tab navigator in parent
       navigation === null || navigation === void 0 ? void 0 : (_navigation$addListen = navigation.addListener) === null || _navigation$addListen === void 0 ? void 0 : _navigation$addListen.call(navigation, 'tabPress', e => {
-        const isFocused = navigation.isFocused(); // Run the operation in the next frame so we're sure all listeners have been run
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
         // This is necessary to know if preventDefault() has been called
-
         requestAnimationFrame(() => {
@@ -41,3 +39,4 @@ if (state.index > 0 && isFocused && !e.defaultPrevented) {
             // reset the stack to replicate native behaviour
-            navigation.dispatch({ ...StackActions.popToTop(),
+            navigation.dispatch({
+              ...StackActions.popToTop(),
               target: state.key
@@ -56,4 +55,3 @@ });
 }
-
 export default createNavigatorFactory(NativeStackNavigator);
 //# sourceMappingURL=createNativeStackNavigator.js.map

lib/module/utils/useDismissedRouteError.js

 import * as React from 'react';
 export default function useInvalidPreventRemoveError(state) {
   var _state$routes$find;
-
   const [nextDismissedKey, setNextDismissedKey] = React.useState(null);
@@ -6,0 +5,0 @@ const dismissedRouteName = nextDismissedKey ? (_state$routes$find = state.routes.find(route => route.key === nextDismissedKey)) === null || _state$routes$find === void 0 ? void 0 : _state$routes$find.name : null;

lib/module/utils/useInvalidPreventRemoveError.js

@@ -5,3 +5,2 @@ import { usePreventRemoveContext } from '@react-navigation/native';
   var _preventedDescriptor$, _preventedDescriptor$2;
-
   const {
@@ -8,0 +7,0 @@ preventedRoutes

lib/module/views/DebugContainer.native.js

@@ -0,9 +1,18 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
-import { Platform, View } from 'react-native'; // @ts-ignore Getting private component
-
+import { Platform, View } from 'react-native';
+// @ts-ignore Getting private component
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
-let Container = View;
-
+/**
+ * This view must *not* be flattened.
+ * See https://github.com/software-mansion/react-native-screens/pull/1825
+ * for detailed explanation.
+ */
+let DebugContainer = props => {
+  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+    collapsable: false
+  }));
+};
 if (process.env.NODE_ENV !== 'production') {
-  const DebugContainer = props => {
+  DebugContainer = props => {
     const {
@@ -13,15 +22,14 @@ stackPresentation,
     } = props;
-
     if (Platform.OS === 'ios' && stackPresentation !== 'push') {
       // This is necessary for LogBox
-      return /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(View, rest));
+      return /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+        collapsable: false
+      })));
     }
-
-    return /*#__PURE__*/React.createElement(View, rest);
+    return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+      collapsable: false
+    }));
   };
-
-  Container = DebugContainer;
 }
-
-export default Container;
+export default DebugContainer;
 //# sourceMappingURL=DebugContainer.native.js.map

lib/module/views/FontProcessor.native.js

@@ -5,12 +5,9 @@ // @ts-ignore: No declaration available
   var _ReactNativeStyleAttr;
-
   // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
   const fontFamilyProcessor = (_ReactNativeStyleAttr = ReactNativeStyleAttributes.fontFamily) === null || _ReactNativeStyleAttr === void 0 ? void 0 : _ReactNativeStyleAttr.process;
-
   if (typeof fontFamilyProcessor === 'function') {
     return fontFamilies.map(fontFamilyProcessor);
   }
-
   return fontFamilies;
 }
 //# sourceMappingURL=FontProcessor.native.js.map

lib/module/views/HeaderConfig.js

@@ -5,8 +5,7 @@ import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
 import { I18nManager, Platform, StyleSheet, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { isSearchBarAvailableForCurrentPlatform, ScreenStackHeaderBackButtonImage, ScreenStackHeaderCenterView, ScreenStackHeaderConfig, ScreenStackHeaderLeftView, ScreenStackHeaderRightView, ScreenStackHeaderSearchBarView, SearchBar } from 'react-native-screens';
+import {
+// @ts-expect-error: Available since react-native-screens v3.21
+isNewBackTitleImplementation, isSearchBarAvailableForCurrentPlatform, ScreenStackHeaderBackButtonImage, ScreenStackHeaderCenterView, ScreenStackHeaderConfig, ScreenStackHeaderLeftView, ScreenStackHeaderRightView, ScreenStackHeaderSearchBarView, SearchBar } from 'react-native-screens';
 import { processFonts } from './FontProcessor';
 export default function HeaderConfig(_ref) {
-  var _ref2, _headerTitleStyleFlat, _headerStyleFlattened;
-
   let {
@@ -37,2 +36,3 @@ headerHeight,
     headerSearchBarOptions,
+    headerTopInsetEnabled,
     route,
@@ -42,7 +42,6 @@ title,
   } = _ref;
-  const insets = useSafeAreaInsets();
   const {
     colors
   } = useTheme();
-  const tintColor = headerTintColor !== null && headerTintColor !== void 0 ? headerTintColor : Platform.OS === 'ios' ? colors.primary : colors.text;
+  const tintColor = headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
   const headerBackTitleStyleFlattened = StyleSheet.flatten(headerBackTitleStyle) || {};
@@ -58,3 +57,3 @@ const headerLargeTitleStyleFlattened = StyleSheet.flatten(headerLargeTitleStyle) || {};
   }, route.name);
-  const titleColor = (_ref2 = (_headerTitleStyleFlat = headerTitleStyleFlattened.color) !== null && _headerTitleStyleFlat !== void 0 ? _headerTitleStyleFlat : headerTintColor) !== null && _ref2 !== void 0 ? _ref2 : colors.text;
+  const titleColor = headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
   const titleFontSize = headerTitleStyleFlattened.fontSize;
@@ -65,15 +64,11 @@ const titleFontWeight = headerTitleStyleFlattened.fontWeight;
   };
-
   if (headerTitleStyleFlattened.fontFamily != null) {
     headerTitleStyleSupported.fontFamily = headerTitleStyleFlattened.fontFamily;
   }
-
   if (titleFontSize != null) {
     headerTitleStyleSupported.fontSize = titleFontSize;
   }
-
   if (titleFontWeight != null) {
     headerTitleStyleSupported.fontWeight = titleFontWeight;
   }
-
   const headerLeftElement = headerLeft === null || headerLeft === void 0 ? void 0 : headerLeft({
@@ -92,9 +87,10 @@ tintColor,
   }) : null;
-  const supportsHeaderSearchBar = typeof isSearchBarAvailableForCurrentPlatform === 'boolean' ? isSearchBarAvailableForCurrentPlatform : // Fallback for older versions of react-native-screens
+  const supportsHeaderSearchBar = typeof isSearchBarAvailableForCurrentPlatform === 'boolean' ? isSearchBarAvailableForCurrentPlatform :
+  // Fallback for older versions of react-native-screens
   Platform.OS === 'ios' && SearchBar != null;
   const hasHeaderSearchBar = supportsHeaderSearchBar && headerSearchBarOptions != null;
-
   if (headerSearchBarOptions != null && !supportsHeaderSearchBar) {
     throw new Error(`The current version of 'react-native-screens' doesn't support SearchBar in the header. Please update to the latest version to use this option.`);
   }
+
   /**
@@ -105,6 +101,5 @@ * We need to set this in if:
    */
-
-
   const backButtonInCustomView = headerBackVisible ? headerLeftElement != null : Platform.OS === 'android' && headerTitleElement != null;
-  const translucent = headerBackground != null || headerTransparent || // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
+  const translucent = headerBackground != null || headerTransparent ||
+  // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
   (hasHeaderSearchBar || headerLargeTitle) && Platform.OS === 'ios' && headerTransparent !== false;
@@ -117,4 +112,7 @@ return /*#__PURE__*/React.createElement(React.Fragment, null, headerBackground != null ? /*#__PURE__*/React.createElement(View, {
     backButtonInCustomView: backButtonInCustomView,
-    backgroundColor: (_headerStyleFlattened = headerStyleFlattened.backgroundColor) !== null && _headerStyleFlattened !== void 0 ? _headerStyleFlattened : headerBackground != null || headerTransparent ? 'transparent' : colors.card,
-    backTitle: headerBackTitleVisible ? headerBackTitle : ' ',
+    backgroundColor: headerStyleFlattened.backgroundColor ?? (headerBackground != null || headerTransparent ? 'transparent' : colors.card),
+    backTitle: isNewBackTitleImplementation || headerBackTitleVisible ? headerBackTitle : ' '
+    // @ts-expect-error: Available since react-native-screens v3.21
+    ,
+    backTitleVisible: headerBackTitleVisible,
     backTitleFontFamily: backTitleFontFamily,
@@ -128,3 +126,3 @@ backTitleFontSize: headerBackTitleStyleFlattened.fontSize,
     hideBackButton: headerBackVisible === false,
-    hideShadow: headerShadowVisible === false || headerBackground != null || headerTransparent,
+    hideShadow: headerShadowVisible === false || headerBackground != null || headerTransparent && headerShadowVisible !== true,
     largeTitle: headerLargeTitle,
@@ -142,4 +140,5 @@ largeTitleBackgroundColor: headerLargeStyleFlattened.backgroundColor,
     titleFontWeight: titleFontWeight,
-    topInsetEnabled: insets.top !== 0,
-    translucent: // This defaults to `true`, so we can't pass `undefined`
+    topInsetEnabled: headerTopInsetEnabled,
+    translucent:
+    // This defaults to `true`, so we can't pass `undefined`
     translucent === true
@@ -168,3 +167,4 @@ }, Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(React.Fragment, null, headerLeftElement != null ? /*#__PURE__*/React.createElement(ScreenStackHeaderLeftView, null, headerLeftElement) : null, headerTitleElement != null ? /*#__PURE__*/React.createElement(ScreenStackHeaderCenterView, null, headerTitleElement) : null) : /*#__PURE__*/React.createElement(React.Fragment, null, headerLeftElement != null || typeof headerTitle === 'function' ? /*#__PURE__*/React.createElement(ScreenStackHeaderLeftView, null, /*#__PURE__*/React.createElement(View, {
     right: 0,
-    zIndex: 1
+    zIndex: 1,
+    elevation: 1
   },
@@ -171,0 +171,0 @@ background: {

lib/module/views/NativeStackView.js

@@ -15,3 +15,2 @@ import { getHeaderTitle, Header, HeaderBackButton, HeaderBackContext, SafeAreaProviderCompat, Screen } from '@react-navigation/elements';
     var _state$routes, _state$routes2;
-
     const isFocused = state.index === i;
@@ -18,0 +17,0 @@ const previousKey = (_state$routes = state.routes[i - 1]) === null || _state$routes === void 0 ? void 0 : _state$routes.key;

lib/module/views/NativeStackView.native.js

@@ -1,3 +0,2 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { getDefaultHeaderHeight, getHeaderTitle, HeaderBackContext, HeaderHeightContext, HeaderShownContext, SafeAreaProviderCompat } from '@react-navigation/elements';
@@ -15,3 +14,2 @@ import { NavigationContext, NavigationRouteContext, StackActions, usePreventRemoveContext, useTheme } from '@react-navigation/native';
 const isAndroid = Platform.OS === 'android';
-
 const MaybeNestedStack = _ref => {
@@ -23,2 +21,3 @@ let {
     headerHeight,
+    headerTopInsetEnabled,
     children
@@ -46,3 +45,2 @@ } = _ref;
   }, children);
-
   if (isHeaderInModal) {
@@ -54,20 +52,19 @@ return /*#__PURE__*/React.createElement(ScreenStack, {
       style: StyleSheet.absoluteFill
-    }, /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
+    }, content, /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
       route: route,
       headerHeight: headerHeight,
+      headerTopInsetEnabled: headerTopInsetEnabled,
       canGoBack: true
-    })), content));
+    }))));
   }
-
   return content;
 };
-
 const SceneView = _ref2 => {
   var _preventedRoutes$rout;
-
   let {
+    index,
+    focused,
     descriptor,
     previousDescriptor,
     nextDescriptor,
-    index,
     onWillDisappear,
@@ -93,2 +90,3 @@ onAppear,
     headerShown,
+    headerTransparent,
     autoHideHomeIndicator,
@@ -102,3 +100,4 @@ navigationBarColor,
     statusBarTranslucent,
-    statusBarColor
+    statusBarColor,
+    freezeOnBlur
   } = options;
@@ -112,3 +111,2 @@ let {
   } = options;
-
   if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
@@ -123,17 +121,14 @@ // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
     }
-
     if (customAnimationOnGesture === undefined) {
       customAnimationOnGesture = true;
     }
-
     if (animation === undefined) {
       animation = 'slide_from_bottom';
     }
-  } // workaround for rn-screens where gestureDirection has to be set on both
+  }
+
+  // workaround for rn-screens where gestureDirection has to be set on both
   // current and previous screen - software-mansion/react-native-screens/pull/1509
-
-
   const nextGestureDirection = nextDescriptor === null || nextDescriptor === void 0 ? void 0 : nextDescriptor.options.gestureDirection;
   const gestureDirectionOverride = nextGestureDirection != null ? nextGestureDirection : gestureDirection;
-
   if (index === 0) {
@@ -144,15 +139,15 @@ // first screen should always be treated as `card`, it resolves problems with no header animation
   }
-
-  const isHeaderInPush = isAndroid ? headerShown : presentation === 'card' && headerShown !== false;
   const insets = useSafeAreaInsets();
-  const frame = useSafeAreaFrame(); // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const frame = useSafeAreaFrame();
 
-  const isModal = presentation === 'modal' || presentation === 'formSheet'; // Modals are fullscreen in landscape only on iPhone
+  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const isModal = presentation === 'modal' || presentation === 'formSheet';
 
-  const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTVOS);
+  // Modals are fullscreen in landscape only on iPhone
+  const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTV);
   const isLandscape = frame.width > frame.height;
-  const topInset = isModal || isIPhone && isLandscape ? 0 : insets.top;
   const isParentHeaderShown = React.useContext(HeaderShownContext);
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
   const parentHeaderBack = React.useContext(HeaderBackContext);
+  const topInset = isParentHeaderShown || Platform.OS === 'ios' && isModal || isIPhone && isLandscape ? 0 : insets.top;
   const {
@@ -163,2 +158,3 @@ preventedRoutes
   const [customHeaderHeight, setCustomHeaderHeight] = React.useState(defaultHeaderHeight);
+  const headerTopInsetEnabled = topInset !== 0;
   const headerHeight = header ? customHeaderHeight : defaultHeaderHeight;
@@ -175,3 +171,4 @@ const headerBack = previousDescriptor ? {
     fullScreenSwipeEnabled: fullScreenGestureEnabled,
-    gestureEnabled: isAndroid ? // This prop enables handling of system back gestures on Android
+    gestureEnabled: isAndroid ?
+    // This prop enables handling of system back gestures on Android
     // Since we handle them in JS side, we disable this
@@ -197,11 +194,14 @@ false : gestureEnabled,
     onDismissed: onDismissed,
-    isNativeStack: true // Props for enabling preventing removal in native-stack
-    ,
+    isNativeStack: true,
     nativeBackButtonDismissalEnabled: false // on Android
-    // @ts-expect-error prop not publicly exported from rn-screens
     ,
+    onHeaderBackButtonClicked: onHeaderBackButtonClicked
+    // @ts-ignore props not exported from rn-screens
+    ,
     preventNativeDismiss: isRemovePrevented // on iOS
     ,
-    onHeaderBackButtonClicked: onHeaderBackButtonClicked,
     onNativeDismissCancelled: onNativeDismissCancelled
+    // this prop is available since rn-screens 3.16
+    ,
+    freezeOnBlur: freezeOnBlur
   }, /*#__PURE__*/React.createElement(NavigationContext.Provider, {
@@ -212,9 +212,22 @@ value: navigation
   }, /*#__PURE__*/React.createElement(HeaderShownContext.Provider, {
-    value: isParentHeaderShown || isHeaderInPush !== false
+    value: isParentHeaderShown || headerShown !== false
   }, /*#__PURE__*/React.createElement(HeaderHeightContext.Provider, {
-    value: isHeaderInPush !== false ? headerHeight : parentHeaderHeight !== null && parentHeaderHeight !== void 0 ? parentHeaderHeight : 0
-  }, header !== undefined && headerShown !== false ? /*#__PURE__*/React.createElement(View, {
+    value: headerShown !== false ? headerHeight : parentHeaderHeight ?? 0
+  }, /*#__PURE__*/React.createElement(View, {
+    accessibilityElementsHidden: !focused,
+    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
+    style: styles.scene
+  }, /*#__PURE__*/React.createElement(MaybeNestedStack, {
+    options: options,
+    route: route,
+    presentation: presentation,
+    headerHeight: headerHeight,
+    headerTopInsetEnabled: headerTopInsetEnabled
+  }, /*#__PURE__*/React.createElement(HeaderBackContext.Provider, {
+    value: headerBack
+  }, render())), header !== undefined && headerShown !== false ? /*#__PURE__*/React.createElement(View, {
     onLayout: e => {
       setCustomHeaderHeight(e.nativeEvent.layout.height);
-    }
+    },
+    style: headerTransparent ? styles.absolute : null
   }, header({
@@ -225,19 +238,12 @@ back: headerBack,
     navigation
-  })) : /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
+  })) : null), /*#__PURE__*/React.createElement(HeaderConfig, _extends({}, options, {
     route: route,
     headerBackButtonMenuEnabled: isRemovePrevented !== undefined ? !isRemovePrevented : headerBackButtonMenuEnabled,
-    headerShown: isHeaderInPush,
+    headerShown: header !== undefined ? false : headerShown,
     headerHeight: headerHeight,
-    headerBackTitle: options.headerBackTitle !== undefined ? options.headerBackTitle : headerBack === null || headerBack === void 0 ? void 0 : headerBack.title,
+    headerBackTitle: options.headerBackTitle !== undefined ? options.headerBackTitle : undefined,
+    headerTopInsetEnabled: headerTopInsetEnabled,
     canGoBack: headerBack !== undefined
-  })), /*#__PURE__*/React.createElement(MaybeNestedStack, {
-    options: options,
-    route: route,
-    presentation: presentation,
-    headerHeight: headerHeight
-  }, /*#__PURE__*/React.createElement(HeaderBackContext.Provider, {
-    value: headerBack
-  }, render())))))));
+  })))))));
 };
-
 function NativeStackViewInner(_ref3) {
@@ -257,4 +263,4 @@ let {
     var _state$routes, _state$routes2;
-
     const descriptor = descriptors[route.key];
+    const isFocused = state.index === index;
     const previousKey = (_state$routes = state.routes[index - 1]) === null || _state$routes === void 0 ? void 0 : _state$routes.key;
@@ -267,2 +273,3 @@ const nextKey = (_state$routes2 = state.routes[index + 1]) === null || _state$routes2 === void 0 ? void 0 : _state$routes2.key;
       index: index,
+      focused: isFocused,
       descriptor: descriptor,
@@ -299,3 +306,4 @@ previousDescriptor: previousDescriptor,
       onDismissed: event => {
-        navigation.dispatch({ ...StackActions.pop(event.nativeEvent.dismissCount),
+        navigation.dispatch({
+          ...StackActions.pop(event.nativeEvent.dismissCount),
           source: route.key,
@@ -307,3 +315,4 @@ target: state.key
       onHeaderBackButtonClicked: () => {
-        navigation.dispatch({ ...StackActions.pop(),
+        navigation.dispatch({
+          ...StackActions.pop(),
           source: route.key,
@@ -314,3 +323,4 @@ target: state.key
       onNativeDismissCancelled: event => {
-        navigation.dispatch({ ...StackActions.pop(event.nativeEvent.dismissCount),
+        navigation.dispatch({
+          ...StackActions.pop(event.nativeEvent.dismissCount),
           source: route.key,
@@ -323,3 +333,2 @@ target: state.key
 }
-
 export default function NativeStackView(props) {
@@ -331,4 +340,14 @@ return /*#__PURE__*/React.createElement(SafeAreaProviderCompat, null, /*#__PURE__*/React.createElement(NativeStackViewInner, props));
     flex: 1
+  },
+  scene: {
+    flex: 1,
+    flexDirection: 'column-reverse'
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
   }
 });
 //# sourceMappingURL=NativeStackView.native.js.map

lib/typescript/src/index.d.ts

@@ -13,1 +13,2 @@ /**
 export type { NativeStackHeaderProps, NativeStackNavigationEventMap, NativeStackNavigationOptions, NativeStackNavigationProp, NativeStackScreenProps, } from './types';
+//# sourceMappingURL=index.d.ts.map

lib/typescript/src/navigators/createNativeStackNavigator.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { ParamListBase, StackNavigationState } from '@react-navigation/native';
@@ -7,1 +6,2 @@ import type { NativeStackNavigationEventMap, NativeStackNavigationOptions, NativeStackNavigatorProps } from '../types';
 export default _default;
+//# sourceMappingURL=createNativeStackNavigator.d.ts.map

lib/typescript/src/types.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import type { ScreenProps, ScreenStackHeaderConfigProps, SearchBarProps } from 'react-native-screens';
-export declare type NativeStackNavigationEventMap = {
+export type NativeStackNavigationEventMap = {
     /**
@@ -24,10 +24,10 @@ * Event which fires when a transition animation starts.
 };
-export declare type NativeStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, StackNavigationState<ParamList>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackActionHelpers<ParamList>;
-export declare type NativeStackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = string, NavigatorID extends string | undefined = undefined> = {
+export type NativeStackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = string, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, StackNavigationState<ParamList>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackActionHelpers<ParamList>;
+export type NativeStackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = string, NavigatorID extends string | undefined = undefined> = {
     navigation: NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
     route: RouteProp<ParamList, RouteName>;
 };
-export declare type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, NativeStackNavigationEventMap>;
-export declare type NativeStackNavigationConfig = {};
-export declare type NativeStackHeaderProps = {
+export type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, NativeStackNavigationEventMap>;
+export type NativeStackNavigationConfig = {};
+export type NativeStackHeaderProps = {
     /**
@@ -55,3 +55,3 @@ * Options for the back button.
 };
-export declare type HeaderButtonProps = {
+export type HeaderButtonProps = {
     /**
@@ -66,3 +66,3 @@ * Tint color for the header.
 };
-export declare type HeaderBackButtonProps = HeaderButtonProps & {
+export type HeaderBackButtonProps = HeaderButtonProps & {
     /**
@@ -74,3 +74,3 @@ * Label text for the button. Usually the title of the previous screen.
 };
-export declare type NativeStackNavigationOptions = {
+export type NativeStackNavigationOptions = {
     /**
@@ -89,6 +89,2 @@ * String that can be displayed in the header as a fallback for `headerTitle`.
      * This will have no effect on the first screen in the stack.
-     *
-     * Only supported on iOS.
-     *
-     * @platform ios
      */
@@ -451,7 +447,16 @@ headerBackVisible?: boolean;
     orientation?: ScreenProps['screenOrientation'];
+    /**
+     * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+     * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+     * Requires `react-native-screens` version >=3.16.0.
+     *
+     * Only supported on iOS and Android.
+     */
+    freezeOnBlur?: boolean;
 };
-export declare type NativeStackNavigatorProps = DefaultNavigatorOptions<ParamListBase, StackNavigationState<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackRouterOptions & NativeStackNavigationConfig;
-export declare type NativeStackDescriptor = Descriptor<NativeStackNavigationOptions, NativeStackNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
-export declare type NativeStackDescriptorMap = {
+export type NativeStackNavigatorProps = DefaultNavigatorOptions<ParamListBase, StackNavigationState<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap> & StackRouterOptions & NativeStackNavigationConfig;
+export type NativeStackDescriptor = Descriptor<NativeStackNavigationOptions, NativeStackNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
+export type NativeStackDescriptorMap = {
     [key: string]: NativeStackDescriptor;
 };
+//# sourceMappingURL=types.d.ts.map

lib/typescript/src/utils/useDismissedRouteError.d.ts

@@ -6,1 +6,2 @@ import type { ParamListBase, StackNavigationState } from '@react-navigation/native';
 };
+//# sourceMappingURL=useDismissedRouteError.d.ts.map

lib/typescript/src/utils/useInvalidPreventRemoveError.d.ts

 import type { NativeStackDescriptorMap } from '../types';
 export default function useInvalidPreventRemoveError(descriptors: NativeStackDescriptorMap): void;
+//# sourceMappingURL=useInvalidPreventRemoveError.d.ts.map

lib/typescript/src/views/DebugContainer.d.ts

 import * as React from 'react';
 import { ViewProps } from 'react-native';
 import type { StackPresentationTypes } from 'react-native-screens';
-declare type ContainerProps = ViewProps & {
+type ContainerProps = ViewProps & {
     stackPresentation: StackPresentationTypes;
@@ -10,1 +10,2 @@ children: React.ReactNode;
 export {};
+//# sourceMappingURL=DebugContainer.d.ts.map

lib/typescript/src/views/DebugContainer.native.d.ts

 import * as React from 'react';
 import { ViewProps } from 'react-native';
 import type { StackPresentationTypes } from 'react-native-screens';
-declare type ContainerProps = ViewProps & {
+type ContainerProps = ViewProps & {
     stackPresentation: StackPresentationTypes;
     children: React.ReactNode;
 };
-declare let Container: React.ComponentType<ContainerProps>;
-export default Container;
+/**
+ * This view must *not* be flattened.
+ * See https://github.com/software-mansion/react-native-screens/pull/1825
+ * for detailed explanation.
+ */
+declare let DebugContainer: (props: ContainerProps) => JSX.Element;
+export default DebugContainer;
+//# sourceMappingURL=DebugContainer.native.d.ts.map

lib/typescript/src/views/FontProcessor.d.ts

 export declare function processFonts(_: (string | undefined)[]): (string | undefined)[];
+//# sourceMappingURL=FontProcessor.d.ts.map

lib/typescript/src/views/FontProcessor.native.d.ts

 export declare function processFonts(fontFamilies: (string | undefined)[]): (string | undefined)[];
+//# sourceMappingURL=FontProcessor.native.d.ts.map

lib/typescript/src/views/HeaderConfig.d.ts

@@ -1,5 +0,5 @@
-/// <reference types="react" />
 import { Route } from '@react-navigation/native';
 import type { NativeStackNavigationOptions } from '../types';
-declare type Props = NativeStackNavigationOptions & {
+type Props = NativeStackNavigationOptions & {
+    headerTopInsetEnabled: boolean;
     headerHeight: number;
@@ -9,3 +9,4 @@ route: Route<string>;
 };
-export default function HeaderConfig({ headerHeight, headerBackImageSource, headerBackButtonMenuEnabled, headerBackTitle, headerBackTitleStyle, headerBackTitleVisible, headerBackVisible, headerShadowVisible, headerLargeStyle, headerLargeTitle, headerLargeTitleShadowVisible, headerLargeTitleStyle, headerBackground, headerLeft, headerRight, headerShown, headerStyle, headerBlurEffect, headerTintColor, headerTitle, headerTitleAlign, headerTitleStyle, headerTransparent, headerSearchBarOptions, route, title, canGoBack, }: Props): JSX.Element;
+export default function HeaderConfig({ headerHeight, headerBackImageSource, headerBackButtonMenuEnabled, headerBackTitle, headerBackTitleStyle, headerBackTitleVisible, headerBackVisible, headerShadowVisible, headerLargeStyle, headerLargeTitle, headerLargeTitleShadowVisible, headerLargeTitleStyle, headerBackground, headerLeft, headerRight, headerShown, headerStyle, headerBlurEffect, headerTintColor, headerTitle, headerTitleAlign, headerTitleStyle, headerTransparent, headerSearchBarOptions, headerTopInsetEnabled, route, title, canGoBack, }: Props): JSX.Element;
 export {};
+//# sourceMappingURL=HeaderConfig.d.ts.map

lib/typescript/src/views/NativeStackView.d.ts

@@ -1,5 +0,4 @@
-/// <reference types="react" />
 import type { ParamListBase, StackNavigationState } from '@react-navigation/native';
 import type { NativeStackDescriptorMap, NativeStackNavigationHelpers } from '../types';
-declare type Props = {
+type Props = {
     state: StackNavigationState<ParamListBase>;
@@ -11,1 +10,2 @@ navigation: NativeStackNavigationHelpers;
 export {};
+//# sourceMappingURL=NativeStackView.d.ts.map

lib/typescript/src/views/NativeStackView.native.d.ts

@@ -1,5 +0,4 @@
-/// <reference types="react" />
 import { ParamListBase, StackNavigationState } from '@react-navigation/native';
 import type { NativeStackDescriptorMap, NativeStackNavigationHelpers } from '../types';
-declare type Props = {
+type Props = {
     state: StackNavigationState<ParamListBase>;
@@ -11,1 +10,2 @@ navigation: NativeStackNavigationHelpers;
 export {};
+//# sourceMappingURL=NativeStackView.native.d.ts.map

package.json

 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "6.8.0",
+  "version": "6.9.14",
   "keywords": [
@@ -44,16 +44,16 @@ "react-native-component",
   "dependencies": {
-    "@react-navigation/elements": "^1.3.5",
+    "@react-navigation/elements": "^1.3.19",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.12",
-    "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.47",
-    "@types/react-native": "~0.68.1",
-    "del-cli": "^3.0.1",
-    "react": "17.0.2",
-    "react-native": "~0.68.2",
-    "react-native-builder-bob": "^0.18.1",
-    "react-native-screens": "^3.11.1",
-    "typescript": "^4.7.4"
+    "@react-navigation/native": "^6.1.8",
+    "@testing-library/react-native": "^11.5.0",
+    "@types/react": "~18.0.27",
+    "@types/react-native": "~0.71.3",
+    "del-cli": "^5.0.0",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-builder-bob": "^0.20.4",
+    "react-native-screens": "~3.20.0",
+    "typescript": "^4.9.4"
   },
@@ -81,3 +81,3 @@ "peerDependencies": {
   },
-  "gitHead": "83aa392f1e13796d609c9df0afa44699ce4bacae"
+  "gitHead": "46954cec3d746aa2d9097d1b94f9e2a915d3e1c7"
 }

No alert changes

Improved metrics

Number of package files

87

increased by16%

Lines of code

3830

increased by4.93%

Worsened metrics

Total package byte prevSize

224397

decreased by-21.34%

Dependency changes

• Updated@react-navigation/elements@^1.3.19