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

package/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -5,6 +5,16 @@ import type {
   StackCardInterpolationProps,
 } from '../types';
 import { conditional } from '../utils/conditional';
+import {
+  accelerate,
+  ACTIVITY_CLOSE_DIM,
+  clamp,
+  decelerate,
+  FAST_OUT_EXTRA_SLOW_IN,
+  FAST_OUT_SLOW_IN,
+  LINEAR_OUT_SLOW_IN,
+  timeline,
+} from './TransitionEasings';
 
 const { add, multiply } = Animated;
 
@@ -39,13 +49,7 @@ export function forHorizontalIOS({
 
   const overlayOpacity = current.progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.07],
-    extrapolate: 'clamp',
-  });
-
-  const shadowOpacity = current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.3],
+    outputRange: [0, 0.1],
     extrapolate: 'clamp',
   });
 
@@ -59,23 +63,10 @@ export function forHorizontalIOS({
       ],
     },
     overlayStyle: { opacity: overlayOpacity },
-    shadowStyle: { shadowOpacity },
+    shadowStyle: { shadowOpacity: 0.04 },
   };
 }
 
-/**
- * iOS-style slide in from the left.
- */
-export function forHorizontalIOSInverted({
-  inverted,
-  ...rest
-}: StackCardInterpolationProps): StackCardInterpolatedStyle {
-  return forHorizontalIOS({
-    ...rest,
-    inverted: Animated.multiply(inverted, -1),
-  });
-}
-
 /**
  * Standard iOS-style slide in from the bottom (used for modals).
  */
