@react-navigation/stack 7.0.0-alpha.1 → 7.0.0-alpha.11

package/src/views/Stack/CardContainer.tsx

@@ -4,7 +4,12 @@ import {
   HeaderHeightContext,
   HeaderShownContext,
 } from '@react-navigation/elements';
-import { Route, useTheme } from '@react-navigation/native';
+import {
+  type Route,
+  useLinkBuilder,
+  useLocale,
+  useTheme,
+} from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
@@ -23,8 +28,8 @@ type Props = {
   modal: boolean;
   layout: Layout;
   gesture: Animated.Value;
+  preloaded: boolean;
   scene: Scene;
-  headerDarkContent: boolean | undefined;
   safeAreaInsetTop: number;
   safeAreaInsetRight: number;
   safeAreaInsetBottom: number;
@@ -32,7 +37,6 @@ type Props = {
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  renderScene: (props: { route: Route<string> }) => React.ReactNode;
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
   onTransitionStart: (
@@ -66,7 +70,6 @@ function CardContainerInner({
   modal,
   getPreviousScene,
   getFocusedRoute,
-  headerDarkContent,
   hasAbsoluteFloatHeader,
   headerHeight,
   onHeaderHeightChange,
@@ -81,14 +84,16 @@ function CardContainerInner({
   onGestureStart,
   onTransitionEnd,
   onTransitionStart,
+  preloaded,
   renderHeader,
-  renderScene,
   safeAreaInsetBottom,
   safeAreaInsetLeft,
   safeAreaInsetRight,
   safeAreaInsetTop,
   scene,
 }: Props) {
+  const { direction } = useLocale();
+
   const parentHeaderHeight = React.useContext(HeaderHeightContext);
 
   const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
@@ -200,19 +205,22 @@ function CardContainerInner({
     transitionSpec,
   } = scene.descriptor.options;
 
+  const { buildHref } = useLinkBuilder();
   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 (
@@ -221,6 +229,7 @@ function CardContainerInner({
       gestureDirection={gestureDirection}
       layout={layout}
       insets={insets}
+      direction={direction}
       gesture={gesture}
       current={scene.progress.current}
       next={scene.progress.next}
@@ -243,7 +252,7 @@ function CardContainerInner({
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
-      headerDarkContent={headerDarkContent}
+      preloaded={preloaded}
       containerStyle={
         hasAbsoluteFloatHeader && headerMode !== 'screen'
           ? { marginTop: headerHeight }
@@ -286,7 +295,7 @@ function CardContainerInner({
                 <HeaderHeightContext.Provider
                   value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
                 >
-                  {renderScene({ route: scene.descriptor.route })}
+                  {scene.descriptor.render()}
                 </HeaderHeightContext.Provider>
               </HeaderShownContext.Provider>
             </HeaderBackContext.Provider>

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]);