Drag and Drop logic with reanimated in React Native

Question

Hey I have such array:

const columns = [
    {
      id: '4638e8e9-ff81-45ee-9ec0-c3fc5a2bd0f4',
      name: 'Philosophy',
      cards: [
        {cardIndex: 0, name: 'A', id: 'ef207fe4-62ab-4285-a89e-d92c529a1421'},
        {cardIndex: 1, name: 'B', id: '7fb99625-bda1-4366-bbac-205677331848'},
        {cardIndex: 2, name: 'C', id: 'd305c776-caf7-4eb3-89fe-92aaecf9975e'},
      ],
    },

    {
      id: '1532323a-2747-4ed7-8df0-4ccc32ca6389',
      name: 'History',
      cards: [
        {cardIndex: 0, name: 'F', id: '26d19ca5-76f6-4b56-a38e-a307035c7840'},
        {cardIndex: 1, name: 'G', id: 'e65dc7c8-ec23-4ebb-b7fe-ebcc26a50070'},
      ],
    },
  ];

And I need to implement drag-and-drop logic like a Trello (from one column to another). Maybe someone have an example of this logic implemented with React Reanimated or could help with it? I need a simple example how I can to do it

Answer 1

Use this library and go through it's documentation. I believe by using it you can achieve the functionality you're looking for

npm i react-beautiful-dnd

documentation - https://github.com/atlassian/react-beautiful-dnd#readme