Merge pull request tongyy#58 from tongyy/tongyy-patch-3

tongyy#57 get bounds

Author: tongyy

Draggable.js

@@ -93,7 +93,7 @@ export default function Draggable(props) {
     (e, gestureState) => {
       isDragging.current = false;
       if (onDragRelease) {
-        onDragRelease(e, gestureState);
+        onDragRelease(e, gestureState, getBounds());
         onRelease(e, true);
       }
       if (!shouldReverse) {
@@ -102,7 +102,7 @@ export default function Draggable(props) {
         reversePosition();
       }
     },
-    [onDragRelease, shouldReverse, onRelease, reversePosition],
+    [onDragRelease, shouldReverse, onRelease, reversePosition, getBounds],
   );
 
   const onPanResponderGrant = React.useCallback(

README.md

@@ -85,7 +85,7 @@ return (
 | :------------ |:---------------:|:---------------:|:-----|
 | onDrag | func | event, gestureState | called every frame component is moved |
 | onShortPressRelease | func | event | called when a press is released that isn't a long press or drag |
-| onDragRelease | func | event, gestureState | called when a drag is released |
+| onDragRelease | func | event, gestureState, bounds | called when a drag is released |
 | onLongPress | func | event | called when a long press is started |
 | onPressIn | func | event | called when a press is started |
 | onPressOut | func | event | called when a press is stopped, or the component is dragged |
@@ -119,12 +119,18 @@ return (
 | vy | current velocity of the gesture |
 | numberActiveTouches | Number of touches currently on screen |
 | gestureState | called at the end of interaction, regardless if press or drag |
-
+#### bounds
+| Argument | Description | 
+| :------------ |:---------------|
+| left | as x at the top left corner |
+| top | as y at the top left corner |
+| right | as x at the bottom right corner |
+| bottom | as y at the bottom right corner |
 ## Methods (not supported above V2.0.0)
 | Method | Params | Description |
 | :------------ |:---------------:|:-----|
 | reversePosition | --- | **use onReverse callback instead.** manually reset Draggable to start position |
-| getPosition| --- |**use onDragRelease callback instead.**  get the value of pageX, pageY|
+| getPosition| --- |**use onDragRelease callback instead.**  get the accurate coordinates x,y from the bounds|
 
 # What's next?
 

example/DraggableDemo/Draggable.js

@@ -93,7 +93,7 @@ export default function Draggable(props) {
     (e, gestureState) => {
       isDragging.current = false;
       if (onDragRelease) {
-        onDragRelease(e, gestureState);
+        onDragRelease(e, gestureState, getBounds());
         onRelease(e, true);
       }
       if (!shouldReverse) {
@@ -102,7 +102,7 @@ export default function Draggable(props) {
         reversePosition();
       }
     },
-    [onDragRelease, shouldReverse, onRelease, reversePosition],
+    [onDragRelease, shouldReverse, onRelease, reversePosition, getBounds],
   );
 
   const onPanResponderGrant = React.useCallback(

index.d.ts

@@ -20,7 +20,8 @@ export interface IDraggableProps {
     touchableOpacityProps?: object;
     onDrag?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
     onShortPressRelease?: (event: GestureResponderEvent) => void;
-    onDragRelease?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    onDragRelease?: (event: GestureResponderEvent, gestureState: PanResponderGestureState, bounds:
+        {left: number, top: number, right: number, bottom: number}) => void;
     onLongPress?: (event: GestureResponderEvent) => void;
     onPressIn?: (event: GestureResponderEvent) => void;
     onPressOut?: (event: GestureResponderEvent) => void;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-draggable",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "draggable",
   "main": "index.js",
   "types": "index.d.ts",