@react-navigation/stack 7.0.0-alpha.8 → 7.0.0-rc.0

package/lib/typescript/src/views/Stack/CardStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/CardStack.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/CardStack.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-rc.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,30 +40,30 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.0-alpha.5",
+    "@react-navigation/elements": "^2.0.0-rc.0",
     "color": "^4.2.3"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.7",
-    "@testing-library/react-native": "^12.3.1",
-    "@types/color": "^3.0.5",
-    "@types/react": "~18.2.33",
+    "@react-navigation/native": "^7.0.0-rc.0",
+    "@testing-library/react-native": "^12.4.3",
+    "@types/color": "^3.0.6",
+    "@types/react": "~18.2.79",
     "del-cli": "^5.1.0",
     "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-builder-bob": "^0.23.1",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "typescript": "^5.2.2"
+    "react-native": "0.74.2",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.7",
-    "react": "*",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0"
+    "@react-navigation/native": "^7.0.0-rc.0",
+    "react": ">= 18.2.0",
+    "react-native": ">= 0.72.0",
+    "react-native-gesture-handler": ">= 2.0.0",
+    "react-native-safe-area-context": ">= 4.0.0",
+    "react-native-screens": ">= 3.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "d0e6a2cd79d2c6aff0cf54e46e31edc407c3c46b"
+  "gitHead": "2a1d67089eea2a3d87e38a870ccee35a79c55d7d"
 }

package/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -63,6 +63,19 @@ export function forHorizontalIOS({
   };
 }
 
