Как обеспечить, чтобы перетаскиваемый компонент (через onPanResponderMove) оставался под пальцем во время автоматической прокрутки c в ScrollView?

Question

При срабатывании scrollTo перетаскиваемый компонент визуально не остается под моим пальцем. Он движется вместе с ScrollView.

Ссылка на gif: https://imgur.com/qX3S9GQ

У меня есть <ScrollView> с компонентами, которые можно перетаскивать. Я использую PanResponder для функции перетаскивания. Перетаскивание в видимом Scrollview отлично работает.

Когда я перетаскиваю компонент в нижнюю часть экрана, я вызываю функцию scrollTo. scrollTo({x: 0, y: scrollToOffsetY, animated: true}) При этом ScrollView автоматически прокручивается в положение, определяемое смещением.

Однако после прокрутки компонент, который реагирует на перетаскивание, не остается под моим прикосновением. Он движется вверх вместе с прокруткой. Он реагирует на мои прикосновения, но визуально отошел от моего пальца.

Как убедиться, что перетаскиваемый компонент остается под моим пальцем?

state = {
    pan: new Animated.ValueXY(),
};

constructor(props) {
    super(props);
    this.panHandler = PanResponder.create({
        ... // All other PanResponder functions.
        onPanResponderGrant: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => {
            this.state.pan.setOffset({ x: 0, y: 0});
            this.state.pan.setValue({x: 0, y: 0});
        },
        onPanResponderMove: (event: GestureResponderEvent, gestureState: PanResponderGestureState)  => this.moveDraggableComponent(event, gestureState),
        onShouldBlockNativeResponder: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => true,
    });
};


moveDraggableComponent = (event: GestureResponderEvent, gestureState: PanResponderGestureState) => {

      const draggableComponentPosition: DraggableComponentPositionInScrollView = this.getPositionInScrollView(event);

      if (draggableComponentPosition == DraggableComponentPositionInScrollView.BOTTOM) {
        // Trigger scrollTo() to auto scroll the ScrollView.
        // scrollView.scrollTo({x: 0, y: 100, animated: true});

        // Get the old position before the scrollTo was triggered
        let yPos = +(JSON.stringify(this.state.pan.y));
        const xPos = +(JSON.stringify(this.state.pan.x));

        // Increment the position of the dragged component based on the `scrollTo` offset
        yPos += this.incrementer;
        this.incrementer += 100;


        // Creating a new position.
        const targetDestination = {
            x: +(JSON.stringify(this.state.pan.x)), //We don't need to change the x offset.
            y: yPos, // new y position of the dragged component
        };

        this.state.pan.setValue({x: xPos, y: yPos});

        // Move the dragged component to the new position.
        Animated.spring(this.state.pan, {
            toValue: targetDestination,
            useNativeDriver: true,
          }).start();
      }

      return Animated.event([
        null,
        {dx: this.state.pan.x, dy: this.state.pan.y},
      ])(event, gestureState);
}

// Determine whether the dragged component has reached the bottom of the screen. T
getPositionInScrollView = (event: GestureResponderEvent) => {

    if (event.nativeEvent.pageY > (this.screenHeight - 125)) {
      return DraggableComponentPositionInScrollView.BOTTOM;
    }
}