React native draggle section list - react-native

Question

I am want to make a draggable section list. Where I can drag one item from the section list and move it to another section.
I am try to do this using.
react-native-draggable-flatlist
Issue is that when I select an item and drage it. It takes the whole list.
import React, { FC, useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList, {
RenderItemParams,
ScaleDecorator,
} from "react-native-draggable-flatlist";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Data } from "./data";
import Example from "./example";
interface Item {
header: string;
data: string[];
}
const DATA: Item[] = [
{
header: "A",
data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "A10"],
},
{
header: "B",
data: ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "B10"],
},
];
interface IList {
item: string;
selected: (item: string) => void;
active: boolean;
}
const List: FC<IList> = ({ item, selected, active }) => {
const getSelected = () => {
console.log("item", item);
selected(item);
};
return (
<TouchableOpacity
style={[
styles.draggableContainer,
{
backgroundColor: active ? "blue" : "white",
},
]}
onLongPress={getSelected}
onPress={getSelected}
>
<Text style={styles.text}>{item}</Text>
</TouchableOpacity>
);
};
export default function App() {
const renderContent = (item: Item, drag: () => void, isActive: boolean) => {
return (
<View style={styles.item}>
{item?.data?.map((seat) => (
<List key={seat} item={seat} selected={drag} active={isActive} />
))}
</View>
);
};
const renderSectionHeader = (section: Item) => (
<View style={styles.header}>
<Text style={styles.headerText}>{section.header}</Text>
</View>
);
const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => (
<View style={{ flex: 1 }}>
<View>{renderSectionHeader(item)}</View>
<View style={{ flex: 1 }}>{renderContent(item, drag, isActive)}</View>
</View>
);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<DraggableFlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item, index) => `draggable-item-${item?.header}`}
/>
</View>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
item: {
borderRadius: 5,
marginVertical: 8,
marginHorizontal: 16,
},
header: {
backgroundColor: "#f9c2ff",
height: 30,
justifyContent: "center",
paddingLeft: 10,
},
headerText: {
fontSize: 16,
fontWeight: "bold",
},
text: {
fontSize: 18,
},
draggableContainer: {
flexDirection: "column",
flex: 1,
paddingVertical: 10,
},
draggable: {
flex: 1,
},
container: {
flex: 1,
},
});
I have tryed using draxList but I was getting peformace issues. Draggable flat list has the best performance.

Answer 1

I have so many times react-native-draggable-flatlist
and I have the code for this below.
it works for me fine you can update your code like this.
<DragableFlatlist
ItemSeparatorComponent={() => (
<View style={styles.itemSeprator} />
)}
data={drag}
keyExtractor={(item) => item.id}
nestedScrollEnabled
onDragEnd={({ data }) => setDrag(data)}
renderItem={renderItemDrag}
showsVerticalScrollIndicator={false}
/>