@@ -242,9 +233,9 @@ export function forModalPresentationIOS({
  */
 export function forFadeFromBottomAndroid({
   current,
+  next,
   inverted,
   layouts: { screen },
-  closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = multiply(
     current.progress.interpolate({
@@ -256,13 +247,24 @@ export function forFadeFromBottomAndroid({
   );
 
   const opacity = conditional(
-    closing,
-    current.progress,
-    current.progress.interpolate({
-      inputRange: [0, 0.5, 0.9, 1],
-      outputRange: [0, 0.25, 0.7, 1],
-      extrapolate: 'clamp',
-    })
+    current.closing,
+    current.progress.interpolate(
+      timeline({
+        duration: 250,
+        easing: (value) => accelerate(4, value),
+        closing: true,
+        stops: [100],
+        output: (time) => 1 - clamp((time - 100) / 150),
+      })
+    ),
+    current.progress.interpolate(
+      timeline({
+        duration: 350,
+        easing: (value) => decelerate(5, value),
+        stops: [200],
+        output: (time) => decelerate(4, clamp(time / 200)),
+      })
+    )
   );
 
   return {
@@ -270,6 +272,29 @@ export function forFadeFromBottomAndroid({
       opacity,
       transform: [{ translateY }],
     },
+    dimStyle: next
+      ? {
+          opacity: conditional(
+            next.closing,
+            next.progress.interpolate(
+              timeline({
+                duration: 250,
+                easing: (value) => accelerate(4, value),
+                closing: true,
+                output: (time) => 0.3 * (1 - LINEAR_OUT_SLOW_IN(time / 250)),
+              })
+            ),
+            next.progress.interpolate(
+              timeline({
+                duration: 350,
+                easing: (value) => decelerate(5, value),
+                stops: [217],
+                output: (time) => 0.3 * FAST_OUT_SLOW_IN(clamp(time / 217)),
+              })
+            )
+          ),
+        }
+      : undefined,
   };
 }
 
@@ -282,40 +307,80 @@ export function forRevealFromBottomAndroid({
   inverted,
   layouts: { screen },
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const translationOpenRanges = timeline({
+    duration: 425,
+    easing: FAST_OUT_EXTRA_SLOW_IN,
+    output: (time) => FAST_OUT_SLOW_IN(time / 425),
+  });
+
+  const translationCloseRanges = timeline({
+    duration: 425,
+    easing: FAST_OUT_EXTRA_SLOW_IN,
+    closing: true,
+    output: (time) => 1 - FAST_OUT_SLOW_IN(time / 425),
+  });
+
+  const clipProgress = current.progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  const translationProgress = conditional(
+    current.closing,
+    current.progress.interpolate(translationCloseRanges),
+    current.progress.interpolate(translationOpenRanges)
+  );
+
   const containerTranslateY = multiply(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [screen.height, 0],
-      extrapolate: 'clamp',
-    }),
+    multiply(
+      add(
+        add(1, multiply(clipProgress, -0.959)),
+        multiply(translationProgress, -0.041)
+      ),
+      screen.height
+    ),
     inverted
   );
 
   const cardTranslateYFocused = multiply(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [screen.height * (95.9 / 100) * -1, 0],
-      extrapolate: 'clamp',
-    }),
+    multiply(add(clipProgress, -1), screen.height * 0.959),
     inverted
   );
 
   const cardTranslateYUnfocused = next
     ? multiply(
-        next.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, screen.height * (2 / 100) * -1],
-          extrapolate: 'clamp',
-        }),
+        multiply(
+          conditional(
+            next.closing,
+            next.progress.interpolate(translationCloseRanges),
+            next.progress.interpolate(translationOpenRanges)
+          ),
+          screen.height * -0.02
+        ),
         inverted
       )
     : 0;
 
-  const overlayOpacity = current.progress.interpolate({
-    inputRange: [0, 0.36, 1],
-    outputRange: [0, 0.1, 0.1],
-    extrapolate: 'clamp',
-  });
+  const overlayOpacity = conditional(
+    current.closing,
+    current.progress.interpolate(
+      timeline({
+        duration: 425,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        closing: true,
+        output: (time) => 0.1 * (1 - ACTIVITY_CLOSE_DIM(time / 425)),
+      })
+    ),
+    current.progress.interpolate(
+      timeline({
+        duration: 425,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        stops: [117],
+        output: (time) => 0.1 * clamp(time / 117),
+      })
+    )
+  );
 
   return {
     containerStyle: {
@@ -333,62 +398,94 @@ export function forRevealFromBottomAndroid({
 }
 
 /**
- * Standard Android-style zoom for Android 10.
+ * Standard Android-style scale from center for Android 10.
  */
 export function forScaleFromCenterAndroid({
   current,
   next,
-  closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
-  const progress = add(
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    next
-      ? next.progress.interpolate({
+  const opacity = conditional(
+    current.closing,
+    current.progress.interpolate(
+      timeline({
+        duration: 400,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        closing: true,
+        stops: [33, 83],
+        output: (time) => 1 - clamp((time - 33) / 50),
+      })
+    ),
+    current.progress.interpolate(
+      timeline({
+        duration: 400,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        stops: [50, 100],
+        output: (time) => clamp((time - 50) / 50),
+      })
+    )
+  );
+
+  const scale = next
+    ? conditional(
+        next.closing,
+        next.progress.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, 1],
+          outputRange: [1, 1.1],
+          extrapolate: 'clamp',
+        }),
+        next.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 1.05],
           extrapolate: 'clamp',
         })
-      : 0
-  );
-
-  const opacity = progress.interpolate({
-    inputRange: [0, 0.75, 0.875, 1, 1.0825, 1.2075, 2],
-    outputRange: [0, 0, 1, 1, 1, 1, 0],
-  });
-
-  const scale = conditional(
-    closing,
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0.925, 1],
-      extrapolate: 'clamp',
-    }),
-    progress.interpolate({
-      inputRange: [0, 1, 2],
-      outputRange: [0.85, 1, 1.075],
-    })
-  );
+      )
+    : conditional(
+        current.closing,
+        current.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.9, 1],
+          extrapolate: 'clamp',
+        }),
+        current.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.85, 1],
+          extrapolate: 'clamp',
+        })
+      );
 
   return {
     cardStyle: {
       opacity,
       transform: [{ scale }],
     },
+    dimStyle: next
+      ? {
+          opacity: multiply(
+            next.closing.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 0],
+            }),
+            next.progress.interpolate(
+              timeline({
+                duration: 400,
+                easing: FAST_OUT_EXTRA_SLOW_IN,
+                stops: [83, 250],
+                output: (time) => 0.6 * clamp((time - 83) / 167),
+              })
+            )
+          ),
+        }
+      : undefined,
   };
 }
 
 /**
- * Standard Android-style fade from right for Android 14.
+ * Standard Android-style fade from right for Android 14 and later.
  */
 export function forFadeFromRightAndroid({
   current,
   next,
   inverted,
-  closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateFocused = multiply(
     current.progress.interpolate({
@@ -411,13 +508,24 @@ export function forFadeFromRightAndroid({
     : 0;
 
   const opacity = conditional(
-    closing,
-    current.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    }),
-    current.progress
+    current.closing,
+    current.progress.interpolate(
+      timeline({
+        duration: 450,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        closing: true,
+        stops: [35, 118],
+        output: (time) => 1 - clamp((time - 35) / 83),
+      })
+    ),
+    current.progress.interpolate(
+      timeline({
+        duration: 450,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        stops: [50, 133],
+        output: (time) => clamp((time - 50) / 83),
+      })
+    )
   );
 
   return {
@@ -440,20 +548,27 @@ export function forBottomSheetAndroid({
   current,
   inverted,
   layouts: { screen },
-  closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = multiply(
     current.progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [screen.height * 0.8, 0],
+      outputRange: [screen.height * 0.2, 0],
       extrapolate: 'clamp',
     }),
     inverted
   );
 
   const opacity = conditional(
-    closing,
-    current.progress,
+    current.closing,
+    current.progress.interpolate(
+      timeline({
+        duration: 350,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        closing: true,
+        stops: [300],
+        output: (time) => 1 - FAST_OUT_EXTRA_SLOW_IN(clamp(time / 300)),
+      })
+    ),
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0, 1],
@@ -461,23 +576,107 @@ export function forBottomSheetAndroid({
     })
   );
 
-  const overlayOpacity = current.progress.interpolate({
+  // We follow Android's window dim timing for the 0.32 scrim.
+  // This makes it reach full opacity after 128 ms and clear after 112 ms.
+  // See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/services/core/java/com/android/server/wm/DimmerAnimationHelper.java
+  const overlayOpacity = conditional(
+    current.closing,
+    current.progress.interpolate(
+      timeline({
+        duration: 350,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        closing: true,
+        stops: [112],
+        output: (time) => 0.32 * (1 - clamp(time / 112)),
+      })
+    ),
+    current.progress.interpolate(
+      timeline({
+        duration: 400,
+        easing: FAST_OUT_EXTRA_SLOW_IN,
+        stops: [128],
+        output: (time) => 0.32 * clamp(time / 128),
+      })
+    )
+  );
+
+  return {
+    cardStyle: {
+      opacity,
+      transform: [{ translateY }],
+    },
+    overlayStyle: { opacity: overlayOpacity },
+  };
+}
+
+/**
+ * Standard Android dialog transition.
+ */
+export function forDialogAndroid({
+  current: { progress, closing },
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const opacity = conditional(
+    closing,
+    progress.interpolate(
+      timeline({
+        duration: 220,
+        easing: (value) => decelerate(5, value),
+        closing: true,
+        stops: [150],
+        output: (time) => 1 - decelerate(3, clamp(time / 150)),
+      })
+    ),
+    progress.interpolate(
+      timeline({
+        duration: 220,
+        easing: (value) => decelerate(5, value),
+        stops: [150],
+        output: (time) => decelerate(3, clamp(time / 150)),
+      })
+    )
+  );
+
+  const scale = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.3],
+    outputRange: [0.9, 1],
     extrapolate: 'clamp',
   });
 
+  // We follow Android's window dim timing for the 0.6 dialog dim.
+  // This makes it reach or clear full opacity after 132 ms.
+  // See https://android.googlesource.com/platform/frameworks/base/+/refs/tags/android-17.0.0_r1/services/core/java/com/android/server/wm/DimmerAnimationHelper.java
+  const overlayOpacity = conditional(
+    closing,
+    progress.interpolate(
+      timeline({
+        duration: 220,
+        easing: (value) => decelerate(5, value),
+        closing: true,
+        stops: [132],
+        output: (time) => 0.6 * (1 - clamp(time / 132)),
+      })
+    ),
+    progress.interpolate(
+      timeline({
+        duration: 220,
+        easing: (value) => decelerate(5, value),
+        stops: [132],
+        output: (time) => 0.6 * clamp(time / 132),
+      })
+    )
+  );
+
   return {
     cardStyle: {
       opacity,
-      transform: [{ translateY }],
+      transform: [{ scale }],
     },
     overlayStyle: { opacity: overlayOpacity },
   };
 }
 
 /**
- * Simple fade animation for dialogs
+ * Simple fade animation.
  */
 export function forFadeFromCenter({
   current: { progress },
@@ -487,15 +686,67 @@ export function forFadeFromCenter({
       opacity: progress.interpolate({
         inputRange: [0, 0.5, 0.9, 1],
         outputRange: [0, 0.25, 0.7, 1],
+        extrapolate: 'clamp',
       }),
     },
-    overlayStyle: {
-      opacity: progress.interpolate({
+  };
+}
+
+/**
+ * Standard iOS cross-dissolve transition.
+ */
+export function forCrossDissolveIOS({
+  current,
+  next,
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  // UIKit cross-dissolve darkens identical light screens at the midpoint.
+  // Dimming the outgoing card reproduces this without exposing earlier screens.
+  return {
+    cardStyle: {
+      opacity: current.progress.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.5],
+        outputRange: [0, 1],
         extrapolate: 'clamp',
       }),
     },
+    dimStyle: next
+      ? {
+          opacity: next.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+            extrapolate: 'clamp',
+          }),
+        }
+      : undefined,
+  };
+}
+
+/**
+ * Standard iOS horizontal flip transition.
+ */
+export function forFlipIOS({
+  current,
+  next,
+  inverted,
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
+  const progress = add(current.progress, next ? next.progress : 0);
+
+  const rotateY = multiply(
+    progress.interpolate({
+      inputRange: [0, 1, 2],
+      outputRange: [180, 0, -180],
+    }),
+    inverted
+  ).interpolate({
+    inputRange: [-180, 0, 180],
+    outputRange: ['-180deg', '0deg', '180deg'],
+  });
+
+  return {
+    cardStyle: {
+      backfaceVisibility: 'hidden',
+      transform: [{ perspective: 1000 }, { rotateY }],
+    },
   };
 }
 

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 },
-  };
 }
 
 /**