Retrieve Coordinates after moving

[Stophface]

I want to retrieve the coordinates of the draggable once it has been moved and write it to the store, so that once the app is closed, I can retrieve the coordinates to position the draggable where it was before the user closed the App. Currently my draggable is inside a <View /> that hast 100% height and width.

<View
        style={styles.container} >
        <Draggable
            x={0}
            y={0}
            z={7}
            onDragRelease={(event, gestureState, bounds) => ??}
            shouldReverse={false}
            isCircle={true}
            renderSize={90}>
            <View
                style={styles.wrapper}>
                ...
            </View>
        </Draggable>
    </View >


const styles = StyleSheet.create({
    container: {
        zIndex: 2,
        width: '100%',
        height: '100%',
        backgroundColor: 'red',
    },
    wrapper: {
        zIndex: 998,
        height: SIZE,
        width: SIZE,
        borderRadius: SIZE / 2,
        borderWidth: 3,
        borderColor: colors.touchables
    },
});

Currently I am passing it the position x and y statically with 0. I need to pass it dynamically. I think onDragRelease() is the right method for this. But, whatever I pass it from gestureState, let it be moveX, x0, ... That is the wrong position for the draggable. After releasing the draggable, it jumps to a weird position, not where it was released. How would I retrieve the precise coordinates of the draggable, after is has been moved and released?

[shabaz-ejaz]

What you need is to access the event property to get the pageX and pageY values. That should give you what you need:

onDragRelease={(event, gestureState, bounds) => {
      const nativeEvent = event.nativeEvent;
      console.log('pageX', nativeEvent.pageX);
      console.log('pageY', nativeEvent.pageY);
}}

[Stophface]

@shabaz-ejaz That is not working... See, I initially pass it x = 0 and y =0. However, when I use

onDragRelease={(event, gestureState, bounds) => {
      const nativeEvent = event.nativeEvent;
      console.log('pageX', nativeEvent.pageX);
      console.log('pageY', nativeEvent.pageY);
}}

and only move it a tiny little bit, I get the following values: pageX = 323, pageY = 107. Since I move the draggable only a tiny little bit, these values are somewhat weird. They should be very close to 0.

[thijs-qv]

What you need is to access the event property to get the pageX and pageY values. That should give you what you need:

onDragRelease={(event, gestureState, bounds) => {
      const nativeEvent = event.nativeEvent;
      console.log('pageX', nativeEvent.pageX);
      console.log('pageY', nativeEvent.pageY);
}}

Do you mind expanding on this a bit? pageX and pageY don't seem to have the correct position for me. I have better luck using old position + locationX and old position + locationY but it still isn't quite right.

[Stophface]

@thijs-qv Di you find a solution to this? It seems close to impossible ;)

[thijs-qv]

Unfortunately not, no. I didn’t want to spend too much time on it so in the end I removed this lib entirely and just made a few preset locations for my button which the user can choose from.

[Kojon74]

I had this same problem and was finally able to figure it out. See my comment in this issue