What is drag/drop functionality –

Today we are going to learn one more important part of react native app which is “How To Implement Drag And Drop in React Native“. if you are here then you know about the drag and drop functionality. if not then check the below output image.

Output result –

Why I Am Implement This –

I am sure now you understand the concept of drag and drop, this one is trending functionality for any app.

Near about all my client wants to implement this functionality in his app for various purposes.

That’s why I am going to write a blog on this topic, I am sure you like it, so let’s start the topic.

What is react-native drag and drop-board –

 react-native-drag and drop-board is a third-party npm library for creating drag and drop functionality, it is popular.

Introduction –

This is a simple React Native library, enabling you to create a scrollable board component with a carousel, sortable columns, and draggable cards for your iOS and Android apps.

Are react-native-drag and drop-board popular –

The react-native-drag and drop-board receive a total of 123 weekly downloads and 114 stars GitHub. As such, react-native-drag and drop-board popularity were classified as limited but it gets the good star and I like it.

So let’s start please follow each step carefully…

Step 1 – Installation

First, we need to install the third-party npm plugin.

npm install react-native-draganddrop-board 
                  or 
yarn add react-native-draganddrop-board

Step 2 – Import

After installing the npm plugin successfully, now we need to import that plugin into your file.

import { BoardRepository } from 'react-native-draganddrop-board'

Step 3 – Set up the data

Now we are going to create a formate for data, which we show in this box, you can customize it based on your requirements.

const data = [
  {
    id: 1,
    name: 'TO DO',
    rows: [
      {
        id: '1',
        name: 'Analyze your audience',
        description: 'Learn more about the audience to whom you will be speaking'
      },
      {
        id: '2',
        name: 'Select a topic',
        description: 'Select a topic that is of interest to the audience and to you'
      },
      {
        id: '3',
        name: 'Define the objective',
        description: 'Write the objective of the presentation in a single concise statement'
      }
    ]
  },
  {
    id: 2,
    name: 'IN PROGRESS',
    rows: [
      {
        id: '4',
        name: 'Look at drawings',
        description: 'How did they use line and shape? How did they shade?'
      },
      {
        id: '5',
        name: 'Draw from drawings',
        description: 'Learn from the masters by copying them'
      },
      {
        id: '6',
        name: 'Draw from photographs',
        description: 'For most people, it’s easier to reproduce an image that’s already two-dimensional'
      }
    ]
  },
  {
    id: 3,
    name: 'DONE',
    rows: [
      {
        id: '7',
        name: 'Draw from life',
        description: 'Do you enjoy coffee? Draw your coffee cup'
      },
      {
        id: '8',
        name: 'Take a class',
        description: 'Check your local university extension'
      }
    ]
  }
]
//this is important 
const boardRepository = new BoardRepository(data);

Step 4 – Design the view

Now we set up the view for showing the boards.

import { Board } from 'react-native-draganddrop-board'
 
  <Board
    boardRepository={boardRepository}
    open={() => {}}
    onDragEnd={() => {}}
  />

Step 5 – Components

Property	Type	Required	Description
boardRepository	BoardRepository	yes	an object that holds data
boardBackground	string	no	board background-color
open	function	yes	the function invoked when the item is pressed, returns an item
onDragEnd	function	yes	the function invoked when drag is finished, returns srcColumnId, destColumnId, dragged items

Step 5 – Run the project

Now you can run your project on android or ios and check your view.

For more please check – https://www.npmjs.com/package/react-native-draganddrop-board

So we completed the react-native drag and drop functionality which is “How To Implement Drag And Drop in React Native“

You can find my next post here.

You can find my post on medium as well click here please follow me on medium as well.

If have any query or issues, please feel free to ask.

Happy Coding Guys.