Drag and Drop between two draggable Flatlist-React Native

Question

I\'m struggling to create a requirement for my React-Native application where I am having a blank dropbox(on dropping a flatlist item it should convert into a draggable flatlist

Answer 1

I have created the minimal example with react-native-gesture-handler let me know if it helps :

let dropzoneHeight = 200;
let itemHeight = 60;

let FlatItem = ({ item }) => {
  let translateX = new Animated.Value(0);
  let translateY = new Animated.Value(0);
  let onGestureEvent = Animated.event([
    {
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
      },
    },
  ]);
  let _lastOffset = { x: 0, y: 0 };
  let onHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      _lastOffset.x += event.nativeEvent.translationX;
      _lastOffset.y += event.nativeEvent.translationY;
      translateX.setOffset(_lastOffset.x);
      translateX.setValue(0);
      translateY.setOffset(_lastOffset.y);
      translateY.setValue(0);

      //TODO here you have to check if the item is inside of container and if it is do some calculations to relocate it to your container.
    }
  };
  return (
    
      
        {item.id}
      
    
  );
};

let data = [
  { key: 1, id: 1 },
  { key: 2, id: 2 },
  { key: 3, id: 3 },
  { key: 4, id: 4 },
];
export default class App extends React.Component {
  render() {
    return (
      
         }
          renderItem={props => }
          style={{ flex: 1 }}
        />
      
    );
  }
}

Here is the snack if you want to test!