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

components/Settings/FavoliteSettings/FavoiliteSettingsItem.js

@@ -2,14 +2,10 @@ import React, { useEffect, useState } from "react";
 import Icon from "react-native-vector-icons/Entypo";
 import { View, Text, TouchableOpacity, LayoutAnimation } from "react-native";
 import lineColorList from "../../../assets/originData/lineColorList";
+import Ionicons from "react-native-vector-icons/Ionicons";
 import { AS } from "../../../storageControl";
 
-export const FavoriteSettingsItem = ({
-  currentStation,
-  setFavoriteStation,
-  index,
-  array,
-}) => {
+export const FavoriteSettingsItem = ({ currentStation }) => {
   const lineIDs = [];
   const EachIDs = [];
   console.log(currentStation);
@@ -19,27 +15,6 @@ export const FavoriteSettingsItem = ({
     lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
     EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
   });
-  const [head, setHead] = useState(false);
-  const [tail, setTail] = useState(false);
-  useEffect(() => {
-    switch (true) {
-      case array.length == 1:
-        setHead(true);
-        setTail(true);
-        break;
-      case index == 0:
-        setHead(true);
-        setTail(false);
-        break;
-      case index == array.length - 1:
-        setHead(false);
-        setTail(true);
-        break;
-      default:
-        setHead(false);
-        setTail(false);
-    }
-  }, [array]);
 
   return (
     <View style={{ flexDirection: "row", backgroundColor: "white" }}>
@@ -47,7 +22,7 @@ export const FavoriteSettingsItem = ({
         style={{
           width: 35,
           position: "relative",
-          marginHorizontal: 15,
+          marginHorizontal: 10,
           flexDirection: "row",
           height: "101%",
         }}
@@ -91,43 +66,15 @@ export const FavoriteSettingsItem = ({
       >
         <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
         <View style={{ flex: 1 }} />
-        <TouchableOpacity
-          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
-          onPress={() => {
-            console.log("up");
-            LayoutAnimation.configureNext(
-              LayoutAnimation.Presets.easeInEaseOut
-            );
-            const removedStation = [...array].filter((d, i) => {
-              if (i == index) return false;
-              return true;
-            });
-            removedStation.splice(index - 1, 0, currentStation);
-            setFavoriteStation(removedStation);
-
-            AS.setItem("favoriteStation", JSON.stringify(removedStation));
-          }}
-        >
-          {head ? null : <Icon name="chevron-up" size={26} />}
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={{ marginHorizontal: 10, marginVertical: 4, width: 30 }}
-          onPress={() => {
-            console.log("down");
-            LayoutAnimation.configureNext(
-              LayoutAnimation.Presets.easeInEaseOut
-            );
-            const removedStation = [...array].filter((d, i) => {
-              if (i == index) return false;
-              return true;
-            });
-            removedStation.splice(index + 1, 0, currentStation);
-            setFavoriteStation(removedStation);
-            AS.setItem("favoriteStation", JSON.stringify(removedStation));
-          }}
-        >
-          {tail ? null : <Icon name="chevron-down" size={26} />}
-        </TouchableOpacity>
+      </View>
+      <View
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          alignSelf: "center",
+        }}
+      >
+        <Ionicons name={"reorder-two"} size={20} style={{ marginHorizontal: 10 }} />
       </View>
     </View>
   );