feat: add 'vertical-inverted' as gesture direction (#184)

As for now there is no way to dismiss modal by moving up, only swiping down is available.

https://streamable.com/s/ogjyq/gqugbc

Author: wojtus7

example/src/ModalStack.js

@@ -1,12 +1,79 @@
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import { Button, View, Text, Dimensions, Switch } from 'react-native';
+import {
+  createStackNavigator,
+  CardStyleInterpolators,
+} from 'react-navigation-stack';
+import Animated from 'react-native-reanimated';
+
+const { interpolate } = Animated;
+
+const gestureResponseDistance = {
+  vertical: Dimensions.get('window').height,
+};
+
+function forVerticalInvertedIOS({
+  progress: { current },
+  layouts: { screen },
+}) {
+  const translateY = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [-screen.height, 0],
+  });
+
+  return {
+    cardStyle: {
+      transform: [
+        // Translation for the animation of the current card
+        { translateY },
+      ],
+    },
+  };
+}
+
+class Modal extends React.Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      title: 'Modal',
+      cardStyleInterpolator:
+        navigation.getParam('gestureDirection', 'vertical') ===
+        'vertical-inverted'
+          ? forVerticalInvertedIOS
+          : CardStyleInterpolators.forVerticalIOS,
+      gestureDirection: navigation.getParam('gestureDirection', 'vertical'),
+      cardTransparent: true,
+      gestureResponseDistance,
+    };
+  };
+
+  render() {
+    return (
+      <View
+        style={{
+          backgroundColor: 'white',
+          paddingVertical: 20,
+          paddingHorizontal: 20,
+          height: Dimensions.get('screen').height,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 10 },
+          shadowOpacity: 0.2,
+          shadowRadius: 4,
+        }}
+      />
+    );
+  }
+}
 
 class ListScreen extends React.Component {
   static navigationOptions = {
     title: 'My Modal',
   };
 
+  state = { isInverted: false };
+
+  onSwitch = () =>
+    this.setState(prevState => ({ isInverted: !prevState.isInverted }));
+
   render() {
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
@@ -20,6 +87,22 @@ class ListScreen extends React.Component {
           title="Go back to all examples"
           onPress={() => this.props.navigation.navigate('Home')}
         />
+        <Text>Invert modal gesture direction:</Text>
+        <Switch
+          style={{ margin: 10 }}
+          onValueChange={this.onSwitch}
+          value={this.state.isInverted}
+        />
+        <Button
+          title="Show Modal"
+          onPress={() =>
+            this.props.navigation.push('Modal', {
+              gestureDirection: this.state.isInverted
+                ? 'vertical-inverted'
+                : 'vertical',
+            })
+          }
+        />
       </View>
     );
   }
@@ -60,6 +143,7 @@ export default createStackNavigator(
   {
     List: ListScreen,
     Details: DetailsScreen,
+    Modal: Modal,
   },
   {
     initialRouteName: 'List',

src/types.tsx

@@ -47,7 +47,7 @@ export type NavigationProp<RouteName = string, Params = object> = {
 
 export type Layout = { width: number; height: number };
 
-export type GestureDirection = 'horizontal' | 'vertical';
+export type GestureDirection = 'horizontal' | 'vertical' | 'vertical-inverted';
 
 export type HeaderMode = 'float' | 'screen' | 'none';
 

src/views/Stack/Card.tsx

@@ -26,7 +26,7 @@ type Props = ViewProps & {
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
   layout: Layout;
-  gestureDirection: 'horizontal' | 'vertical';
+  gestureDirection: 'horizontal' | 'vertical' | 'vertical-inverted';
   onOpen: (isFinished: boolean) => void;
   onClose: (isFinished: boolean) => void;
   onTransitionStart?: (props: { closing: boolean }) => void;
@@ -56,6 +56,8 @@ const TRUE = 1;
 const FALSE = 0;
 const NOOP = 0;
 const UNSET = -1;
+const TOP = -1;
+const BOTTOM = 1;
 
 const DIRECTION_VERTICAL = -1;
 const DIRECTION_HORIZONTAL = 1;
@@ -115,10 +117,14 @@ export default class Card extends React.Component<Props> {
 
     if (gestureDirection !== prevProps.gestureDirection) {
       this.direction.setValue(
-        gestureDirection === 'vertical'
+        gestureDirection === 'vertical' ||
+          gestureDirection === 'vertical-inverted'
           ? DIRECTION_VERTICAL
           : DIRECTION_HORIZONTAL
       );
+      this.verticalGestureDirection.setValue(
+        gestureDirection === 'vertical-inverted' ? TOP : BOTTOM
+      );
     }
 
     if (closing !== prevProps.closing) {
@@ -129,6 +135,9 @@ export default class Card extends React.Component<Props> {
   private isVisible = new Value<Binary>(TRUE);
   private isVisibleValue: Binary = TRUE;
   private nextIsVisible = new Value<Binary | -1>(UNSET);
+  private verticalGestureDirection = new Value(
+    this.props.gestureDirection === 'vertical-inverted' ? TOP : BOTTOM
+  );
 
   private isClosing = new Value<Binary>(FALSE);
   private noAnimationStartedSoFar = true;
@@ -137,7 +146,8 @@ export default class Card extends React.Component<Props> {
   private clock = new Clock();
 
   private direction = new Value(
-    this.props.gestureDirection === 'vertical'
+    this.props.gestureDirection === 'vertical' ||
+    this.props.gestureDirection === 'vertical-inverted'
       ? DIRECTION_VERTICAL
       : DIRECTION_HORIZONTAL
   );
@@ -370,9 +380,9 @@ export default class Card extends React.Component<Props> {
   private handleGestureEventHorizontal = Animated.event([
     {
       nativeEvent: {
-        translationX: (x: Animated.Adaptable<number>) =>
+        translationX: (x: Animated.Node<number>) =>
           set(this.gesture, multiply(x, I18nManager.isRTL ? -1 : 1)),
-        velocityX: (x: Animated.Adaptable<number>) =>
+        velocityX: (x: Animated.Node<number>) =>
           set(this.velocity, multiply(x, I18nManager.isRTL ? -1 : 1)),
         state: this.gestureState,
       },
@@ -382,8 +392,10 @@ export default class Card extends React.Component<Props> {
   private handleGestureEventVertical = Animated.event([
     {
       nativeEvent: {
-        translationY: this.gesture,
-        velocityY: this.velocity,
+        translationY: (y: Animated.Node<number>) =>
+          set(this.gesture, multiply(y, this.verticalGestureDirection)),
+        velocityY: (y: Animated.Node<number>) =>
+          set(this.velocity, multiply(y, this.verticalGestureDirection)),
         state: this.gestureState,
       },
     },
@@ -431,7 +443,8 @@ export default class Card extends React.Component<Props> {
 
     // Doesn't make sense for a response distance of 0, so this works fine
     const distance =
-      gestureDirection === 'vertical'
+      gestureDirection === 'vertical' ||
+      gestureDirection === 'vertical-inverted'
         ? (gestureResponseDistance && gestureResponseDistance.vertical) ||
           GESTURE_RESPONSE_DISTANCE_VERTICAL
         : (gestureResponseDistance && gestureResponseDistance.horizontal) ||
@@ -443,6 +456,12 @@ export default class Card extends React.Component<Props> {
         minOffsetY: 5,
         hitSlop: { bottom: -layout.height + distance },
       };
+    } else if (gestureDirection === 'vertical-inverted') {
+      return {
+        maxDeltaX: 15,
+        minOffsetY: -5,
+        hitSlop: { top: -layout.height + distance },
+      };
     } else {
       const hitSlop = -layout.width + distance;
 
@@ -497,7 +516,8 @@ export default class Card extends React.Component<Props> {
     );
 
     const handleGestureEvent =
-      gestureDirection === 'vertical'
+      gestureDirection === 'vertical' ||
+      gestureDirection === 'vertical-inverted'
         ? this.handleGestureEventVertical
         : this.handleGestureEventHorizontal;