@react-navigation/stack 7.0.0-alpha.1 → 7.0.0-alpha.11

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,
@@ -50,7 +50,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,7 +64,7 @@ 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>;
@@ -139,11 +139,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 +196,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 +224,32 @@ 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 & {
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
 export type StackDescriptor = Descriptor<
   StackNavigationOptions,
   StackNavigationProp<ParamListBase>,
@@ -341,6 +371,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 +465,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 +504,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/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,
         };

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,9 +106,12 @@ export function HeaderSegment(props: Props) {
     layout,
     modal,
     onGoBack,
+    backHref,
     headerTitle: title,
     headerLeft: left = onGoBack
-      ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
+      ? (props: HeaderBackButtonProps) => (
+          <HeaderBackButton {...props} href={backHref} />
+        )
       : undefined,
     headerRight: right,
     headerBackImage,

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 (

package/src/views/Stack/Card.tsx

@@ -1,18 +1,18 @@
+import type { LocaleDirection } from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import {
   Animated,
   InteractionManager,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewProps,
-  ViewStyle,
+  type ViewProps,
+  type ViewStyle,
 } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
 
-import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
 import type {
   GestureDirection,
   Layout,
@@ -27,10 +27,9 @@ import { memoize } from '../../utils/memoize';
 import {
   GestureState,
   PanGestureHandler,
-  PanGestureHandlerGestureEvent,
+  type PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
-import { ModalStatusBarManager } from '../ModalStatusBarManager';
-import { CardSheet, CardSheetRef } from './CardSheet';
+import { CardSheet, type CardSheetRef } from './CardSheet';
 
 type Props = ViewProps & {
   interpolationIndex: number;
@@ -40,7 +39,7 @@ type Props = ViewProps & {
   gesture: Animated.Value;
   layout: Layout;
   insets: EdgeInsets;
-  headerDarkContent: boolean | undefined;
+  direction: LocaleDirection;
   pageOverflowEnabled: boolean;
   gestureDirection: GestureDirection;
   onOpen: () => void;
@@ -62,6 +61,7 @@ type Props = ViewProps & {
     open: TransitionSpec;
     close: TransitionSpec;
   };
+  preloaded: boolean;
   styleInterpolator: StackCardStyleInterpolator;
   containerStyle?: StyleProp<ViewStyle>;
   contentStyle?: StyleProp<ViewStyle>;
@@ -105,12 +105,16 @@ export class Card extends React.Component<Props> {
   };
 
   componentDidMount() {
-    this.animate({ closing: this.props.closing });
+    if (!this.props.preloaded) {
+      this.animate({
+        closing: this.props.closing,
+      });
+    }
     this.isCurrentlyMounted = true;
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { layout, gestureDirection, closing } = this.props;
+    const { direction, layout, gestureDirection, closing } = this.props;
     const { width, height } = layout;
 
     if (width !== prevProps.layout.width) {
@@ -122,7 +126,9 @@ export class Card extends React.Component<Props> {
     }
 
     if (gestureDirection !== prevProps.gestureDirection) {
-      this.inverted.setValue(getInvertedMultiplier(gestureDirection));
+      this.inverted.setValue(
+        getInvertedMultiplier(gestureDirection, direction === 'rtl')
+      );
     }
 
     const toValue = this.getAnimateToValue(this.props);
@@ -132,7 +138,7 @@ export class Card extends React.Component<Props> {
       this.lastToValue !== toValue
     ) {
       // We need to trigger the animation when route was closed
-      // Thr route might have been closed by a `POP` action or by a gesture
+      // The route might have been closed by a `POP` action or by a gesture
       // When route was closed due to a gesture, the animation would've happened already
       // It's still important to trigger the animation so that `onClose` is called
       // If `onClose` is not called, cleanup step won't be performed for gestures
@@ -141,7 +147,7 @@ export class Card extends React.Component<Props> {
   }
 
   componentWillUnmount() {
-    this.props.gesture.stopAnimation();
+    this.props.gesture?.stopAnimation();
     this.isCurrentlyMounted = false;
     this.handleEndInteraction();
   }
@@ -151,7 +157,10 @@ export class Card extends React.Component<Props> {
   private isClosing = new Animated.Value(FALSE);
 
   private inverted = new Animated.Value(
-    getInvertedMultiplier(this.props.gestureDirection)
+    getInvertedMultiplier(
+      this.props.gestureDirection,
+      this.props.direction === 'rtl'
+    )
   );
 
   private layout = {
@@ -174,7 +183,7 @@ export class Card extends React.Component<Props> {
     closing: boolean;
     velocity?: number;
   }) => {
-    const { gesture, transitionSpec, onOpen, onClose, onTransition } =
+    const { transitionSpec, onOpen, onClose, onTransition, gesture } =
       this.props;
 
     const toValue = this.getAnimateToValue({
@@ -227,16 +236,24 @@ export class Card extends React.Component<Props> {
     closing,
     layout,
     gestureDirection,
+    direction,
+    preloaded,
   }: {
     closing?: boolean;
     layout: Layout;
     gestureDirection: GestureDirection;
+    direction: LocaleDirection;
+    preloaded: boolean;
   }) => {
-    if (!closing) {
+    if (!closing && !preloaded) {
       return 0;
     }
 
-    return getDistanceForDirection(layout, gestureDirection);
+    return getDistanceForDirection(
+      layout,
+      gestureDirection,
+      direction === 'rtl'
+    );
   };
 
   private setPointerEventsEnabled = (enabled: boolean) => {
@@ -262,6 +279,7 @@ export class Card extends React.Component<Props> {
     nativeEvent,
   }: PanGestureHandlerGestureEvent) => {
     const {
+      direction,
       layout,
       onClose,
       onGestureBegin,
@@ -277,7 +295,8 @@ export class Card extends React.Component<Props> {
         this.handleStartInteraction();
         onGestureBegin?.();
         break;
-      case GestureState.CANCELLED: {
+      case GestureState.CANCELLED:
+      case GestureState.FAILED: {
         this.isSwiping.setValue(FALSE);
         this.handleEndInteraction();
 
@@ -287,7 +306,10 @@ export class Card extends React.Component<Props> {
             ? nativeEvent.velocityY
             : nativeEvent.velocityX;
 
-        this.animate({ closing: this.props.closing, velocity });
+        this.animate({
+          closing: this.props.closing,
+          velocity,
+        });
 
         onGestureCanceled?.();
         break;
@@ -314,7 +336,7 @@ export class Card extends React.Component<Props> {
 
         const closing =
           (translation + velocity * gestureVelocityImpact) *
-            getInvertedMultiplier(gestureDirection) >
+            getInvertedMultiplier(gestureDirection, direction === 'rtl') >
           distance / 2
             ? velocity !== 0 || translation !== 0
             : this.props.closing;
@@ -378,16 +400,17 @@ export class Card extends React.Component<Props> {
   );
 
   private gestureActivationCriteria() {
-    const { layout, gestureDirection, gestureResponseDistance } = this.props;
+    const { direction, layout, gestureDirection, gestureResponseDistance } =
+      this.props;
     const enableTrackpadTwoFingerGesture = true;
 
     const distance =
       gestureResponseDistance !== undefined
         ? gestureResponseDistance
         : gestureDirection === 'vertical' ||
-          gestureDirection === 'vertical-inverted'
-        ? GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
+            gestureDirection === 'vertical-inverted'
+          ? GESTURE_RESPONSE_DISTANCE_VERTICAL
+          : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
 
     if (gestureDirection === 'vertical') {
       return {
@@ -405,7 +428,10 @@ export class Card extends React.Component<Props> {
       };
     } else {
       const hitSlop = -layout.width + distance;
-      const invertedMultiplier = getInvertedMultiplier(gestureDirection);
+      const invertedMultiplier = getInvertedMultiplier(
+        gestureDirection,
+        direction === 'rtl'
+      );
 
       if (invertedMultiplier === 1) {
         return {
@@ -442,10 +468,22 @@ export class Card extends React.Component<Props> {
       gestureEnabled,
       gestureDirection,
       pageOverflowEnabled,
-      headerDarkContent,
       children,
       containerStyle: customContainerStyle,
       contentStyle,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      closing,
+      direction,
+      gestureResponseDistance,
+      gestureVelocityImpact,
+      onClose,
+      onGestureBegin,
+      onGestureCanceled,
+      onGestureEnd,
+      onOpen,
+      onTransition,
+      transitionSpec,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = this.props;
 
@@ -491,21 +529,6 @@ export class Card extends React.Component<Props> {
 
     return (
       <CardAnimationContext.Provider value={interpolationProps}>
-        {
-          // StatusBar messes with translucent status bar on Android
-          // So we should only enable it on iOS
-          Platform.OS === 'ios' &&
-          overlayEnabled &&
-          next &&
-          getIsModalPresentation(styleInterpolator) ? (
-            <ModalStatusBarManager
-              dark={headerDarkContent}
-              layout={layout}
-              insets={insets}
-              style={cardStyle}
-            />
-          ) : null
-        }
         <Animated.View
           style={{
             // This is a dummy style that doesn't actually change anything visually.
@@ -517,7 +540,13 @@ export class Card extends React.Component<Props> {
           // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
           collapsable={false}
         />
-        <View pointerEvents="box-none" {...rest}>
+        <View
+          pointerEvents="box-none"
+          // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
+          // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
+          collapsable={false}
+          {...rest}
+        >
           {overlayEnabled ? (
             <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
               {overlay({ style: overlayStyle })}
@@ -544,10 +573,10 @@ export class Card extends React.Component<Props> {
                       gestureDirection === 'horizontal'
                         ? [styles.shadowHorizontal, styles.shadowLeft]
                         : gestureDirection === 'horizontal-inverted'
-                        ? [styles.shadowHorizontal, styles.shadowRight]
-                        : gestureDirection === 'vertical'
-                        ? [styles.shadowVertical, styles.shadowTop]
-                        : [styles.shadowVertical, styles.shadowBottom],
+                          ? [styles.shadowHorizontal, styles.shadowRight]
+                          : gestureDirection === 'vertical'
+                            ? [styles.shadowVertical, styles.shadowTop]
+                            : [styles.shadowVertical, styles.shadowBottom],
                       { backgroundColor },
                       shadowStyle,
                     ]}
@@ -571,16 +600,6 @@ export class Card extends React.Component<Props> {
   }
 }
 
-export const getIsModalPresentation = (
-  cardStyleInterpolator: StackCardStyleInterpolator
-) => {
-  return (
-    cardStyleInterpolator === forModalPresentationIOS ||
-    // Handle custom modal presentation interpolators as well
-    cardStyleInterpolator.name === 'forModalPresentationIOS'
-  );
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,