@react-navigation/stack 7.0.0-alpha.5 → 7.0.0-alpha.7

package/src/views/Stack/CardContainer.tsx

@@ -4,7 +4,12 @@ import {
   HeaderHeightContext,
   HeaderShownContext,
 } from '@react-navigation/elements';
-import { Route, useLocale, useTheme } from '@react-navigation/native';
+import {
+  type Route,
+  useLinkTools,
+  useLocale,
+  useTheme,
+} from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
@@ -24,7 +29,6 @@ type Props = {
   layout: Layout;
   gesture: Animated.Value;
   scene: Scene;
-  headerDarkContent: boolean | undefined;
   safeAreaInsetTop: number;
   safeAreaInsetRight: number;
   safeAreaInsetBottom: number;
@@ -66,7 +70,6 @@ function CardContainerInner({
   modal,
   getPreviousScene,
   getFocusedRoute,
-  headerDarkContent,
   hasAbsoluteFloatHeader,
   headerHeight,
   onHeaderHeightChange,
@@ -202,19 +205,22 @@ function CardContainerInner({
     transitionSpec,
   } = scene.descriptor.options;
 
+  const { buildHref } = useLinkTools();
   const previousScene = getPreviousScene({ route: scene.descriptor.route });
 
   let backTitle: string | undefined;
+  let href: string | undefined;
 
   if (previousScene) {
     const { options, route } = previousScene.descriptor;
 
     backTitle = getHeaderTitle(options, route.name);
+    href = buildHref(route.name, route.params);
   }
 
   const headerBack = React.useMemo(
-    () => (backTitle !== undefined ? { title: backTitle } : undefined),
-    [backTitle]
+    () => ({ title: backTitle, href }),
+    [backTitle, href]
   );
 
   return (
@@ -246,7 +252,6 @@ function CardContainerInner({
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
-      headerDarkContent={headerDarkContent}
       containerStyle={
         hasAbsoluteFloatHeader && headerMode !== 'screen'
           ? { marginTop: headerHeight }

package/src/views/Stack/CardSheet.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { StyleSheet, View, type ViewProps } from 'react-native';
 
 type Props = ViewProps & {
   enabled: boolean;
@@ -27,6 +27,7 @@ export const CardSheet = React.forwardRef<CardSheetRef, Props>(
       return { setPointerEvents };
     });
 
+    const workaroundApplied = React.useRef(false);
     React.useEffect(() => {
       if (typeof document === 'undefined' || !document.body) {
         // Only run when DOM is available
@@ -36,6 +37,29 @@ export const CardSheet = React.forwardRef<CardSheetRef, Props>(
       const width = document.body.clientWidth;
       const height = document.body.clientHeight;
 
+      // Workaround for mobile Chrome, necessary when a navigation happens
+      // when the address bar has already collapsed, which resulted in an
+      // empty space at the bottom of the page (matching the height of the
+      // address bar). To fix this, it's necessary to update the height of
+      // the DOM with the current height of the window.
+      // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+      const fillHeight = height === layout.height;
+      if (fillHeight) {
+        const vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
+        document.body.setAttribute(
+          'style',
+          `height: calc(var(--vh, 1vh) * 100);`
+        );
+        workaroundApplied.current = true;
+      } else {
+        // Revert the workaround if the stack does not occupy the whole
+        // height of the page
+        if (workaroundApplied.current) {
+          document.documentElement.style.removeProperty('--vh');
+        }
+      }
+
       setFill(width === layout.width && height === layout.height);
     }, [layout.height, layout.width]);
 

package/src/views/Stack/CardStack.tsx

@@ -9,11 +9,10 @@ import type {
   Route,
   StackNavigationState,
 } from '@react-navigation/native';
-import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
 } from 'react-native';
@@ -31,6 +30,7 @@ import {
 import type {
   Layout,
   Scene,
+  StackCardStyleInterpolator,
   StackDescriptor,
   StackDescriptorMap,
   StackHeaderMode,
@@ -40,7 +40,6 @@ import { findLastIndex } from '../../utils/findLastIndex';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
-import { getIsModalPresentation } from './Card';
 import { CardContainer } from './CardContainer';
 
 type GestureValues = {
@@ -114,6 +113,16 @@ const getInterpolationIndex = (scenes: Scene[], index: number) => {
   return interpolationIndex;
 };
 
+const getIsModalPresentation = (
+  cardStyleInterpolator: StackCardStyleInterpolator
+) => {
+  return (
+    cardStyleInterpolator === forModalPresentationIOS ||
+    // Handle custom modal presentation interpolators as well
+    cardStyleInterpolator.name === 'forModalPresentationIOS'
+  );
+};
+
 const getIsModal = (
   scene: Scene,
   interpolationIndex: number,
@@ -277,7 +286,7 @@ export class CardStack extends React.Component<Props, State> {
           ? nextDescriptor.options
           : descriptor.options;
 
-      let defaultTransitionPreset =
+      const defaultTransitionPreset =
         optionsForTransitionConfig.presentation === 'modal'
           ? ModalTransition
           : optionsForTransitionConfig.presentation === 'transparentModal'
@@ -628,8 +637,6 @@ export class CardStack extends React.Component<Props, State> {
             const {
               headerShown = true,
               headerTransparent,
-              headerStyle,
-              headerTintColor,
               freezeOnBlur,
             } = scene.descriptor.options;
 
@@ -641,26 +648,6 @@ export class CardStack extends React.Component<Props, State> {
             const headerHeight =
               headerShown !== false ? headerHeights[route.key] : 0;
 
-            let headerDarkContent: boolean | undefined;
-
-            if (headerShown) {
-              if (typeof headerTintColor === 'string') {
-                headerDarkContent = Color(headerTintColor).isDark();
-              } else {
-                const flattenedHeaderStyle = StyleSheet.flatten(headerStyle);
-
-                if (
-                  flattenedHeaderStyle &&
-                  'backgroundColor' in flattenedHeaderStyle &&
-                  typeof flattenedHeaderStyle.backgroundColor === 'string'
-                ) {
-                  headerDarkContent = !Color(
-                    flattenedHeaderStyle.backgroundColor
-                  ).isDark();
-                }
-              }
-            }
-
             // Start from current card and count backwards the number of cards with same interpolation
             const interpolationIndex = getInterpolationIndex(scenes, index);
             const isModal = getIsModal(
@@ -708,7 +695,6 @@ export class CardStack extends React.Component<Props, State> {
                   onHeaderHeightChange={this.handleHeaderLayout}
                   getPreviousScene={this.getPreviousScene}
                   getFocusedRoute={this.getFocusedRoute}
-                  headerDarkContent={headerDarkContent}
                   hasAbsoluteFloatHeader={
                     isFloatHeaderAbsolute && !headerTransparent
                   }

package/src/views/Stack/StackView.tsx

@@ -4,11 +4,11 @@ import {
 } from '@react-navigation/elements';
 import {
   CommonActions,
-  LocaleDirection,
-  ParamListBase,
-  Route,
+  type LocaleDirection,
+  type ParamListBase,
+  type Route,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
@@ -23,7 +23,7 @@ import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { GestureHandlerRootView } from '../GestureHandler';
 import {
   HeaderContainer,
-  Props as HeaderContainerProps,
+  type Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
 import { CardStack } from './CardStack';
 
@@ -124,12 +124,9 @@ export class StackView extends React.Component<Props, State> {
         : props.state.routes;
 
     // Now we need to determine which routes were added and removed
-    let {
-      openingRouteKeys,
-      closingRouteKeys,
-      replacingRouteKeys,
-      previousRoutes,
-    } = state;
+    const { previousRoutes } = state;
+
+    let { openingRouteKeys, closingRouteKeys, replacingRouteKeys } = state;
 
     const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
       | Route<string>

package/lib/commonjs/views/ModalStatusBarManager.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ModalStatusBarManager = ModalStatusBarManager;
-var _native = require("@react-navigation/native");
-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 ModalStatusBarManager(_ref) {
-  var _flattenedStyle$trans, _flattenedStyle$trans2;
-  let {
-    dark,
-    layout,
-    insets,
-    style
-  } = _ref;
-  const {
-    dark: darkTheme
-  } = (0, _native.useTheme)();
-  const [overlapping, setOverlapping] = React.useState(true);
-  const scale = 1 - 20 / layout.width;
-  const offset = (insets.top - 34) * scale;
-  const flattenedStyle = _reactNative.StyleSheet.flatten(style);
-  const translateY = flattenedStyle === null || flattenedStyle === void 0 ? void 0 : (_flattenedStyle$trans = flattenedStyle.transform) === null || _flattenedStyle$trans === void 0 ? void 0 : (_flattenedStyle$trans2 = _flattenedStyle$trans.find(s => s.translateY !== undefined)) === null || _flattenedStyle$trans2 === void 0 ? void 0 : _flattenedStyle$trans2.translateY;
-  React.useEffect(() => {
-    const listener = _ref2 => {
-      let {
-        value
-      } = _ref2;
-      setOverlapping(value < offset);
-    };
-    const sub = translateY === null || translateY === void 0 ? void 0 : translateY.addListener(listener);
-    return () => translateY === null || translateY === void 0 ? void 0 : translateY.removeListener(sub);
-  }, [offset, translateY]);
-  const darkContent = dark ?? !darkTheme;
-  return /*#__PURE__*/React.createElement(_reactNative.StatusBar, {
-    animated: true,
-    barStyle: overlapping && darkContent ? 'dark-content' : 'light-content'
-  });
-}
-//# sourceMappingURL=ModalStatusBarManager.js.map

package/lib/commonjs/views/ModalStatusBarManager.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ModalStatusBarManager","dark","layout","insets","style","darkTheme","useTheme","overlapping","setOverlapping","React","useState","scale","width","offset","top","flattenedStyle","StyleSheet","flatten","translateY","transform","find","s","undefined","useEffect","listener","value","sub","addListener","removeListener","darkContent"],"sourceRoot":"../../../src","sources":["views/ModalStatusBarManager.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAAqD;AAAA;AAY9C,SAASA,qBAAqB,OAAyC;EAAA;EAAA,IAAxC;IAAEC,IAAI;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAa,CAAC;EAC1E,MAAM;IAAEH,IAAI,EAAEI;EAAU,CAAC,GAAG,IAAAC,gBAAQ,GAAE;EACtC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;EAE1D,MAAMC,KAAK,GAAG,CAAC,GAAG,EAAE,GAAGT,MAAM,CAACU,KAAK;EACnC,MAAMC,MAAM,GAAG,CAACV,MAAM,CAACW,GAAG,GAAG,EAAE,IAAIH,KAAK;EAExC,MAAMI,cAAc,GAAGC,uBAAU,CAACC,OAAO,CAACb,KAAK,CAAC;EAChD,MAAMc,UAAU,GAAGH,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEI,SAAS,oFAAzB,sBAA2BC,IAAI,CAC/CC,CAAM,IAAKA,CAAC,CAACH,UAAU,KAAKI,SAAS,CACvC,2DAFkB,uBAEhBJ,UAAU;EAEbT,KAAK,CAACc,SAAS,CAAC,MAAM;IACpB,MAAMC,QAAQ,GAAG,SAAkC;MAAA,IAAjC;QAAEC;MAAyB,CAAC;MAC5CjB,cAAc,CAACiB,KAAK,GAAGZ,MAAM,CAAC;IAChC,CAAC;IAED,MAAMa,GAAG,GAAGR,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAES,WAAW,CAACH,QAAQ,CAAC;IAE7C,OAAO,MAAMN,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEU,cAAc,CAACF,GAAG,CAAC;EAC9C,CAAC,EAAE,CAACb,MAAM,EAAEK,UAAU,CAAC,CAAC;EAExB,MAAMW,WAAW,GAAG5B,IAAI,IAAI,CAACI,SAAS;EAEtC,oBACE,oBAAC,sBAAS;IACR,QAAQ;IACR,QAAQ,EAAEE,WAAW,IAAIsB,WAAW,GAAG,cAAc,GAAG;EAAgB,EACxE;AAEN"}

package/lib/module/views/ModalStatusBarManager.js

@@ -1,36 +0,0 @@
-import { useTheme } from '@react-navigation/native';
-import * as React from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
-export function ModalStatusBarManager(_ref) {
-  var _flattenedStyle$trans, _flattenedStyle$trans2;
-  let {
-    dark,
-    layout,
-    insets,
-    style
-  } = _ref;
-  const {
-    dark: darkTheme
-  } = useTheme();
-  const [overlapping, setOverlapping] = React.useState(true);
-  const scale = 1 - 20 / layout.width;
-  const offset = (insets.top - 34) * scale;
-  const flattenedStyle = StyleSheet.flatten(style);
-  const translateY = flattenedStyle === null || flattenedStyle === void 0 ? void 0 : (_flattenedStyle$trans = flattenedStyle.transform) === null || _flattenedStyle$trans === void 0 ? void 0 : (_flattenedStyle$trans2 = _flattenedStyle$trans.find(s => s.translateY !== undefined)) === null || _flattenedStyle$trans2 === void 0 ? void 0 : _flattenedStyle$trans2.translateY;
-  React.useEffect(() => {
-    const listener = _ref2 => {
-      let {
-        value
-      } = _ref2;
-      setOverlapping(value < offset);
-    };
-    const sub = translateY === null || translateY === void 0 ? void 0 : translateY.addListener(listener);
-    return () => translateY === null || translateY === void 0 ? void 0 : translateY.removeListener(sub);
-  }, [offset, translateY]);
-  const darkContent = dark ?? !darkTheme;
-  return /*#__PURE__*/React.createElement(StatusBar, {
-    animated: true,
-    barStyle: overlapping && darkContent ? 'dark-content' : 'light-content'
-  });
-}
-//# sourceMappingURL=ModalStatusBarManager.js.map

package/lib/module/views/ModalStatusBarManager.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useTheme","React","StatusBar","StyleSheet","ModalStatusBarManager","dark","layout","insets","style","darkTheme","overlapping","setOverlapping","useState","scale","width","offset","top","flattenedStyle","flatten","translateY","transform","find","s","undefined","useEffect","listener","value","sub","addListener","removeListener","darkContent"],"sourceRoot":"../../../src","sources":["views/ModalStatusBarManager.tsx"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AAYpD,OAAO,SAASC,qBAAqB,OAAyC;EAAA;EAAA,IAAxC;IAAEC,IAAI;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAa,CAAC;EAC1E,MAAM;IAAEH,IAAI,EAAEI;EAAU,CAAC,GAAGT,QAAQ,EAAE;EACtC,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGV,KAAK,CAACW,QAAQ,CAAC,IAAI,CAAC;EAE1D,MAAMC,KAAK,GAAG,CAAC,GAAG,EAAE,GAAGP,MAAM,CAACQ,KAAK;EACnC,MAAMC,MAAM,GAAG,CAACR,MAAM,CAACS,GAAG,GAAG,EAAE,IAAIH,KAAK;EAExC,MAAMI,cAAc,GAAGd,UAAU,CAACe,OAAO,CAACV,KAAK,CAAC;EAChD,MAAMW,UAAU,GAAGF,cAAc,aAAdA,cAAc,gDAAdA,cAAc,CAAEG,SAAS,oFAAzB,sBAA2BC,IAAI,CAC/CC,CAAM,IAAKA,CAAC,CAACH,UAAU,KAAKI,SAAS,CACvC,2DAFkB,uBAEhBJ,UAAU;EAEblB,KAAK,CAACuB,SAAS,CAAC,MAAM;IACpB,MAAMC,QAAQ,GAAG,SAAkC;MAAA,IAAjC;QAAEC;MAAyB,CAAC;MAC5Cf,cAAc,CAACe,KAAK,GAAGX,MAAM,CAAC;IAChC,CAAC;IAED,MAAMY,GAAG,GAAGR,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAES,WAAW,CAACH,QAAQ,CAAC;IAE7C,OAAO,MAAMN,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEU,cAAc,CAACF,GAAG,CAAC;EAC9C,CAAC,EAAE,CAACZ,MAAM,EAAEI,UAAU,CAAC,CAAC;EAExB,MAAMW,WAAW,GAAGzB,IAAI,IAAI,CAACI,SAAS;EAEtC,oBACE,oBAAC,SAAS;IACR,QAAQ;IACR,QAAQ,EAAEC,WAAW,IAAIoB,WAAW,GAAG,cAAc,GAAG;EAAgB,EACxE;AAEN"}

package/lib/typescript/src/views/ModalStatusBarManager.d.ts

@@ -1,11 +0,0 @@
-import type { EdgeInsets } from 'react-native-safe-area-context';
-import type { Layout } from '../types';
-type Props = {
-    dark: boolean | undefined;
-    layout: Layout;
-    insets: EdgeInsets;
-    style: any;
-};
-export declare function ModalStatusBarManager({ dark, layout, insets, style }: Props): JSX.Element;
-export {};
-//# sourceMappingURL=ModalStatusBarManager.d.ts.map

package/lib/typescript/src/views/ModalStatusBarManager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalStatusBarManager.d.ts","sourceRoot":"","sources":["../../../../src/views/ModalStatusBarManager.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,eA8B3E"}

package/src/views/ModalStatusBarManager.tsx

@@ -1,45 +0,0 @@
-import { useTheme } from '@react-navigation/native';
-import * as React from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
-
-import type { Layout } from '../types';
-
-type Props = {
-  dark: boolean | undefined;
-  layout: Layout;
-  insets: EdgeInsets;
-  style: any;
-};
-
-export function ModalStatusBarManager({ dark, layout, insets, style }: Props) {
-  const { dark: darkTheme } = useTheme();
-  const [overlapping, setOverlapping] = React.useState(true);
-
-  const scale = 1 - 20 / layout.width;
-  const offset = (insets.top - 34) * scale;
-
-  const flattenedStyle = StyleSheet.flatten(style);
-  const translateY = flattenedStyle?.transform?.find(
-    (s: any) => s.translateY !== undefined
-  )?.translateY;
-
-  React.useEffect(() => {
-    const listener = ({ value }: { value: number }) => {
-      setOverlapping(value < offset);
-    };
-
-    const sub = translateY?.addListener(listener);
-
-    return () => translateY?.removeListener(sub);
-  }, [offset, translateY]);
-
-  const darkContent = dark ?? !darkTheme;
-
-  return (
-    <StatusBar
-      animated
-      barStyle={overlapping && darkContent ? 'dark-content' : 'light-content'}
-    />
-  );
-}