feat: if cardStyle has flexed specified, set the same value on P… (#206)

* feat: if cardStyle has flexed specified, set the same value on PointerEventsView

* Stop producing empty object if no override is needed

* Change produced false to undefined

* Update cardStyle to handle arrays

* Update code to use StyleSheet.flatten

* Use better styling

* Update snapshots

packages/stack/example/App.js

@@ -25,6 +25,7 @@ import {
   HeaderBackgroundDefault,
   HeaderBackgroundFade,
 } from './src/HeaderBackgrounds';
+import DragLimitedToModal from './src/DragLimitedToModal';
 
 // Comment the following two lines to stop using react-native-screens
 // eslint-disable-next-line import/no-unresolved
@@ -88,6 +89,11 @@ const data = [
     title: 'Header background (fade transition)',
     routeName: 'HeaderBackgroundFade',
   },
+  {
+    component: DragLimitedToModal,
+    title: 'Drag limited to modal',
+    routeName: 'DragLimitedToModal',
+  },
 ];
 
 // Cache images

packages/stack/example/src/DragLimitedToModal.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+const HEIGHT = Dimensions.get('screen').height;
+
+const { interpolate } = Animated;
+
+const DragLimitedToModal = () => (
+  <View style={styles.modal}>
+    <Text style={styles.text}>Adjusts to the size of text</Text>
+  </View>
+);
+
+DragLimitedToModal.navigationOptions = {
+  gestureDirection: 'vertical',
+  gestureResponseDistance: { vertical: HEIGHT },
+  cardTransparent: true,
+  cardStyleInterpolator: ({ current }) => {
+    const translateY = interpolate(current.progress, {
+      inputRange: [0, 1],
+      outputRange: [HEIGHT, 0],
+    });
+
+    return {
+      cardStyle: {
+        transform: [{ translateY }],
+        flex: undefined,
+      },
+      containerStyle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    };
+  },
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    padding: 30,
+    borderRadius: 15,
+    backgroundColor: '#000',
+  },
+  text: {
+    fontSize: 18,
+    color: '#fff',
+  },
+});
+
+export default DragLimitedToModal;