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",
},
});