From 62e41754563ce0e58c368f68cac22fb861efc21c Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Tue, 2 Oct 2018 19:31:11 -0700
Subject: [PATCH] Render shadow on a separate view entirely

---
 example/src/SimpleStack.js                      |  4 ++--
 src/views/StackView/StackViewCard.js            | 17 ++++++++++++-----
 .../StackView/StackViewStyleInterpolator.js     |  6 +++---
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/example/src/SimpleStack.js b/example/src/SimpleStack.js
index f348196..1cc3cda 100644
--- a/example/src/SimpleStack.js
+++ b/example/src/SimpleStack.js
@@ -10,7 +10,7 @@ class ListScreen extends React.Component {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: Math.random() > 0.5 ? '#eee' : '#ccc',
+          backgroundColor: '#fff',
         }}
       >
         <Text>List Screen</Text>
@@ -36,7 +36,7 @@ class DetailsScreen extends React.Component {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: Math.random() > 0.5 ? '#eee' : '#ccc',
+          backgroundColor: '#fff',
         }}
       >
         <Text>Details Screen</Text>
diff --git a/src/views/StackView/StackViewCard.js b/src/views/StackView/StackViewCard.js
index 63b445e..0cbd3a8 100644
--- a/src/views/StackView/StackViewCard.js
+++ b/src/views/StackView/StackViewCard.js
@@ -52,12 +52,10 @@ class Card extends React.Component {
         style={[StyleSheet.absoluteFill, containerAnimatedStyle, style]}
         active={active}
       >
+        <Animated.View style={[styles.shadow, { shadowOpacity }]} />
         <Animated.View
           {...getAccessibilityProps(isActive)}
-          style={[
-            transparent ? styles.transparent : styles.card,
-            { shadowOpacity },
-          ]}
+          style={transparent ? styles.transparent : styles.card}
         >
           {children}
         </Animated.View>
@@ -70,8 +68,17 @@ const styles = StyleSheet.create({
   card: {
     flex: 1,
     backgroundColor: '#fff',
-    shadowOffset: { width: -3, height: 0 },
+  },
+  shadow: {
+    top: 0,
+    left: 2,
+    bottom: 0,
+    width: 2,
+    position: 'absolute',
+    backgroundColor: '#fff',
+    shadowOffset: { width: -4, height: 0 },
     shadowRadius: 5,
+    shadowColor: '#000',
   },
   transparent: {
     ...StyleSheet.absoluteFillObject,
diff --git a/src/views/StackView/StackViewStyleInterpolator.js b/src/views/StackView/StackViewStyleInterpolator.js
index 4220f14..fc91cf6 100644
--- a/src/views/StackView/StackViewStyleInterpolator.js
+++ b/src/views/StackView/StackViewStyleInterpolator.js
@@ -60,9 +60,9 @@ function forHorizontal(props) {
   });
 
   const shadowOpacity = position.interpolate({
-    inputRange: [first - EPS, first, index, last, last + EPS],
-    outputRange: [0, 0.02, 0.25, 0.02, 0],
-    extrapolate: 'clamp',
+    inputRange: [first, index, last],
+    outputRange: [0, 1, 0],
+    extrapolate: 'clamp'
   });
 
   return {