From da8da3d6567d07a95b26d7f29076aa6f3af35be0 Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Mon, 1 Jul 2019 17:33:42 +0200
Subject: [PATCH] fix: fix broken shadows on card

---
 packages/stack/src/views/Stack/Card.tsx | 34 +++++++++++++++++++------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
index 0000cba2..88514eda 100755
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -520,9 +520,15 @@ export default class Card extends React.Component<Props> {
               {...this.gestureActivationCriteria()}
             >
               <Animated.View style={[styles.container, cardStyle]}>
-                {shadowEnabled && !transparent ? (
+                {shadowEnabled && shadowStyle && !transparent ? (
                   <Animated.View
-                    style={[styles.shadow, shadowStyle]}
+                    style={[
+                      styles.shadow,
+                      direction === 'horizontal'
+                        ? styles.shadowHorizontal
+                        : styles.shadowVertical,
+                      shadowStyle,
+                    ]}
                     pointerEvents="none"
                   />
                 ) : null}
@@ -530,7 +536,7 @@ export default class Card extends React.Component<Props> {
                   active={active}
                   progress={this.props.current}
                   style={[
-                    styles.container,
+                    styles.content,
                     transparent ? styles.transparent : styles.opaque,
                     contentStyle,
                   ]}
@@ -549,6 +555,9 @@ export default class Card extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  content: {
+    flex: 1,
     overflow: 'hidden',
   },
   overlay: {
@@ -556,16 +565,25 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
   },
   shadow: {
+    position: 'absolute',
+    backgroundColor: '#fff',
+    shadowRadius: 5,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+  },
+  shadowHorizontal: {
     top: 0,
     left: 0,
     bottom: 0,
     width: 3,
-    position: 'absolute',
-    backgroundColor: '#fff',
     shadowOffset: { width: -1, height: 1 },
-    shadowRadius: 5,
-    shadowColor: '#000',
-    shadowOpacity: 1,
+  },
+  shadowVertical: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    shadowOffset: { width: 1, height: -1 },
   },
   transparent: {
     backgroundColor: 'transparent',