update

src/components/DragDropTest.js

@@ -0,0 +1,137 @@
+import { View, Text, ScrollView, StyleSheet, Dimensions } from "react-native";
+import React, { useState } from "react";
+import Animated, {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { PanGestureHandler } from "react-native-gesture-handler";
+
+const { width } = Dimensions.get("window");
+
+const DragDropTest = () => {
+  const [leftItems, setLeftItems] = useState([
+    "fortnite",
+    "apex",
+    "callofduty",
+  ]);
+  const [rightItems, setRightItems] = useState([]);
+
+  const draggingItem = useSharedValue(null);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const moveItem = (item) => {
+    setLeftItems((items) => items.filter((i) => i !== item));
+    setRightItems((items) => [...items, item]);
+  };
+
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      ctx.startX = translateX.value;
+      ctx.startY = translateY.value;
+    },
+    onActive: (event, ctx) => {
+      translateX.value = ctx.startX + event.translationX;
+      translateY.value = ctx.startY + event.translationY;
+    },
+    onEnd: () => {
+      if (translateX.value > width / 2) {
+        runOnJS(moveItem)(draggingItem.value);
+      }
+      translateX.value = withSpring(0);
+      translateY.value = withSpring(0);
+      draggingItem.value = null;
+    },
+  });
+
+  const renderDraggable = (item) => {
+    const style = useAnimatedStyle(() => ({
+      transform: [
+        { translateX: draggingItem.value === item ? translateX.value : 0 },
+        { translateY: draggingItem.value === item ? translateY.value : 0 },
+      ],
+      zIndex: draggingItem.value === item ? 10 : 0,
+    }));
+
+    return (
+      <PanGestureHandler
+        key={item}
+        onGestureEvent={gestureHandler}
+        onHandlerStateChange={() => {
+          draggingItem.value = item;
+        }}
+      >
+        <Animated.View style={[styles.item, style]}>
+          <Text style={styles.text}>{item}</Text>
+        </Animated.View>
+      </PanGestureHandler>
+    );
+  };
+
+  return (
+    <View style={styles.scrollWrapper}>
+      <ScrollView
+        style={{
+          ...styles.scroll,
+          zIndex: 2,
+        }}
+      >
+        <Text style={styles.title}>Left</Text>
+        {leftItems.map(renderDraggable)}
+      </ScrollView>
+
+      <ScrollView
+        style={{
+          ...styles.scroll,
+          zIndex: -1,
+        }}
+      >
+        <Text style={styles.title}>Right</Text>
+        {rightItems.map((item) => (
+          <View key={item} style={[styles.item, { backgroundColor: "#bdf" }]}>
+            <Text style={styles.text}>{item}</Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default DragDropTest;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 50,
+  },
+  scrollWrapper: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+  scroll: {
+    width: width / 2.2,
+    height: "90%",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 10,
+    margin: 5,
+    padding: 10,
+  },
+  title: {
+    fontWeight: "bold",
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  item: {
+    backgroundColor: "#aaf",
+    padding: 15,
+    marginVertical: 5,
+    borderRadius: 10,
+  },
+  text: {
+    color: "#333",
+    textAlign: "center",
+  },
+});