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