@react-navigation/stack 7.0.0-alpha.2 → 7.0.0-alpha.20

package/src/types.tsx

@@ -1,12 +1,12 @@
 import type {
   HeaderBackButton,
   HeaderBackButtonProps,
-  HeaderButtonProps,
   HeaderOptions,
   HeaderTitleProps,
 } from '@react-navigation/elements';
 import type {
   Descriptor,
+  LocaleDirection,
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
@@ -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';
@@ -50,7 +51,7 @@ export type StackNavigationHelpers = NavigationHelpers<
 export type StackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -64,12 +65,20 @@ export type StackNavigationProp<
 export type StackScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = {
   navigation: StackNavigationProp<ParamList, RouteName, NavigatorID>;
   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,19 @@ export type GestureDirection =
   | 'vertical'
   | 'vertical-inverted';
 
+export type StackAnimationName =
+  | 'default'
+  | 'fade'
+  | 'fade_from_bottom'
+  | '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;
@@ -139,11 +159,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`.
    */
@@ -196,7 +216,11 @@ export type StackHeaderProps = {
     /**
      * Title of the previous screen.
      */
-    title: string;
+    title: string | undefined;
+    /**
+     * The `href` to use for the anchor tag on web
+     */
+    href: string | undefined;
   };
   /**
    * Animated nodes representing the progress of the animation.
@@ -220,6 +244,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>,
@@ -296,11 +350,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.
@@ -341,6 +404,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 = {
@@ -429,19 +498,19 @@ export type StackCardInterpolatedStyle = {
   /**
    * Interpolated style for the container view wrapping the card.
    */
-  containerStyle?: any;
+  containerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style for the view representing the card.
    */
-  cardStyle?: any;
+  cardStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style for the view representing the semi-transparent overlay below the card.
    */
-  overlayStyle?: any;
+  overlayStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Interpolated style representing the card shadow.
    */
-  shadowStyle?: any;
+  shadowStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 export type StackCardStyleInterpolator = (
@@ -468,6 +537,10 @@ export type StackHeaderInterpolationProps = {
      */
     progress: Animated.AnimatedInterpolation<number>;
   };
+  /**
+   * Writing direction of the layout.
+   */
+  direction: LocaleDirection;
   /**
    * Layout measurements for various items we use for animation.
    */

package/src/utils/findLastIndex.tsx

@@ -1,5 +1,5 @@
 export function findLastIndex<T>(array: T[], callback: (value: T) => boolean) {
-  for (var i = array.length - 1; i >= 0; i--) {
+  for (let i = array.length - 1; i >= 0; i--) {
     if (callback(array[i])) {
       return i;
     }

package/src/utils/getDistanceForDirection.tsx

@@ -3,9 +3,10 @@ import { getInvertedMultiplier } from './getInvertedMultiplier';
 
 export function getDistanceForDirection(
   layout: Layout,
-  gestureDirection: GestureDirection
+  gestureDirection: GestureDirection,
+  isRTL: boolean
 ): number {
-  const multiplier = getInvertedMultiplier(gestureDirection);
+  const multiplier = getInvertedMultiplier(gestureDirection, isRTL);
 
   switch (gestureDirection) {
     case 'vertical':

package/src/utils/getInvertedMultiplier.tsx

@@ -1,9 +1,8 @@
-import { I18nManager } from 'react-native';
-
 import type { GestureDirection } from '../types';
 
 export function getInvertedMultiplier(
-  gestureDirection: GestureDirection
+  gestureDirection: GestureDirection,
+  isRTL: boolean
 ): 1 | -1 {
   switch (gestureDirection) {
     case 'vertical':
@@ -11,8 +10,8 @@ export function getInvertedMultiplier(
     case 'vertical-inverted':
       return -1;
     case 'horizontal':
-      return I18nManager.getConstants().isRTL ? -1 : 1;
+      return isRTL ? -1 : 1;
     case 'horizontal-inverted':
-      return I18nManager.getConstants().isRTL ? 1 : -1;
+      return isRTL ? 1 : -1;
   }
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HostComponent, Keyboard, TextInput } from 'react-native';
+import { type HostComponent, Keyboard, TextInput } from 'react-native';
 
 type InputRef = React.ElementRef<HostComponent<unknown>> | undefined;
 

package/src/views/GestureHandlerNative.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   PanGestureHandler as PanGestureHandlerNative,
-  PanGestureHandlerProperties,
+  type PanGestureHandlerProperties,
 } from 'react-native-gesture-handler';
 
 import { GestureHandlerRefContext } from '../utils/GestureHandlerRefContext';

package/src/views/Header/Header.tsx

@@ -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
@@ -66,6 +66,7 @@ export const Header = React.memo(function Header({
       }
       headerStatusBarHeight={statusBarHeight}
       onGoBack={back ? goBack : undefined}
+      backHref={back ? back.href : undefined}
       styleInterpolator={styleInterpolator}
     />
   );

package/src/views/Header/HeaderContainer.tsx

@@ -2,11 +2,18 @@ import { getHeaderTitle, HeaderBackContext } from '@react-navigation/elements';
 import {
   NavigationContext,
   NavigationRouteContext,
-  ParamListBase,
-  Route,
+  type ParamListBase,
+  type Route,
+  useLinkBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 
 import {
   forNoAnimation,
@@ -47,6 +54,7 @@ export function HeaderContainer({
 }: Props) {
   const focusedRoute = getFocusedRoute();
   const parentHeaderBack = React.useContext(HeaderBackContext);
+  const { buildHref } = useLinkBuilder();
 
   return (
     <Animated.View pointerEvents="box-none" style={style}>
@@ -78,7 +86,10 @@ export function HeaderContainer({
           const { options, route } = previousScene.descriptor;
 
           headerBack = previousScene
-            ? { title: getHeaderTitle(options, route.name) }
+            ? {
+                title: getHeaderTitle(options, route.name),
+                href: buildHref(route.name, route.params),
+              }
             : parentHeaderBack;
         }
 
@@ -128,8 +139,8 @@ export function HeaderContainer({
                   nextHeaderlessGestureDirection === 'vertical-inverted'
                   ? forSlideUp
                   : nextHeaderlessGestureDirection === 'horizontal-inverted'
-                  ? forSlideRight
-                  : forSlideLeft
+                    ? forSlideRight
+                    : forSlideLeft
                 : headerStyleInterpolator
               : forNoAnimation,
         };
@@ -180,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

@@ -2,16 +2,17 @@ import {
   getDefaultHeaderHeight,
   Header,
   HeaderBackButton,
-  HeaderBackButtonProps,
+  type HeaderBackButtonProps,
   HeaderTitle,
 } from '@react-navigation/elements';
+import { useLocale } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 
 import type {
@@ -28,11 +29,14 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   title: string;
   modal: boolean;
   onGoBack?: () => void;
+  backHref?: string;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
 export function HeaderSegment(props: Props) {
+  const { direction } = useLocale();
+
   const [leftLabelLayout, setLeftLabelLayout] = React.useState<
     Layout | undefined
   >(undefined);
@@ -84,6 +88,7 @@ export function HeaderSegment(props: Props) {
       styleInterpolator({
         current: { progress: current },
         next: next && { progress: next },
+        direction,
         layouts: {
           header: {
             height: headerHeight,
@@ -101,6 +106,7 @@ export function HeaderSegment(props: Props) {
     layout,
     modal,
     onGoBack,
+    backHref,
     headerTitle: title,
     headerLeft: left = onGoBack
       ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
@@ -154,6 +160,7 @@ export function HeaderSegment(props: Props) {
     ? (props) =>
         left({
           ...props,
+          href: backHref,
           backImage: headerBackImage,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,

package/src/views/Screens.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, View, ViewProps } from 'react-native';
+import { Animated, View, type ViewProps } from 'react-native';
 
 let Screens: typeof import('react-native-screens') | undefined;
 
@@ -32,6 +32,7 @@ export const MaybeScreen = ({
   active: 0 | 1 | Animated.AnimatedInterpolation<0 | 1>;
   children: React.ReactNode;
   freezeOnBlur?: boolean;
+  homeIndicatorHidden?: boolean;
 }) => {
   if (Screens != null) {
     return (