+/**
+ * iOS-style slide in from the left.
+ */
+export function forHorizontalIOSInverted({
+  inverted,
+  ...rest
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  return forHorizontalIOS({
+    ...rest,
+    inverted: Animated.multiply(inverted, -1),
+  });
+}
+
 /**
  * Standard iOS-style slide in from the bottom (used for modals).
  */
@@ -156,11 +169,11 @@ export function forModalPresentationIOS({
   const borderRadius = isLandscape
     ? 0
     : isFirst
-    ? progress.interpolate({
-        inputRange: [0, 1, 1.0001, 2],
-        outputRange: [0, 0, hasNotchIos ? 38 : 0, 10],
-      })
-    : 10;
+      ? progress.interpolate({
+          inputRange: [0, 1, 1.0001, 2],
+          outputRange: [0, 0, hasNotchIos ? 38 : 0, 10],
+        })
+      : 10;
 
   return {
     cardStyle: {
@@ -323,6 +336,58 @@ export function forScaleFromCenterAndroid({
   };
 }
 
+/**
+ * Standard Android-style fade from right for Android 14.
+ */
+export function forFadeFromRightAndroid({
+  current,
+  next,
+  inverted,
+  closing,
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const translateFocused = multiply(
+    current.progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [96, 0],
+      extrapolate: 'clamp',
+    }),
+    inverted
+  );
+
+  const translateUnfocused = next
+    ? multiply(
+        next.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, -96],
+          extrapolate: 'clamp',
+        }),
+        inverted
+      )
+    : 0;
+
+  const opacity = conditional(
+    closing,
+    current.progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }),
+    current.progress
+  );
+
+  return {
+    cardStyle: {
+      opacity,
+      transform: [
+        // Translation for the animation of the current card
+        { translateX: translateFocused },
+        // Translation for the animation of the card on top of this
+        { translateX: translateUnfocused },
+      ],
+    },
+  };
+}
+
 /**
  * Standard bottom sheet slide in from the bottom for Android.
  */

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,4 +1,4 @@
-import { Animated } from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import type {
   StackHeaderInterpolatedStyle,
@@ -7,6 +7,10 @@ import type {
 
 const { add, multiply } = Animated;
 
+// Width of the screen in split layout on portrait mode on iPad Mini
+// Keep in sync with HeaderBackButton.tsx
+const IPAD_MINI_MEDIUM_WIDTH = 414;
+
 /**
  * Standard UIKit style animation for the header where the title fades into the back button label.
  */
@@ -17,7 +21,11 @@ export function forUIKit({
   layouts,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const defaultOffset = 100;
-  const leftSpacing = 27;
+  const leftSpacing =
+    27 +
+    (Platform.OS === 'ios' && layouts.screen.width >= IPAD_MINI_MEDIUM_WIDTH
+      ? 5 // Additional padding on iPad specified in Header.tsx
+      : 0);
 
   // The title and back button title should cross-fade to each other
   // When screen is fully open, the title should be in center, and back title should be on left

package/src/TransitionConfigs/TransitionPresets.tsx

@@ -5,7 +5,9 @@ import {
   forBottomSheetAndroid,
   forFadeFromBottomAndroid,
   forFadeFromCenter as forFadeCard,
+  forFadeFromRightAndroid,
   forHorizontalIOS,
+  forHorizontalIOSInverted,
   forModalPresentationIOS,
   forRevealFromBottomAndroid,
   forScaleFromCenterAndroid,
@@ -24,6 +26,7 @@ import {
 
 const ANDROID_VERSION_PIE = 28;
 const ANDROID_VERSION_10 = 29;
+const ANDROID_VERSION_14 = 34;
 
 /**
  * Standard iOS navigation transition.
@@ -103,6 +106,19 @@ export const ScaleFromCenterAndroid: TransitionPreset = {
   headerStyleInterpolator: forFade,
 };
 
+/**
+ * Standard Android navigation transition when opening or closing an Activity on Android 14.
+ */
+export const FadeFromRightAndroid: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: FadeInFromBottomAndroidSpec,
+    close: FadeOutToBottomAndroidSpec,
+  },
+  cardStyleInterpolator: forFadeFromRightAndroid,
+  headerStyleInterpolator: forFade,
+};
+
 /**
  * Standard bottom sheet slide transition for Android 10.
  */
@@ -135,11 +151,13 @@ export const ModalFadeTransition: TransitionPreset = {
 export const DefaultTransition = Platform.select({
   ios: SlideFromRightIOS,
   android:
-    Number(Platform.Version) >= ANDROID_VERSION_10
-      ? ScaleFromCenterAndroid
-      : Number(Platform.Version) >= ANDROID_VERSION_PIE
-      ? RevealFromBottomAndroid
-      : FadeFromBottomAndroid,
+    Number(Platform.Version) >= ANDROID_VERSION_14
+      ? FadeFromRightAndroid
+      : Number(Platform.Version) >= ANDROID_VERSION_10
+        ? ScaleFromCenterAndroid
+        : Number(Platform.Version) >= ANDROID_VERSION_PIE
+          ? RevealFromBottomAndroid
+          : FadeFromBottomAndroid,
   default: ScaleFromCenterAndroid,
 });
 
@@ -150,3 +168,11 @@ export const ModalTransition = Platform.select({
   ios: ModalPresentationIOS,
   default: BottomSheetAndroid,
 });
+
+/**
+ * Slide from left transition.
+ */
+export const SlideFromLeftIOS: TransitionPreset = {
+  ...SlideFromRightIOS,
+  cardStyleInterpolator: forHorizontalIOSInverted,
+};

package/src/TransitionConfigs/TransitionSpecs.tsx

@@ -51,7 +51,7 @@ export const RevealFromBottomAndroidSpec: TransitionSpec = {
     duration: 425,
     // This is super rough approximation of the path used for the curve by android
     // See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
-    easing: Easing.bezier(0.35, 0.45, 0, 1),
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
   },
 };
 
@@ -65,7 +65,35 @@ export const ScaleFromCenterAndroidSpec: TransitionSpec = {
     duration: 400,
     // This is super rough approximation of the path used for the curve by android
     // See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
-    easing: Easing.bezier(0.35, 0.45, 0, 1),
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
+  },
+};
+
+/**
+ * Approximate configuration for activity open animation from Android 14.
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_open_enter.xml
+ */
+export const FadeInFromRightAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 450,
+    // This is super rough approximation of the path used for the curve by android
+    // See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/interpolator/fast_out_extra_slow_in.xml
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
+  },
+};
+
+/**
+ * Approximate configuration for activity close animation from Android 14.
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_close_exit.xml
+ */
+export const FadeOutToLeftAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 450,
+    // This is super rough approximation of the path used for the curve by android
+    // See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/interpolator/fast_out_extra_slow_in.xml
+    easing: Easing.bezier(0.20833, 0.82, 0.25, 1),
   },
 };
 

package/src/index.tsx

