From 7a61cbbba291b1778704e07765214ccd896c79ee Mon Sep 17 00:00:00 2001
From: Neo <nihgwu@live.com>
Date: Thu, 27 Apr 2017 01:38:33 +0800
Subject: [PATCH] =?UTF-8?q?remove=2030px=20offset=20workaround=20for=20scr?=
 =?UTF-8?q?een=E2=80=99s=20shadow=20disappearing=20(#1110)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* remove 30px offset workaround for screen’s shadow disappearing

* Run prettier
---
 .../src/views/CardStackStyleInterpolator.js   | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/react-navigation/src/views/CardStackStyleInterpolator.js b/packages/react-navigation/src/views/CardStackStyleInterpolator.js
index 8d46c43b..27d4119f 100644
--- a/packages/react-navigation/src/views/CardStackStyleInterpolator.js
+++ b/packages/react-navigation/src/views/CardStackStyleInterpolator.js
@@ -53,18 +53,24 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
   }
 
   const index = scene.index;
-  const inputRange = [index - 1, index, index + 0.99, index + 1];
+  const inputRange = [index - 1, index, index + 1];
 
-  // Add ~30px to the interpolated width screens width for horizontal movement. This allows
-  // the screen's shadow to go screen fully offscreen without abruptly dissapearing
-  const width = layout.initWidth + 30;
+  const width = layout.initWidth;
   const outputRange = I18nManager.isRTL
-    ? ([-width, 0, 10, 10]: Array<number>)
-    : ([width, 0, -10, -10]: Array<number>);
+    ? ([-width, 0, 10]: Array<number>)
+    : ([width, 0, -10]: Array<number>);
 
+  // Add [index - 1, index - 0.99] to the interpolated opacity for screen transition.
+  // This makes the screen's shadow to disappear smoothly.
   const opacity = position.interpolate({
-    inputRange,
-    outputRange: ([1, 1, 0.3, 0]: Array<number>),
+    inputRange: ([
+      index - 1,
+      index - 0.99,
+      index,
+      index + 0.99,
+      index + 1,
+    ]: Array<number>),
+    outputRange: ([0, 1, 1, 0.3, 0]: Array<number>),
   });
 
   const translateY = 0;
@@ -94,18 +100,23 @@ function forVertical(props: NavigationSceneRendererProps): Object {
   }
 
   const index = scene.index;
-  const inputRange = [index - 1, index, index + 0.99, index + 1];
   const height = layout.initHeight;
 
   const opacity = position.interpolate({
-    inputRange,
-    outputRange: ([1, 1, 0.3, 0]: Array<number>),
+    inputRange: ([
+      index - 1,
+      index - 0.99,
+      index,
+      index + 0.99,
+      index + 1,
+    ]: Array<number>),
+    outputRange: ([0, 1, 1, 0.3, 0]: Array<number>),
   });
 
   const translateX = 0;
   const translateY = position.interpolate({
-    inputRange,
-    outputRange: ([height, 0, 0, 0]: Array<number>),
+    inputRange: ([index - 1, index, index + 1]: Array<number>),
+    outputRange: ([height, 0, 0]: Array<number>),
   });
 
   return {