[HELP NEEDED] FlatList - After scrolling no longer detecting #43
Description
Hi,
this in my code:
import React, { useState } from 'react';
import { View, Text, Button, FlatList, ScrollView } from 'react-native';
import { DndProvider, DndProviderProps, Draggable, Droppable } from "@mgcrea/react-native-dnd";
const DropManagementScreen = () => {
const [items, setItems] = useState([
{ id: "Item1", type: "article" },
{ id: "Item2", type: "article" },
{ id: "Item3", type: "article" },
]);
const [droppedItems, setDroppedItems] = useState<string[]>([]);
const showResults = () => {
alert(JSON.stringify(droppedItems, null, 2));
};
const handleDragEnd: DndProviderProps["onDragEnd"] = ({ active, over }) => {
"worklet";
if (over) {
console.log("onDragEnd", { active, over });
}
};
return (
<View style={{ flex: 1 }}>
<Text>Drop Management</Text>
<DndProvider
activationDelay={1000}
onDragEnd={handleDragEnd}
>
<Droppable id="drop" style={{ padding: 20, backgroundColor: "lightgray", marginBottom: 20 }}>
<Text>DROP HERE</Text>
{droppedItems.map((item) => (
<View key={item} style={{ padding: 10, backgroundColor: "green", marginVertical: 5 }}>
<Text>{item}</Text>
</View>
))}
</Droppable>
<FlatList
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <NewTestDragItem item={item} />}
contentContainerStyle={{ backgroundColor: "red"}}
style={{overflow:'visible', width: "100%", backgroundColor: "orange"}} //important
horizontal
showsHorizontalScrollIndicator={true}
nestedScrollEnabled={true}
/>
</DndProvider>
<Button title="Show Results" onPress={showResults} />
</View>
);
};
export default DropManagementScreen;
const NewTestDragItem = ({ item }: { item: { id: string; type: string } }) => {
return (
<Draggable
id={item.id}
style={{ margin: 10, padding: 10, backgroundColor: "blue", width: "40%" }}
>
<Text style={{ color: "white" }}>{item.id}</Text>
</Draggable>
);
};
After scrolling in the flatlist, the draggable components are no longer recognized/are no longer scrollable.
Is this not supported by this package, am I doing something wrong or can I wait for a future implementation? I would be very grateful for help!