react-native-swiper-animated - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "react-native-swiper-animated",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Tinder-like swiper for react-native",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Swiper.js

@@ -14,3 +14,3 @@ import React, { Component, PropTypes } from 'react';
 
-const SWIPE_THRESHOLD = 120;
+const SWIPE_THRESHOLD = 50;
 
@@ -64,3 +64,2 @@ const styles = StyleSheet.create({
     stackOffsetY: PropTypes.number,
-    renderNoMoreCards: PropTypes.func,
     onClick: PropTypes.func,
@@ -86,5 +85,4 @@ onRightSwipe: PropTypes.func,
     children: [],
-    style: {},
     loop: false,
-    allowGestureTermination: true,
+    allowGestureTermination: false,
     stack: false,
@@ -103,4 +101,2 @@ stackDepth: 5,
     renderCard: null,
-    renderNoMoreCards: () => {
-    },
     style: styles.container,
@@ -118,3 +114,4 @@ dragY: true,
     paginationActiveDotColor: '#4D4D4E',
-    onFinish: () => {},
+    onFinish: () => {
+    },
   };
@@ -142,63 +139,17 @@
 
+    this._handleStartShouldSetPanResponder = this._handleStartShouldSetPanResponder.bind(this);
+    this._handleMoveShouldSetPanResponder = this._handleMoveShouldSetPanResponder.bind(this);
+    this._handlePanResponderGrant = this._handlePanResponderGrant.bind(this);
+    this._handlePanResponderMove = this._handlePanResponderMove.bind(this);
+    this._handlePanResponderEnd = this._handlePanResponderEnd.bind(this);
+  }
+
+  componentWillMount() {
     this._panResponder = PanResponder.create({
-      onStartShouldSetPanResponderCapture: (e, gestureState) => {
-        this.lastX = gestureState.moveX;
-        this.lastY = gestureState.moveY;
-        return false;
-      },
-      onMoveShouldSetPanResponderCapture: (e, gestureState) =>
-        (Math.abs(this.lastX - gestureState.moveX) > 5
-        || Math.abs(this.lastY - gestureState.moveY) > 5),
-      onPanResponderGrant: () => {
-        const { pan } = this.state;
-        pan.setOffset({ x: pan.x._value, y: pan.y._value });
-        pan.setValue({ x: 0, y: 0 });
-      },
+      onStartShouldSetPanResponderCapture: this._handleStartShouldSetPanResponder,
+      onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this._handlePanResponderGrant,
       onPanResponderTerminationRequest: () => this.props.allowGestureTermination,
-      onPanResponderMove: Animated.event([
-        null, { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 },
-      ]),
-      onPanResponderRelease: (e, { vx, vy, dx, dy }) => {
-        const { pan, card } = this.state;
-        const { onRightSwipe, onLeftSwipe, onRemoveCard, onClick } = this.props;
-
-        pan.flattenOffset();
-        let velocity;
-        if ((dx === 0) && (dy === 0)) {
-          onClick(card);
-        }
-        if (vx > 0) {
-          velocity = clamp(vx, 3, 5);
-        } else if (vx < 0) {
-          velocity = clamp(vx * -1, 3, 5) * -1;
-        }
-
-        const panX = Math.abs(pan.x._value);
-        const panY = Math.abs(pan.y._value);
-
-        if ((!isNaN(panY) && panX > SWIPE_THRESHOLD) || (!isNaN(panY) && panY > SWIPE_THRESHOLD)) {
-          if (panX > 0) {
-            onRightSwipe(card);
-          } else {
-            onLeftSwipe(card);
-          }
-
-          this.cardAnimation = Animated.decay(pan, {
-            velocity: { x: velocity, y: vy },
-            deceleration: 0.98,
-          });
-
-          this.cardAnimation.start((status) => {
-            if (status.finished) this._advanceState();
-            else this._resetState();
-
-            this.cardAnimation = null;
-          },
-          );
-
-          onRemoveCard(currentIndex[this.guid]);
-        } else {
-          this._resetPan();
-        }
-      },
+      onPanResponderMove: this._handlePanResponderMove(),
+      onPanResponderRelease: this._handlePanResponderEnd,
     });
@@ -233,2 +184,64 @@ }
 
+  _handleStartShouldSetPanResponder = (e, gestureState) => {
+    this.lastX = gestureState.moveX;
+    this.lastY = gestureState.moveY;
+    return false;
+  }
+  _handleMoveShouldSetPanResponder = (e, gestureState) =>
+    (Math.abs(this.lastX - gestureState.moveX) > 5
+    || Math.abs(this.lastY - gestureState.moveY) > 5);
+
+  _handlePanResponderGrant = () => {
+    const { pan } = this.state;
+    pan.setOffset({ x: pan.x._value, y: pan.y._value });
+    pan.setValue({ x: 0, y: 0 });
+  };
+
+  _handlePanResponderMove = () => Animated.event([
+    null, { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 },
+  ]);
+
+  _handlePanResponderEnd = (e, { vx, vy, dx, dy }) => {
+    const { pan, card } = this.state;
+    const { onRightSwipe, onLeftSwipe, onRemoveCard, onClick } = this.props;
+
+    pan.flattenOffset();
+    let velocity;
+    if ((dx === 0) && (dy === 0)) {
+      onClick(card);
+    }
+    if (vx >= 0) {
+      velocity = clamp(vx, 3, 5);
+    } else if (vx < 0) {
+      velocity = clamp(vx * -1, 3, 5) * -1;
+    }
+
+    const panX = Math.abs(pan.x._value);
+    const panY = Math.abs(pan.y._value);
+
+    if ((!isNaN(panY) && panX > SWIPE_THRESHOLD) || (!isNaN(panY) && panY > SWIPE_THRESHOLD)) {
+      if (pan.x._value > 0) {
+        onRightSwipe(card);
+      } else {
+        onLeftSwipe(card);
+      }
+
+      this.cardAnimation = Animated.decay(pan, {
+        velocity: { x: velocity, y: vy },
+        deceleration: 0.98,
+      });
+
+      this.cardAnimation.start((status) => {
+        if (status.finished) this._advanceState();
+        else this._resetState();
+
+        this.cardAnimation = null;
+      });
+
+      onRemoveCard(currentIndex[this.guid]);
+    } else {
+      this._resetPan();
+    }
+  };
+
   _goToNextCard() {
@@ -330,10 +343,2 @@ const total = this.state.cards.length;
 
-  renderNoMoreCards() {
-    if (this.props.renderNoMoreCards) {
-      return this.props.renderNoMoreCards();
-    }
-
-    return <View />;
-  }
-
   renderPagination() {
@@ -379,5 +384,2 @@ const total = this.state.cards.length;
     const { stackDepth, stackOffsetX, stackOffsetY } = this.props;
-    if (!this.state.card) {
-      return this.renderNoMoreCards();
-    }
     // Get the next stack of cards to render.
@@ -472,6 +474,2 @@ const cards = this.state.cards.slice(currentIndex[this.guid],
   renderCard() {
-    if (!this.state.card) {
-      return this.renderNoMoreCards();
-    }
-
     const { pan, enter } = this.state;
@@ -478,0 +476,0 @@ const [translateX, translateY] = [pan.x, pan.y];

No alert changes

Improved metrics

Total package byte prevSize

72367

0.31%

Worsened metrics

Lines of code

507

-0.78%

No dependency changes