Draggable Item Disapple #600
Description
When I drag, the Draggeable Item sometimes disappears, see the video, it is basically the same as the official example, can anyone tell me how to solve this problem!
"react-native-draggable-flatlist": "^4.0.3", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1",
Code
import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList from "react-native-draggable-flatlist";
const generateStableId = () => `id-${Math.random().toString(36).substr(2, 9)}`;
const DraggableListExample = () => {
const [data, setData] = useState(
Array.from({ length: 6 }, (_, i) => ({
key: generateStableId(),
label: `Item ${i + 1}`,
backgroundColor: `hsl(${i * 36}, 70%, 80%)`,
})),
);
const handleDragEnd = ({ data }: any) => {
console.log("new order", data);
setData(data);
};
const renderItem = ({ item, drag, isActive }: any) => {
return (
<TouchableOpacity
onLongPress={drag}
delayLongPress={200}
activeOpacity={0.8}
style={[
styles.item,
{
backgroundColor: isActive ? "#e0e0e0" : item.backgroundColor,
elevation: isActive ? 8 : 2,
shadowOpacity: isActive ? 0.3 : 0.1,
},
]}
>
<Text style={styles.text}>{item.label}</Text>
<Text style={styles.dragHint}>Drag</Text>
</TouchableOpacity>
);
};
return (
<View style={styles.container}>
<Text style={styles.header}>DraggableFlatList</Text>
<DraggableFlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.key}
onDragEnd={handleDragEnd}
activationDistance={20}
autoscrollSpeed={200}
containerStyle={styles.listContainer}
/>
<Text style={styles.footer}>
current order: {data.map((item) => item.label).join(", ")}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: "#f8f9fa",
},
header: {
fontSize: 22,
fontWeight: "bold",
textAlign: "center",
marginVertical: 15,
color: "#333",
},
footer: {
padding: 10,
textAlign: "center",
color: "#666",
fontStyle: "italic",
},
listContainer: {
flex: 1,
},
item: {
padding: 20,
marginVertical: 8,
borderRadius: 12,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4,
},
text: {
fontSize: 18,
fontWeight: "500",
},
dragHint: {
color: "#666",
fontSize: 12,
fontStyle: "italic",
},
});
export default DraggableListExample;