@react-navigation/stack 8.0.0-alpha.51 → 8.0.0-alpha.53

package/src/TransitionConfigs/TransitionEasings.tsx

@@ -0,0 +1,90 @@
+import { Easing } from 'react-native';
+
+/**
+ * Exact piecewise path for Android's fast-out-extra-slow-in easing.
+ * 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
+ */
+const FAST_OUT_EXTRA_SLOW_IN_INITIAL = Easing.bezier(0.3, 0, 0.8, 0.15);
+const FAST_OUT_EXTRA_SLOW_IN_FINAL = Easing.bezier(0.05, 0.7, 0.1, 1);
+
+export const FAST_OUT_EXTRA_SLOW_IN = (t: number) => {
+  const breakpoint = 1 / 6;
+
+  if (t < breakpoint) {
+    return 0.4 * FAST_OUT_EXTRA_SLOW_IN_INITIAL(t / breakpoint);
+  }
+
+  return (
+    0.4 +
+    0.6 * FAST_OUT_EXTRA_SLOW_IN_FINAL((t - breakpoint) / (1 - breakpoint))
+  );
+};
+
+/**
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/core/res/res/interpolator/fast_out_slow_in.xml
+ */
+export const FAST_OUT_SLOW_IN = Easing.bezier(0.4, 0, 0.2, 1);
+
+/**
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/core/res/res/interpolator/linear_out_slow_in.xml
+ */
+export const LINEAR_OUT_SLOW_IN = Easing.bezier(0, 0, 0.2, 1);
+
+/**
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-9.0.0_r47/core/res/res/interpolator/activity_close_dim.xml
+ */
+export const ACTIVITY_CLOSE_DIM = Easing.bezier(0.33, 0, 1, 1);
+
+export const decelerate = (power: number, t: number) => 1 - (1 - t) ** power;
+
+export const accelerate = (power: number, t: number) => t ** power;
+
+export const clamp = (value: number) => Math.min(1, Math.max(0, value));
+
+/**
+ * Creates interpolation ranges for a property that follows its own timeline.
+ *
+ * @param options - Options for the property timeline.
+ * @param options.duration - Total transition duration in milliseconds.
+ * @param options.easing - Easing used by the transition.
+ * @param options.closing - Whether the transition is closing.
+ * @param options.stops - Times in milliseconds to include in the ranges.
+ * @param options.output - Returns the property value at a time in milliseconds.
+ */
+export function timeline({
+  duration,
+  easing,
+  closing = false,
+  stops = [],
+  output,
+}: {
+  duration: number;
+  easing: (value: number) => number;
+  closing?: boolean;
+  stops?: number[];
+  output: (time: number) => number;
+}) {
+  const times = [
+    ...new Set([
+      ...Array.from(
+        { length: Math.floor(duration / 10) + 1 },
+        (_, index) => index * 10
+      ),
+      ...stops,
+      duration,
+    ]),
+  ].sort((a, b) => a - b);
+
+  const points = times
+    .map((time) => ({
+      input: closing ? 1 - easing(time / duration) : easing(time / duration),
+      output: output(time),
+    }))
+    .sort((a, b) => a.input - b.input);
+
+  return {
+    inputRange: points.map(({ input }) => input),
+    outputRange: points.map(({ output }) => output),
+    extrapolate: 'clamp' as const,
+  };
+}

package/src/TransitionConfigs/TransitionPresets.tsx

