From d57ee8623d6a13445f00f588980a33e6d619f529 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Thu, 27 Sep 2018 12:03:10 -0700
Subject: [PATCH] Add shadow opacity and don't animate view opacity in
 transition

---
 src/views/StackView/StackViewCard.js          |  5 ++---
 .../StackView/StackViewStyleInterpolator.js   | 20 +++++++------------
 .../StackView/StackViewTransitionConfigs.js   |  4 ++--
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/views/StackView/StackViewCard.js b/src/views/StackView/StackViewCard.js
index 743bef2..f950483 100644
--- a/src/views/StackView/StackViewCard.js
+++ b/src/views/StackView/StackViewCard.js
@@ -60,9 +60,8 @@ const styles = StyleSheet.create({
   main: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: '#E9E9EF',
-    shadowColor: 'black',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.2,
+    shadowColor: '#000',
+    shadowOffset: { width: -4, height: 0 },
     shadowRadius: 5,
   },
   transparent: {
diff --git a/src/views/StackView/StackViewStyleInterpolator.js b/src/views/StackView/StackViewStyleInterpolator.js
index 28cad8e..24e8ade 100644
--- a/src/views/StackView/StackViewStyleInterpolator.js
+++ b/src/views/StackView/StackViewStyleInterpolator.js
@@ -47,11 +47,6 @@ function forHorizontal(props) {
 
   const { first, last } = interpolate;
   const index = scene.index;
-  const opacity = position.interpolate({
-    inputRange: [first, first + 0.01, index, last - 0.01, last],
-    outputRange: [0, 1, 1, 0.85, 0],
-    extrapolate: 'clamp',
-  });
 
   const width = layout.initWidth;
   const translateX = position.interpolate({
@@ -63,9 +58,15 @@ function forHorizontal(props) {
   });
   const translateY = 0;
 
+  const shadowOpacity = position.interpolate({
+    inputRange: [first, index, last],
+    outputRange: [0.01, 0.2, 0.01],
+    extrapolate: 'clamp',
+  });
+
   return {
-    opacity,
     transform: [{ translateX }, { translateY }],
+    shadowOpacity,
   };
 }
 
@@ -84,12 +85,6 @@ function forVertical(props) {
 
   const { first, last } = interpolate;
   const index = scene.index;
-  const opacity = position.interpolate({
-    inputRange: [first, first + 0.01, index, last - 0.01, last],
-    outputRange: [0, 1, 1, 0.85, 0],
-    extrapolate: 'clamp',
-  });
-
   const height = layout.initHeight;
   const translateY = position.interpolate({
     inputRange: [first, index, last],
@@ -99,7 +94,6 @@ function forVertical(props) {
   const translateX = 0;
 
   return {
-    opacity,
     transform: [{ translateX }, { translateY }],
   };
 }
diff --git a/src/views/StackView/StackViewTransitionConfigs.js b/src/views/StackView/StackViewTransitionConfigs.js
index 62066a4..1dc86b3 100644
--- a/src/views/StackView/StackViewTransitionConfigs.js
+++ b/src/views/StackView/StackViewTransitionConfigs.js
@@ -25,7 +25,7 @@ const SlideFromRightIOS = {
   transitionSpec: IOSTransitionSpec,
   screenInterpolator: StyleInterpolator.forHorizontal,
   containerStyle: {
-    backgroundColor: '#000',
+    backgroundColor: '#eee',
   },
 };
 
@@ -34,7 +34,7 @@ const ModalSlideFromBottomIOS = {
   transitionSpec: IOSTransitionSpec,
   screenInterpolator: StyleInterpolator.forVertical,
   containerStyle: {
-    backgroundColor: '#000',
+    backgroundColor: '#eee',
   },
 };