React Native Drag and Drop List

The Drag and Drop List with Drop Box is an intuitive and user-friendly interface that allows users to easily organize and manage items by dragging them from a list and dropping them into a designated drop box.

Install

with npm

      npm install react-native-drag-and-drop-list

How to Use

Take in consideration the following data passed to component DragAndDropList i.e. the array must be in form of key and value

       const data = [
        { key: 1, value:"Mango" },
        { key: 2, value: "Orange" },
        { key: 3, value: "Apple" },
        { key: 4, value: "Banana" },
        { key: 5, value: "Cherry" },
        { key: 6, value: "Watermelon" },
        { key: 7, value: "Grapes" },
        { key: 8, value: "Pineapple" },
        ]

Props

All the props accepted are as follows:

Name	Type	Description
data	[]	Required. an array that populates the list
onDrop	(item)=>void	. a callback function that is called when user drops an item
listItemStyle	style	style properties that need to be applied on every item of list
containerWidth	number	width of the container that contains draggable list and drop area
dropBoxStyle	style	style properties that need to be applied on the dropbox
listItemContainerStyle	style	style properties that need to be applied on the container containing all the list items
listItemContainerStyle	style	style properties that need to be applied on the container containing all the list items
parentContainerStyle	style	style properties that need to be applied on the parent container containing both the list items and droppable area

Usage/Examples

import { StatusBar } from "expo-status-bar";
import { SafeAreaView, StyleSheet, Text, View } from "react-native";


import DragAndDropList from "react-native-drag-and-drop-list";
const data = [
  { key: 1, value: "Mango" },
  { key: 2, value: "Orange" },
  { key: 3, value: "Apple" },
  { key: 4, value: "Banana" },
  { key: 5, value: "Cherry" },
  { key: 6, value: "Watermelon" },
  { key: 7, value: "Grapes" },
  { key: 8, value: "Pineapple" },
];
export default function App() {
  return (
    <SafeAreaView style={{ width: "100%", height: "100%" }}>
      <View style={styles.container}>
        <DragAndDropList
          data={data}
          onDrop={(item) => {
            console.log(item);
          }}
          listItemStyle={{
            backgroundColor: "black",
            width: "80%",
          }}
          containerWidth={300}
          listItemContainerStyle={{
            backgroundColor:"skyblue",
            width:"50%"
          }}
           parentContainerStyle={
            {
              marginStart:100,
              marginTop:100
            }
          }

          dropBoxTitle="Drop Here"
          dropBoxStyle={{
    
            width: "50%",
            marginStart:100,
            height: "30%",
            backgroundColor: "orange",
          }}
        />

        <StatusBar style="auto" />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

Authors

• Sanskar Atrey