お気に入り一覧のドラッグ並び替え機能を実装

components/Settings/FavoriteSettings.js

@@ -1,30 +1,57 @@
-import React from "react";
-import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import React, { useCallback } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
 import { useNavigation } from "@react-navigation/native";
+import Sortable from "react-native-sortables";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const scrollableRef = useAnimatedRef();
   const { goBack } = useNavigation();
+  const renderItem = useCallback((props) => {
+    const { item, index } = props;
+    return (
+      <FavoriteSettingsItem
+        currentStation={item}
+        key={item[0].StationNumber}
+      />
+    );
+  }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <SheetHeaderItem
         title="お気に入り設定"
         LeftItem={{ title: "＜ 設定", onPress: goBack }}
       />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
-        {favoriteStation.map((currentStation, index, array) => (
-          <FavoriteSettingsItem
-            currentStation={currentStation}
-            setFavoriteStation={setFavoriteStation}
-            index={index}
-            array={array}
-            key={currentStation[0].StationNumber}
-          />
-        ))}
-      </ScrollView>
+      <Animated.ScrollView
+        style={{ flex: 1, backgroundColor: "white" }}
+        contentContainerStyle={styles.contentContainer}
+        ref={scrollableRef}
+      >
+        <Sortable.Grid
+          columnGap={0}
+          columns={1}
+          data={favoriteStation}
+          renderItem={renderItem}
+          rowGap={0}
+          scrollableRef={scrollableRef} // required for auto scroll
+          snapOffsetY={0}
+          onDragEnd={(newOrder) => {
+            const newFavoriteStation = newOrder.indexToKey.map((item,index,array)=>{
+              let returnData = [];
+              favoriteStation.forEach((station) => {
+                if (station[0].StationNumber === item) returnData = station;
+              });
+              return returnData;
+            });
+            setFavoriteStation(newFavoriteStation);
+          }}
+          keyExtractor={(item) => item[0].StationNumber}
+        />
+      </Animated.ScrollView>
       <Text
         style={{
           backgroundColor: "white",
@@ -37,3 +64,20 @@ export const FavoriteSettings = () => {
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: "center",
+    backgroundColor: "#36877F",
+    borderRadius: 10,
+    height: 100,
+    justifyContent: "center",
+  },
+  contentContainer: {
+    padding: 10,
+  },
+  text: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});