onDragRelease snap to position

[jacinto123]

Hi,

I am wondering if its possible to when you release the drag for me to manually set where x access ends up. I tried using the x property but that does not seem to work. Any thoughts on how to archive this?

thanks

[baconcheese113]

Current x/y positions are for the initial location. What you're looking for isn't currently supported. We set the draggable back to it's initial position here https://github.com/tongyy/react-native-draggable/blob/master/Draggable.js#L81

[jacinto123]

Darn, ok thanks!

[OverStruck]

Actually I think it's possible. According to the docs, if shouldReverse is true, then the function onReverse is called. onReverse returns and x and y position

So you can specify your own onReverse function to return whatever new x and y position you want.

There's a current bug however, where onReverse is not called even if you pass it as a prop

Fixing the bug:

Line 78 on Draggable.tsx

    onRelease,

Add onReverse, after onRelease,:

    onRelease,
    onReverse,

Line 118 on Draggable.tsx

Change from:

  const reversePosition = React.useCallback(() => {
    Animated.spring(pan.current, {
      toValue: { x: 0, y: 0 },
      useNativeDriver: false,
    }).start();
  }, [pan]);

To

  const reversePosition = React.useCallback(() => {
    const originalOffset = {x: 0, y: 0};
    const newOffset = onReverse ? onReverse() : originalOffset;
    Animated.spring(pan.current, {
      toValue: newOffset,
      useNativeDriver: false,
    }).start();
  }, [pan]);

After those 2 changes you can now pass prop onReverse and set your own new x and y position

<Draggable  onReverse={() => ({x: newX, y: newY})} />

[rukmanary]

Actually I think it's possible. According to the docs, if shouldReverse is true, then the function onReverse is called. onReverse returns and x and y position

So you can specify your own onReverse function to return whatever new x and y position you want.

There's a current bug however, where onReverse is not called even if you pass it as a prop

Fixing the bug:

Line 78 on Draggable.tsx

    onRelease,

Add onReverse, after onRelease,:

    onRelease,
    onReverse,

Line 118 on Draggable.tsx

Change from:

  const reversePosition = React.useCallback(() => {
    Animated.spring(pan.current, {
      toValue: { x: 0, y: 0 },
      useNativeDriver: false,
    }).start();
  }, [pan]);

To

  const reversePosition = React.useCallback(() => {
    const originalOffset = {x: 0, y: 0};
    const newOffset = onReverse ? onReverse() : originalOffset;
    Animated.spring(pan.current, {
      toValue: newOffset,
      useNativeDriver: false,
    }).start();
  }, [pan]);

After those 2 changes you can now pass prop onReverse and set your own new x and y position

<Draggable  onReverse={() => ({x: newX, y: newY})} />

how to add newY based on the last time we release the component? I want the draggable component always back to the right side of the screen but the Y position is changing according to the last time we drag it to somewhere and release it