Merge pull request #28 from janicduplessis/transparent-card

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

example/App.js

@@ -6,6 +6,7 @@ import { createStackNavigator } from 'react-navigation-stack';
 import { ListSection, Divider } from 'react-native-paper';
 
 import SimpleStack from './src/SimpleStack';
+import TransparentStack from './src/TransparentStack';
 
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
@@ -13,6 +14,11 @@ useScreens();
 
 const data = [
   { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
+  {
+    component: TransparentStack,
+    title: 'Transparent',
+    routeName: 'TransparentStack',
+  },
 ];
 
 class Home extends React.Component {

example/src/TransparentStack.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Animated, Button, Easing, View, Text } from 'react-native';
+import { createStackNavigator } from 'react-navigation-stack';
+
+class ListScreen extends React.Component {
+  render() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'white',
+        }}
+      >
+        <Text>List Screen</Text>
+        <Text>A list may go here</Text>
+        <Button
+          title="Open Dialog"
+          onPress={() => this.props.navigation.navigate('ModalDialog')}
+        />
+        <Button
+          title="Go back to all examples"
+          onPress={() => this.props.navigation.navigate('Home')}
+        />
+      </View>
+    );
+  }
+}
+
+class ModalDialogScreen extends React.Component {
+  render() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        }}
+      >
+        <View
+          style={{
+            backgroundColor: 'white',
+            padding: 16,
+            width: '90%',
+            maxWidth: 500,
+            minHeight: 300,
+            borderRadius: 6,
+            elevation: 6,
+            shadowColor: 'black',
+            shadowOpacity: 0.15,
+            shadowOffset: { width: 0, height: 2 },
+            shadowRadius: 10,
+          }}
+        >
+          <Text style={{ flex: 1, fontSize: 16 }}>Dialog</Text>
+          <Button
+            title="Close"
+            onPress={() => this.props.navigation.goBack()}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default createStackNavigator(
+  {
+    List: ListScreen,
+    ModalDialog: ModalDialogScreen,
+  },
+  {
+    initialRouteName: 'List',
+    transparentCard: true,
+    mode: 'modal',
+    headerMode: 'none',
+    navigationOptions: {
+      gesturesEnabled: false,
+    },
+    transitionConfig: () => ({
+      transitionSpec: {
+        duration: 300,
+        easing: Easing.inOut(Easing.ease),
+        timing: Animated.timing,
+      },
+      screenInterpolator: sceneProps => {
+        const { position, scene } = sceneProps;
+        const { index } = scene;
+
+        const opacity = position.interpolate({
+          inputRange: [index - 1, index],
+          outputRange: [0, 1],
+        });
+
+        return { opacity };
+      },
+    }),
+  }
+);

package.json

@@ -75,5 +75,9 @@
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|react-navigation)"
     ]
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true
   }
 }

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);

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}
       >