RN gesture handler: 1 image is dragged but 2 images are moving together

Question

In my React Native 0.62.2 app, react-native-gesture-handler 1.6.1 and react-native-animated 10.10.1 are used to make image grid draggable. The problem is that all uploaded images grids are moving together instead of individually draggable. Here is the code for draggable image grid:

import { Col, Row, Grid } from 'react-native-easy-grid';
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated from "react-native-reanimated";
import FastImage from 'react-native-fast-image';

export default DisplayImages = ({pics, deleteImage}) => {  //<<==component to display images passed in from 'pics'

const translateX = new Animated.Value(0)  //<<==draggable related code
const translateY = new Animated.Value(0)
const handleGesture = Animated.event([{nativeEvent: {translationX: translateX,translationY:translateY}}], { useNativeDriver: true });

//VV== code below displays single image grid
const displayImg = (img_source, width, ht, index, modalWidth, modalHt) => {  
  let aniStyle = {
                transform:[
                    { translateY : translateY },
                    { translateX :   translateX }
                ]
            };
            return (
                <>
                    <PanGestureHandler onGestureEvent={handleGesture}>
                        <Animated.View style={aniStyle}>
                        <TouchableOpacity onPress={()=>{setModalDialog(index)}} >
                            <FastImage 
                                source={{uri:img_source}} 
                                resizeMode={FastImage.resizeMode.cover} 
                                key={index}
                                style={{
                                    width:width, 
                                    height:ht, 
                                    verticalAlign:0,
                                    paddingTop:0,
                                }}
                            />
                        </TouchableOpacity>
                        </Animated.View>
                    </PanGestureHandler>
                   )
}
//VV==code blow to display 2 images as an example

 return (                   
            <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>
                <Row style={styles.row}>   
                    {pics.map((item, index) => {
                        return (displayImg(item, screen_width*half, screen_width*half, index,  screen_width, item.height*(screen_width/item.width)))
                    })}                 
                </Row>
            </Grid>
        );
 }

Here is the 2 image grids were dragged towards the left together but not only one grid moved

1 image was dragged but 2 images were moving together

score 0 · Accepted Answer · answered Aug 06 '20 at 05:59

The property of the gesture needs to be defined for each of the grid. It can be done by moving the declaration of the property into the definition of method displayImg:

const displayImg = (img_source, width, ht, index, modalWidth, modalHt) => {  
  const translateX = new Animated.Value(0)  //<<==draggable related code
  const translateY = new Animated.Value(0)
  const handleGesture = Animated.event([{nativeEvent: {translationX:   translateX,translationY:translateY}}], { useNativeDriver: true });
  let aniStyle = {
                transform:[
                    { translateY : translateY },
                    { translateX :   translateX }
                ]
            };

     return (
                <>
                    <PanGestureHandler onGestureEvent={handleGesture}>
                        <Animated.View style={aniStyle}>
   ...

After that, each grid can be dragged on its own.

RN gesture handler: 1 image is dragged but 2 images are moving together

1 Answers1