From 98d002ce656d22aecb0c110377084b613f765e90 Mon Sep 17 00:00:00 2001
From: aberratio <joanna@webcodesign.pl>
Date: Tue, 5 Mar 2024 14:05:48 +0100
Subject: [PATCH] prevent move in selected axis

---
 index.d.ts      |  7 +++++++
 index.js        | 11 +++++++++--
 index.native.js | 22 ++++++++++++++++------
 readme.md       |  8 ++++++++
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index dee80d9..73d6d4b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -40,6 +40,13 @@ declare interface Props {
    */
   onCardLeftScreen?: CardLeftScreenHandler
 
+  /**
+   * An array specifying the axes in which movement is prevented. Valid arguments are `'xAxis'`, `'yAxis'``.
+   *
+   * @default []
+   */
+  preventMove?: string[];
+
   /**
    * An array of directions for which to prevent swiping out of screen. Valid arguments are `'left'`, `'right'`, `'up'` and `'down'`.
    *
diff --git a/index.js b/index.js
index 4848af7..0024842 100644
--- a/index.js
+++ b/index.js
@@ -83,7 +83,7 @@ const AnimatedDiv = animated.div
 
 const TinderCard = React.forwardRef(
   (
-    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled },
+    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventMove = [], preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled },
     ref
   ) => {
     const { width, height } = useWindowSize()
@@ -213,7 +213,14 @@ const TinderCard = React.forwardRef(
         let rot = gestureState.vx * 15 // Magic number 15 looks about right
         if (isNaN(rot)) rot = 0
         rot = Math.max(Math.min(rot, settings.maxTilt), -settings.maxTilt)
-        setSpringTarget.start({ xyrot: [gestureState.dx, gestureState.dy, rot], config: physics.touchResponsive })
+        setSpringTarget.start({
+          xyrot: [
+            preventMove.includes("xAxis") ? 0 : gestureState.dx,
+            preventMove.includes("yAxis") ? 0 : gestureState.dy,
+            rot,
+          ],
+          config: physics.touchResponsive,
+        })
       }
 
       const onMouseMove = (ev) => {
diff --git a/index.native.js b/index.native.js
index 980a1e4..2fb3b14 100644
--- a/index.native.js
+++ b/index.native.js
@@ -86,7 +86,7 @@ const AnimatedView = animated(View)
 
 const TinderCard = React.forwardRef(
   (
-    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled },
+    { flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventMove = [], preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled },
     ref
   ) => {
     const [{ x, y, rot }, setSpringTarget] = useSpring(() => ({
@@ -186,13 +186,23 @@ const TinderCard = React.forwardRef(
                 }
               }
             }
-
-            // use guestureState.vx / guestureState.vy for velocity calculations
+          
+            // Limit movement based on preventMove parameter
+            let newX = gestureState.dx;
+            let newY = gestureState.dy;
+          
+            if (preventMove === 'xAxis') {
+              newY = 0; // Block movement along the y-axis
+            } else if (preventMove === 'yAxis') {
+              newX = 0; // Block movement along the x-axis
+            }
+          
+            // use gestureState.vx / gestureState.vy for velocity calculations
             // translate element
-            let rot = ((300 * gestureState.vx) / width) * 15// Magic number 300 different on different devices? Run on physical device!
+            let rot = ((300 * gestureState.vx) / width) * 15 // Magic number 300 different on different devices? Run on physical device!
             rot = Math.max(Math.min(rot, settings.maxTilt), -settings.maxTilt)
-            setSpringTarget.current[0].start({ x: gestureState.dx, y: gestureState.dy, rot, config: physics.touchResponsive })
-          },
+            setSpringTarget.current[0].start({ x: newX, y: newY, rot, config: physics.touchResponsive })
+          },   
           onPanResponderTerminationRequest: (evt, gestureState) => {
             return true
           },
diff --git a/readme.md b/readme.md
index d2775e2..a487f82 100644
--- a/readme.md
+++ b/readme.md
@@ -96,6 +96,14 @@ Callback that will be executed when a swipe has been completed. It will be calle
 
 Callback that will be executed when a `TinderCard` has left the screen. It will be called with a single string denoting which direction the swipe was in: `'left'`, `'right'`, `'up'` or `'down'`.
 
+### `preventMove`
+
+- optional
+- type: `Array<string>`
+- default: `[]`
+
+An array specifying the axes in which movement is prevented. Valid arguments are `'xAxis'`, `'yAxis'`.
+
 ### `preventSwipe`
 
 - optional