DndProvider stops emitting drag events after dropping Draggable item

[BrianJVarley]

Hi @mgcrea, related to this earlier question I'm opening a new question like you mentioned.

So basically in the gif below, you can see the DraggableCustomComponent does not move once I've dropped it onto the Droppable component. Which triggers the onDragEnd event. After that point when I try to drag the DraggableCustomComponent there are no new events like onBegin coming from the DndProvider.

Is this a bug in DndProvider? Or do I need to update the logic somehow in DraggableCustomComponent to trigger onBegin again?

Log of events output from DndProvider after dropping the DraggableCustomComponent

 LOG  onBegin
 LOG  onFinalize
 LOG  onFinalize
 LOG  onDragEnd {"active": {"activationDelay": 0, "activationTolerance": Infinity, "data": {"_animation": null, "_isReanimatedSharedValue": true, "_value": [Object], "addListener": [Object], "removeListener": [Object], "value": [Object]}, "disabled": false, "id": "bend-1-key"}, "over": {"data": {"_animation": null, "_isReanimatedSharedValue": true, "_value": [Object], "addListener": [Object], "removeListener": [Object], "value": [Object]}, "disabled": false, "id": "drop"}}

import {useDraggable} from '@mgcrea/react-native-dnd';
import {View, StyleSheet} from 'react-native';
import Animated, {withSpring, useAnimatedStyle} from 'react-native-reanimated';
import {DuctPartsImage} from './DuctPartsImage';

const DraggableCustomComponent = ({id, data, disabled, partType}) => {
  const {offset, setNodeRef, activeId, setNodeLayout, draggableState} =
    useDraggable({
      id,
      disabled,
      activeId,
    });

  const animatedStyle = useAnimatedStyle(() => {
    const isActive = activeId.value === id;

    if (isActive && draggableState.value !== 5) {
      return {
        opacity: isActive ? 0.9 : 1,
        zIndex: isActive ? 999 : 1,
        transform: [
          {
            translateX: isActive ? offset.x.value : withSpring(offset.x.value),
          },
          {
            translateY: isActive ? offset.y.value : withSpring(offset.y.value),
          },
        ],
      };
    } else {
      return {};
    }
  }, [id, offset, activeId, draggableState]);

  return (
    <Animated.View
      ref={setNodeRef}
      onLayout={setNodeLayout}
      style={animatedStyle}>
      <View>
        <DuctPartsImage type={partType} style={styles.box} />
      </View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  box: {
    height: 120,
    width: 120,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default DraggableCustomComponent;

[mgcrea]

Code looks OK, you can retry with the latest version to see if there is some improvement.

[BrianJVarley]

Hey @mgcrea I've just upgraded to version 2.2.0 and updated a previous component using DraggableFlatList to use DraggableStack. But the flat list both does not scroll vertically and items do not drag / drop.

Did I miss something in the new API to enable scroll / drag/drop? Here is a gist of the component - https://gist.github.com/BrianJVarley/249906a902fba772aa5144ae30bdbb37

Thanks