147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
import React from "react";
|
|
import { Alert, StyleSheet, Text, View } from "react-native";
|
|
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
|
import {
|
|
Draggable,
|
|
Droppable,
|
|
DropProvider,
|
|
} from "react-native-reanimated-dnd";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
export default function DragDropExample() {
|
|
const handleDrop = (data: any, zoneId: string) => {
|
|
Alert.alert("Item Dropped", `"${data.title}" dropped in ${zoneId}`);
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<GestureHandlerRootView style={styles.container}>
|
|
<DropProvider>
|
|
<View style={styles.content}>
|
|
{/* Drop Zones */}
|
|
<View style={styles.dropZonesSection}>
|
|
<Text style={styles.sectionTitle}>Drop Zones</Text>
|
|
|
|
<Droppable
|
|
onDrop={(data) => handleDrop(data, "Zone 1")}
|
|
activeStyle={styles.dropZoneActive}
|
|
style={styles.droppable}
|
|
>
|
|
<View style={[styles.dropZoneBlue, styles.dropZone]}>
|
|
<Text style={styles.dropZoneText}>🎯 Zone 1</Text>
|
|
<Text style={styles.dropZoneSubtext}>Drop here</Text>
|
|
</View>
|
|
</Droppable>
|
|
|
|
<Droppable
|
|
onDrop={(data) => handleDrop(data, "Zone 2")}
|
|
activeStyle={styles.dropZoneActive}
|
|
style={styles.droppable}
|
|
>
|
|
<View style={[styles.dropZone, styles.dropZoneGreen]}>
|
|
<Text style={styles.dropZoneText}>🎯 Zone 2</Text>
|
|
<Text style={styles.dropZoneSubtext}>Drop here</Text>
|
|
</View>
|
|
</Droppable>
|
|
</View>
|
|
|
|
{/* Draggable Item */}
|
|
<View style={styles.draggableSection}>
|
|
<Text style={styles.sectionTitle}>Draggable Item</Text>
|
|
<Draggable data={{ id: "1", title: "Task Item" }}>
|
|
<View style={styles.draggableItem}>
|
|
<Text style={styles.itemText}>📦 Drag me to a zone</Text>
|
|
</View>
|
|
</Draggable>
|
|
</View>
|
|
</View>
|
|
</DropProvider>
|
|
</GestureHandlerRootView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#000000",
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
padding: 20,
|
|
justifyContent: "space-between",
|
|
},
|
|
sectionTitle: {
|
|
color: "#FFFFFF",
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
marginBottom: 20,
|
|
textAlign: "center",
|
|
},
|
|
draggableSection: {
|
|
alignItems: "center",
|
|
paddingVertical: 40,
|
|
},
|
|
draggableItem: {
|
|
padding: 20,
|
|
backgroundColor: "#1C1C1E",
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: "#3A3A3C",
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
itemText: {
|
|
color: "#FFFFFF",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
textAlign: "center",
|
|
},
|
|
dropZonesSection: {
|
|
flex: 1,
|
|
paddingVertical: 40,
|
|
},
|
|
droppable: {
|
|
marginBottom: 20,
|
|
overflow: "hidden",
|
|
borderRadius: 16,
|
|
},
|
|
dropZone: {
|
|
height: 140,
|
|
borderWidth: 2,
|
|
borderStyle: "dashed",
|
|
borderRadius: 16,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 20,
|
|
},
|
|
dropZoneBlue: {
|
|
borderColor: "#58a6ff",
|
|
backgroundColor: "rgba(88, 166, 255, 0.08)",
|
|
},
|
|
dropZoneGreen: {
|
|
borderColor: "#3fb950",
|
|
backgroundColor: "rgba(63, 185, 80, 0.08)",
|
|
},
|
|
dropZoneActive: {
|
|
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
|
borderStyle: "solid",
|
|
transform: [{ scale: 1.02 }],
|
|
},
|
|
dropZoneText: {
|
|
color: "#FFFFFF",
|
|
fontSize: 18,
|
|
fontWeight: "600",
|
|
textAlign: "center",
|
|
marginBottom: 8,
|
|
},
|
|
dropZoneSubtext: {
|
|
color: "#8E8E93",
|
|
fontSize: 14,
|
|
textAlign: "center",
|
|
},
|
|
});
|