@react-navigation/stack 8.0.0-alpha.4 → 8.0.0-alpha.41

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;
@@ -151,14 +148,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 +215,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 +240,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 +272,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 +288,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 +329,14 @@ function Card({
         animate({ closing });
       }
     }
+  });
+
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
+
+    maybeAnimate();
 
     previousPropsRef.current = {
       opening,
@@ -428,6 +355,7 @@ function Card({
     layout,
     opening,
     preloaded,
+    maybeAnimate,
   ]);
 
   const interpolationProps = React.useMemo(
@@ -469,17 +397,89 @@ function Card({
       [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,6 +488,35 @@ function Card({
     [gesture, gestureDirection, gestureEnabled]
   );
 
+  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 || {});
 
   const isTransparent =
@@ -519,17 +548,7 @@ 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]}
@@ -558,7 +577,7 @@ function Card({
               {children}
             </CardContent>
           </Animated.View>
-        </PanGestureHandler>
+        </GestureDetector>
       </Animated.View>
     </CardAnimationContext.Provider>
   );

package/src/views/Stack/CardContainer.tsx

@@ -16,9 +16,11 @@ import { Animated, StyleSheet, View } from 'react-native';
 import type { Layout, Scene } from '../../types';
 import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
 import { useKeyboardManager } from '../../utils/useKeyboardManager';
-import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
+import type {
+  HeaderHeight,
+  Props as HeaderContainerProps,
+} from '../Header/HeaderContainer';
 import { Card } from './Card';
-import { CardA11yWrapper, type CardA11yWrapperRef } from './CardA11yWrapper';
 
 type Props = {
   interpolationIndex: number;
@@ -49,19 +51,15 @@ type Props = {
   onGestureStart: (props: { route: Route<string> }) => void;
   onGestureEnd: (props: { route: Route<string> }) => void;
   onGestureCancel: (props: { route: Route<string> }) => void;
-  hasAbsoluteFloatHeader: boolean;
-  headerHeight: number;
+  headerHeight: HeaderHeight | undefined;
   onHeaderHeightChange: (props: {
     route: Route<string>;
     height: number;
   }) => void;
   isParentHeaderShown: boolean;
-  isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
+  children: React.ReactNode;
 };
 
-const EPSILON = 0.1;
-
 function CardContainerInner({
   interpolationIndex,
   index,
@@ -73,12 +71,9 @@ function CardContainerInner({
   modal,
   getPreviousScene,
   getFocusedRoute,
-  hasAbsoluteFloatHeader,
   headerHeight,
   onHeaderHeightChange,
   isParentHeaderShown,
-  isNextScreenTransparent,
-  detachCurrentScreen,
   layout,
   onCloseRoute,
   onOpenRoute,
@@ -94,23 +89,22 @@ function CardContainerInner({
   safeAreaInsetRight,
   safeAreaInsetTop,
   scene,
+  children,
 }: Props) {
-  const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
-
   const { direction } = useLocale();
 
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const parentHeaderHeight = React.use(HeaderHeightContext);
 
-  const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
-    useKeyboardManager(
-      React.useCallback(() => {
-        const { options, navigation } = scene.descriptor;
+  const { options } = scene.descriptor;
+  const enabled = options.keyboardHandlingEnabled !== false;
+  const contentRef = React.useRef<View>(null);
 
-        return (
-          navigation.isFocused() && options.keyboardHandlingEnabled !== false
-        );
-      }, [scene.descriptor])
-    );
+  const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
+    useKeyboardManager({
+      enabled,
+      focused,
+      contentRef,
+    });
 
   const handleOpen = () => {
     const { route } = scene.descriptor;
@@ -153,17 +147,9 @@ function CardContainerInner({
     closing: boolean;
     gesture: boolean;
   }) => {
-    wrapperRef.current?.setInert(closing);
-
     const { route } = scene.descriptor;
 
-    if (!gesture) {
-      onPageChangeConfirm?.(true);
-    } else if (active && closing) {
-      onPageChangeConfirm?.(false);
-    } else {
-      onPageChangeCancel?.();
-    }
+    onPageChangeConfirm?.({ gesture, active, closing });
 
     onTransitionStart?.({ route }, closing);
   };
@@ -177,20 +163,6 @@ function CardContainerInner({
 
   const { colors } = useTheme();
 
-  React.useEffect(() => {
-    const listener = scene.progress.next?.addListener?.(
-      ({ value }: { value: number }) => {
-        wrapperRef.current?.setInert(value > EPSILON);
-      }
-    );
-
-    return () => {
-      if (listener) {
-        scene.progress.next?.removeListener?.(listener);
-      }
-    };
-  }, [scene.progress.next]);
-
   const {
     presentation,
     animation,
@@ -236,90 +208,77 @@ function CardContainerInner({
   const animated = animation !== 'none';
 
   return (
-    <CardA11yWrapper
-      ref={wrapperRef}
-      focused={focused}
-      active={active}
+    <Card
       animated={animated}
-      isNextScreenTransparent={isNextScreenTransparent}
-      detachCurrentScreen={detachCurrentScreen}
+      interpolationIndex={interpolationIndex}
+      gestureDirection={gestureDirection}
+      layout={layout}
+      insets={insets}
+      direction={direction}
+      gesture={gesture}
+      current={scene.progress.current}
+      next={scene.progress.next}
+      opening={opening}
+      closing={closing}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      overlay={cardOverlay}
+      overlayEnabled={cardOverlayEnabled}
+      shadowEnabled={cardShadowEnabled}
+      onTransition={handleTransition}
+      onGestureBegin={handleGestureBegin}
+      onGestureCanceled={handleGestureCanceled}
+      onGestureEnd={handleGestureEnd}
+      gestureEnabled={index === 0 ? false : gestureEnabled}
+      gestureResponseDistance={gestureResponseDistance}
+      gestureVelocityImpact={gestureVelocityImpact}
+      transitionSpec={transitionSpec}
+      styleInterpolator={cardStyleInterpolator}
+      pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
+      preloaded={preloaded}
+      contentStyle={[
+        {
+          backgroundColor:
+            presentation === 'transparentModal'
+              ? 'transparent'
+              : colors.background,
+        },
+        cardStyle,
+      ]}
     >
-      <Card
-        animated={animated}
-        interpolationIndex={interpolationIndex}
-        gestureDirection={gestureDirection}
-        layout={layout}
-        insets={insets}
-        direction={direction}
-        gesture={gesture}
-        current={scene.progress.current}
-        next={scene.progress.next}
-        opening={opening}
-        closing={closing}
-        onOpen={handleOpen}
-        onClose={handleClose}
-        overlay={cardOverlay}
-        overlayEnabled={cardOverlayEnabled}
-        shadowEnabled={cardShadowEnabled}
-        onTransition={handleTransition}
-        onGestureBegin={handleGestureBegin}
-        onGestureCanceled={handleGestureCanceled}
-        onGestureEnd={handleGestureEnd}
-        gestureEnabled={index === 0 ? false : gestureEnabled}
-        gestureResponseDistance={gestureResponseDistance}
-        gestureVelocityImpact={gestureVelocityImpact}
-        transitionSpec={transitionSpec}
-        styleInterpolator={cardStyleInterpolator}
-        pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
-        preloaded={preloaded}
-        containerStyle={
-          hasAbsoluteFloatHeader && headerMode !== 'screen'
-            ? { marginTop: headerHeight }
-            : null
-        }
-        contentStyle={[
-          {
-            backgroundColor:
-              presentation === 'transparentModal'
-                ? 'transparent'
-                : colors.background,
-          },
-          cardStyle,
-        ]}
-      >
-        <View style={styles.container}>
-          <ModalPresentationContext.Provider value={modal}>
-            {headerMode !== 'float'
-              ? renderHeader({
-                  mode: 'screen',
-                  scenes: [previousScene, scene],
-                  getPreviousScene,
-                  getFocusedRoute,
-                  onContentHeightChange: onHeaderHeightChange,
-                  style: styles.header,
-                })
-              : null}
-            <View style={styles.scene}>
-              <HeaderBackContext.Provider value={headerBack}>
-                <HeaderShownContext.Provider
-                  value={isParentHeaderShown || headerShown !== false}
+      <View ref={contentRef} style={styles.container}>
+        <ModalPresentationContext.Provider value={modal}>
+          {headerMode !== 'float'
+            ? renderHeader({
+                mode: 'screen',
+                scenes: [previousScene, scene],
+                getPreviousScene,
+                getFocusedRoute,
+                contentHeight: headerHeight,
+                onContentHeightChange: onHeaderHeightChange,
+                style: styles.header,
+              })
+            : null}
+          <View style={styles.scene}>
+            <HeaderBackContext.Provider value={headerBack}>
+              <HeaderShownContext.Provider
+                value={isParentHeaderShown || headerShown !== false}
+              >
+                <HeaderHeightContext.Provider
+                  value={
+                    headerShown !== false
+                      ? (headerHeight?.value ?? 0)
+                      : (parentHeaderHeight ?? 0)
+                  }
                 >
-                  <HeaderHeightContext.Provider
-                    value={
-                      headerShown !== false
-                        ? headerHeight
-                        : (parentHeaderHeight ?? 0)
-                    }
-                  >
-                    {scene.descriptor.render()}
-                  </HeaderHeightContext.Provider>
-                </HeaderShownContext.Provider>
-              </HeaderBackContext.Provider>
-            </View>
-          </ModalPresentationContext.Provider>
-        </View>
-      </Card>
-    </CardA11yWrapper>
+                  {children}
+                </HeaderHeightContext.Provider>
+              </HeaderShownContext.Provider>
+            </HeaderBackContext.Provider>
+          </View>
+        </ModalPresentationContext.Provider>
+      </View>
+    </Card>
   );
 }