Set up animation to swipe

JediWattson · Jul 27, 2022 · 199a8b1 · 199a8b1
1 parent 69d6a97
commit 199a8b1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -468,7 +468,6 @@ const CONST = {
     EMOJI_PICKER_HEADER_HEIGHT: 38,
 
     COMPOSER_MAX_HEIGHT: 125,
-    MAX_HORIZONTAL_SWIPE: 75,
 
     EMAIL: {
         CONCIERGE: 'concierge@expensify.com',

diff --git a/src/components/AttachmentCarousel.js b/src/components/AttachmentCarousel.js
@@ -176,6 +176,8 @@ class AttachmentCarousel extends React.Component {
                 )}
                 <SwipeableView
                     isAnimated
+                    canSwipeLeft={!this.state.isBackDisabled}
+                    canSwipeRight={!this.state.isForwardDisabled}
                     onPress={() => canUseTouchScreen() && this.onShowArrow(!this.state.showArrows)}
                     onSwipeHorizontal={this.cycleThroughAttachments}
                 >

diff --git a/src/components/SwipeableView/index.native.js b/src/components/SwipeableView/index.native.js
@@ -1,5 +1,7 @@
 import React, {Component} from 'react';
-import {PanResponder, View, Animated} from 'react-native';
+import {
+    PanResponder, View, Dimensions, Animated,
+} from 'react-native';
 import PropTypes from 'prop-types';
 
 import CONST from '../../CONST';
@@ -13,6 +15,10 @@ const propTypes = {
     /** Callback to fire when swiping left or right */
     onSwipeHorizontal: PropTypes.func,
 
+    /** These help to prevent a swipe animation when at either end */
+    canSwipeLeft: PropTypes.bool,
+    canSwipeRight: PropTypes.bool,
+
     /** Callback to facility an press event */
     onPress: PropTypes.func,
 
@@ -25,14 +31,16 @@ const defaultProps = {
     onSwipeHorizontal: () => {},
     onPress: () => {},
     isAnimated: false,
+    canSwipeLeft: false,
+    canSwipeRight: false,
 };
 
 class SwipeableView extends Component {
     constructor(props) {
         super(props);
 
         if (this.props.isAnimated) {
-            this.pan = new Animated.ValueXY();
+            this.pan = new Animated.Value(0);
         }
 
         this.panResponder = PanResponder.create({
@@ -45,8 +53,7 @@ class SwipeableView extends Component {
             onPanResponderMove: (event, gestureState) => {
                 if (!this.props.isAnimated) { return; }
                 return Animated.event([null, {
-                    dx: this.pan.x,
-                    dy: this.pan.y,
+                    dx: this.pan,
                 }], {useNativeDriver: false})(event, gestureState);
             },
 
@@ -60,12 +67,21 @@ class SwipeableView extends Component {
                     return this.props.onPress();
                 }
 
-                if (Math.abs(gestureState.dx) > CONST.MAX_HORIZONTAL_SWIPE) {
-                    const deltaSlide = gestureState.dx > 0 ? -1 : 1;
-                    this.props.onSwipeHorizontal(deltaSlide);
+                const deltaSlide = gestureState.dx > 0 ? -1 : 1;
+                if (Math.abs(gestureState.vx) < 1.8 || (deltaSlide === -1 && !this.props.canSwipeLeft) || (deltaSlide === 1 && !this.props.canSwipeRight)) {
+                    return Animated.spring(this.pan, {useNativeDriver: false, toValue: 0}).start();
                 }
 
-                Animated.spring(this.pan, {useNativeDriver: false, toValue: {x: 0, y: 0}}).start();
+                const width = Dimensions.get('window').width;
+                const slideLength = deltaSlide * (width * (3 / 4));
+                Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: -slideLength}).start(({finished}) => {
+                    if (!finished) {
+                        return;
+                    }
+                    this.props.onSwipeHorizontal(deltaSlide);
+                    this.pan.setValue(slideLength);
+                    Animated.timing(this.pan, {useNativeDriver: false, duration: 100, toValue: 0}).start();
+                });
             },
         });
     }
@@ -75,7 +91,7 @@ class SwipeableView extends Component {
             return (
                 <Animated.View
                     style={{
-                        transform: [{translateX: this.pan.x}],
+                        transform: [{translateX: this.pan}],
                     }}
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...this.panResponder.panHandlers}