@@ -3,11 +3,13 @@ import { Platform } from 'react-native';
 import type { TransitionPreset } from '../types';
 import {
   forBottomSheetAndroid,
+  forCrossDissolveIOS,
+  forDialogAndroid,
   forFadeFromBottomAndroid,
-  forFadeFromCenter as forFadeCard,
+  forFadeFromCenter,
   forFadeFromRightAndroid,
+  forFlipIOS,
   forHorizontalIOS,
-  forHorizontalIOSInverted,
   forModalPresentationIOS,
   forRevealFromBottomAndroid,
   forScaleFromCenterAndroid,
@@ -17,8 +19,12 @@ import { forFade, forUIKit } from './HeaderStyleInterpolators';
 import {
   BottomSheetSlideInSpec,
   BottomSheetSlideOutSpec,
+  DialogAndroidSpec,
   FadeInFromBottomAndroidSpec,
+  FadeInFromRightAndroidSpec,
   FadeOutToBottomAndroidSpec,
+  FadeOutToRightAndroidSpec,
+  FlipIOSSpec,
   RevealFromBottomAndroidSpec,
   ScaleFromCenterAndroidSpec,
   TransitionIOSSpec,
@@ -80,6 +86,19 @@ export const FadeFromBottomAndroid: TransitionPreset = {
   headerStyleInterpolator: forFade,
 };
 
+/**
+ * Standard Android dialog transition.
+ */
+export const DialogAndroid: TransitionPreset = {
+  gestureDirection: 'vertical',
+  transitionSpec: {
+    open: DialogAndroidSpec,
+    close: DialogAndroidSpec,
+  },
+  cardStyleInterpolator: forDialogAndroid,
+  headerStyleInterpolator: forFade,
+};
+
 /**
  * Standard Android navigation transition when opening or closing an Activity on Android 9 (Pie).
  */
@@ -107,20 +126,20 @@ export const ScaleFromCenterAndroid: TransitionPreset = {
 };
 
 /**
- * Standard Android navigation transition when opening or closing an Activity on Android 14.
+ * Standard Android navigation transition when opening or closing an Activity on Android 14 and later.
  */
 export const FadeFromRightAndroid: TransitionPreset = {
   gestureDirection: 'horizontal',
   transitionSpec: {
-    open: FadeInFromBottomAndroidSpec,
-    close: FadeOutToBottomAndroidSpec,
+    open: FadeInFromRightAndroidSpec,
+    close: FadeOutToRightAndroidSpec,
   },
   cardStyleInterpolator: forFadeFromRightAndroid,
   headerStyleInterpolator: forFade,
 };
 
 /**
- * Standard bottom sheet slide transition for Android 10.
+ * Standard Material 3 bottom sheet transition.
  */
 export const BottomSheetAndroid: TransitionPreset = {
   gestureDirection: 'vertical',
@@ -138,10 +157,36 @@ export const BottomSheetAndroid: TransitionPreset = {
 export const ModalFadeTransition: TransitionPreset = {
   gestureDirection: 'vertical',
   transitionSpec: {
-    open: BottomSheetSlideInSpec,
-    close: BottomSheetSlideOutSpec,
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
   },
-  cardStyleInterpolator: forFadeCard,
+  cardStyleInterpolator: forFadeFromCenter,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard iOS horizontal flip transition.
+ */
+export const ModalFlipIOS: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: FlipIOSSpec,
+    close: FlipIOSSpec,
+  },
+  cardStyleInterpolator: forFlipIOS,
+  headerStyleInterpolator: forFade,
+};
+
+/**
+ * Standard iOS cross-dissolve transition.
+ */
+export const CrossDissolveIOS: TransitionPreset = {
+  gestureDirection: 'horizontal',
+  transitionSpec: {
+    open: TransitionIOSSpec,
+    close: TransitionIOSSpec,
+  },
+  cardStyleInterpolator: forCrossDissolveIOS,
   headerStyleInterpolator: forFade,
 };
 
@@ -174,5 +219,6 @@ export const ModalTransition = Platform.select({
  */
 export const SlideFromLeftIOS: TransitionPreset = {
   ...SlideFromRightIOS,
-  cardStyleInterpolator: forHorizontalIOSInverted,
+  gestureDirection: 'horizontal-inverted',
+  cardStyleInterpolator: forHorizontalIOS,
 };

package/src/TransitionConfigs/TransitionSpecs.tsx

@@ -1,9 +1,10 @@
 import { Easing } from 'react-native';
 
 import type { TransitionSpec } from '../types';
+import { FAST_OUT_EXTRA_SLOW_IN } from './TransitionEasings';
 
 /**
- * Exact values from UINavigationController's animation configuration.
+ * Approximation of the standard iOS navigation transition.
  */
 export const TransitionIOSSpec: TransitionSpec = {
   animation: 'spring',
@@ -17,9 +18,21 @@ export const TransitionIOSSpec: TransitionSpec = {
   },
 };
 
+/**
+ * Configuration for the standard iOS horizontal flip transition.
+ */
+export const FlipIOSSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 700,
+    easing: Easing.inOut(Easing.ease),
+  },
+};
+
 /**
  * Configuration for activity open animation from Android Nougat.
- * See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-7.1.2_r37/core/res/res/anim/activity_open_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-7.1.2_r37/core/res/res/anim/activity_open_exit.xml
  */
 export const FadeInFromBottomAndroidSpec: TransitionSpec = {
   animation: 'timing',
@@ -31,94 +44,115 @@ export const FadeInFromBottomAndroidSpec: TransitionSpec = {
 
 /**
  * Configuration for activity close animation from Android Nougat.
- * See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-7.1.2_r37/core/res/res/anim/activity_close_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-7.1.2_r37/core/res/res/anim/activity_close_exit.xml
  */
 export const FadeOutToBottomAndroidSpec: TransitionSpec = {
   animation: 'timing',
   config: {
-    duration: 150,
-    easing: Easing.in(Easing.linear),
+    duration: 250,
+    easing: Easing.in(Easing.poly(4)),
   },
 };
 
 /**
- * Approximate configuration for activity open animation from Android Pie.
- * See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ * Configuration for the standard Android dialog transition.
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/core/res/res/anim/dialog_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/core/res/res/anim/dialog_exit.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/core/res/res/values/config.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/core/res/res/values/themes_material.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/services/core/java/com/android/server/wm/DimmerAnimationHelper.java
+ */
+export const DialogAndroidSpec: TransitionSpec = {
+  animation: 'timing',
+  config: {
+    duration: 220,
+    easing: Easing.out(Easing.poly(5)),
+  },
+};
+
+/**
+ * Configuration for activity open animation from Android Pie.
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-9.0.0_r47/core/res/res/anim/activity_open_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-9.0.0_r47/core/res/res/anim/activity_open_exit.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-9.0.0_r47/core/res/res/anim/activity_close_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-9.0.0_r47/core/res/res/anim/activity_close_exit.xml
  */
 export const RevealFromBottomAndroidSpec: TransitionSpec = {
   animation: 'timing',
   config: {
     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.20833, 0.82, 0.25, 1),
+    easing: FAST_OUT_EXTRA_SLOW_IN,
   },
 };
 
 /**
- * Approximate configuration for activity open animation from Android Q.
- * See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
+ * Configuration for activity open animation from Android Q.
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-10.0.0_r2/core/res/res/anim/activity_open_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-10.0.0_r2/core/res/res/anim/activity_open_exit.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-10.0.0_r2/core/res/res/anim/activity_close_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/android-10.0.0_r2/core/res/res/anim/activity_close_exit.xml
  */
 export const ScaleFromCenterAndroidSpec: TransitionSpec = {
   animation: 'timing',
   config: {
     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.20833, 0.82, 0.25, 1),
+    easing: FAST_OUT_EXTRA_SLOW_IN,
   },
 };
 
 /**
- * Approximate configuration for activity open animation from Android 14.
+ * Configuration for activity open animation from Android 14 and later.
  * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_open_enter.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_open_exit.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),
+    easing: FAST_OUT_EXTRA_SLOW_IN,
   },
 };
 
 /**
- * Approximate configuration for activity close animation from Android 14.
+ * Configuration for activity close animation from Android 14 and later.
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-14.0.0_r51/core/res/res/anim/activity_close_enter.xml
  * 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 = {
+export const FadeOutToRightAndroidSpec: 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),
+    easing: FAST_OUT_EXTRA_SLOW_IN,
   },
 };
 
 /**
- * Configuration for bottom sheet slide in animation from Material Design.
- * See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
+ * Configuration for bottom sheet slide in animation from Material 3.
+ * See https://github.com/material-components/material-components-android/blob/1.14.0/lib/java/com/google/android/material/bottomsheet/res/anim/m3_bottom_sheet_slide_in.xml
+ * See https://github.com/material-components/material-components-android/blob/1.14.0/lib/java/com/google/android/material/motion/res/values/tokens.xml
+ * See https://github.com/material-components/material-components-android/blob/1.14.0/lib/java/com/google/android/material/dialog/res/values/tokens.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/services/core/java/com/android/server/wm/DimmerAnimationHelper.java
  */
 export const BottomSheetSlideInSpec: TransitionSpec = {
   animation: 'timing',
   config: {
-    duration: 250,
-    // See https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AccelerateDecelerateInterpolator.java
-    easing: (t) => Math.cos((t + 1) * Math.PI) / 2.0 + 0.5,
+    duration: 400,
+    easing: FAST_OUT_EXTRA_SLOW_IN,
   },
 };
 
 /**
- * Configuration for bottom sheet slide out animation from Material Design.
- * See https://github.com/material-components/material-components-android/blob/fd3639092e1ffef9dc11bcedf79f32801d85e898/lib/java/com/google/android/material/bottomsheet/res/anim/mtrl_bottom_sheet_slide_in.xml
+ * Configuration for bottom sheet slide out animation from Material 3.
+ * See https://github.com/material-components/material-components-android/blob/1.14.0/lib/java/com/google/android/material/bottomsheet/res/anim/m3_bottom_sheet_slide_out.xml
+ * See https://github.com/material-components/material-components-android/blob/1.14.0/lib/java/com/google/android/material/motion/res/values/tokens.xml
+ * See https://github.com/material-components/material-components-android/blob/1.14.0/lib/java/com/google/android/material/dialog/res/values/tokens.xml
+ * See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/services/core/java/com/android/server/wm/DimmerAnimationHelper.java
  */
 export const BottomSheetSlideOutSpec: TransitionSpec = {
   animation: 'timing',
   config: {
-    duration: 200,
-    // See https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/animation/AccelerateInterpolator.java
-    easing: (t) => (t === 1.0 ? 1 : Math.pow(t, 2)),
+    duration: 350,
+    easing: FAST_OUT_EXTRA_SLOW_IN,
   },
 };

package/src/navigators/createStackNavigator.tsx

@@ -52,31 +52,40 @@ function StackNavigator({
       router,
     });
 
-  React.useEffect(
-    () =>
-      // @ts-expect-error: there may not be a tab navigator in parent
-      navigation.addListener?.('tabPress', (e) => {
-        const isFocused = navigation.isFocused();
+  React.useEffect(() => {
+    let handle: ReturnType<typeof requestAnimationFrame> | undefined;
 
-        // Run the operation in the next frame so we're sure all listeners have been run
-        // This is necessary to know if preventDefault() has been called
-        requestAnimationFrame(() => {
-          if (
-            state.index > 0 &&
-            isFocused &&
-            !(e as unknown as EventArg<'tabPress', true>).defaultPrevented
-          ) {
-            // When user taps on already focused tab and we're inside the tab,
-            // reset the stack to replicate native behaviour
-            navigation.dispatch({
-              ...StackActions.popToTop(),
-              target: state.key,
-            });
-          }
-        });
-      }),
-    [navigation, state.index, state.key]
-  );
+    // @ts-expect-error: there may not be a tab navigator in parent
+    const unsubscribe = navigation.addListener?.('tabPress', (e) => {
+      const isFocused = navigation.isFocused();
+
+      cancelAnimationFrame(handle);
+
+      // Run the operation in the next frame so we're sure all listeners have been run
+      // This is necessary to know if preventDefault() has been called
+      handle = requestAnimationFrame(() => {
+        const currentState = navigation.getState();
+
+        if (
+          isFocused &&
+          (currentState.index > 0 || currentState.routes[0]?.history?.length) &&
+          !(e as EventArg<'tabPress', true>).defaultPrevented
+        ) {
+          // When user taps on already focused tab and we're inside the tab,
+          // reset the stack to replicate native behaviour
+          navigation.dispatch({
+            ...StackActions.popToTop(),
+            target: currentState.key,
+          });
+        }
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(handle);
+      unsubscribe?.();
+    };
+  }, [navigation]);
 
   return (
     <NavigationContent>

package/src/types.tsx

@@ -8,7 +8,6 @@ import type {
 import type {
   DefaultNavigatorOptions,
   Descriptor,
-  LocaleDirection,
   NavigationHelpers,
   NavigationProp,
   ParamListBase,
@@ -97,6 +96,9 @@ export type StackAnimationName =
   | 'fade'
   | 'fade_from_bottom'
   | 'fade_from_right'
+  | 'flip'
+  | 'ios_from_left'
+  | 'ios_from_right'
   | 'none'
   | 'reveal_from_bottom'
   | 'scale_from_center'
@@ -107,7 +109,8 @@ export type StackAnimationName =
 type SceneOptionsDefaults = TransitionPreset & {
   animation: StackAnimationName;
   gestureEnabled: boolean;
-  cardOverlayEnabled: boolean;
+  cardOverlayEnabled: boolean | undefined;
+  cardShadowEnabled: boolean | undefined;
   headerMode: StackHeaderMode;
 };
 
@@ -127,6 +130,10 @@ export type Scene = {
    * Animated nodes representing the progress of the animation.
    */
   progress: SceneProgress;
+  /**
+   * Animated node representing whether the screen is closing.
+   */
+  closing: Animated.Value;
 };
 
 export type SceneProgress = {
@@ -256,6 +263,10 @@ export type StackHeaderProps = {
    * Animated nodes representing the progress of the animation.
    */
   progress: SceneProgress;
+  /**
+   * Direction multiplier for the transition.
+   */
+  inverted: 1 | -1;
   /**
    * Options for the current screen.
    */
@@ -320,7 +331,8 @@ export type StackNavigationOptions = StackHeaderOptions &
     header?: (props: StackHeaderProps) => React.ReactNode;
     /**
      * Whether the header floats above the screen or part of the screen.
-     * Defaults to `float` on iOS for non-modals, and `screen` for the rest.
+     * Defaults to `float` on iOS for animations where the header transitions
+     * separately, and `screen` otherwise.
      */
     headerMode?: StackHeaderMode;
     /**
@@ -329,14 +341,17 @@ export type StackNavigationOptions = StackHeaderOptions &
      */
     headerShown?: boolean;
     /**
-     * Whether a shadow is visible for the card during transitions. Defaults to `true`.
+     * Whether a shadow is visible for the card during transitions.
+     * Defaults to whether `cardStyleInterpolator` returns a `shadowStyle`.
+     * Setting this overrides the default behavior.
      */
-    cardShadowEnabled?: boolean;
+    cardShadowEnabled?: boolean | undefined;
     /**
      * Whether to have a semi-transparent dark overlay visible under the card during transitions.
-     * Defaults to `true` on Android and `false` on iOS.
+     * Defaults to whether `cardStyleInterpolator` returns an `overlayStyle`.
+     * Setting this overrides the default behavior.
      */
-    cardOverlayEnabled?: boolean;
+    cardOverlayEnabled?: boolean | undefined;
     /**
      * Function that returns a React Element to display as a overlay for the card.
      */
@@ -371,8 +386,12 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Supported values:
      * - 'none': don't animate the screen
      * - 'default': use the platform default animation
-     * - 'fade': fade screen in or out
+     * - 'fade': fade between screens
      * - 'fade_from_bottom': fade screen in or out from bottom
+     * - 'fade_from_right': fade screen in from the right
+     * - 'flip': flip the screen horizontally
+     * - 'ios_from_left': use the iOS-style slide from left
+     * - 'ios_from_right': use the iOS-style slide from right
      * - '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
@@ -386,7 +405,9 @@ export type StackNavigationOptions = StackHeaderOptions &
      */
     animationTypeForReplace?: 'push' | 'pop';
     /**
-     * Whether you can use gestures to dismiss this screen. Defaults to `true` on iOS, `false` on Android.
+     * Whether you can use gestures to dismiss this screen. Defaults to `true`
+     * on iOS for navigation-style transitions with an interactive dismissal,
+     * and `false` otherwise.
      * Not supported on Web.
      */
     gestureEnabled?: boolean;
@@ -440,36 +461,32 @@ export type TransitionSpec =
       >;
     };
 
+type StackCardInterpolationState = {
+  /**
+   * Animated node representing the progress value of the screen.
+   */
+  progress: Animated.AnimatedInterpolation<number>;
+  /**
+   * Animated node representing whether the screen is using the closing or
+   * opening animation (1 - closing, 0 - opening).
+   */
+  closing: Animated.AnimatedInterpolation<0 | 1>;
+};
+
 export type StackCardInterpolationProps = {
   /**
    * Values for the current screen.
    */
-  current: {
-    /**
-     * Animated node representing the progress value of the current screen.
-     */
-    progress: Animated.AnimatedInterpolation<number>;
-  };
+  current: StackCardInterpolationState;
   /**
    * Values for the screen after this one in the stack.
    * This can be `undefined` in case the screen animating is the last one.
    */
-  next?:
-    | {
-        /**
-         * Animated node representing the progress value of the next screen.
-         */
-        progress: Animated.AnimatedInterpolation<number>;
-      }
-    | undefined;
+  next?: StackCardInterpolationState | undefined;
   /**
    * The index of the card with this interpolation in the stack.
    */
   index: number;
-  /**
-   * Animated node representing whether the card is closing (1 - closing, 0 - not closing).
-   */
-  closing: Animated.AnimatedInterpolation<0 | 1>;
   /**
    * Animated node representing whether the card is being swiped (1 - swiping, 0 - not swiping).
    */
@@ -548,9 +565,9 @@ export type StackHeaderInterpolationProps = {
       }
     | undefined;
   /**
-   * Writing direction of the layout.
+   * Direction multiplier for the transition.
    */
-  direction: LocaleDirection;
+  inverted: 1 | -1;
   /**
    * Layout measurements for various items we use for animation.
    */

package/src/views/Header/Header.tsx

@@ -11,6 +11,7 @@ import { HeaderSegment } from './HeaderSegment';
 export const Header = React.memo(function Header({
   back,
   progress,
+  inverted,
   options,
   route,
   navigation,
@@ -54,6 +55,7 @@ export const Header = React.memo(function Header({
   return (
     <HeaderSegment
       {...options}
+      inverted={inverted}
       title={getHeaderTitle(options, route.name)}
       progress={progress}
       modal={isModal}