@react-navigation/stack 8.0.0-alpha.3 → 8.0.0-alpha.31

package/src/views/Stack/Card.tsx

@@ -58,7 +58,7 @@ type Props = {
   overlayEnabled: boolean;
   shadowEnabled: boolean | undefined;
   gestureEnabled: boolean;
-  gestureResponseDistance?: number;
+  gestureResponseDistance?: number | undefined;
   gestureVelocityImpact: number | undefined;
   transitionSpec: {
     open: TransitionSpec;
@@ -66,8 +66,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 +151,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 +218,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();
         });
       };
 
@@ -249,6 +247,8 @@ function Card({
     ({ nativeEvent }: PanGestureHandlerGestureEvent) => {
       switch (nativeEvent.state) {
         case GestureState.ACTIVE:
+          clearTimeout(pendingGestureCallbackRef.current);
+          clearTimeout(pendingOnCloseCallbackRef.current);
           isSwiping.setValue(TRUE);
           onGestureBegin?.();
           break;
@@ -305,10 +305,13 @@ function Card({
             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);
+              // 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?.();
@@ -350,17 +353,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 +369,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 +410,14 @@ function Card({
         animate({ closing });
       }
     }
+  });
+
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
+
+    maybeAnimate();
 
     previousPropsRef.current = {
       opening,
@@ -428,6 +436,7 @@ function Card({
     layout,
     opening,
     preloaded,
+    maybeAnimate,
   ]);
 
   const interpolationProps = React.useMemo(

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,17 @@ 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 = focused && options.keyboardHandlingEnabled !== false;
 
-        return (
-          navigation.isFocused() && options.keyboardHandlingEnabled !== false
-        );
-      }, [scene.descriptor])
-    );
+  const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
+    useKeyboardManager({ enabled, focused });
 
   const handleOpen = () => {
     const { route } = scene.descriptor;
@@ -153,17 +142,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 +158,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 +203,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 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>
   );
 }