@@ -36,6 +36,7 @@ export { useGestureHandlerRef } from './utils/useGestureHandlerRef';
  * Types
  */
 export type {
+  StackAnimationName,
   StackCardInterpolatedStyle,
   StackCardInterpolationProps,
   StackCardStyleInterpolator,
@@ -46,6 +47,7 @@ export type {
   StackNavigationEventMap,
   StackNavigationOptions,
   StackNavigationProp,
+  StackOptionsArgs,
   StackScreenProps,
   TransitionPreset,
 } from './types';

package/src/navigators/createStackNavigator.tsx

@@ -2,12 +2,15 @@ import {
   createNavigatorFactory,
   type DefaultNavigatorOptions,
   type EventArg,
+  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackActionHelpers,
   StackActions,
   type StackNavigationState,
   StackRouter,
   type StackRouterOptions,
+  type StaticConfig,
+  type TypedNavigator,
   useLocale,
   useNavigationBuilder,
 } from '@react-navigation/native';
@@ -17,14 +20,17 @@ import type {
   StackNavigationConfig,
   StackNavigationEventMap,
   StackNavigationOptions,
+  StackNavigationProp,
 } from '../types';
 import { StackView } from '../views/Stack/StackView';
 
 type Props = DefaultNavigatorOptions<
   ParamListBase,
+  string | undefined,
   StackNavigationState<ParamListBase>,
   StackNavigationOptions,
-  StackNavigationEventMap
+  StackNavigationEventMap,
+  StackNavigationProp<ParamListBase>
 > &
   StackRouterOptions &
   StackNavigationConfig;
@@ -32,12 +38,12 @@ type Props = DefaultNavigatorOptions<
 function StackNavigator({
   id,
   initialRouteName,
-  getStateForRouteNamesChange,
   children,
   layout,
   screenListeners,
   screenOptions,
   screenLayout,
+  UNSTABLE_getStateForRouteNamesChange,
   ...rest
 }: Props) {
   const { direction } = useLocale();
@@ -57,7 +63,7 @@ function StackNavigator({
       screenListeners,
       screenOptions,
       screenLayout,
-      getStateForRouteNamesChange,
+      UNSTABLE_getStateForRouteNamesChange,
     });
 
   React.useEffect(
@@ -100,9 +106,27 @@ function StackNavigator({
   );
 }
 
-export const createStackNavigator = createNavigatorFactory<
-  StackNavigationState<ParamListBase>,
-  StackNavigationOptions,
-  StackNavigationEventMap,
-  typeof StackNavigator
->(StackNavigator);
+export function createStackNavigator<
+  ParamList extends ParamListBase,
+  NavigatorID extends string | undefined = undefined,
+  TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: StackNavigationState<ParamList>;
+    ScreenOptions: StackNavigationOptions;
+    EventMap: StackNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: StackNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    };
+    Navigator: typeof StackNavigator;
+  },
+  Config extends StaticConfig<TypeBag> | undefined =
+    | StaticConfig<TypeBag>
+    | undefined,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  return createNavigatorFactory(StackNavigator)(config);
+}

package/src/types.tsx

@@ -1,7 +1,6 @@
 import type {
   HeaderBackButton,
   HeaderBackButtonProps,
-  HeaderButtonProps,
   HeaderOptions,
   HeaderTitleProps,
 } from '@react-navigation/elements';
@@ -15,6 +14,7 @@ import type {
   RouteProp,
   StackActionHelpers,
   StackNavigationState,
+  Theme,
 } from '@react-navigation/native';
 import type * as React from 'react';
 import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
@@ -71,6 +71,14 @@ export type StackScreenProps<
   route: RouteProp<ParamList, RouteName>;
 };
 
+export type StackOptionsArgs<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined,
+> = StackScreenProps<ParamList, RouteName, NavigatorID> & {
+  theme: Theme;
+};
+
 export type Layout = { width: number; height: number };
 
 export type GestureDirection =
@@ -79,8 +87,20 @@ export type GestureDirection =
   | 'vertical'
   | 'vertical-inverted';
 
