カルーセルの挙動を修正、バッジのサイズとスクロールの調整

menu.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import {
   Platform,
   View,
@@ -173,7 +173,7 @@ export default function Menu(props) {
 
   const [listUpStation, setListUpStation] = useState([]);
   const [isSearchMode, setisSearchMode] = useState(false);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!!isSearchMode) {
       const returnData = [];
       Object.keys(lineList_LineWebID).forEach((d, indexBase) => {
@@ -191,20 +191,16 @@ export default function Menu(props) {
           returnData.push([D]);
         });
       });
-      if (mapMode) {
-        mapsRef?.current.fitToCoordinates(
-          listUpStation.map((d) => ({
-            latitude: parseFloat(d[0].lat),
-            longitude: parseFloat(d[0].lng),
-          })),
-          { edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
-        );
-      }
+      if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
       setListUpStation(returnData);
     } else if (stationListMode == "position") {
-      setListUpStation(nearPositionStation.filter((d) => d != undefined));
+      const returnData = nearPositionStation.filter((d) => d != undefined);
+      if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
+      setListUpStation(returnData);
     } else {
-      setListUpStation(favoriteStation.filter((d) => d != undefined));
+      const returnData = favoriteStation.filter((d) => d != undefined);
+      if (JSON.stringify(returnData) == JSON.stringify(listUpStation)) return;
+      setListUpStation(returnData);
     }
   }, [nearPositionStation, favoriteStation, stationListMode, isSearchMode]);
   useEffect(() => {
@@ -221,7 +217,7 @@ export default function Menu(props) {
       setMapMode(false);
       setListIndex(count);
     }
-  }, [listIndex, nearPositionStation, listUpStation, isSearchMode]);
+  }, [listIndex, listUpStation, isSearchMode]);
   useEffect(() => {
     if (originalStationList == undefined) return;
     if (listUpStation.length == 0) return;
@@ -233,9 +229,18 @@ export default function Menu(props) {
       latitudeDelta: 0.05,
       longitudeDelta: 0.05,
     };
-    if (mapMode) return;
-    mapsRef.current.animateToRegion(mapRegion, 1000);
-  }, [listIndex, nearPositionStation, listUpStation, mapsRef]);
+    if (mapMode) {
+      mapsRef?.current.fitToCoordinates(
+        listUpStation.map((d) => ({
+          latitude: parseFloat(d[0].lat),
+          longitude: parseFloat(d[0].lng),
+        })),
+        { edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
+      );
+    } else {
+      mapsRef.current.animateToRegion(mapRegion, 1000);
+    }
+  }, [listIndex, listUpStation]);
 
   return (
     <View
@@ -249,19 +254,20 @@ export default function Menu(props) {
       {!mapMode ? (
         <TitleBar />
       ) : (
-        <Text
-          style={{
-            fontSize: 30,
-            color: "#0099CC",
-            fontWeight: "bold",
-            position: "absolute",
-            top: 0,
-            zIndex: 1000,
-            fontStyle: "italic",
-          }}
-        >
-          JRShikoku RailScope
-        </Text>
+        <></>
+        // <Text
+        //   style={{
+        //     fontSize: 30,
+        //     color: "#0099CC",
+        //     fontWeight: "bold",
+        //     position: "absolute",
+        //     top: 0,
+        //     zIndex: 1000,
+        //     fontStyle: "italic",
+        //   }}
+        // >
+        //   JRShikoku RailScope
+        // </Text>
       )}
       <ScrollView
         ref={scrollRef}