[feat]: prevent move in selected axis

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'`.
    *

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) => {

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
           },

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