@react-navigation/stack 7.0.0-alpha.0 → 7.0.0-alpha.10

package/src/views/Stack/CardContainer.tsx

@@ -4,15 +4,20 @@ 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';
 
 import type { Layout, Scene } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
-import useKeyboardManager from '../../utils/useKeyboardManager';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { useKeyboardManager } from '../../utils/useKeyboardManager';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import Card from './Card';
+import { Card } from './Card';
 
 type Props = {
   interpolationIndex: number;
@@ -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: (
@@ -56,7 +60,7 @@ type Props = {
 
 const EPSILON = 0.1;
 
-function CardContainer({
+function CardContainerInner({
   interpolationIndex,
   index,
   active,
@@ -66,7 +70,6 @@ function CardContainer({
   modal,
   getPreviousScene,
   getFocusedRoute,
-  headerDarkContent,
   hasAbsoluteFloatHeader,
   headerHeight,
   onHeaderHeightChange,
@@ -81,14 +84,16 @@ function CardContainer({
   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 CardContainer({
     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 CardContainer({
       gestureDirection={gestureDirection}
       layout={layout}
       insets={insets}
+      direction={direction}
       gesture={gesture}
       current={scene.progress.current}
       next={scene.progress.next}
@@ -243,7 +252,7 @@ function CardContainer({
       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 CardContainer({
                 <HeaderHeightContext.Provider
                   value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
                 >
-                  {renderScene({ route: scene.descriptor.route })}
+                  {scene.descriptor.render()}
                 </HeaderHeightContext.Provider>
               </HeaderShownContext.Provider>
             </HeaderBackContext.Provider>
@@ -307,7 +316,7 @@ function CardContainer({
   );
 }
 
-export default React.memo(CardContainer);
+export const CardContainer = React.memo(CardContainerInner);
 
 const styles = StyleSheet.create({
   container: {

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;
@@ -15,40 +15,63 @@ export type CardSheetRef = {
 // if the container fills the body by comparing the size
 // This lets the document.body handle scrolling of the content
 // It's necessary for mobile browsers to be able to hide address bar on scroll
-export default React.forwardRef<CardSheetRef, Props>(function CardSheet(
-  { enabled, layout, style, ...rest },
-  ref
-) {
-  const [fill, setFill] = React.useState(false);
-  // To avoid triggering a rerender in Card during animation we had to move
-  // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
-  const [pointerEvents, setPointerEvents] =
-    React.useState<ViewProps['pointerEvents']>('auto');
-
-  React.useImperativeHandle(ref, () => {
-    return { setPointerEvents };
-  });
-
-  React.useEffect(() => {
-    if (typeof document === 'undefined' || !document.body) {
-      // Only run when DOM is available
-      return;
-    }
-
-    const width = document.body.clientWidth;
-    const height = document.body.clientHeight;
-
-    setFill(width === layout.width && height === layout.height);
-  }, [layout.height, layout.width]);
-
-  return (
-    <View
-      {...rest}
-      pointerEvents={pointerEvents}
-      style={[enabled && fill ? styles.page : styles.card, style]}
-    />
-  );
-});
+export const CardSheet = React.forwardRef<CardSheetRef, Props>(
+  function CardSheet({ enabled, layout, style, ...rest }, ref) {
+    const [fill, setFill] = React.useState(false);
+    // To avoid triggering a rerender in Card during animation we had to move
+    // the state to CardSheet. The `setPointerEvents` is then hoisted back to the Card.
+    const [pointerEvents, setPointerEvents] =
+      React.useState<ViewProps['pointerEvents']>('auto');
+
+    React.useImperativeHandle(ref, () => {
+      return { setPointerEvents };
+    });
+
+    const workaroundApplied = React.useRef(false);
+    React.useEffect(() => {
+      if (typeof document === 'undefined' || !document.body) {
+        // Only run when DOM is available
+        return;
+      }
+
+      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]);
+
+    return (
+      <View
+        {...rest}
+        pointerEvents={pointerEvents}
+        style={[enabled && fill ? styles.page : styles.card, style]}
+      />
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   page: {