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

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,14 @@ export function forHorizontalIOS({
       ],
     },
     overlayStyle: { opacity: overlayOpacity },
-    shadowStyle: { shadowOpacity },
+    shadowStyle:
+      Platform.OS === 'web'
+        ? // React Native Web prints deprecation warnings for `shadowX` properties
+          {}
+        : { 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).
  */
@@ -138,6 +133,50 @@ export function forModalPresentationIOS({
 
   const isFirst = index === 0;
 
+  if (Platform.OS !== 'ios' || parseInt(Platform.Version, 10) >= 26) {
+    const scaleValue = screen.width ? 1 - (topOffset * 3) / screen.width : 1;
+    const recede = ((screen.height - statusBarHeight) * (1 - scaleValue)) / 2;
+
+    const translateY = multiply(
+      progress.interpolate({
+        inputRange: [0, 1, 2],
+        outputRange: [
+          screen.height,
+          // The front modal rests below the one behind it to reveal a peek.
+          index > 1 ? topOffset : 0,
+          isFirst ? 0 : -recede,
+        ],
+      }),
+      inverted
+    );
+
+    const scale = isFirst
+      ? 1
+      : progress.interpolate({
+          inputRange: [0, 1, 2],
+          outputRange: [1, 1, scaleValue],
+        });
+
+    const dimOpacity = progress.interpolate({
+      inputRange: [0, 1, 2],
+      outputRange: [0, 0, isFirst ? 0.2 : 0.12],
+    });
+
+    const borderRadius = isFirst ? 0 : 38;
+
+    return {
+      cardStyle: {
+        overflow: 'hidden',
+        borderCurve: 'continuous',
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
+        marginTop: isFirst ? 0 : statusBarHeight,
+        transform: [{ translateY }, { scale }],
+      },
+      dimStyle: { opacity: dimOpacity },
+    };
+  }
+
   const translateY = multiply(
     progress.interpolate({
       inputRange: [0, 1, 2],
@@ -198,9 +237,9 @@ export function forModalPresentationIOS({
  */
 export function forFadeFromBottomAndroid({
   current,
+  next,
   inverted,
   layouts: { screen },
-  closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = multiply(
     current.progress.interpolate({
@@ -212,13 +251,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 {
@@ -226,6 +276,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,
   };
 }
 
@@ -238,40 +311,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: {
@@ -289,62 +402,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({
@@ -367,13 +512,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 {
@@ -396,20 +552,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],
@@ -417,23 +580,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 },
@@ -443,15 +690,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 }],
+    },
   };
 }