@react-navigation/stack 8.0.0-alpha.5 → 8.0.0-alpha.51

package/src/views/Header/HeaderContainer.tsx

@@ -1,12 +1,18 @@
 import { getHeaderTitle, HeaderBackContext } from '@react-navigation/elements';
+import { ActivityView } from '@react-navigation/elements/internal';
 import {
   NavigationProvider,
-  type ParamListBase,
   type Route,
   useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import {
+  type LayoutChangeEvent,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 
 import {
   forNoAnimation,
@@ -14,20 +20,21 @@ import {
   forSlideRight,
   forSlideUp,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
-import type {
-  Scene,
-  StackHeaderMode,
-  StackHeaderProps,
-  StackNavigationProp,
-} from '../../types';
+import type { Scene, StackHeaderMode, StackHeaderProps } from '../../types';
 import { Header } from './Header';
 
+export type HeaderHeight = {
+  measured: boolean;
+  value: number;
+};
+
 export type Props = {
   mode: StackHeaderMode;
   scenes: (Scene | undefined)[];
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
-  onContentHeightChange?: (props: {
+  contentHeight: HeaderHeight | undefined;
+  onContentHeightChange: (props: {
     route: Route<string>;
     height: number;
   }) => void;
@@ -39,19 +46,17 @@ export function HeaderContainer({
   scenes,
   getPreviousScene,
   getFocusedRoute,
+  contentHeight,
   onContentHeightChange,
   style,
 }: Props) {
   const focusedRoute = getFocusedRoute();
-  const parentHeaderBack = React.useContext(HeaderBackContext);
+  const parentHeaderBack = React.use(HeaderBackContext);
   const { buildHref } = useLinkBuilder();
 
   return (
     <View style={[styles.container, style]}>
-      {/* We render header only on two top-most headers as
-         a workaround for https://github.com/react-navigation/react-navigation/issues/12456.
-         If the header is persisted, it might be placed incorrectly when navigating back. */}
-      {scenes.slice(-2).map((scene, i, self) => {
+      {scenes.map((scene, i, self) => {
         if ((mode === 'screen' && i !== self.length - 1) || !scene) {
           return null;
         }
@@ -96,6 +101,9 @@ export function HeaderContainer({
           headerMode: previousHeaderMode,
         } = previousDescriptor?.options || {};
 
+        const { headerTransparent: nextHeaderTransparent } =
+          nextDescriptor?.options || {};
+
         // If any of the next screens don't have a header or header is part of the screen
         // Then we need to move this header offscreen so that it doesn't cover it
         const nextHeaderlessScene = self.slice(i + 1).find((scene) => {
@@ -115,6 +123,9 @@ export function HeaderContainer({
             // We still need to animate when coming back from next scene
             // A hacky way to check this is if the next scene exists
             !nextDescriptor) ||
+          // If next header is tranparent, we want to treat this header as static
+          // Otherwise it may show through the next header
+          nextHeaderTransparent ||
           nextHeaderlessScene;
 
         const props: StackHeaderProps = {
@@ -122,8 +133,7 @@ export function HeaderContainer({
           progress: scene.progress,
           options: scene.descriptor.options,
           route: scene.descriptor.route,
-          navigation: scene.descriptor
-            .navigation as StackNavigationProp<ParamListBase>,
+          navigation: scene.descriptor.navigation,
           styleInterpolator:
             mode === 'float'
               ? isHeaderStatic
@@ -137,6 +147,26 @@ export function HeaderContainer({
               : forNoAnimation,
         };
 
+        const onRef = (node: React.ComponentRef<typeof View> | null) => {
+          node?.measure((_x, _y, _width, height) => {
+            if (height && !contentHeight?.measured) {
+              onContentHeightChange({
+                route: scene.descriptor.route,
+                height,
+              });
+            }
+          });
+        };
+
+        const onLayout = (e: LayoutChangeEvent) => {
+          const { height } = e.nativeEvent.layout;
+
+          onContentHeightChange({
+            route: scene.descriptor.route,
+            height,
+          });
+        };
+
         return (
           <NavigationProvider
             key={scene.descriptor.route.key}
@@ -144,31 +174,37 @@ export function HeaderContainer({
             route={scene.descriptor.route}
           >
             <View
-              onLayout={
-                onContentHeightChange
-                  ? (e) => {
-                      const { height } = e.nativeEvent.layout;
-
-                      onContentHeightChange({
-                        route: scene.descriptor.route,
-                        height,
-                      });
-                    }
-                  : undefined
-              }
-              aria-hidden={!isFocused}
               style={[
-                // Avoid positioning the focused header absolutely
+                // Avoid absolutely positioning the focused header unnecessarily
                 // Otherwise accessibility tools don't seem to be able to find it
                 (mode === 'float' && !isFocused) || headerTransparent
-                  ? styles.header
+                  ? [
+                      styles.absolute,
+                      mode === 'screen'
+                        ? // For transparent headers, specify a min height
+                          // This is needed for screen readers, and testing tools on Android
+                          // For float header, it's handled in CardStack
+                          { minHeight: contentHeight?.value }
+                        : null,
+                    ]
                   : null,
                 {
                   pointerEvents: isFocused ? 'box-none' : 'none',
                 },
               ]}
             >
-              {header !== undefined ? header(props) : <Header {...props} />}
+              <View
+                ref={onRef}
+                onLayout={onLayout}
+                style={{ pointerEvents: 'box-none' }}
+              >
+                <ActivityView
+                  mode={isFocused ? 'normal' : 'inert'}
+                  visible={true}
+                >
+                  {header !== undefined ? header(props) : <Header {...props} />}
+                </ActivityView>
+              </View>
             </View>
           </NavigationProvider>
         );
@@ -181,7 +217,7 @@ const styles = StyleSheet.create({
   container: {
     pointerEvents: 'box-none',
   },
-  header: {
+  absolute: {
     position: 'absolute',
     top: 0,
     start: 0,

package/src/views/Header/HeaderSegment.tsx

@@ -20,8 +20,8 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
   title: string;
   modal: boolean;
-  onGoBack?: () => void;
-  backHref?: string;
+  onGoBack?: (() => void) | undefined;
+  backHref?: string | undefined;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
@@ -40,7 +40,7 @@ export function HeaderSegment(props: Props) {
       ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
       : undefined,
     headerRight: right,
-    headerBackImage,
+    headerBackIcon,
     headerBackTitle,
     headerBackButtonDisplayMode,
     headerBackTruncatedTitle,
@@ -64,9 +64,8 @@ export function HeaderSegment(props: Props) {
     topInset: headerStatusBarHeight,
   });
 
-  const { height = defaultHeight } = StyleSheet.flatten(
-    customHeaderStyle || {}
-  ) as ViewStyle;
+  const { height = defaultHeight } = (StyleSheet.flatten(customHeaderStyle) ??
+    {}) as ViewStyle;
 
   const headerHeight = typeof height === 'number' ? height : defaultHeight;
 
@@ -93,7 +92,7 @@ export function HeaderSegment(props: Props) {
         left({
           ...props,
           href: backHref,
-          backImage: headerBackImage,
+          icon: headerBackIcon,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,
           allowFontScaling: headerBackAllowFontScaling,

package/src/views/Stack/Card.tsx

@@ -9,6 +9,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
+import type { PanGestureConfig } from 'react-native-gesture-handler';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 
@@ -23,11 +24,7 @@ import { gestureActivationCriteria } from '../../utils/gestureActivationCriteria
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
 import { getShadowStyle } from '../../utils/getShadowStyle';
-import {
-  GestureState,
-  PanGestureHandler,
-  type PanGestureHandlerGestureEvent,
-} from '../GestureHandler';
+import { GestureDetector, usePanGesture } from '../GestureHandler';
 import { CardContent } from './CardContent';
 
 type Props = {
@@ -58,7 +55,7 @@ type Props = {
   overlayEnabled: boolean;
   shadowEnabled: boolean | undefined;
   gestureEnabled: boolean;
-  gestureResponseDistance?: number;
+  gestureResponseDistance?: number | undefined;
   gestureVelocityImpact: number | undefined;
   transitionSpec: {
     open: TransitionSpec;
@@ -66,8 +63,8 @@ type Props = {
   };
   preloaded: boolean;
   styleInterpolator: StackCardStyleInterpolator;
-  containerStyle?: StyleProp<ViewStyle>;
-  contentStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle> | undefined;
+  contentStyle?: StyleProp<ViewStyle> | undefined;
 };
 
 const GESTURE_VELOCITY_IMPACT = 0.3;
@@ -83,7 +80,11 @@ const hasOpacityStyle = (
   if (style) {
     const flattenedStyle = StyleSheet.flatten(style);
 
-    return 'opacity' in flattenedStyle && flattenedStyle.opacity != null;
+    return (
+      flattenedStyle != null &&
+      'opacity' in flattenedStyle &&
+      flattenedStyle.opacity != null
+    );
   }
 
   return false;
@@ -151,14 +152,14 @@ function Card({
   containerStyle: customContainerStyle,
   contentStyle,
 }: Props) {
-  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
-
   const didInitiallyAnimate = React.useRef(false);
   const lastToValueRef = React.useRef<number | undefined>(undefined);
 
   const animationHandleRef = React.useRef<number | undefined>(undefined);
   const pendingGestureCallbackRef =
     React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  const pendingOnCloseCallbackRef =
+    React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const [isClosing] = React.useState(() => new Animated.Value(FALSE));
 
@@ -218,10 +219,8 @@ function Card({
         }
 
         animationHandleRef.current = requestAnimationFrame(() => {
-          if (didInitiallyAnimate.current) {
-            // Make sure to re-open screen if it wasn't removed
-            forceUpdate();
-          }
+          // Make sure to re-open screen if it wasn't removed
+          maybeAnimate();
         });
       };
 
@@ -245,79 +244,6 @@ function Card({
     }
   );
 
-  const onGestureStateChange = useLatestCallback(
-    ({ nativeEvent }: PanGestureHandlerGestureEvent) => {
-      switch (nativeEvent.state) {
-        case GestureState.ACTIVE:
-          isSwiping.setValue(TRUE);
-          onGestureBegin?.();
-          break;
-        case GestureState.CANCELLED:
-        case GestureState.FAILED: {
-          isSwiping.setValue(FALSE);
-
-          const velocity =
-            gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-              ? nativeEvent.velocityY
-              : nativeEvent.velocityX;
-
-          animate({
-            closing,
-            velocity,
-          });
-
-          onGestureCanceled?.();
-          break;
-        }
-        case GestureState.END: {
-          isSwiping.setValue(FALSE);
-
-          let distance;
-          let translation;
-          let velocity;
-
-          if (
-            gestureDirection === 'vertical' ||
-            gestureDirection === 'vertical-inverted'
-          ) {
-            distance = layout.height;
-            translation = nativeEvent.translationY;
-            velocity = nativeEvent.velocityY;
-          } else {
-            distance = layout.width;
-            translation = nativeEvent.translationX;
-            velocity = nativeEvent.velocityX;
-          }
-
-          const shouldClose =
-            (translation + velocity * gestureVelocityImpact) *
-              getInvertedMultiplier(gestureDirection, direction === 'rtl') >
-            distance / 2
-              ? velocity !== 0 || translation !== 0
-              : closing;
-
-          animate({ closing: shouldClose, velocity });
-
-          if (shouldClose) {
-            // We call onClose with a delay to make sure that the animation has already started
-            // This will make sure that the state update caused by this doesn't affect start of animation
-            pendingGestureCallbackRef.current = setTimeout(() => {
-              onClose();
-
-              // Trigger an update after we dispatch the action to remove the screen
-              // This will make sure that we check if the screen didn't get removed so we can cancel the animation
-              forceUpdate();
-            }, 32);
-          }
-
-          onGestureEnd?.();
-          break;
-        }
-      }
-    }
-  );
-
   React.useLayoutEffect(() => {
     layoutAnim.width.setValue(layout.width);
     layoutAnim.height.setValue(layout.height);
@@ -350,17 +276,15 @@ function Card({
       }
 
       clearTimeout(pendingGestureCallbackRef.current);
+      clearTimeout(pendingOnCloseCallbackRef.current);
     };
-
-    // We only want to clean up the animation on unmount
   }, []);
 
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  React.useEffect(() => {
-    if (preloaded) {
-      return;
-    }
+  const maybeAnimate = useLatestCallback(() => {
+    clearTimeout(pendingGestureCallbackRef.current);
+    clearTimeout(pendingOnCloseCallbackRef.current);
 
     if (!didInitiallyAnimate.current) {
       // Animate the card in on initial mount
@@ -368,9 +292,8 @@ function Card({
       // rending of the screen is done. This is especially important
       // in the new architecture
       // cf., https://github.com/react-navigation/react-navigation/issues/12401
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
+      clearTimeout(timeoutRef.current);
+
       timeoutRef.current = setTimeout(() => {
         didInitiallyAnimate.current = true;
         animate({ closing });
@@ -410,6 +333,14 @@ function Card({
         animate({ closing });
       }
     }
+  });
+
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
+
+    maybeAnimate();
 
     previousPropsRef.current = {
       opening,
@@ -428,6 +359,7 @@ function Card({
     layout,
     opening,
     preloaded,
+    maybeAnimate,
   ]);
 
   const interpolationProps = React.useMemo(
@@ -463,23 +395,95 @@ function Card({
     ]
   );
 
-  const { containerStyle, cardStyle, overlayStyle, shadowStyle } =
+  const { containerStyle, cardStyle, overlayStyle, dimStyle, shadowStyle } =
     React.useMemo(
       () => styleInterpolator(interpolationProps),
       [styleInterpolator, interpolationProps]
     );
 
-  const onGestureEvent = React.useMemo(
+  const onGestureActivate: PanGestureConfig['onActivate'] = useLatestCallback(
+    () => {
+      clearTimeout(pendingGestureCallbackRef.current);
+      clearTimeout(pendingOnCloseCallbackRef.current);
+      isSwiping.setValue(TRUE);
+      onGestureBegin?.();
+    }
+  );
+
+  const onGestureDeactivate: PanGestureConfig['onDeactivate'] =
+    useLatestCallback((event) => {
+      isSwiping.setValue(FALSE);
+
+      let distance;
+      let translation;
+      let velocity;
+
+      if (
+        gestureDirection === 'vertical' ||
+        gestureDirection === 'vertical-inverted'
+      ) {
+        distance = layout.height;
+        translation = event.translationY;
+        velocity = event.velocityY;
+      } else {
+        distance = layout.width;
+        translation = event.translationX;
+        velocity = event.velocityX;
+      }
+
+      gesture.setValue(translation);
+
+      if (event.canceled) {
+        animate({
+          closing,
+          velocity,
+        });
+
+        onGestureCanceled?.();
+
+        return;
+      }
+
+      const shouldClose =
+        (translation + velocity * gestureVelocityImpact) *
+          getInvertedMultiplier(gestureDirection, direction === 'rtl') >
+        distance / 2
+          ? velocity !== 0 || translation !== 0
+          : closing;
+
+      animate({ closing: shouldClose, velocity });
+
+      if (shouldClose) {
+        // We call onClose with a delay to make sure that the animation has already started
+        // This will make sure that the state update caused by this doesn't affect start of animation
+        pendingGestureCallbackRef.current = setTimeout(() => {
+          onClose();
+
+          // Check if the screen is still closing with a delay
+          // So state update from onClose has a chance to go through
+          // If route wasn't removed after onClose, re-open it
+          pendingOnCloseCallbackRef.current = setTimeout(() => {
+            maybeAnimate();
+          }, 32);
+        }, 16);
+      }
+
+      onGestureEnd?.();
+    });
+
+  const onGestureEvent: PanGestureConfig['onUpdate'] = React.useMemo(
     () =>
       gestureEnabled
         ? Animated.event(
             [
               {
-                nativeEvent:
-                  gestureDirection === 'vertical' ||
-                  gestureDirection === 'vertical-inverted'
-                    ? { translationY: gesture }
-                    : { translationX: gesture },
+                nativeEvent: {
+                  handlerData:
+                    gestureDirection === 'vertical' ||
+                    gestureDirection === 'vertical-inverted'
+                      ? { translationY: gesture }
+                      : { translationX: gesture },
+                },
               },
             ],
             { useNativeDriver }
@@ -488,7 +492,36 @@ function Card({
     [gesture, gestureDirection, gestureEnabled]
   );
 
-  const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
+  const panGestureConfig = React.useMemo(
+    (): PanGestureConfig => ({
+      enabled: layout.width !== 0 && gestureEnabled,
+      onActivate: onGestureActivate,
+      onDeactivate: onGestureDeactivate,
+      onUpdate: onGestureEvent,
+      disableReanimated: true,
+      useAnimated: true,
+      ...gestureActivationCriteria({
+        layout,
+        direction,
+        gestureDirection,
+        gestureResponseDistance,
+      }),
+    }),
+    [
+      direction,
+      gestureDirection,
+      gestureEnabled,
+      gestureResponseDistance,
+      layout,
+      onGestureActivate,
+      onGestureDeactivate,
+      onGestureEvent,
+    ]
+  );
+
+  const panGesture = usePanGesture(panGestureConfig);
+
+  const backgroundColor = StyleSheet.flatten(contentStyle)?.backgroundColor;
 
   const isTransparent =
     typeof backgroundColor === 'string'
@@ -519,20 +552,10 @@ function Card({
       <Animated.View
         style={[styles.container, containerStyle, customContainerStyle]}
       >
-        <PanGestureHandler
-          enabled={layout.width !== 0 && gestureEnabled}
-          onGestureEvent={onGestureEvent}
-          onHandlerStateChange={onGestureStateChange}
-          {...gestureActivationCriteria({
-            layout,
-            direction,
-            gestureDirection,
-            gestureResponseDistance,
-          })}
-        >
+        <GestureDetector gesture={panGesture}>
           <Animated.View
             needsOffscreenAlphaCompositing={hasOpacityStyle(cardStyle)}
-            style={[styles.container, cardStyle]}
+            style={[styles.card, cardStyle]}
           >
             {shadowEnabled && shadowStyle && !isTransparent ? (
               <Animated.View
@@ -557,8 +580,9 @@ function Card({
             >
               {children}
             </CardContent>
+            {dimStyle ? <Animated.View style={[styles.dim, dimStyle]} /> : null}
           </Animated.View>
-        </PanGestureHandler>
+        </GestureDetector>
       </Animated.View>
     </CardAnimationContext.Provider>
   );
@@ -571,11 +595,22 @@ const styles = StyleSheet.create({
     flex: 1,
     pointerEvents: 'box-none',
   },
+  card: {
+    flex: 1,
+    // This is necessary for gestures to work
+    // Without this, gestures won't work if the child view is flattened
+    pointerEvents: 'auto',
+  },
   overlay: {
     flex: 1,
     backgroundColor: '#000',
     pointerEvents: 'none',
   },
+  dim: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: '#000',
+    pointerEvents: 'none',
+  },
   shadow: {
     position: 'absolute',
     pointerEvents: 'none',