+export type StackAnimationName =
+  | 'default'
+  | 'fade'
+  | 'fade_from_bottom'
+  | 'fade_from_right'
+  | 'none'
+  | 'reveal_from_bottom'
+  | 'scale_from_center'
+  | 'slide_from_bottom'
+  | 'slide_from_right'
+  | 'slide_from_left';
+
 type SceneOptionsDefaults = TransitionPreset & {
-  animationEnabled: boolean;
+  animation: StackAnimationName;
   gestureEnabled: boolean;
   cardOverlayEnabled: boolean;
   headerMode: StackHeaderMode;
@@ -140,11 +160,11 @@ export type StackHeaderOptions = Omit<
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
+  headerLeft?: (props: StackHeaderLeftProps) => React.ReactNode;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
-  headerRight?: (props: HeaderButtonProps) => React.ReactNode;
+  headerRight?: (props: StackHeaderRightProps) => React.ReactNode;
   /**
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */
@@ -225,6 +245,36 @@ export type StackHeaderProps = {
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
+export type StackHeaderRightProps = {
+  /**
+   * Tint color for the header button.
+   */
+  tintColor?: string;
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  pressColor?: string;
+  /**
+   * Opacity when the button is pressed, used when ripple is not supported.
+   */
+  pressOpacity?: number;
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
+export type StackHeaderLeftProps = HeaderBackButtonProps & {
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
 export type StackDescriptor = Descriptor<
   StackNavigationOptions,
   StackNavigationProp<ParamListBase>,
@@ -301,11 +351,20 @@ export type StackNavigationOptions = StackHeaderOptions &
      */
     presentation?: 'card' | 'modal' | 'transparentModal';
     /**
-     * Whether transition animation should be enabled the screen.
-     * If you set it to `false`, the screen won't animate when pushing or popping.
-     * Defaults to `true` on Android and iOS, `false` on Web.
+     * How the screen should animate when pushed or popped.
+     *
+     * Supported values:
+     * - 'none': don't animate the screen
+     * - 'default': use the platform default animation
+     * - 'fade': fade screen in or out
+     * - 'fade_from_bottom': fade screen in or out from bottom
+     * - 'slide_from_bottom': slide in the new screen from bottom
+     * - 'slide_from_right': slide in the new screen from right
+     * - 'slide_from_left': slide in the new screen from left
+     * - 'reveal_from_bottom': reveal screen in from bottom to top
+     * - 'scale_from_center': scale screen in from center
      */
-    animationEnabled?: boolean;
+    animation?: StackAnimationName;
     /**
      * The type of animation to use when this screen replaces another screen. Defaults to `push`.
      * When `pop` is used, the `pop` animation is applied to the screen being replaced.
@@ -346,6 +405,12 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Only supported on iOS and Android.
      */
     freezeOnBlur?: boolean;
+    /**
+     * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
+     *
+     * @platform ios
+     */
+    autoHideHomeIndicator?: boolean;
   };
 
 export type StackNavigationConfig = {

package/src/utils/getModalRoutesKeys.ts

@@ -0,0 +1,21 @@
+import type { Route } from '@react-navigation/native';
+
+import type { StackDescriptorMap } from '../types';
+
+export const getModalRouteKeys = (
+  routes: Route<string>[],
+  descriptors: StackDescriptorMap
+) =>
+  routes.reduce<string[]>((acc, route) => {
+    const { presentation } = descriptors[route.key]?.options ?? {};
+
+    if (
+      (acc.length && !presentation) ||
+      presentation === 'modal' ||
+      presentation === 'transparentModal'
+    ) {
+      acc.push(route.key);
+    }
+
+    return acc;
+  }, []);

package/src/utils/throttle.tsx

@@ -0,0 +1,16 @@
+export function throttle<T extends (...args: any[]) => void>(
+  func: T,
+  duration: number
+): T {
+  let timeout: NodeJS.Timeout | undefined;
+
+  return function (this: unknown, ...args) {
+    if (timeout == null) {
+      func.apply(this, args);
+
+      timeout = setTimeout(() => {
+        timeout = undefined;
+      }, duration);
+    }
+  } as T;
+}

package/src/views/Header/Header.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { StackHeaderProps } from '../../types';
-import { debounce } from '../../utils/debounce';
 import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { throttle } from '../../utils/throttle';
 import { HeaderSegment } from './HeaderSegment';
 
 export const Header = React.memo(function Header({
@@ -31,7 +31,7 @@ export const Header = React.memo(function Header({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const goBack = React.useCallback(
-    debounce(() => {
+    throttle(() => {
       if (navigation.isFocused() && navigation.canGoBack()) {
         navigation.dispatch({
           ...StackActions.pop(),
@@ -49,8 +49,8 @@ export const Header = React.memo(function Header({
     options.headerStatusBarHeight !== undefined
       ? options.headerStatusBarHeight
       : isModal || isParentHeaderShown
-      ? 0
-      : insets.top;
+        ? 0
+        : insets.top;
 
   return (
     <HeaderSegment

package/src/views/Header/HeaderContainer.tsx

@@ -139,8 +139,8 @@ export function HeaderContainer({
                   nextHeaderlessGestureDirection === 'vertical-inverted'
                   ? forSlideUp
                   : nextHeaderlessGestureDirection === 'horizontal-inverted'
-                  ? forSlideRight
-                  : forSlideLeft
+                    ? forSlideRight
+                    : forSlideLeft
                 : headerStyleInterpolator
               : forNoAnimation,
         };
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
   header: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
   },
 });

package/src/views/Header/HeaderSegment.tsx

@@ -109,9 +109,7 @@ export function HeaderSegment(props: Props) {
     backHref,
     headerTitle: title,
     headerLeft: left = onGoBack
-      ? (props: HeaderBackButtonProps) => (
-          <HeaderBackButton {...props} href={backHref} />
-        )
+      ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
       : undefined,
     headerRight: right,
     headerBackImage,
@@ -162,6 +160,7 @@ export function HeaderSegment(props: Props) {
     ? (props) =>
         left({
           ...props,
+          href: backHref,
           backImage: headerBackImage,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,