@react-navigation/stack 8.0.0-alpha.6 → 8.0.0-alpha.60

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -14,11 +14,9 @@ const { add, multiply } = Animated;
 export function forUIKit({
   current,
   next,
-  direction,
+  inverted,
   layouts,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const multiplier = direction === 'rtl' ? -1 : 1;
-
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -45,7 +43,7 @@ export function forUIKit({
     });
 
     const translateX = multiply(
-      multiplier,
+      inverted,
       progress.interpolate({
         inputRange: [0, 1, 2],
         outputRange: [layouts.screen.width, 0, -layouts.screen.width * 0.3],
@@ -128,10 +126,9 @@ export function forFade({
 export function forSlideLeft({
   current,
   next,
-  direction,
+  inverted,
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const isRTL = direction === 'rtl';
   const progress = add(
     current.progress.interpolate({
       inputRange: [0, 1],
@@ -147,12 +144,13 @@ export function forSlideLeft({
       : 0
   );
 
-  const translateX = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: isRTL
-      ? [-screen.width, 0, screen.width]
-      : [screen.width, 0, -screen.width],
-  });
+  const translateX = multiply(
+    inverted,
+    progress.interpolate({
+      inputRange: [0, 1, 2],
+      outputRange: [screen.width, 0, -screen.width],
+    })
+  );
 
   const transform = [{ translateX }];
 
@@ -168,42 +166,13 @@ export function forSlideLeft({
  * Simple translate animation to translate the header to right.
  */
 export function forSlideRight({
-  current,
-  next,
-  direction,
-  layouts: { screen },
+  inverted,
+  ...rest
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const isRTL = direction === 'rtl';
-  const progress = add(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, 1],
-          extrapolate: 'clamp',
-        })
-      : 0
-  );
-
-  const translateX = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: isRTL
-      ? [screen.width, 0, -screen.width]
-      : [-screen.width, 0, screen.width],
+  return forSlideLeft({
+    ...rest,
+    inverted: inverted === 1 ? -1 : 1,
   });
-
-  const transform = [{ translateX }];
-
-  return {
-    leftButtonStyle: { transform },
-    rightButtonStyle: { transform },
-    titleStyle: { transform },
-    backgroundStyle: { transform },
-  };
 }
 
 /**

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

@@ -9,6 +9,7 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
 export {
   createStackNavigator,
   createStackScreen,
+  type StackTypeBag,
 } from './navigators/createStackNavigator';
 
 /**
@@ -31,9 +32,9 @@ export {
  * Utilities
  */
 export { CardAnimationContext } from './utils/CardAnimationContext';
-export { GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
+export { GestureHandlerContext } from './utils/GestureHandlerContext';
 export { useCardAnimation } from './utils/useCardAnimation';
-export { useGestureHandlerRef } from './utils/useGestureHandlerRef';
+export { useGestureHandler } from './utils/useGestureHandler';
 
 /**
  * Types