react-native-drag-and-drop-list

1.0.1 • Public • Published

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.

Imgur

Imgur

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

Package Sidebar

Install

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

Weekly Downloads

3

Version

1.0.1

License

ISC

Unpacked Size

18.7 kB

Total Files

13

Last publish

Collaborators

  • san22