PanResponder - 在另一个组件上调用 Animated.spring 后重置手势状态

Question

I am setting up a drag and drop image adding bar in React Native. The premise is that a user can drag images around (in a single row) to rearrange them, or drag them to the trash can to the left of the row.

I am using a single panResponder for all the images (up to 5). The pan responder gets the target and sets the positions accordingly.

However, if I use Animated.spring to move a different component in the onPanResponderMove method, the component currently being dragged gets instantly reset to its original position.

For instance, if I move item c to the left one index, Animated.spring gets called on item b moving it to the right 1 index (60px), however when that happens item c gets forced back to its original position (now over item b 's current location) because gestureState.dx suddenly is reporting 0 again.

Why is this happening and how can I work around this?

What I have so far:

import React, { useState, useEffect, useMemo, useRef } from 'react';
import {
  TouchableOpacity,
  View,
  Image,
  Text,
  Animated,
  PanResponder,
} from 'react-native';

interface AddImageBarProps {
  onImageAdd: () => void;
  onImageRemove: () => void;
}

const addImage = require('../../../Assets/img/OtherActionButtons/addPhoto.png');
const trash = require('../../../Assets/img/OtherActionButtons/trash.png');

export const AddImageBar = (props: AddImageBarProps) => {
  const width = 50;
  const margin = 5;

  const imageRefs = useRef([]);
  const positionRefs = useRef([]);

  const [imageArr, setImageArr] = useState<string[]>(['a', 'b', 'c']);
  const [deleteMode, setDeleteMode] = useState(false);
  const [moving, setMoving] = useState<boolean[]>([]);

  useEffect(() => {
    positionRefs.current = [];
    for (let i = 0; i < imageArr.length; i++) {
      positionRefs.current = [...positionRefs.current, new Animated.ValueXY()];
    }
  }, [imageArr]);

  const findIndex = (eventTarget: string) => {
    const index = imageRefs.current.findIndex((imgRef) => {
      return imgRef?._nativeTag === eventTarget;
    });
    if (index >= 0) {
      return index;
    }
    return undefined;
  };

  const getMovedIndexes = (dx: number): number => {
    let indexCount = 0;
    const dxIsNeg = dx < 0;
    if (dxIsNeg) {
      dx = dx * -1;
    }

    dx = dx - width / 2 - margin;
    if (dx < 0) {
      return;
    }
    indexCount = indexCount + 1;
    indexCount = indexCount + Math.trunc(dx / (width + margin));

    return dxIsNeg ? indexCount * -1 : indexCount;
  };

  const updateMoving = (i: number, value: boolean) => {
    const newMoving = moving.map((item, index) => {
      if (index === i) {
        return value;
      } else {
        return item;
      }
    });
    setMoving(newMoving);
  };

  const panResponder = useMemo(
    () =>
      PanResponder.create({
        onStartShouldSetPanResponder: (event, gestureState) => true,
        onPanResponderMove: (event, gestureState) => {
          const index = findIndex(event.nativeEvent.target);
          positionRefs.current[index].setValue({
            x: gestureState.dx,
            y: gestureState.dy,
          });

          const movedIndex = getMovedIndexes(gestureState.dx);

          if (index > 0 && movedIndex < 0) {
            console.log(`movedIndex: `, JSON.stringify(movedIndex));
            for (let i = movedIndex; i < 0; i++) {
              if (!moving[index + i]) {
                console.log(`index + i: `, JSON.stringify(index + i));
                updateMoving(index + i, true);
                Animated.spring(positionRefs.current[0], {
                  toValue: { x: width + margin, y: 0 },
                  friction: 10,
                  useNativeDriver: true,
                }).start(() => {
                  updateMoving(index + i, false);
                });
              }
            }
          }
        },
        onPanResponderGrant: (event) => {
          setDeleteMode(true);
          console.log(`granting`);
        },
        onPanResponderRelease: (event, gestureState) => {
          console.log(`releasing`);
          setDeleteMode(false);
        },
      }),
    [moving],
  );

  return (
    <View
      style={{ marginVertical: 5, flexDirection: 'row', alignItems: 'center' }}>
      <TouchableOpacity
        style={{ borderWidth: 1, borderColor: '#a1a1a1', borderRadius: 3 }}>
        <Image
          source={deleteMode ? trash : addImage}
          resizeMode="contain"
          style={{
            height: 50,
            width: 50,
          }}
        />
      </TouchableOpacity>
      {imageArr.map((item, index) => {
        return (
          <Animated.View
            ref={(element) =>
              (imageRefs.current = [...imageRefs.current, element])
            }
            key={index}
            style={{
              backgroundColor: '#0FF',
              height: 50,
              width: 50,
              justifyContent: 'center',
              alignItems: 'center',
              marginHorizontal: 5,
              transform: [
                {
                  translateX: positionRefs.current[index]?.x
                    ? positionRefs.current[index].x
                    : 0,
                },
                { translateY: 0 },
              ],
            }}
            {...panResponder.panHandlers}>
            <View pointerEvents="none">
              <Text>{item}</Text>
            </View>
          </Animated.View>
        );
      })}
    </View>
  );
};