From 67798af869dcbbf323629fc7e7cc9062d1e12c29 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Thu, 9 Jan 2020 01:27:19 +0100
Subject: [PATCH] fix: clamp interpolated styles

---
 example/src/index.tsx                         |  7 ++-
 .../CardStyleInterpolators.tsx                | 41 +++++++++++++++-
 .../HeaderStyleInterpolators.tsx              | 47 +++++++++++++++++--
 3 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/example/src/index.tsx b/example/src/index.tsx
index 112d6a45..ce7e0d78 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -35,6 +35,7 @@ import {
   createStackNavigator,
   Assets as StackAssets,
   StackNavigationProp,
+  HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 
 import LinkingPrefixes from './LinkingPrefixes';
@@ -206,7 +207,11 @@ export default function App() {
             }: {
               navigation: DrawerNavigationProp<RootDrawerParamList>;
             }) => (
-              <Stack.Navigator>
+              <Stack.Navigator
+                screenOptions={{
+                  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+                }}
+              >
                 <Stack.Screen
                   name="Home"
                   options={{
diff --git a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
index bd9e5bf3..17bc2efb 100644
--- a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
+++ b/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
@@ -20,6 +20,7 @@ export function forHorizontalIOS({
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.width, 0],
+      extrapolate: 'clamp',
     }),
     inverted
   );
@@ -29,6 +30,7 @@ export function forHorizontalIOS({
         next.progress.interpolate({
           inputRange: [0, 1],
           outputRange: [0, screen.width * -0.3],
+          extrapolate: 'clamp',
         }),
         inverted
       )
@@ -37,11 +39,13 @@ 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],
+    extrapolate: 'clamp',
   });
 
   return {
@@ -70,6 +74,7 @@ export function forVerticalIOS({
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.height, 0],
+      extrapolate: 'clamp',
     }),
     inverted
   );
@@ -100,7 +105,20 @@ export function forModalPresentationIOS({
   const statusBarHeight = insets.top;
   const aspectRatio = screen.height / screen.width;
 
-  const progress = add(current.progress, next ? next.progress : 0);
+  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 translateY = multiply(
     progress.interpolate({
@@ -164,6 +182,7 @@ export function forFadeFromBottomAndroid({
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.height * 0.08, 0],
+      extrapolate: 'clamp',
     }),
     inverted
   );
@@ -198,6 +217,7 @@ export function forRevealFromBottomAndroid({
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.height, 0],
+      extrapolate: 'clamp',
     }),
     inverted
   );
@@ -206,6 +226,7 @@ export function forRevealFromBottomAndroid({
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.height * (95.9 / 100) * -1, 0],
+      extrapolate: 'clamp',
     }),
     inverted
   );
@@ -215,6 +236,7 @@ export function forRevealFromBottomAndroid({
         next.progress.interpolate({
           inputRange: [0, 1],
           outputRange: [0, screen.height * (2 / 100) * -1],
+          extrapolate: 'clamp',
         }),
         inverted
       )
@@ -223,6 +245,7 @@ export function forRevealFromBottomAndroid({
   const overlayOpacity = current.progress.interpolate({
     inputRange: [0, 0.36, 1],
     outputRange: [0, 0.1, 0.1],
+    extrapolate: 'clamp',
   });
 
   return {
@@ -248,7 +271,20 @@ export function forScaleFromCenterAndroid({
   next,
   closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
-  const progress = add(current.progress, next ? next.progress : 0);
+  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 opacity = progress.interpolate({
     inputRange: [0, 0.8, 1, 1.2, 2],
@@ -260,6 +296,7 @@ export function forScaleFromCenterAndroid({
     current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0.9, 1],
+      extrapolate: 'clamp',
     }),
     progress.interpolate({
       inputRange: [0, 1, 2],
diff --git a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
index ce15a714..4b7e590c 100644
--- a/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
+++ b/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx
@@ -33,7 +33,20 @@ export function forUIKit({
   // The back title also animates in from this position
   const rightOffset = layouts.screen.width / 4;
 
-  const progress = add(current.progress, next ? next.progress : 0);
+  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
+  );
 
   return {
     leftButtonStyle: {
@@ -98,7 +111,21 @@ export function forFade({
   current,
   next,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const progress = add(current.progress, next ? next.progress : 0);
+  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 opacity = progress.interpolate({
     inputRange: [0, 1, 2],
     outputRange: [0, 1, 0],
@@ -125,7 +152,21 @@ export function forStatic({
   next,
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const progress = add(current.progress, next ? next.progress : 0);
+  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: I18nManager.isRTL