@react-navigation/stack 7.0.0-alpha.9 → 7.0.0-rc.1

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.9",
+  "version": "7.0.0-rc.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,30 +40,30 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.0-alpha.6",
+    "@react-navigation/elements": "^2.0.0-rc.1",
     "color": "^4.2.3"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.8",
+    "@react-navigation/native": "^7.0.0-rc.1",
     "@testing-library/react-native": "^12.4.3",
     "@types/color": "^3.0.6",
-    "@types/react": "~18.2.45",
+    "@types/react": "~18.2.79",
     "del-cli": "^5.1.0",
     "react": "18.2.0",
-    "react-native": "0.73.2",
+    "react-native": "0.74.2",
     "react-native-builder-bob": "^0.23.2",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "typescript": "^5.3.3"
+    "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.8",
-    "react": "*",
-    "react-native": "0.73.2",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0"
+    "@react-navigation/native": "^7.0.0-rc.1",
+    "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": "e4e445810a3a958c35cc34486b5499baa595500e"
+  "gitHead": "18c09f1478a3efcb3a809305c5947b748f10c951"
 }

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).
  */
@@ -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

@@ -14,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';
@@ -70,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 =
@@ -78,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;
@@ -244,6 +265,10 @@ export type StackHeaderRightProps = {
 };
 
 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.
    */
@@ -326,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.

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(),

package/src/views/Header/HeaderContainer.tsx

@@ -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,

package/src/views/Stack/Card.tsx

@@ -571,9 +571,9 @@ export class Card extends React.Component<Props> {
                     style={[
                       styles.shadow,
                       gestureDirection === 'horizontal'
-                        ? [styles.shadowHorizontal, styles.shadowLeft]
+                        ? [styles.shadowHorizontal, styles.shadowStart]
                         : gestureDirection === 'horizontal-inverted'
-                          ? [styles.shadowHorizontal, styles.shadowRight]
+                          ? [styles.shadowHorizontal, styles.shadowEnd]
                           : gestureDirection === 'vertical'
                             ? [styles.shadowVertical, styles.shadowTop]
                             : [styles.shadowVertical, styles.shadowBottom],
@@ -620,15 +620,15 @@ const styles = StyleSheet.create({
     width: 3,
     shadowOffset: { width: -1, height: 1 },
   },
-  shadowLeft: {
-    left: 0,
+  shadowStart: {
+    start: 0,
   },
-  shadowRight: {
-    right: 0,
+  shadowEnd: {
+    end: 0,
   },
   shadowVertical: {
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     height: 3,
     shadowOffset: { width: 1, height: -1 },
   },

package/src/views/Stack/CardContainer.tsx

@@ -190,7 +190,7 @@ function CardContainerInner({
 
   const {
     presentation,
-    animationEnabled,
+    animation,
     cardOverlay,
     cardOverlayEnabled,
     cardShadowEnabled,
@@ -275,7 +275,7 @@ function CardContainerInner({
           display:
             // Hide unfocused screens when animation isn't enabled
             // This is also necessary for a11y on web
-            animationEnabled === false &&
+            animation === 'none' &&
             isNextScreenTransparent === false &&
             detachCurrentScreen !== false &&
             !focused