refactor: change signature of interpolation props

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -9,15 +9,16 @@ const { cond, add, multiply, interpolate } = Animated;
  * Standard iOS-style slide in from the right.
  */
 export function forHorizontalIOS({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateFocused = interpolate(current, {
+  const translateFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [I18nManager.isRTL ? -screen.width : screen.width, 0],
   });
   const translateUnfocused = next
-    ? interpolate(next, {
+    ? interpolate(next.progress, {
         inputRange: [0, 1],
         outputRange: [
           0,
@@ -26,12 +27,12 @@ export function forHorizontalIOS({
       })
     : 0;
 
-  const overlayOpacity = interpolate(current, {
+  const overlayOpacity = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [0, 0.07],
   });
 
-  const shadowOpacity = interpolate(current, {
+  const shadowOpacity = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [0, 0.3],
   });
@@ -54,10 +55,10 @@ export function forHorizontalIOS({
  * Standard iOS-style slide in from the bottom (used for modals).
  */
 export function forVerticalIOS({
-  progress: { current },
+  current,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateY = interpolate(current, {
+  const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
   });
@@ -77,14 +78,15 @@ export function forVerticalIOS({
  */
 export function forModalPresentationIOS({
   index,
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
   const topOffset = 10;
   const statusBarHeight = getStatusBarHeight(screen.width > screen.height);
   const aspectRatio = screen.height / screen.width;
 
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
 
   const translateY = interpolate(progress, {
     inputRange: [0, 1, 2],
@@ -129,19 +131,19 @@ export function forModalPresentationIOS({
  * Standard Android-style fade in from the bottom for Android Oreo.
  */
 export function forFadeFromBottomAndroid({
-  progress: { current },
+  current,
   layouts: { screen },
   closing,
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const translateY = interpolate(current, {
+  const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 0.08), 0],
   });
 
   const opacity = cond(
     closing,
-    current,
-    interpolate(current, {
+    current.progress,
+    interpolate(current.progress, {
       inputRange: [0, 0.5, 0.9, 1],
       outputRange: [0, 0.25, 0.7, 1],
     })
@@ -156,27 +158,28 @@ export function forFadeFromBottomAndroid({
 }
 
 /**
- * Standard Android-style wipe from the bottom for Android Pie.
+ * Standard Android-style reveal from the bottom for Android Pie.
  */
 export function forRevealFromBottomAndroid({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: CardInterpolationProps): CardInterpolatedStyle {
-  const containerTranslateY = interpolate(current, {
+  const containerTranslateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
   });
-  const cardTranslateYFocused = interpolate(current, {
+  const cardTranslateYFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 95.9 / 100, -1), 0],
   });
   const cardTranslateYUnfocused = next
-    ? interpolate(next, {
+    ? interpolate(next.progress, {
         inputRange: [0, 1],
         outputRange: [0, multiply(screen.height, 2 / 100, -1)],
       })
     : 0;
-  const overlayOpacity = interpolate(current, {
+  const overlayOpacity = interpolate(current.progress, {
     inputRange: [0, 0.36, 1],
     outputRange: [0, 0.1, 0.1],
   });

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -4,8 +4,12 @@ import { HeaderInterpolationProps, HeaderInterpolatedStyle } from '../types';
 
 const { interpolate, add } = Animated;
 
+/**
+ * Standard UIKit style animation for the header where the title fades into the back button label.
+ */
 export function forUIKit({
-  progress: { current, next },
+  current,
+  next,
   layouts,
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
   const defaultOffset = 100;
@@ -27,7 +31,7 @@ export function forUIKit({
   // The back title also animates in from this position
   const rightOffset = layouts.screen.width / 4;
 
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
 
   return {
     leftButtonStyle: {
@@ -85,10 +89,14 @@ export function forUIKit({
   };
 }
 
+/**
+ * Simple fade animation for the header elements.
+ */
 export function forFade({
-  progress: { current, next },
+  current,
+  next,
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
   const opacity = interpolate(progress, {
     inputRange: [0, 1, 2],
     outputRange: [0, 1, 0],
@@ -102,11 +110,15 @@ export function forFade({
   };
 }
 
+/**
+ * Simple translate animation to translate the header along with the sliding screen.
+ */
 export function forStatic({
-  progress: { current, next },
+  current,
+  next,
   layouts: { screen },
 }: HeaderInterpolationProps): HeaderInterpolatedStyle {
-  const progress = add(current, next ? next : 0);
+  const progress = add(current.progress, next ? next.progress : 0);
   const translateX = interpolate(progress, {
     inputRange: [0, 1, 2],
     outputRange: I18nManager.isRTL

packages/stack/src/types.tsx

@@ -181,11 +181,13 @@ export type TransitionSpec =
   | { animation: 'timing'; config: TimingConfig };
 
 export type CardInterpolationProps = {
-  index: number;
-  progress: {
-    current: Animated.Node<number>;
-    next?: Animated.Node<number>;
+  current: {
+    progress: Animated.Node<number>;
   };
+  next?: {
+    progress: Animated.Node<number>;
+  };
+  index: number;
   closing: Animated.Node<0 | 1>;
   layouts: {
     screen: Layout;
@@ -204,9 +206,11 @@ export type CardStyleInterpolator = (
 ) => CardInterpolatedStyle;
 
 export type HeaderInterpolationProps = {
-  progress: {
-    current: Animated.Node<number>;
-    next?: Animated.Node<number>;
+  current: {
+    progress: Animated.Node<number>;
+  };
+  next?: {
+    progress: Animated.Node<number>;
   };
   layouts: {
     screen: Layout;

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -121,10 +121,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
       leftLabelLayout: Layout | undefined
     ) =>
       styleInterpolator({
-        progress: {
-          current,
-          next,
-        },
+        current: { progress: current },
+        next: next && { progress: next },
         layouts: {
           screen: layout,
           title: titleLayout,

packages/stack/src/views/Stack/Card.tsx

@@ -529,10 +529,8 @@ export default class Card extends React.Component<Props> {
     ) =>
       styleInterpolator({
         index,
-        progress: {
-          current,
-          next,
-        },
+        current: { progress: current },
+        next: next && { progress: next },
         closing: this.isClosing,
         layouts: {
           screen: layout,