diff --git a/index.d.ts b/index.d.ts index dde761d..ca7d88c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -75,6 +75,13 @@ declare interface Props { */ onSwipeRequirementUnfulfilled?: SwipeRequirementUnfufillUpdate + /** + * Multiplier used to reduce the rotate effect while dragging (when set between 0 - 1). When set to `0`, rotate will be disabled rotation all together. Values greater than 1 are valid, however, this may lead to undesirable effects. + * + * @default 1 + */ + rotateMultiplier?: number + /** * HTML attribute class */ diff --git a/index.js b/index.js index e361be2..8e86ca4 100644 --- a/index.js +++ b/index.js @@ -69,10 +69,10 @@ const animateBack = async (element) => { element.style.transform = translation + rotation await sleep(settings.snapBackDuration * 0.75) - element.style.transform = 'none' + element.style.removeProperty('transform') await sleep(settings.snapBackDuration) - element.style.transition = '10ms' + element.style.removeProperty('transition') } const getSwipeDirection = (property) => { @@ -123,12 +123,16 @@ const getRotation = (element) => { return ans } -const dragableTouchmove = (coordinates, element, offset, lastLocation) => { +const dragableTouchmove = (coordinates, element, offset, lastLocation, rotateMultiplier) => { const pos = { x: coordinates.x + offset.x, y: coordinates.y + offset.y } const newLocation = { x: pos.x, y: pos.y, time: new Date().getTime() } const translation = translationString(pos.x, pos.y) - const rotCalc = calcSpeed(lastLocation, newLocation).x / 1000 - const rotation = rotationString(rotCalc * settings.maxTilt) + let rotation = '' + if (rotateMultiplier) { + const rotCalc = calcSpeed(lastLocation, newLocation).x / 1000 + rotation = rotationString(rotCalc * settings.maxTilt * rotateMultiplier) + } + element.style.transform = translation + rotation return newLocation } @@ -142,7 +146,7 @@ const mouseCoordinatesFromEvent = (e) => { return { x: e.clientX, y: e.clientY } } -const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled }, ref) => { +const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, onCardLeftScreen, className, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, rotateMultiplier = 1 }, ref) => { settings.swipeThreshold = swipeThreshold const swipeAlreadyReleased = React.useRef(false) @@ -166,7 +170,7 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o if (onCardLeftScreen) onCardLeftScreen(dir) }, async restoreCard () { - element.current.style.display = 'block' + element.current.style.removeProperty('display') await animateBack(element.current) } })) @@ -236,7 +240,7 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o } // Move - const newLocation = dragableTouchmove(coordinates, element.current, offset, lastLocation) + const newLocation = dragableTouchmove(coordinates, element.current, offset, lastLocation, rotateMultiplier) speed = calcSpeed(lastLocation, newLocation) lastLocation = newLocation } diff --git a/index.native.js b/index.native.js index f6ed9c9..f894de3 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, preventSwipe = [], swipeRequirementType = 'velocity', swipeThreshold = settings.swipeThreshold, onSwipeRequirementFulfilled, onSwipeRequirementUnfulfilled, rotateMultiplier = 1 }, ref ) => { const [{ x, y, rot }, setSpringTarget] = useSpring(() => ({ @@ -183,8 +183,11 @@ const TinderCard = React.forwardRef( // use guestureState.vx / guestureState.vy for velocity calculations // translate element - 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) + let rot = 0 + if (rotateMultiplier) { + 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) * rotateMultiplier + } setSpringTarget({ x: gestureState.dx, y: gestureState.dy, rot, config: physics.touchResponsive }) }, onPanResponderTerminationRequest: (evt, gestureState) => { diff --git a/readme.md b/readme.md index cb2f757..49f6c01 100644 --- a/readme.md +++ b/readme.md @@ -119,6 +119,14 @@ It will be called with a single string denoting which direction the user is swip Callback that will be executed when a `TinderCard` has unfulfilled the requirement necessary to be swiped in a direction on release. +### `rotateMultiplier` + +- optional +- type: `number` +- default: `1` + +Multiplier used to reduce the rotate effect while dragging (when set between 0 - 1). When set to `0`, rotate will be disabled rotation all together. Values greater than 1 are valid, however, this may lead to undesirable effects. + ### `className` - optional