Issue getting drag position element using react-native-gesture-handler

[udarts]

I am trying to create a drag and drop of images, which works almost perfectly, but I am running into 2 issues.

1: When trying to get the XY position of an image and store it on firestore. I am not able to get the correct XY value.

2: When I try to drag an image, it first gets "moved" to a certain position (e.g. x:0, y:0) while my finger is at the center of the screen. When I release the image and trying to drag it again, it seems to drag correctly.

Below is the code I use:

import {
    PanGestureHandler,
    RotationGestureHandler,
    State,
} from 'react-native-gesture-handler';

const USE_NATIVE_DRIVER = true;

const StageGesture = ({child, imagetitle, stageimage, xval, yval, onPress, parent}) => {

    const panRef = useRef(null);
    const rotationRef = useRef(null);

    /* Dragging */
    const _translateX = useRef(new Animated.Value(xval)).current;
    const _translateY = useRef(new Animated.Value(yval)).current;
    const _lastOffset = { x: 0, y: 0 };
    const _onPanGestureEvent = useCallback(Animated.event(
        [
            {
                nativeEvent: {
                    translationX: _translateX,
                    translationY: _translateY,
                },
            },
        ],
        { useNativeDriver: USE_NATIVE_DRIVER }
    ));

    /* Rotation */
    const _rotate = useRef(new Animated.Value(0)).current;
    const _rotateStr = _rotate.interpolate({
        inputRange: [-100, 100],
        outputRange: ['-100rad', '100rad'],
    });
    let _lastRotate = 0;
    const _onRotateGestureEvent = useCallback(Animated.event(
        [
            { nativeEvent: { rotation: _rotate } }
        ],
        { useNativeDriver: USE_NATIVE_DRIVER }
    ));

    const _onRotateHandlerStateChange = event => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            _lastRotate += event.nativeEvent.rotation;
            _rotate.setOffset(_lastRotate);
            _rotate.setValue(0);
        }
    };

    const _onPanStateChange = event => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            _lastOffset.x += event.nativeEvent.translationX;
            _lastOffset.y += event.nativeEvent.translationY;
            _translateX.setOffset(_lastOffset.x);
            _translateX.setValue(0);
            _translateY.setOffset(_lastOffset.y);
            _translateY.setValue(0);

            console.log('xy', _translateX, _translateY);
        }
    };

    const translateX = _translateX;
    const translateY = _translateY;
    const panStyle = {
        transform: [{ translateX }, { translateY }],
    };
    return (
        <PanGestureHandler
            ref={panRef}
            onGestureEvent={_onPanGestureEvent}
            onHandlerStateChange={_onPanStateChange}
        >
            <Animated.View>
                <RotationGestureHandler
                    ref={rotationRef}
                    onGestureEvent={_onRotateGestureEvent}
                    onHandlerStateChange={_onRotateHandlerStateChange}
                >
                    <Animated.View
                        style={[panStyle, styles.stickerContainer]}
                        collapsable={false}
                    >
                        <Animated.Image 
                            style={[
                                styles.pinchableImage,
                                {
                                    transform: [
                                        { perspective: 200 },
                                        { rotate: _rotateStr },
                                    ],
                                },
                            ]}
                            source={stageimage} 
                            resizeMode='contain' 
                        />
                    </Animated.View>
                </RotationGestureHandler>
            </Animated.View>
        </PanGestureHandler>
    );
}

export default StageGesture;

const styles = StyleSheet.create({
    stickerContainer: {
        position: 'absolute',
    },
    pinchableImage: {
        width: 150,
        height: 150,
    },
});

The console.log in the code above shows a long list of objects, but not the XY position of an image (as mentioned in point 1).

Any idea?

Package versions

• React: 17.0.1
• React Native: 0.63.3
• React Native Gesture Handler: 1.9.0

[Anant5555]

Facing the exact same issue

[Anant5555]

Were you able to solve this?

[Anant5555]

translateY.extractOffset();

Use this inside _onPanStateChange . It solved my issue

[udarts]

@Anant5555 instead of:

_translateX.setOffset(_lastOffset.x);

And

_translateY.setOffset(_lastOffset.y);