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

package/src/utils/gestureActivationCriteria.tsx

@@ -1,4 +1,5 @@
 import type { LocaleDirection } from '@react-navigation/native';
+import type { PanGestureConfig } from 'react-native-gesture-handler';
 
 import type { GestureDirection, Layout } from '../types';
 import { getInvertedMultiplier } from './getInvertedMultiplier';
@@ -17,9 +18,9 @@ export const gestureActivationCriteria = ({
 }: {
   direction: LocaleDirection;
   gestureDirection: GestureDirection;
-  gestureResponseDistance?: number;
+  gestureResponseDistance?: number | undefined;
   layout: Layout;
-}) => {
+}): PanGestureConfig => {
   const enableTrackpadTwoFingerGesture = true;
 
   const distance =
@@ -30,17 +31,20 @@ export const gestureActivationCriteria = ({
         ? GESTURE_RESPONSE_DISTANCE_VERTICAL
         : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
 
+  const failOffsetX: [number, number] = [-15, 15];
+  const failOffsetY: [number, number] = [-20, 20];
+
   if (gestureDirection === 'vertical') {
     return {
-      maxDeltaX: 15,
-      minOffsetY: 5,
+      failOffsetX,
+      activeOffsetY: 5,
       hitSlop: { bottom: -layout.height + distance },
       enableTrackpadTwoFingerGesture,
     };
   } else if (gestureDirection === 'vertical-inverted') {
     return {
-      maxDeltaX: 15,
-      minOffsetY: -5,
+      failOffsetX,
+      activeOffsetY: -5,
       hitSlop: { top: -layout.height + distance },
       enableTrackpadTwoFingerGesture,
     };
@@ -53,15 +57,15 @@ export const gestureActivationCriteria = ({
 
     if (invertedMultiplier === 1) {
       return {
-        minOffsetX: 5,
-        maxDeltaY: 20,
+        activeOffsetX: 5,
+        failOffsetY,
         hitSlop: { right: hitSlop },
         enableTrackpadTwoFingerGesture,
       };
     } else {
       return {
-        minOffsetX: -5,
-        maxDeltaY: 20,
+        activeOffsetX: -5,
+        failOffsetY,
         hitSlop: { left: hitSlop },
         enableTrackpadTwoFingerGesture,
       };

package/src/utils/useCardAnimation.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { CardAnimationContext } from './CardAnimationContext';
 
 export function useCardAnimation() {
-  const animation = React.useContext(CardAnimationContext);
+  const animation = React.use(CardAnimationContext);
 
   if (animation === undefined) {
     throw new Error(

package/src/utils/useGestureHandler.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { GestureHandlerContext } from './GestureHandlerContext';
+
+export function useGestureHandler() {
+  const gesture = React.useContext(GestureHandlerContext);
+
+  return gesture;
+}

package/src/utils/useKeyboardManager.tsx

@@ -1,12 +1,23 @@
 import * as React from 'react';
 import { type HostInstance, Keyboard, TextInput } from 'react-native';
 
-export function useKeyboardManager(isEnabled: () => boolean) {
+export function useKeyboardManager({
+  enabled,
+  focused,
+  contentRef,
+}: {
+  enabled: boolean;
+  focused: boolean;
+  contentRef: React.RefObject<HostInstance | null>;
+}) {
   // Numeric id of the previously focused text input
   // When a gesture didn't change the tab, we can restore the focused input with this
   const previouslyFocusedTextInputRef = React.useRef<HostInstance>(undefined);
   const startTimestampRef = React.useRef<number>(0);
-  const keyboardTimeoutRef = React.useRef<NodeJS.Timeout>(undefined);
+  const keyboardTimeoutRef =
+    React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  const enabledRef = React.useRef(enabled);
+  const focusedRef = React.useRef(focused);
 
   const clearKeyboardTimeout = React.useCallback(() => {
     if (keyboardTimeoutRef.current !== undefined) {
@@ -16,7 +27,7 @@ export function useKeyboardManager(isEnabled: () => boolean) {
   }, []);
 
   const onPageChangeStart = React.useCallback(() => {
-    if (!isEnabled()) {
+    if (!enabledRef.current || !focusedRef.current) {
       return;
     }
 
@@ -32,37 +43,10 @@ export function useKeyboardManager(isEnabled: () => boolean) {
 
     // Store timestamp for touch start
     startTimestampRef.current = Date.now();
-  }, [clearKeyboardTimeout, isEnabled]);
-
-  const onPageChangeConfirm = React.useCallback(
-    (force: boolean) => {
-      if (!isEnabled()) {
-        return;
-      }
-
-      clearKeyboardTimeout();
-
-      if (force) {
-        // Always dismiss input, even if we don't have a ref to it
-        // We might not have the ref if onPageChangeStart was never called
-        // This can happen if page change was not from a gesture
-        Keyboard.dismiss();
-      } else {
-        const input = previouslyFocusedTextInputRef.current;
-
-        // Dismiss the keyboard only if an input was a focused before
-        // This makes sure we don't dismiss input on going back and focusing an input
-        input?.blur();
-      }
-
-      // Cleanup the ID on successful page change
-      previouslyFocusedTextInputRef.current = undefined;
-    },
-    [clearKeyboardTimeout, isEnabled]
-  );
+  }, [clearKeyboardTimeout]);
 
   const onPageChangeCancel = React.useCallback(() => {
-    if (!isEnabled()) {
+    if (!enabledRef.current || !focusedRef.current) {
       return;
     }
 
@@ -89,7 +73,86 @@ export function useKeyboardManager(isEnabled: () => boolean) {
         previouslyFocusedTextInputRef.current = undefined;
       }
     }
-  }, [clearKeyboardTimeout, isEnabled]);
+  }, [clearKeyboardTimeout]);
+
+  const onPageChangeConfirm = React.useCallback(
+    ({
+      gesture,
+      active,
+      closing,
+    }: {
+      gesture: boolean;
+      active: boolean;
+      closing: boolean;
+    }) => {
+      if (!enabledRef.current || !focusedRef.current) {
+        return;
+      }
+
+      if (!closing) {
+        onPageChangeCancel();
+        return;
+      }
+
+      clearKeyboardTimeout();
+
+      if (!gesture) {
+        // Always dismiss input, even if we don't have a ref to it
+        // We might not have the ref if onPageChangeStart was never called
+        // This can happen if page change was not from a gesture
+        Keyboard.dismiss();
+      } else if (active) {
+        const input = previouslyFocusedTextInputRef.current;
+
+        // Dismiss the keyboard only if an input was a focused before
+        // This makes sure we don't dismiss input on going back and focusing an input
+        input?.blur();
+      }
+
+      // Cleanup the ID on successful page change
+      previouslyFocusedTextInputRef.current = undefined;
+    },
+    [clearKeyboardTimeout, onPageChangeCancel]
+  );
+
+  // Dismiss keyboard when screen loses focus (e.g. when pushing a new screen).
+  // This handles the "navigate forward" case so we don't dismiss the new screen's
+  // auto-focused input from handleTransition.
+  React.useLayoutEffect(() => {
+    if (enabledRef.current && !focused) {
+      Keyboard.dismiss();
+    }
+  }, [focused]);
+
+  // Dismiss keyboard if native focus is restored to an input in an unfocused screen.
+  // This can happen after dismissing a native alert when `autoFocus` is used on iOS.
+  React.useEffect(() => {
+    const blurInputInScreen = () => {
+      if (focusedRef.current || !enabledRef.current) {
+        return;
+      }
+
+      const input = TextInput.State.currentlyFocusedInput();
+
+      if (input && contentRef.current?.contains(input)) {
+        input.blur();
+      }
+    };
+
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', blurInputInScreen),
+      Keyboard.addListener('keyboardDidShow', blurInputInScreen),
+    ];
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [contentRef]);
+
+  React.useLayoutEffect(() => {
+    enabledRef.current = enabled;
+    focusedRef.current = focused;
+  });
 
   React.useEffect(() => {
     return () => clearKeyboardTimeout();

package/src/views/GestureHandler.tsx

@@ -1,23 +1,34 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+import type {
+  PanGesture,
+  PanGestureConfig,
+} from 'react-native-gesture-handler';
 
-const Dummy: any = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
+import { GestureHandlerContext } from '../utils/GestureHandlerContext';
 
-export const PanGestureHandler =
-  Dummy as React.ComponentType<PanGestureHandlerProperties>;
+export function GestureDetector({
+  gesture,
+  children,
+}: {
+  gesture: PanGesture | undefined;
+  children: React.ReactNode;
+}) {
+  return (
+    <GestureHandlerContext.Provider value={gesture ?? null}>
+      {children}
+    </GestureHandlerContext.Provider>
+  );
+}
 
-export const GestureHandlerRootView = View;
+// eslint-disable-next-line @eslint-react/hooks-extra/no-unnecessary-use-prefix, @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks
+export function usePanGesture(_config: PanGestureConfig) {
+  return undefined;
+}
 
-export const GestureState = {
-  UNDETERMINED: 0,
-  FAILED: 1,
-  BEGAN: 2,
-  CANCELLED: 3,
-  ACTIVE: 4,
-  END: 5,
-};
+export const GestureHandlerRootView = View;
 
-export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+export type {
+  PanGesture,
+  PanGestureActiveEvent,
+} from 'react-native-gesture-handler';

package/src/views/GestureHandlerNative.tsx

@@ -1,23 +1,37 @@
 import * as React from 'react';
 import {
-  PanGestureHandler as PanGestureHandlerNative,
-  type PanGestureHandlerProperties,
+  GestureDetector as GestureDetectorNative,
+  type PanGesture,
+  usePanGesture,
 } from 'react-native-gesture-handler';
 
-import { GestureHandlerRefContext } from '../utils/GestureHandlerRefContext';
+import { GestureHandlerContext } from '../utils/GestureHandlerContext';
 
-export function PanGestureHandler(props: PanGestureHandlerProperties) {
-  const gestureRef = React.useRef<PanGestureHandlerNative>(null);
+export function GestureDetector({
+  gesture,
+  children,
+}: {
+  gesture: PanGesture | undefined;
+  children: React.ReactNode;
+}) {
+  if (gesture == null) {
+    throw new Error(
+      'The provided gesture is undefined. A valid gesture must be passed to the GestureDetector on native platforms.'
+    );
+  }
 
   return (
-    <GestureHandlerRefContext.Provider value={gestureRef}>
-      <PanGestureHandlerNative {...props} ref={gestureRef} />
-    </GestureHandlerRefContext.Provider>
+    <GestureHandlerContext.Provider value={gesture}>
+      <GestureDetectorNative gesture={gesture}>
+        {children}
+      </GestureDetectorNative>
+    </GestureHandlerContext.Provider>
   );
 }
 
-export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
-export {
-  GestureHandlerRootView,
-  State as GestureState,
+export { usePanGesture };
+export type {
+  PanGesture,
+  PanGestureActiveEvent,
 } from 'react-native-gesture-handler';
+export { GestureHandlerRootView } from 'react-native-gesture-handler';

package/src/views/Header/Header.tsx

@@ -41,8 +41,8 @@ export const Header = React.memo(function Header({
     [navigation, route.key]
   );
 
-  const isModal = React.useContext(ModalPresentationContext);
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isModal = React.use(ModalPresentationContext);
+  const isParentHeaderShown = React.use(HeaderShownContext);
 
   const statusBarHeight =
     options.headerStatusBarHeight !== undefined

package/src/views/Header/HeaderContainer.tsx

@@ -1,4 +1,5 @@
 import { getHeaderTitle, HeaderBackContext } from '@react-navigation/elements';
+import { ActivityView } from '@react-navigation/elements/internal';
 import {
   NavigationProvider,
   type ParamListBase,
@@ -6,7 +7,13 @@ import {
   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,
@@ -22,12 +29,18 @@ import type {
 } 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 +52,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 +107,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 +129,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 = {
@@ -137,6 +154,26 @@ export function HeaderContainer({
               : forNoAnimation,
         };
 
+        const onRef = (node: 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 +181,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 +224,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,
@@ -93,7 +93,7 @@ export function HeaderSegment(props: Props) {
         left({
           ...props,
           href: backHref,
-          backImage: headerBackImage,
+          icon: headerBackIcon,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,
           allowFontScaling: headerBackAllowFontScaling,