Multiple Image Drag Not Working Properly using React Native PanResponder

34 Views Asked by At

I'm following the PanResponder Documentation and here are my components

//The Parent Container Component------------------------->
import { View } from "react-native";
import PanResponderElement from "./PanResponderElement";

const PanResponderContainer= () => {
  const arr = [0, 1];

  return (
    <View>
      {arr.map((item, index) => {
        return <PanResponderElement key={index} />;
      })}
    </View>
  );
};

export default PanResponderContainer;
//<------------------------------------------------------


//The Child Component------------------------------------>
import { Animated, PanResponder, Image, View } from "react-native";
import { useRef } from "react";

const PanResponderElement = (props) => {
  const { children, item } = props;

  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderStart: () => {
        console.log("onPanResponderStart");
      },
      onPanResponderMove: (_, gesture) => {
        pan.x.setValue(gesture.dx);
        pan.y.setValue(gesture.dy);
      },
      onPanResponderRelease: () => {
        pan.extractOffset();
      },
    })
  ).current;

  return (
    <View>
      <Animated.View
        style={[
          {
            left: pan.x,
            top: pan.y,
          },
        ]}
        {...panResponder.panHandlers}
      >
        <Image
          resizeMode="stretch"
          style={[
            {
              width: 100,
              height: 100,
            },
          ]}
          source={{
            uri: "https://plus.unsplash.com/premium_photo-1675706185662-a57ef0b68ab7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1228&q=80",
          }}
        />
      </Animated.View>
    </View>
  );
};

export default PanResponderElement;
//<-------------------------------------------------------------------------

Tested on Android, it works fine from the beginning but on succeeding drags, one of the images cannot be dragged anymore.

I tried the solution in here React Native Panresponder issue after retouching and moving the image return back to initial position

and here

https://github.com/facebook/react-native/issues/9786

but did not work

0

There are 0 best solutions below