PanResponder & Animated Problem in React Native

Question

im using PanResponder in React Native but i have a simple problem that i can't solve!!!

this is my code

class test extends React.Component {
    constructor(props) {
        super(props);
        const position = new Animated.ValueXY();
        const panResponder = PanResponder.create({
           onStartShouldSetPanResponder: () => true,
           onPanResponderMove: (evt, gs) => {
               console.log(gs.dx);
               position.setValue({ x: gs.dx , y: gs.dy })
           },
           onPanResponderRelease: (evt, gs) => {
              
               
           }, 

        });

        this.state = { panResponder, position }
    }
    getCardStyle() {
        const { position } = this.state;
        return {
            ...position.getLayout(),
        };
    }

    render() {
        return (
              <View>
                 {
                     this.props.cart.map((item, index) => {
                          return (
                         <Animated.View style={[this.getCardStyle() ,styles.CardContainer]} key={item.id}
                               {...this.state.panResponder.panHandlers}
                             >
                            <View><Image style={styles.image} source={{ uri: item.src}} /></View>
                            <Text style={styles.title}>{item.location}</Text>
                         </Animated.View>
                     )
                     })
                 }
              </View>
        );
    }
}

i want to move every item finger Separately but when i touch every item in list whole items start moving.

can anyone help me please??

Answer 1

SOLVE IT

I made another component named ListItem and in that component render FlatList items and it worked!