CODEWITHSUNDEEP
javascriptandroidiosreactjsreact-native
SAMIR RATHOD
SAMIR RATHOD

Reputation: 3506

React-Native: Get X and Y coordinates of draggable Object using panResponder.panHandlers (nativeElement)

I am developing an app, which provides the design of Different shapes like Square and Circle, I have used the following Library

https://www.npmjs.com/package/react-native-draggable
At the time of creating my drawing view its working fine, but at the time of edit that drawing, I want to move Circle and Square from its previous saved position to its new position, but when I am trying to set my previous last position from the DB, I can't get perfect position of X and Y. enter image description here

When I debug, I am getting touch position of the object, not the X and Y position of the object

this is my code :

  1. I used draggable class for creating an object Draggable,

  2. In my Component :

                      <Draggable
                       renderSize={68}
                       renderColor='rad'
                       x={80.80097961425781}
                       y={72.79156494140625}
                       renderText='B'
                       pressDrag={()=>alert('touched!!')}
                       pressDragRelease={({ nativeEvent }) => { console.log(nativeEvent);}}
                       reverse={false}
                   />

Here is my Question:
1. How can I get X and Y from nativeElement,
'nativeElement` property are : nativeEvent

ChangedTouches - Array of all touch events that have changed since the last event
identifier - The ID of the touch
locationX - The X position of the touch, relative to the element
locationY - The Y position of the touch, relative to the element
pageX - The X position of the touch, relative to the root element
pageY - The Y position of the touch, relative to the root element
target - The node id of the element receiving the touch event
timestamp - A time identifier for the touch, useful for velocity calculation
touches - Array of all current touches on the screen

Upvotes: 3

Views: 3610

Answers (2)

BaptisteB
BaptisteB

Reputation: 1278

you can get the bounds of your Draggable in the next arguments of your callback.

<Draggable
  ...
  onDragRelease={(e, gestureState, bounds) => { console.log(bounds); }}
/>

Upvotes: 0

AtomicPixel
AtomicPixel

Reputation: 49

I used react-native-draggable in a project too. pageX, pageY are the coordinates of your actual touch, while locationX, locationY are the offset of your touch from the top-left of the object. You didn't specify how you're rendering the shapes, but for instance if you're rendering an image to drag, you can get the exact top-left coordinates by getting (pageX-locationX), (pageY-locationY). And you can pull them out of nativeEvent like this:

<Draggable
  renderSize={68}
  renderColor='rad'
  x={80.80097961425781}
  y={72.79156494140625}
  renderText='B'
  onDragRelease={(e) => {console.log("pageX, pageY = " + e.nativeEvent.pageX + ", " + e.nativeEvent.pageY);
  console.log("locX, locY = " + e.nativeEvent.locationX + ", " + e.nativeEvent.locationY)}}>
  reverse={false}
/>

Also, I changed pressDragRelease to onDragRelease; not sure if you wrapped onDragRelease in your own separate function or you have a different version or something, but in mine it's onDrag / onDragRelease. Hope that helps.

Upvotes: 1

Related Questions