@momo-kits/swipe 0.0.65-alpha.16 → 0.0.65-alpha.22

package/SwipeAction.js

@@ -10,19 +10,19 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/destructuring-assignment */
 
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Dimensions,
-  Animated,
-  PanResponder,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  Image,
+    Dimensions,
+    Animated,
+    PanResponder,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Image,
 } from 'react-native';
-import {Colors, ValueUtil, Text} from '@momo-kits/core';
-import {TouchableHighlight} from 'react-native';
+import { Colors, ValueUtil, Text } from '@momo-kits/core';
+import { TouchableHighlight } from 'react-native';
 
 const DEFAULT_PREVIEW_OPEN_DELAY = 700;
 const PREVIEW_CLOSE_DELAY = 300;
@@ -30,679 +30,689 @@ const MAX_VELOCITY_CONTRIBUTION = 5;
 const SCROLL_LOCK_MILLISECONDS = 300;
 const SCREEN_WIDTH = Dimensions.get('window').width;
 const WIDTH_HIDDEN_RIGHT = 190;
-
 class SwipeAction extends Component {
-  constructor(props) {
-    super(props);
-    this.isOpen = false;
-    this.previousTrackedTranslateX = 0;
-    this.previousTrackedDirection = null;
-    this.horizontalSwipeGestureBegan = false;
-    this.swipeInitialX = null;
-    this.parentScrollEnabled = true;
-    this.ranPreview = false;
-    this._ensureScrollEnabledTimer = null;
-    this.isForceClosing = false;
-    this.state = {
-      dimensionsSet: false,
-      hiddenHeight: this.props.disableHiddenLayoutCalculation ? '100%' : 0,
-      hiddenWidth: this.props.disableHiddenLayoutCalculation ? '100%' : 0,
-      isLeftActionVisible: false,
-      isRightActionVisible: false,
-      leftOpenValue: 0,
-      rightOpenValue: 0,
-      stopLeftSwipe: SCREEN_WIDTH,
-      stopRightSwipe: -SCREEN_WIDTH,
-    };
-    const {leftAction, rightAction} = this.props;
-    const buttonCellWidth = WIDTH_HIDDEN_RIGHT / 2;
-    // leftAction ? this.leftOpenValue = leftAction.length * buttonCellWidth : 0;
-    // rightAction ? this.rightOpenValue = -rightAction.length * buttonCellWidth : 0;
-    this._translateX = new Animated.Value(0);
-    if (this.props.onSwipeValueChange) {
-      this._translateX.addListener(({value}) => {
-        let direction = this.previousTrackedDirection;
-        if (value !== this.previousTrackedTranslateX) {
-          direction = value > this.previousTrackedTranslateX ? 'right' : 'left';
+    constructor(props) {
+        super(props);
+        this.isOpen = false;
+        this.previousTrackedTranslateX = 0;
+        this.previousTrackedDirection = null;
+        this.horizontalSwipeGestureBegan = false;
+        this.swipeInitialX = null;
+        this.parentScrollEnabled = true;
+        this.ranPreview = false;
+        this._ensureScrollEnabledTimer = null;
+        this.isForceClosing = false;
+        this.state = {
+            dimensionsSet: false,
+            hiddenHeight: this.props.disableHiddenLayoutCalculation
+                ? '100%'
+                : 0,
+            hiddenWidth: this.props.disableHiddenLayoutCalculation ? '100%' : 0,
+            isLeftActionVisible: false,
+            isRightActionVisible: false,
+            leftOpenValue: 0,
+            rightOpenValue: 0,
+        };
+        const { leftAction, rightAction } = this.props;
+        const buttonCellWidth = WIDTH_HIDDEN_RIGHT / 2;
+        // leftAction ? this.leftOpenValue = leftAction.length * buttonCellWidth : 0;
+        // rightAction ? this.rightOpenValue = -rightAction.length * buttonCellWidth : 0;
+        this.stopLeftSwipe = SCREEN_WIDTH;
+        this.stopRightSwipe = -SCREEN_WIDTH;
+        this._translateX = new Animated.Value(0);
+        if (this.props.onSwipeValueChange) {
+            this._translateX.addListener(({ value }) => {
+                let direction = this.previousTrackedDirection;
+                if (value !== this.previousTrackedTranslateX) {
+                    direction =
+                        value > this.previousTrackedTranslateX
+                            ? 'right'
+                            : 'left';
+                }
+                this.props.onSwipeValueChange &&
+                    this.props.onSwipeValueChange({
+                        isOpen: this.isOpen,
+                        direction,
+                        value,
+                    });
+                this.previousTrackedTranslateX = value;
+                this.previousTrackedDirection = direction;
+            });
         }
-        this.props.onSwipeValueChange &&
-          this.props.onSwipeValueChange({
-            isOpen: this.isOpen,
-            direction,
-            value,
-          });
-        this.previousTrackedTranslateX = value;
-        this.previousTrackedDirection = direction;
-      });
-    }
 
-    if (
-      this.props.forceCloseToRightThreshold &&
-      this.props.forceCloseToRightThreshold > 0
-    ) {
-      this._translateX.addListener(({value}) => {
         if (
-          !this.isForceClosing &&
-          SCREEN_WIDTH + value < this.props.forceCloseToRightThreshold
+            this.props.forceCloseToRightThreshold &&
+            this.props.forceCloseToRightThreshold > 0
         ) {
-          this.isForceClosing = true;
-          this.forceCloseRow('right');
-          if (this.props.onForceCloseToRight) {
-            this.props.onForceCloseToRight();
-          }
+            this._translateX.addListener(({ value }) => {
+                if (
+                    !this.isForceClosing &&
+                    SCREEN_WIDTH + value < this.props.forceCloseToRightThreshold
+                ) {
+                    this.isForceClosing = true;
+                    this.forceCloseRow('right');
+                    if (this.props.onForceCloseToRight) {
+                        this.props.onForceCloseToRight();
+                    }
+                }
+            });
         }
-      });
-    }
 
-    if (
-      this.props.forceCloseToLeftThreshold &&
-      this.props.forceCloseToLeftThreshold > 0
-    ) {
-      this._translateX.addListener(({value}) => {
         if (
-          !this.isForceClosing &&
-          SCREEN_WIDTH - value < this.props.forceCloseToLeftThreshold
+            this.props.forceCloseToLeftThreshold &&
+            this.props.forceCloseToLeftThreshold > 0
         ) {
-          this.isForceClosing = true;
-          this.forceCloseRow('left');
-          if (this.props.onForceCloseToLeft) {
-            this.props.onForceCloseToLeft();
-          }
+            this._translateX.addListener(({ value }) => {
+                if (
+                    !this.isForceClosing &&
+                    SCREEN_WIDTH - value < this.props.forceCloseToLeftThreshold
+                ) {
+                    this.isForceClosing = true;
+                    this.forceCloseRow('left');
+                    if (this.props.onForceCloseToLeft) {
+                        this.props.onForceCloseToLeft();
+                    }
+                }
+            });
         }
-      });
-    }
-  }
-
-  UNSAFE_componentWillMount() {
-    this._panResponder = PanResponder.create({
-      onMoveShouldSetPanResponder: (e, gs) =>
-        this.handleOnMoveShouldSetPanResponder(e, gs),
-      onPanResponderMove: (e, gs) => this.handlePanResponderMove(e, gs),
-      onPanResponderRelease: (e, gs) => this.handlePanResponderEnd(e, gs),
-      onPanResponderTerminate: (e, gs) => this.handlePanResponderEnd(e, gs),
-      onShouldBlockNativeResponder: _ => false,
-    });
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this._ensureScrollEnabledTimer);
-    this._translateX.removeAllListeners();
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (
-      this.state.hiddenHeight !== nextState.hiddenHeight ||
-      this.state.hiddenWidth !== nextState.hiddenWidth ||
-      !this.props.shouldItemUpdate ||
-      (this.props.shouldItemUpdate &&
-        this.props.shouldItemUpdate(this.props.item, nextProps.item))
-    ) {
-      return true;
     }
 
-    return false;
-  }
-
-  getPreviewAnimation(toValue, delay) {
-    return Animated.timing(this._translateX, {
-      duration: this.props.previewDuration,
-      toValue,
-      delay,
-      useNativeDriver: this.props.useNativeDriver,
-    });
-  }
-
-  onContentLayout(e) {
-    this.setState({
-      dimensionsSet: !this.props.recalculateHiddenLayout,
-      ...(!this.props.disableHiddenLayoutCalculation
-        ? {
-            hiddenHeight: e.nativeEvent.layout.height,
-            hiddenWidth: e.nativeEvent.layout.width,
-          }
-        : {}),
-    });
-
-    if (this.props.preview && !this.ranPreview) {
-      this.ranPreview = true;
-      const previewOpenValue =
-        this.props.previewOpenValue || this.state.rightOpenValue * 0.5;
-      this.getPreviewAnimation(
-        previewOpenValue,
-        this.props.previewOpenDelay,
-      ).start(_ => {
-        this.getPreviewAnimation(0, PREVIEW_CLOSE_DELAY).start();
-      });
+    UNSAFE_componentWillMount() {
+        this._panResponder = PanResponder.create({
+            onMoveShouldSetPanResponder: (e, gs) =>
+                this.handleOnMoveShouldSetPanResponder(e, gs),
+            onPanResponderMove: (e, gs) => this.handlePanResponderMove(e, gs),
+            onPanResponderRelease: (e, gs) => this.handlePanResponderEnd(e, gs),
+            onPanResponderTerminate: (e, gs) =>
+                this.handlePanResponderEnd(e, gs),
+            onShouldBlockNativeResponder: (_) => false,
+        });
     }
-  }
-
-  onPress() {
-    if (this.swipeInitialX == null || this.swipeInitialX === 0) {
-      if (this.props.onPress && typeof this.props.onPress === 'function') {
-        this.props.onPress();
-      }
-    } else {
-      if (this.props.closeOnPress) {
-        this.closeRow();
-      }
+
+    componentWillUnmount() {
+        clearTimeout(this._ensureScrollEnabledTimer);
+        this._translateX.removeAllListeners();
     }
-  }
 
-  handleOnMoveShouldSetPanResponder(e, gs) {
-    const {dx} = gs;
-    return Math.abs(dx) > this.props.directionalDistanceChangeThreshold;
-  }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (
+            this.state.hiddenHeight !== nextState.hiddenHeight ||
+            this.state.hiddenWidth !== nextState.hiddenWidth ||
+            !this.props.shouldItemUpdate ||
+            (this.props.shouldItemUpdate &&
+                this.props.shouldItemUpdate(this.props.item, nextProps.item))
+        ) {
+            return true;
+        }
 
-  handlePanResponderMove(e, gestureState) {
-    /* If the view is force closing, then ignore Moves. Return */
-    if (this.isForceClosing) {
-      return;
+        return false;
     }
 
-    /* Else, do normal job */
-    const {dx, dy} = gestureState;
-    const absDx = Math.abs(dx);
-    const absDy = Math.abs(dy);
-
-    // this check may not be necessary because we don't capture the move until we pass the threshold
-    // just being extra safe here
-    if (
-      absDx > this.props.directionalDistanceChangeThreshold ||
-      absDy > this.props.directionalDistanceChangeThreshold
-    ) {
-      // we have enough to determine direction
-      if (absDy > absDx && !this.horizontalSwipeGestureBegan) {
-        // user is moving vertically, do nothing, listView will handle
-        return;
-      }
-
-      // user is moving horizontally
-      if (this.parentScrollEnabled) {
-        // disable scrolling on the listView parent
-        this.parentScrollEnabled = false;
-        this.props.setScrollEnabled && this.props.setScrollEnabled(false);
-      }
-
-      if (this.swipeInitialX === null) {
-        // set tranlateX value when user started swiping
-        this.swipeInitialX = this._translateX._value;
-      }
-      if (!this.horizontalSwipeGestureBegan) {
-        this.horizontalSwipeGestureBegan = true;
-        const direction = dx > 0 ? 'TO_RIGHT' : 'TO_LEFT';
-        this.props.swipeGestureBegan && this.props.swipeGestureBegan(direction);
-      }
-
-      let newDX = this.swipeInitialX + dx;
-      if (this.props.disableRightAction && newDX < 0) {
-        newDX = 0;
-      }
-      if (this.props.disableLeftAction && newDX > 0) {
-        newDX = 0;
-      }
-
-      if (this.state.stopLeftSwipe && newDX > this.state.stopLeftSwipe) {
-        newDX = this.state.stopLeftSwipe;
-      }
-      if (this.state.stopRightSwipe && newDX < this.state.stopRightSwipe) {
-        newDX = this.state.stopRightSwipe;
-      }
-
-      // set action buttons visibility
-      if (newDX > 0) {
-        this.setState({
-          isLeftActionVisible: true,
-          isRightActionVisible: false,
+    getPreviewAnimation(toValue, delay) {
+        return Animated.timing(this._translateX, {
+            duration: this.props.previewDuration,
+            toValue,
+            delay,
+            useNativeDriver: this.props.useNativeDriver,
         });
-      } else if (newDX < 0) {
+    }
+
+    onContentLayout(e) {
         this.setState({
-          isRightActionVisible: true,
-          isLeftActionVisible: false,
+            dimensionsSet: !this.props.recalculateHiddenLayout,
+            ...(!this.props.disableHiddenLayoutCalculation
+                ? {
+                      hiddenHeight: e.nativeEvent.layout.height,
+                      hiddenWidth: e.nativeEvent.layout.width,
+                  }
+                : {}),
         });
-      }
 
-      this._translateX.setValue(newDX);
+        if (this.props.preview && !this.ranPreview) {
+            this.ranPreview = true;
+            const previewOpenValue =
+                this.props.previewOpenValue || this.state.rightOpenValue * 0.5;
+            this.getPreviewAnimation(
+                previewOpenValue,
+                this.props.previewOpenDelay,
+            ).start((_) => {
+                this.getPreviewAnimation(0, PREVIEW_CLOSE_DELAY).start();
+            });
+        }
     }
-  }
 
-  ensureScrollEnabled = () => {
-    if (!this.parentScrollEnabled) {
-      this.parentScrollEnabled = true;
-      this.props.setScrollEnabled && this.props.setScrollEnabled(true);
+    onPress() {
+        if (this.swipeInitialX == null || this.swipeInitialX === 0) {
+            if (
+                this.props.onPress &&
+                typeof this.props.onPress === 'function'
+            ) {
+                this.props.onPress();
+            }
+        } else {
+            if (this.props.closeOnPress) {
+                this.closeRow();
+            }
+        }
     }
-  };
 
-  handlePanResponderEnd(e, gestureState) {
-    /* PandEnd will reset the force-closing state when it's true. */
-    if (this.isForceClosing) {
-      this.isForceClosing = false;
+    handleOnMoveShouldSetPanResponder(e, gs) {
+        const { dx } = gs;
+        return Math.abs(dx) > this.props.directionalDistanceChangeThreshold;
     }
-    // decide how much the velocity will affect the final position that the list item settles in.
-    const {swipeToOpenVelocityContribution} = this.props;
-    const possibleExtraPixels =
-      this.state.rightOpenValue * swipeToOpenVelocityContribution;
-    const clampedVelocity = Math.min(
-      gestureState.vx,
-      MAX_VELOCITY_CONTRIBUTION,
-    );
-    const projectedExtraPixels =
-      possibleExtraPixels * (clampedVelocity / MAX_VELOCITY_CONTRIBUTION);
-
-    // re-enable scrolling on listView parent
-    this._ensureScrollEnabledTimer = setTimeout(
-      this.ensureScrollEnabled,
-      SCROLL_LOCK_MILLISECONDS,
-    );
-
-    // finish up the animation
-    let toValue = 0;
-    if (this._translateX._value >= 0) {
-      // trying to swipe right
-      if (this.swipeInitialX < this._translateX._value) {
-        if (
-          this._translateX._value - projectedExtraPixels >
-          this.state.leftOpenValue * (this.props.swipeToOpenPercent / 100)
-        ) {
-          // we're more than halfway
-          toValue = this.state.leftOpenValue;
+
+    handlePanResponderMove(e, gestureState) {
+        /* If the view is force closing, then ignore Moves. Return */
+        if (this.isForceClosing) {
+            return;
         }
-      } else if (
-        this._translateX._value - projectedExtraPixels >
-        this.state.leftOpenValue * (1 - this.props.swipeToClosePercent / 100)
-      ) {
-        toValue = this.state.leftOpenValue;
-      }
-    } else {
-      // trying to swipe left
-      if (this.swipeInitialX > this._translateX._value) {
+
+        /* Else, do normal job */
+        const { dx, dy } = gestureState;
+        const absDx = Math.abs(dx);
+        const absDy = Math.abs(dy);
+
+        // this check may not be necessary because we don't capture the move until we pass the threshold
+        // just being extra safe here
         if (
-          this._translateX._value - projectedExtraPixels <
-          this.state.rightOpenValue * (this.props.swipeToOpenPercent / 100)
+            absDx > this.props.directionalDistanceChangeThreshold ||
+            absDy > this.props.directionalDistanceChangeThreshold
         ) {
-          // we're more than halfway
-          toValue = this.state.rightOpenValue;
+            // we have enough to determine direction
+            if (absDy > absDx && !this.horizontalSwipeGestureBegan) {
+                // user is moving vertically, do nothing, listView will handle
+                return;
+            }
+
+            // user is moving horizontally
+            if (this.parentScrollEnabled) {
+                // disable scrolling on the listView parent
+                this.parentScrollEnabled = false;
+                this.props.setScrollEnabled &&
+                    this.props.setScrollEnabled(false);
+            }
+
+            if (this.swipeInitialX === null) {
+                // set tranlateX value when user started swiping
+                this.swipeInitialX = this._translateX._value;
+            }
+            if (!this.horizontalSwipeGestureBegan) {
+                this.horizontalSwipeGestureBegan = true;
+                const direction = dx > 0 ? 'TO_RIGHT' : 'TO_LEFT';
+                this.props.swipeGestureBegan &&
+                    this.props.swipeGestureBegan(direction);
+            }
+
+            let newDX = this.swipeInitialX + dx;
+            if (this.props.disableRightAction && newDX < 0) {
+                newDX = 0;
+            }
+            if (this.props.disableLeftAction && newDX > 0) {
+                newDX = 0;
+            }
+
+            if (this.stopLeftSwipe && newDX > this.stopLeftSwipe) {
+                newDX = this.stopLeftSwipe;
+            }
+            if (this.stopRightSwipe && newDX < this.stopRightSwipe) {
+                newDX = this.stopRightSwipe;
+            }
+
+            // set action buttons visibility
+            if (newDX > 0) {
+                this.setState({
+                    isLeftActionVisible: true,
+                    isRightActionVisible: false,
+                });
+            } else if (newDX < 0) {
+                this.setState({
+                    isRightActionVisible: true,
+                    isLeftActionVisible: false,
+                });
+            }
+
+            this._translateX.setValue(newDX);
+        }
+    }
+
+    ensureScrollEnabled = () => {
+        if (!this.parentScrollEnabled) {
+            this.parentScrollEnabled = true;
+            this.props.setScrollEnabled && this.props.setScrollEnabled(true);
+        }
+    };
+
+    handlePanResponderEnd(e, gestureState) {
+        /* PandEnd will reset the force-closing state when it's true. */
+        if (this.isForceClosing) {
+            this.isForceClosing = false;
+        }
+        // decide how much the velocity will affect the final position that the list item settles in.
+        const { swipeToOpenVelocityContribution } = this.props;
+        const possibleExtraPixels =
+            this.state.rightOpenValue * swipeToOpenVelocityContribution;
+        const clampedVelocity = Math.min(
+            gestureState.vx,
+            MAX_VELOCITY_CONTRIBUTION,
+        );
+        const projectedExtraPixels =
+            possibleExtraPixels * (clampedVelocity / MAX_VELOCITY_CONTRIBUTION);
+
+        // re-enable scrolling on listView parent
+        this._ensureScrollEnabledTimer = setTimeout(
+            this.ensureScrollEnabled,
+            SCROLL_LOCK_MILLISECONDS,
+        );
+
+        // finish up the animation
+        let toValue = 0;
+        if (this._translateX._value >= 0) {
+            // trying to swipe right
+            if (this.swipeInitialX < this._translateX._value) {
+                if (
+                    this._translateX._value - projectedExtraPixels >
+                    this.state.leftOpenValue *
+                        (this.props.swipeToOpenPercent / 100)
+                ) {
+                    // we're more than halfway
+                    toValue = this.state.leftOpenValue;
+                }
+            } else if (
+                this._translateX._value - projectedExtraPixels >
+                this.state.leftOpenValue *
+                    (1 - this.props.swipeToClosePercent / 100)
+            ) {
+                toValue = this.state.leftOpenValue;
+            }
+        } else {
+            // trying to swipe left
+            if (this.swipeInitialX > this._translateX._value) {
+                if (
+                    this._translateX._value - projectedExtraPixels <
+                    this.state.rightOpenValue *
+                        (this.props.swipeToOpenPercent / 100)
+                ) {
+                    // we're more than halfway
+                    toValue = this.state.rightOpenValue;
+                }
+            } else if (
+                this._translateX._value - projectedExtraPixels <
+                this.state.rightOpenValue *
+                    (1 - this.props.swipeToClosePercent / 100)
+            ) {
+                toValue = this.state.rightOpenValue;
+            }
         }
-      } else if (
-        this._translateX._value - projectedExtraPixels <
-        this.state.rightOpenValue * (1 - this.props.swipeToClosePercent / 100)
-      ) {
-        toValue = this.state.rightOpenValue;
-      }
+
+        this.props.swipeGestureEnd && this.props.swipeGestureEnd();
+        this.manuallySwipeRow(toValue);
+    }
+
+    /*
+     * This method is called by SwipeListView
+     */
+    closeRow() {
+        this.manuallySwipeRow(0);
     }
 
-    this.props.swipeGestureEnd && this.props.swipeGestureEnd();
-    this.manuallySwipeRow(toValue);
-  }
-
-  /*
-   * This method is called by SwipeListView
-   */
-  closeRow() {
-    this.manuallySwipeRow(0);
-  }
-
-  /**
-   * Force close the row toward the end of the given direction.
-   * @param  {String} direction The direction to force close.
-   */
-  forceCloseRow(direction) {
-    this.manuallySwipeRow(0, () => {
-      if (direction === 'right' && this.props.onForceCloseToRightEnd) {
-        this.props.onForceCloseToRightEnd();
-      } else if (direction === 'left' && this.props.onForceCloseToLeftEnd) {
-        this.props.onForceCloseToLeftEnd();
-      }
-    });
-  }
-
-  closeRowWithoutAnimation() {
-    this._translateX.setValue(0);
-
-    this.ensureScrollEnabled();
-    this.isOpen = false;
-    this.props.onDidClose && this.props.onDidClose();
-
-    this.props.onClose && this.props.onClose();
-
-    this.swipeInitialX = null;
-    this.horizontalSwipeGestureBegan = false;
-  }
-
-  manuallySwipeRow(toValue, onAnimationEnd) {
-    Animated.spring(this._translateX, {
-      toValue,
-      friction: this.props.friction,
-      tension: this.props.tension,
-      useNativeDriver: this.props.useNativeDriver,
-    }).start(_ => {
-      this._translateX.setValue(toValue);
-      this.ensureScrollEnabled();
-      if (toValue === 0) {
+    /**
+     * Force close the row toward the end of the given direction.
+     * @param  {String} direction The direction to force close.
+     */
+    forceCloseRow(direction) {
+        this.manuallySwipeRow(0, () => {
+            if (direction === 'right' && this.props.onForceCloseToRightEnd) {
+                this.props.onForceCloseToRightEnd();
+            } else if (
+                direction === 'left' &&
+                this.props.onForceCloseToLeftEnd
+            ) {
+                this.props.onForceCloseToLeftEnd();
+            }
+        });
+    }
+
+    closeRowWithoutAnimation() {
+        this._translateX.setValue(0);
+
+        this.ensureScrollEnabled();
         this.isOpen = false;
         this.props.onDidClose && this.props.onDidClose();
-      } else {
-        this.isOpen = true;
-        this.props.onDidOpen && this.props.onDidOpen(toValue);
-      }
-      if (onAnimationEnd) {
-        onAnimationEnd();
-      }
-    });
-
-    if (toValue === 0) {
-      this.props.onClose && this.props.onClose();
-    } else {
-      this.props.onOpen && this.props.onOpen(toValue);
-    }
 
-    // reset everything
-    this.swipeInitialX = toValue;
-    this.horizontalSwipeGestureBegan = false;
-  }
+        this.props.onClose && this.props.onClose();
 
-  renderVisibleContent() {
-    if (this.props.children) {
-      // handle touchables
-      const {onPress} = this.props.children.props;
+        this.swipeInitialX = null;
+        this.horizontalSwipeGestureBegan = false;
+    }
 
-      if (onPress) {
-        const newOnPress = _ => {
-          this.onPress();
-          onPress();
-        };
-        return React.cloneElement(this.props.children, {
-          ...this.props.children.props,
-          onPress: newOnPress,
+    manuallySwipeRow(toValue, onAnimationEnd) {
+        Animated.spring(this._translateX, {
+            toValue,
+            friction: this.props.friction,
+            tension: this.props.tension,
+            useNativeDriver: this.props.useNativeDriver,
+        }).start((_) => {
+            this._translateX.setValue(toValue);
+            this.ensureScrollEnabled();
+            if (toValue === 0) {
+                this.isOpen = false;
+                this.props.onDidClose && this.props.onDidClose();
+            } else {
+                this.isOpen = true;
+                this.props.onDidOpen && this.props.onDidOpen(toValue);
+            }
+            if (onAnimationEnd) {
+                onAnimationEnd();
+            }
         });
-      }
-      return (
-        <TouchableHighlight
-          activeOpacity={0.8}
-          underlayColor="white"
-          onPress={_ => this.onPress()}>
-          {this.props.children}
-        </TouchableHighlight>
-      );
+
+        if (toValue === 0) {
+            this.props.onClose && this.props.onClose();
+        } else {
+            this.props.onOpen && this.props.onOpen(toValue);
+        }
+
+        // reset everything
+        this.swipeInitialX = toValue;
+        this.horizontalSwipeGestureBegan = false;
+    }
+
+    renderVisibleContent() {
+        if (this.props.children) {
+            // handle touchables
+            const { onPress } = this.props.children.props;
+
+            if (onPress) {
+                const newOnPress = (_) => {
+                    this.onPress();
+                    onPress();
+                };
+                return React.cloneElement(this.props.children, {
+                    ...this.props.children.props,
+                    onPress: newOnPress,
+                });
+            }
+            return (
+                <TouchableHighlight
+                    activeOpacity={0.8}
+                    underlayColor="white"
+                    onPress={(_) => this.onPress()}>
+                    {this.props.children}
+                </TouchableHighlight>
+            );
+        }
     }
-  }
-
-  renderRowContent() {
-    // We do this annoying if statement for performance.
-    // We don't want the onLayout func to run after it runs once.
-    if (this.state.dimensionsSet) {
-      return (
-        <Animated.View
-          manipulationModes={['translateX']}
-          {...this._panResponder.panHandlers}
-          style={{
-            zIndex: 2,
-            transform: [{translateX: this._translateX}],
-          }}>
-          {this.renderVisibleContent()}
-        </Animated.View>
-      );
+
+    renderRowContent() {
+        // We do this annoying if statement for performance.
+        // We don't want the onLayout func to run after it runs once.
+        if (this.state.dimensionsSet) {
+            return (
+                <Animated.View
+                    manipulationModes={['translateX']}
+                    {...this._panResponder.panHandlers}
+                    style={{
+                        zIndex: 2,
+                        transform: [{ translateX: this._translateX }],
+                    }}>
+                    {this.renderVisibleContent()}
+                </Animated.View>
+            );
+        }
+        return (
+            <Animated.View
+                manipulationModes={['translateX']}
+                {...this._panResponder.panHandlers}
+                onLayout={(e) => this.onContentLayout(e)}
+                style={{
+                    zIndex: 2,
+                    transform: [{ translateX: this._translateX }],
+                }}>
+                {this.renderVisibleContent()}
+            </Animated.View>
+        );
     }
-    return (
-      <Animated.View
-        manipulationModes={['translateX']}
-        {...this._panResponder.panHandlers}
-        onLayout={e => this.onContentLayout(e)}
-        style={{
-          zIndex: 2,
-          transform: [{translateX: this._translateX}],
-        }}>
-        {this.renderVisibleContent()}
-      </Animated.View>
-    );
-  }
-
-  onLeftActionLayout = ({nativeEvent}) => {
-    this.setState({
-      leftOpenValue: nativeEvent.layout.width,
-      stopLeftSwipe: nativeEvent.layout.width,
-    });
-  };
-
-  onRightActionLayout = ({nativeEvent}) => {
-    this.setState({
-      rightOpenValue: -nativeEvent.layout.width,
-      stopRightSwipe: -nativeEvent.layout.width,
-    });
-  };
-
-  renderHiddenContent = () => {
-    const {actionBackground, rowIndex, rightAction, leftAction} = this.props;
-    const hiddenRowStyle = {
-      ...styles.standaloneRowBack,
-      ...{backgroundColor: actionBackground},
+
+    onLeftActionLayout = ({ nativeEvent }) => {
+        this.setState({
+            leftOpenValue: nativeEvent.layout.width,
+        });
     };
-    console.log(this.state.stopLeftSwipe);
-    return (
-      <View style={hiddenRowStyle}>
-        {this.state.isLeftActionVisible && (
-          <View style={styles.leftItemRow}>
-            <View
-              style={{flexDirection: 'row'}}
-              onLayout={this.onLeftActionLayout}>
-              {leftAction?.map?.((item, index) =>
-                this.renderLeftAction(item, index),
-              )}
+
+    onRightActionLayout = ({ nativeEvent }) => {
+        this.setState({
+            rightOpenValue: -nativeEvent.layout.width,
+        });
+    };
+
+    renderHiddenContent = () => {
+        const { actionBackground, rowIndex, rightAction, leftAction } =
+            this.props;
+        const hiddenRowStyle = {
+            ...styles.standaloneRowBack,
+            ...{ backgroundColor: actionBackground },
+        };
+        return (
+            <View style={hiddenRowStyle}>
+                {this.state.isLeftActionVisible && (
+                    <View style={styles.leftItemRow}>
+                        <View
+                            style={{ flexDirection: 'row' }}
+                            onLayout={this.onLeftActionLayout}>
+                            {leftAction?.map?.((item, index) =>
+                                this.renderLeftAction(item, index),
+                            )}
+                        </View>
+                    </View>
+                )}
+                {this.state.isRightActionVisible && (
+                    <View style={styles.rightItemRow}>
+                        <View
+                            style={{ flexDirection: 'row' }}
+                            onLayout={this.onRightActionLayout}>
+                            {rightAction
+                                ?.slice?.(0)
+                                ?.reverse()
+                                .map((item, index) =>
+                                    this.renderRightAction(item, index),
+                                )}
+                        </View>
+                    </View>
+                )}
             </View>
-          </View>
-        )}
-        {this.state.isRightActionVisible && (
-          <View style={styles.rightItemRow}>
+        );
+    };
+
+    renderIcon = (icon) => {
+        const { actionIconStyle } = this.props;
+        const iconSource = ValueUtil.getImageSource(icon);
+        return (
+            <Image
+                source={iconSource}
+                resizeMode="contain"
+                style={[styles.icon, actionIconStyle]}
+            />
+        );
+    };
+
+    renderTitle = (title) => {
+        const { actionTextStyle } = this.props;
+        return (
+            <Text.SubTitle style={[styles.text, actionTextStyle]}>
+                {title}
+            </Text.SubTitle>
+        );
+    };
+
+    onActionPress = (item, rowIndex) => () => {
+        const { onPress } = item;
+        onPress?.(item, rowIndex);
+    };
+
+    renderRightAction = (item, index) => {
+        const { rowIndex, renderRightAction } = this.props;
+        if (renderRightAction) {
+            return (
+                <View key={item + index}>
+                    {renderRightAction({ item, index, rowIndex })}
+                </View>
+            );
+        }
+        return (
+            <TouchableOpacity
+                key={index.toString()}
+                style={[
+                    styles.buttonContainer,
+                    {
+                        backgroundColor: item.color,
+                        height: this.state.hiddenHeight,
+                    },
+                ]}
+                onPress={this.onActionPress(item, rowIndex)}>
+                {item.icon && this.renderIcon(item.icon)}
+                {item.title && this.renderTitle(item.title)}
+            </TouchableOpacity>
+        );
+    };
+
+    renderLeftAction = (item, index) => {
+        const { rowIndex, renderLeftAction } = this.props;
+        if (renderLeftAction) {
+            return (
+                <View key={item + index}>
+                    {renderLeftAction({ item, index, rowIndex })}
+                </View>
+            );
+        }
+        return (
+            <TouchableOpacity
+                key={index.toString()}
+                style={[
+                    styles.buttonContainer,
+                    {
+                        backgroundColor: item.color,
+                        height: this.state.hiddenHeight,
+                    },
+                ]}
+                onPress={this.onActionPress(item, rowIndex)}>
+                {item.icon && this.renderIcon(item.icon)}
+                {item.title && this.renderTitle(item.title)}
+            </TouchableOpacity>
+        );
+    };
+
+    render() {
+        return (
             <View
-              style={{flexDirection: 'row'}}
-              onLayout={this.onRightActionLayout}>
-              {rightAction
-                ?.slice?.(0)
-                ?.reverse()
-                .map((item, index) => this.renderRightAction(item, index))}
+                style={this.props.style ? this.props.style : styles.container}>
+                <View
+                    style={[
+                        styles.hidden,
+                        {
+                            height: this.state.hiddenHeight,
+                            width: this.state.hiddenWidth,
+                        },
+                    ]}>
+                    {this.renderHiddenContent()}
+                </View>
+                {this.renderRowContent()}
             </View>
-          </View>
-        )}
-      </View>
-    );
-  };
-
-  renderIcon = icon => {
-    const {actionIconStyle} = this.props;
-    const iconSource = ValueUtil.getImageSource(icon);
-    return (
-      <Image
-        source={iconSource}
-        resizeMode="contain"
-        style={[styles.icon, actionIconStyle]}
-      />
-    );
-  };
-
-  renderTitle = title => {
-    const {actionTextStyle} = this.props;
-    return (
-      <Text.SubTitle style={[styles.text, actionTextStyle]}>
-        {title}
-      </Text.SubTitle>
-    );
-  };
-
-  onActionPress = (item, rowIndex) => () => {
-    const {onPress} = item;
-    onPress?.(item, rowIndex);
-  };
-
-  renderRightAction = (item, index) => {
-    const {rowIndex, renderRightAction} = this.props;
-    if (renderRightAction) {
-      return (
-        <View key={item + index}>
-          {renderRightAction({
-            item,
-            index,
-            rowIndex,
-          })}
-        </View>
-      );
-    }
-    return (
-      <TouchableOpacity
-        key={index.toString()}
-        style={[
-          styles.buttonContainer,
-          {
-            backgroundColor: item.color,
-            height: this.state.hiddenHeight,
-          },
-        ]}
-        onPress={this.onActionPress(item, rowIndex)}>
-        {item.icon && this.renderIcon(item.icon)}
-        {item.title && this.renderTitle(item.title)}
-      </TouchableOpacity>
-    );
-  };
-
-  renderLeftAction = (item, index) => {
-    const {rowIndex, renderLeftAction} = this.props;
-    if (renderLeftAction) {
-      return (
-        <View key={item + index}>
-          {renderLeftAction({
-            item,
-            index,
-            rowIndex,
-          })}
-        </View>
-      );
+        );
     }
-    return (
-      <TouchableOpacity
-        key={index.toString()}
-        style={[
-          styles.buttonContainer,
-          {
-            backgroundColor: item.color,
-            height: this.state.hiddenHeight,
-          },
-        ]}
-        onPress={this.onActionPress(item, rowIndex)}>
-        {item.icon && this.renderIcon(item.icon)}
-        {item.title && this.renderTitle(item.title)}
-      </TouchableOpacity>
-    );
-  };
-
-  render() {
-    return (
-      <View style={this.props.style ? this.props.style : styles.container}>
-        <View
-          style={[
-            styles.hidden,
-            {
-              height: this.state.hiddenHeight,
-              width: this.state.hiddenWidth,
-            },
-          ]}>
-          {this.renderHiddenContent()}
-        </View>
-        {this.renderRowContent()}
-      </View>
-    );
-  }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    // As of RN 0.29 flex: 1 is causing all rows to be the same height
-    // flex: 1
-  },
-  hidden: {
-    zIndex: 1,
-    bottom: 0,
-    left: 0,
-    overflow: 'hidden',
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  standaloneRowBack: {
-    backgroundColor: Colors.white,
-    alignItems: 'center',
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  leftItemRow: {
-    alignItems: 'center',
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    paddingRight: 10,
-  },
-  rightItemRow: {
-    alignItems: 'center',
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingLeft: 10,
-  },
-  buttonContainer: {
-    backgroundColor: 'red',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 88,
-  },
-  icon: {
-    height: 24,
-    width: 24,
-    tintColor: 'white',
-  },
-  text: {
-    color: Colors.white,
-    textAlign: 'center',
-    marginHorizontal: 10,
-    marginTop: 10,
-  },
+    container: {
+        // As of RN 0.29 flex: 1 is causing all rows to be the same height
+        // flex: 1
+    },
+    hidden: {
+        zIndex: 1,
+        bottom: 0,
+        left: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    standaloneRowBack: {
+        backgroundColor: Colors.white,
+        alignItems: 'center',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    leftItemRow: {
+        alignItems: 'center',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        paddingRight: 10,
+    },
+    rightItemRow: {
+        alignItems: 'center',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        paddingLeft: 10,
+    },
+    buttonContainer: {
+        backgroundColor: 'red',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 88,
+    },
+    icon: {
+        height: 24,
+        width: 24,
+        tintColor: 'white',
+    },
+    text: {
+        color: Colors.white,
+        textAlign: 'center',
+        marginHorizontal: 10,
+        marginTop: 10,
+    },
 });
 
 SwipeAction.propTypes = {
-  onOpen: PropTypes.func,
-  closeOnPress: PropTypes.bool,
-  disableRightAction: PropTypes.bool,
-  disableLeftAction: PropTypes.bool,
-  onClose: PropTypes.func,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  leftAction: PropTypes.array,
-  rightAction: PropTypes.array,
-  renderRightAction: PropTypes.func,
-  renderLeftAction: PropTypes.func,
-  onPress: PropTypes.func,
-  children: PropTypes.element.isRequired,
-  actionBackground: PropTypes.string,
-  actionTextStyle: PropTypes.object,
-  swipeGestureBegan: PropTypes.func,
-  swipeGestureEnd: PropTypes.func,
+    onOpen: PropTypes.func,
+    closeOnPress: PropTypes.bool,
+    disableRightAction: PropTypes.bool,
+    disableLeftAction: PropTypes.bool,
+    onClose: PropTypes.func,
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    leftAction: PropTypes.array,
+    rightAction: PropTypes.array,
+    renderRightAction: PropTypes.func,
+    renderLeftAction: PropTypes.func,
+    onPress: PropTypes.func,
+    children: PropTypes.element.isRequired,
+    actionBackground: PropTypes.string,
+    actionTextStyle: PropTypes.object,
+    swipeGestureBegan: PropTypes.func,
+    swipeGestureEnd: PropTypes.func,
 };
 
 SwipeAction.defaultProps = {
-  closeOnPress: true,
-  disableRightAction: true,
-  disableLeftAction: true,
-  recalculateHiddenLayout: false,
-  disableHiddenLayoutCalculation: false,
-  preview: false,
-  previewDuration: 300,
-  previewOpenDelay: DEFAULT_PREVIEW_OPEN_DELAY,
-  directionalDistanceChangeThreshold: 2,
-  swipeToOpenPercent: 50,
-  swipeToOpenVelocityContribution: 0,
-  swipeToClosePercent: 50,
-  swipeToPerformActionPercent: 50,
-  item: {},
-  useNativeDriver: true,
-  rightAction: [],
-  leftAction: [],
-  actionBackground: Colors.white,
+    closeOnPress: true,
+    disableRightAction: true,
+    disableLeftAction: true,
+    recalculateHiddenLayout: false,
+    disableHiddenLayoutCalculation: false,
+    preview: false,
+    previewDuration: 300,
+    previewOpenDelay: DEFAULT_PREVIEW_OPEN_DELAY,
+    directionalDistanceChangeThreshold: 2,
+    swipeToOpenPercent: 50,
+    swipeToOpenVelocityContribution: 0,
+    swipeToClosePercent: 50,
+    swipeToPerformActionPercent: 50,
+    item: {},
+    useNativeDriver: true,
+    rightAction: [],
+    leftAction: [],
+    actionBackground: Colors.white,
 };
 
 export default SwipeAction;