From 01bc24460ec77f77a045c7cf456c09e1393e6d9b Mon Sep 17 00:00:00 2001
From: "satyajit.happy" <satyajit.happy@gmail.com>
Date: Wed, 19 Jun 2019 09:37:08 +0200
Subject: [PATCH] fix: don't consider velocity and gesture distance if gesture
 didn't end

closes #806, closes #809
---
 package.json  |  2 +-
 src/Pager.tsx | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 95051c29..23a8fe41 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lint": "eslint --ext .js,.ts,.tsx .",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn && yarn example",
+    "bootstrap": "yarn example && yarn",
     "prepare": "bob build"
   },
   "publishConfig": {
diff --git a/src/Pager.tsx b/src/Pager.tsx
index ad58eca4..ce24930c 100644
--- a/src/Pager.tsx
+++ b/src/Pager.tsx
@@ -42,6 +42,7 @@ const {
   Clock,
   Value,
   onChange,
+  and,
   abs,
   add,
   block,
@@ -188,7 +189,7 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
   // Current state of the gesture
   private velocityX = new Value(0);
   private gestureX = new Value(0);
-  private gestureState = new Value(State.END);
+  private gestureState = new Value(State.UNDETERMINED);
   private offsetX = new Value(0);
 
   // Current progress of the page (translateX value)
@@ -415,6 +416,7 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
     divide(abs(this.velocityX), this.velocityX),
     0
   );
+
   private extrapolatedPosition = add(
     this.gestureX,
     multiply(
@@ -514,14 +516,19 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
         // Stop animations while we're dragging
         stopClock(this.clock),
       ],
-
-      cond(eq(this.gestureState, State.END), [
+      [
         set(this.isSwiping, FALSE),
         this.transitionTo(
           cond(
-            greaterThan(
-              abs(this.extrapolatedPosition),
-              divide(this.layoutWidth, 2)
+            and(
+              // We should consider velocity and gesture distance only when a swipe ends
+              // The gestureX value will be non-zero (truthy) when swipe has happened
+              // For other factors such as state update, the velocity and gesture distance don't matter
+              this.gestureX,
+              greaterThan(
+                abs(this.extrapolatedPosition),
+                divide(this.layoutWidth, 2)
+              )
             ),
             // For swipe gesture, to calculate the index, determine direction and add to index
             // When the user swipes towards the left, we transition to the next tab
@@ -546,7 +553,7 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
             this.index
           )
         ),
-      ])
+      ]
     ),
     this.progress,
   ]);