I've searched online for solutions but haven't found a clear example or tutorial that fits my requirements. Can someone provide guidance on how to achieve this? Any libraries or approaches that can simplify the implementation would be greatly appreciated.
I need to implement drag and drop functionality between two FlatLists. Specifically, I have two FlatLists displaying different sets of items, and I want the user to be able to drag an item from one FlatList and drop it into the other.
On
You can use React Native Draggable FlatList Install with npm :
npm install --save react-native-draggable-flatlist
or with yarn:
yarn add react-native-draggable-flatlist
and use by importing:
import DraggableFlatList from 'react-native-draggable-flatlist'
Example:
import React, { useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList, {
ScaleDecorator,
onDragEnd,
} from "react-native-draggable-flatlist";
const NUM_ITEMS = 10;
function getColor(i: number) {
const multiplier = 255 / (NUM_ITEMS - 1);
const colorVal = i * multiplier;
return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}
type Item = {
key: string;
label: string;
height: number;
width: number;
backgroundColor: string;
listId: string; // new property to identify list
};
const initialDataLeft: Item[] = [...Array(NUM_ITEMS / 2)].map((d, index) => {
const backgroundColor = getColor(index);
return {
key: `left-item-${index}`,
label: String(index) + "",
height: 100,
width: 60 + Math.random() * 40,
backgroundColor,
listId: "left", // assign list ID
};
});
const initialDataRight: Item[] = [...Array(NUM_ITEMS / 2)].map((d, index) => {
const backgroundColor = getColor(NUM_ITEMS / 2 + index);
return {
key: `right-item-${index}`,
label: String(index) + "",
height: 100,
width: 60 + Math.random() * 40,
backgroundColor,
listId: "right", // assign list ID
};
});
export default function App() {
const [leftData, setLeftData] = useState(initialDataLeft);
const [rightData, setRightData] = useState(initialDataRight);
const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
return (
<ScaleDecorator>
<TouchableOpacity
onLongPress={drag}
disabled={isActive}
style={[
styles.rowItem,
{ backgroundColor: isActive ? "red" : item.backgroundColor },
]}
>
<Text style={styles.text}>{item.label}</Text>
</TouchableOpacity>
</ScaleDecorator>
);
};
const handleDragEnd = (fromListId, toListId, item) => {
const fromList = (fromListId === "left") ? leftData : rightData;
const toList = (toListId === "left") ? setLeftData : setRightData;
const updatedFromList = fromList.filter((i) => i.key !== item.key);
toList((prevData) => [...prevData, item]);
};
// Custom DraggableFlatList for each list
const LeftFlatList = () => (
<DraggableFlatList
data={leftData}
keyExtractor={(item) => item.key}
renderItem={renderItem}
onDragEnd={({ data }) => {
handleDragEnd("left", "right", data[0]); // assuming only 1 item is dragged
setLeftData(data);
}}
/>
);
const RightFlatList = () => (
<DraggableFlatList
data={rightData}
keyExtractor={(item) => item.key}
renderItem={renderItem}
onDragEnd={({ data }) => {
handleDragEnd("right", "left", data[0]); // assuming only 1 item is dragged
setRightData(data);
}}
/>
);
return (
<View style={styles.container}>
<View style={styles.listContainer}>
<LeftFlatList />
</View>
<View style={styles.listContainer}>
<RightFlatList />
</View>
</View>
);
}
const styles = StyleSheet.create({
rowItem: {
height: 100,
width: 100,
alignItems: "center",
justifyContent: "center",
},
text: {
color: "white",
fontSize: 24,
fontWeight: "bold",
textAlign: "center",
},
});
for more details: Visit documentation
You can use React Native DraxList and DraxView also GestureHandlerRootView Install with npm :
Example: