Render shadow on a separate view entirely

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>

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,

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 {