Merge pull request #28 from janicduplessis/transparent-card

Add transparentCard option to fix cards with a transparent bg when using screens

packages/stack/src/views/StackView/StackViewCard.js

@@ -29,22 +29,24 @@ class Card extends React.Component {
       pointerEvents,
       style,
       position,
+      transparent,
       scene: { index, isActive },
     } = this.props;
 
-    const active = isActive
-      ? 1
-      : position.interpolate({
-          inputRange: [index, index + 1 - EPS, index + 1],
-          outputRange: [1, 1, 0],
-          extrapolate: 'clamp',
-        });
+    const active =
+      transparent || isActive
+        ? 1
+        : position.interpolate({
+            inputRange: [index, index + 1 - EPS, index + 1],
+            outputRange: [1, 1, 0],
+            extrapolate: 'clamp',
+          });
 
     return (
       <Screen
         pointerEvents={pointerEvents}
         onComponentRef={this.props.onComponentRef}
-        style={[styles.main, style]}
+        style={[transparent ? styles.transparent : styles.main, style]}
         active={active}
         {...getAccessibilityProps(isActive)}
       >
@@ -63,6 +65,10 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.2,
     shadowRadius: 5,
   },
+  transparent: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+  },
 });
 
 export default createPointerEventsContainer(Card);

packages/stack/src/views/StackView/StackViewLayout.js

@@ -618,6 +618,7 @@ class StackViewLayout extends React.Component {
       <Card
         {...this.props.transitionProps}
         key={`card_${scene.key}`}
+        transparent={this.props.transparentCard}
         style={[style, { paddingTop }, this.props.cardStyle]}
         scene={scene}
       >