@react-navigation/stack 7.0.0-alpha.0 → 7.0.0-alpha.10

package/src/utils/findLastIndex.tsx

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

package/src/utils/getDistanceForDirection.tsx

@@ -1,11 +1,12 @@
 import type { GestureDirection, Layout } from '../types';
-import getInvertedMultiplier from './getInvertedMultiplier';
+import { getInvertedMultiplier } from './getInvertedMultiplier';
 
-export default function getDistanceForDirection(
+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 default function getInvertedMultiplier(
-  gestureDirection: GestureDirection
+export function getInvertedMultiplier(
+  gestureDirection: GestureDirection,
+  isRTL: boolean
 ): 1 | -1 {
   switch (gestureDirection) {
     case 'vertical':
@@ -11,8 +10,8 @@ export default 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/memoize.tsx

@@ -1,4 +1,4 @@
-export default function memoize<Result, Deps extends readonly any[]>(
+export function memoize<Result, Deps extends readonly any[]>(
   callback: (...deps: Deps) => Result
 ) {
   let previous: Deps | undefined;

package/src/utils/useCardAnimation.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import CardAnimationContext from './CardAnimationContext';
+import { CardAnimationContext } from './CardAnimationContext';
 
-export default function useCardAnimation() {
+export function useCardAnimation() {
   const animation = React.useContext(CardAnimationContext);
 
   if (animation === undefined) {

package/src/utils/useGestureHandlerRef.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-import StackGestureRefContext from './GestureHandlerRefContext';
+import { GestureHandlerRefContext } from './GestureHandlerRefContext';
 
-export default function useGestureHandlerRef() {
-  const ref = React.useContext(StackGestureRefContext);
+export function useGestureHandlerRef() {
+  const ref = React.useContext(GestureHandlerRefContext);
 
   if (ref === undefined) {
     throw new Error(

package/src/utils/useKeyboardManager.tsx

@@ -1,9 +1,9 @@
 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;
 
-export default function useKeyboardManager(isEnabled: () => boolean) {
+export function useKeyboardManager(isEnabled: () => boolean) {
   // 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<InputRef>(undefined);

package/src/views/GestureHandlerNative.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
   PanGestureHandler as PanGestureHandlerNative,
-  PanGestureHandlerProperties,
+  type PanGestureHandlerProperties,
 } from 'react-native-gesture-handler';
 
-import GestureHandlerRefContext from '../utils/GestureHandlerRefContext';
+import { GestureHandlerRefContext } from '../utils/GestureHandlerRefContext';
 
 export function PanGestureHandler(props: PanGestureHandlerProperties) {
   const gestureRef = React.useRef<PanGestureHandlerNative>(null);

package/src/views/Header/Header.tsx

@@ -4,11 +4,11 @@ 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 HeaderSegment from './HeaderSegment';
+import { debounce } from '../../utils/debounce';
+import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
+import { HeaderSegment } from './HeaderSegment';
 
-export default React.memo(function Header({
+export const Header = React.memo(function Header({
   back,
   layout,
   progress,
@@ -49,8 +49,8 @@ export default React.memo(function Header({
     options.headerStatusBarHeight !== undefined
       ? options.headerStatusBarHeight
       : isModal || isParentHeaderShown
-      ? 0
-      : insets.top;
+        ? 0
+        : insets.top;
 
   return (
     <HeaderSegment
@@ -66,6 +66,7 @@ export default 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,
@@ -21,7 +28,7 @@ import type {
   StackHeaderProps,
   StackNavigationProp,
 } from '../../types';
-import Header from './Header';
+import { Header } from './Header';
 
 export type Props = {
   mode: StackHeaderMode;
@@ -36,7 +43,7 @@ export type Props = {
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
-export default function HeaderContainer({
+export function HeaderContainer({
   mode,
   scenes,
   layout,
@@ -47,6 +54,7 @@ export default 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 default 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 default 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 {
@@ -20,7 +21,7 @@ import type {
   StackHeaderOptions,
   StackHeaderStyleInterpolator,
 } from '../../types';
-import memoize from '../../utils/memoize';
+import { memoize } from '../../utils/memoize';
 
 type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   headerStatusBarHeight: number;
@@ -28,11 +29,14 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   title: string;
   modal: boolean;
   onGoBack?: () => void;
+  backHref?: string;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
 
-export default function HeaderSegment(props: Props) {
+export function HeaderSegment(props: Props) {
+  const { direction } = useLocale();
+
   const [leftLabelLayout, setLeftLabelLayout] = React.useState<
     Layout | undefined
   >(undefined);
@@ -84,6 +88,7 @@ export default function HeaderSegment(props: Props) {
       styleInterpolator({
         current: { progress: current },
         next: next && { progress: next },
+        direction,
         layouts: {
           header: {
             height: headerHeight,
@@ -101,9 +106,12 @@ export default 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,
@@ -20,17 +20,16 @@ import type {
   StackCardStyleInterpolator,
   TransitionSpec,
 } from '../../types';
-import CardAnimationContext from '../../utils/CardAnimationContext';
-import getDistanceForDirection from '../../utils/getDistanceForDirection';
-import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
-import memoize from '../../utils/memoize';
+import { CardAnimationContext } from '../../utils/CardAnimationContext';
+import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
+import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
+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>;
@@ -89,7 +89,7 @@ const hasOpacityStyle = (style: any) => {
   return false;
 };
 
-export default class Card extends React.Component<Props> {
+export class Card extends React.Component<Props> {
   static defaultProps = {
     shadowEnabled: false,
     gestureEnabled: true,
@@ -105,12 +105,16 @@ export default 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 default 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 default 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 default 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 default 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 default 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 default 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 default class Card extends React.Component<Props> {
     nativeEvent,
   }: PanGestureHandlerGestureEvent) => {
     const {
+      direction,
       layout,
       onClose,
       onGestureBegin,
@@ -277,7 +295,8 @@ export default 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 default 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 default 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 default 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 default 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 default 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 default 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 default 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 default 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 default 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,