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

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/CardA11yWrapper.tsx

@@ -6,62 +6,51 @@ type Props = {
   active: boolean;
   animated: boolean;
   isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
   children: React.ReactNode;
+  ref?: React.Ref<CardA11yWrapperRef>;
 };
 
 export type CardA11yWrapperRef = { setInert: (value: boolean) => void };
 
-export const CardA11yWrapper = React.forwardRef(
-  (
-    {
-      focused,
-      active,
-      animated,
-      isNextScreenTransparent,
-      detachCurrentScreen,
-      children,
-    }: Props,
-    ref: React.Ref<CardA11yWrapperRef>
-  ) => {
-    // Manage this in separate component to avoid re-rendering card during gestures
-    // Otherwise the gesture animation will be interrupted as state hasn't updated yet
-    const [inert, setInert] = React.useState(false);
+export function CardA11yWrapper({
+  focused,
+  active,
+  animated,
+  isNextScreenTransparent,
+  children,
+  ref,
+}: Props) {
+  // Manage this in separate component to avoid re-rendering card during gestures
+  // Otherwise the gesture animation will be interrupted as state hasn't updated yet
+  const [inert, setInert] = React.useState(false);
 
-    React.useImperativeHandle(ref, () => ({ setInert }), []);
+  React.useImperativeHandle(ref, () => ({ setInert }), []);
 
-    const isHidden =
-      !animated &&
-      isNextScreenTransparent === false &&
-      detachCurrentScreen !== false &&
-      !focused;
+  const isHidden = !animated && isNextScreenTransparent === false && !focused;
 
-    return (
-      <View
-        aria-hidden={!focused}
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            pointerEvents: (animated ? inert : !focused) ? 'none' : 'box-none',
-            // This is necessary to avoid unfocused larger pages increasing scroll area
-            // The issue can be seen on the web when a smaller screen is pushed over a larger one
-            overflow: active ? undefined : 'hidden',
-            // We use visibility on web
-            display: Platform.OS !== 'web' && isHidden ? 'none' : 'flex',
-            // Hide unfocused screens when animation isn't enabled
-            // This is also necessary for a11y on web
-            // @ts-expect-error visibility is only available on web
-            visibility: isHidden ? 'hidden' : 'visible',
-          },
-        ]}
-        // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
-        // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
-        collapsable={false}
-      >
-        {children}
-      </View>
-    );
-  }
-);
-
-CardA11yWrapper.displayName = 'CardA11yWrapper';
+  return (
+    <View
+      aria-hidden={!focused}
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: (animated ? inert : !focused) ? 'none' : 'box-none',
+          // This is necessary to avoid unfocused larger pages increasing scroll area
+          // The issue can be seen on the web when a smaller screen is pushed over a larger one
+          overflow: active ? undefined : 'hidden',
+          // We use visibility on web
+          display: Platform.OS !== 'web' && isHidden ? 'none' : 'flex',
+          // Hide unfocused screens when animation isn't enabled
+          // This is also necessary for a11y on web
+          // @ts-expect-error visibility is only available on web
+          visibility: isHidden ? 'hidden' : 'visible',
+        },
+      ]}
+      // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
+      // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
+      collapsable={false}
+    >
+      {children}
+    </View>
+  );
+}

package/src/views/Stack/CardContainer.tsx

@@ -57,7 +57,7 @@ type Props = {
   }) => void;
   isParentHeaderShown: boolean;
   isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
+  children: React.ReactNode;
 };
 
 const EPSILON = 0.1;
@@ -78,7 +78,6 @@ function CardContainerInner({
   onHeaderHeightChange,
   isParentHeaderShown,
   isNextScreenTransparent,
-  detachCurrentScreen,
   layout,
   onCloseRoute,
   onOpenRoute,
@@ -94,23 +93,19 @@ 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 { options } = scene.descriptor;
+  const enabled = focused && options.keyboardHandlingEnabled !== false;
 
   const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
-    useKeyboardManager(
-      React.useCallback(() => {
-        const { options, navigation } = scene.descriptor;
-
-        return (
-          navigation.isFocused() && options.keyboardHandlingEnabled !== false
-        );
-      }, [scene.descriptor])
-    );
+    useKeyboardManager({ enabled, focused });
 
   const handleOpen = () => {
     const { route } = scene.descriptor;
@@ -157,13 +152,7 @@ function CardContainerInner({
 
     const { route } = scene.descriptor;
 
-    if (!gesture) {
-      onPageChangeConfirm?.(true);
-    } else if (active && closing) {
-      onPageChangeConfirm?.(false);
-    } else {
-      onPageChangeCancel?.();
-    }
+    onPageChangeConfirm?.({ gesture, active, closing });
 
     onTransitionStart?.({ route }, closing);
   };
@@ -242,7 +231,6 @@ function CardContainerInner({
       active={active}
       animated={animated}
       isNextScreenTransparent={isNextScreenTransparent}
-      detachCurrentScreen={detachCurrentScreen}
     >
       <Card
         animated={animated}
@@ -295,6 +283,7 @@ function CardContainerInner({
                   scenes: [previousScene, scene],
                   getPreviousScene,
                   getFocusedRoute,
+                  contentHeight: headerHeight,
                   onContentHeightChange: onHeaderHeightChange,
                   style: styles.header,
                 })
@@ -311,7 +300,7 @@ function CardContainerInner({
                         : (parentHeaderHeight ?? 0)
                     }
                   >
-                    {scene.descriptor.render()}
+                    {children}
                   </HeaderHeightContext.Provider>
                 </HeaderShownContext.Provider>
               </HeaderBackContext.Provider>