firestore saving draggable images from react native

Question

I am developing an app where I can add multiple images, which can be dragged accross the whole screen. This works till a certain extend. But what I am trying to do is saving the image, position (x, y) to firestore. I haven't been able to find some sample code that does that.

Anyone an idea?

score 0 · Answer 1 · answered Nov 19 '20 at 19:16

Managed to find a code snippet for dragging and dropping a html object. According to this discussion, you can use element.getBoundingClientRect() method and have the shape's positions logged. Should look something like this:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

From there, for the positions returned. You can follow this documentation on adding data to a collection in Firestore.

score 0 · Accepted Answer · answered Nov 20 '20 at 14:51

I managed to find the solution, as I use panresponder. I get the x and y values and add them to firestore.

This is part of the code that I use:

const pan = useState(new Animated.ValueXY({x: xval, y: yval}))[0];
const panResponder = useState(
    PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderGrant: () => {
            
            pan.setOffset({
                x: pan.x._value,
                y: pan.y._value
            });
            pan.setValue({x: xval, y: yval});
        },
        onPanResponderMove: Animated.event(
            [
                null,
                { dx: pan.x, dy: pan.y }
            ],
            {useNativeDriver: false}
        ),
        onPanResponderRelease: () => {
            pan.flattenOffset();
            stagesRef.doc(parent).collection('stageimages').doc(id)
            .update({
                x: pan.x._value,
                y: pan.y._value,
            }).then(function() {
                
            });
        }
    })
)[0];

The stagesRef is the base for the firestore. The xval and yval are values coming from anther file.

firestore saving draggable images from react native

2 Answers2