@react-navigation/stack 8.0.0-alpha.6 → 8.0.0-alpha.60

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,31 @@
 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 } from 'react-native-gesture-handler';

package/src/views/GestureHandlerNative.tsx

@@ -1,23 +1,34 @@
 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,
-} from 'react-native-gesture-handler';
+export { usePanGesture };
+export type { PanGesture } from 'react-native-gesture-handler';
+export { GestureHandlerRootView } from 'react-native-gesture-handler';

package/src/views/Header/Header.tsx

@@ -11,6 +11,7 @@ import { HeaderSegment } from './HeaderSegment';
 export const Header = React.memo(function Header({
   back,
   progress,
+  inverted,
   options,
   route,
   navigation,
@@ -41,8 +42,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
@@ -54,6 +55,7 @@ export const Header = React.memo(function Header({
   return (
     <HeaderSegment
       {...options}
+      inverted={inverted}
       title={getHeaderTitle(options, route.name)}
       progress={progress}
       modal={isModal}

package/src/views/Header/HeaderContainer.tsx

@@ -1,33 +1,41 @@
 import { getHeaderTitle, HeaderBackContext } from '@react-navigation/elements';
+import { ActivityView } from '@react-navigation/elements/internal';
 import {
   NavigationProvider,
-  type ParamListBase,
   type Route,
   useLinkBuilder,
+  useLocale,
 } 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,
   forSlideLeft,
-  forSlideRight,
   forSlideUp,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
-import type {
-  Scene,
-  StackHeaderMode,
-  StackHeaderProps,
-  StackNavigationProp,
-} from '../../types';
+import type { Scene, StackHeaderMode, StackHeaderProps } from '../../types';
+import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
 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 +47,18 @@ 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();
+  const { direction } = useLocale();
 
   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 +103,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,28 +125,54 @@ 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 transparent, we want to treat this header as static
+          // Otherwise it may show through the next header
+          nextHeaderTransparent ||
           nextHeaderlessScene;
 
         const props: StackHeaderProps = {
           back: headerBack,
           progress: scene.progress,
+          inverted: getInvertedMultiplier(
+            isHeaderStatic && nextHeaderlessGestureDirection
+              ? nextHeaderlessGestureDirection
+              : scene.descriptor.options.gestureDirection,
+            direction === 'rtl'
+          ),
           options: scene.descriptor.options,
           route: scene.descriptor.route,
-          navigation: scene.descriptor
-            .navigation as StackNavigationProp<ParamListBase>,
+          navigation: scene.descriptor.navigation,
           styleInterpolator:
             mode === 'float'
               ? isHeaderStatic
                 ? nextHeaderlessGestureDirection === 'vertical' ||
                   nextHeaderlessGestureDirection === 'vertical-inverted'
                   ? forSlideUp
-                  : nextHeaderlessGestureDirection === 'horizontal-inverted'
-                    ? forSlideRight
-                    : forSlideLeft
+                  : forSlideLeft
                 : headerStyleInterpolator
               : 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 +180,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 +223,7 @@ const styles = StyleSheet.create({
   container: {
     pointerEvents: 'box-none',
   },
-  header: {
+  absolute: {
     position: 'absolute',
     top: 0,
     start: 0,

package/src/views/Header/HeaderSegment.tsx

@@ -6,7 +6,6 @@ import {
   HeaderTitle,
   useFrameSize,
 } from '@react-navigation/elements';
-import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, type ViewStyle } from 'react-native';
 
@@ -20,18 +19,19 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
   title: string;
   modal: boolean;
-  onGoBack?: () => void;
-  backHref?: string;
+  onGoBack?: (() => void) | undefined;
+  backHref?: string | undefined;
   progress: SceneProgress;
+  inverted: 1 | -1;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
 export function HeaderSegment(props: Props) {
-  const { direction } = useLocale();
   const layout = useFrameSize((frame) => frame, true);
 
   const {
     progress,
+    inverted,
     modal,
     onGoBack,
     backHref,
@@ -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;
 
@@ -76,7 +75,7 @@ export function HeaderSegment(props: Props) {
         styleInterpolator({
           current: { progress: progress.current },
           next: progress.next && { progress: progress.next },
-          direction,
+          inverted,
           layouts: {
             header: {
               height: headerHeight,
@@ -85,7 +84,7 @@ export function HeaderSegment(props: Props) {
             screen: layout,
           },
         }),
-      [styleInterpolator, progress, direction, headerHeight, layout]
+      [styleInterpolator, progress, inverted, headerHeight, layout]
     );
 
   const headerLeft: StackHeaderOptions['headerLeft'] = left
@@ -93,7 +92,7 @@ export function HeaderSegment(props: Props) {
         left({
           ...props,
           href: backHref,
-          backImage: headerBackImage,
+          icon: headerBackIcon,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,
           allowFontScaling: headerBackAllowFontScaling,