地図が移動するように変更

menu.js

@@ -12,6 +12,10 @@ import {
 } from "react-native";
 import Constants from "expo-constants";
 import * as Location from "expo-location";
+import {
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
+} from 'react-native-reanimated';
 import StatusbarDetect from "./StatusbarDetect";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { Ionicons } from "@expo/vector-icons";
@@ -38,7 +42,10 @@ import { AS } from "./storageControl";
 import { SimpleDot } from "./components/Menu/SimpleDot";
 import { useAllTrainDiagram } from "./stateBox/useAllTrainDiagram";
 import MapView from "react-native-maps";
-
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.error, // Set the log level to error
+  strict: true, // Reanimated runs in strict mode by default
+});
 export default function Menu({ getCurrentTrain }) {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
@@ -46,8 +53,12 @@ export default function Menu({ getCurrentTrain }) {
   const { height, width } = useWindowDimensions();
   const scrollRef = useRef(null);
   const [mapsOpacity, setMapsOpacity] = useState(1);
+  const mapsRef = useRef(null);
   const mapsSizeOffset =
-    (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 60 - (Platform.OS == "ios" ? Constants.statusBarHeight : 0);
+    (height / 100) * 60 -
+    (((width / 100) * 80) / 20) * 9 +
+    60 -
+    (Platform.OS == "ios" ? Constants.statusBarHeight : 0);
   useEffect(() => {
     setTimeout(() => {
       if (scrollRef.current) {
@@ -58,17 +69,6 @@ export default function Menu({ getCurrentTrain }) {
       }
     }, 10);
   }, []);
-  useEffect(() => {
-    setTimeout(() => {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTo({
-          y: mapsSizeOffset,
-          animated: false,
-        });
-      }
-    }, 10);
-  }, []);
-
   //位置情報
   const [locationStatus, setLocationStatus] = useState(null);
   useEffect(() => {
@@ -175,6 +175,25 @@ export default function Menu({ getCurrentTrain }) {
 
   const [dotButton, setDotButton] = useState(false);
 
+  useEffect(() => {
+    console.log(selectedCurrentStation);
+    if(allStationData.length == 0) return;
+    const currentStationData =
+      originalStationList &&
+      allStationData[selectedCurrentStation] &&
+      allStationData[selectedCurrentStation][0];
+      console.log(currentStationData);
+      const {lat, lng} = currentStationData;
+      const mapRegion = {
+        latitude: lat,
+        longitude: lng,
+        latitudeDelta: 0.05,
+        longitudeDelta: 0.05,
+      };
+      mapsRef.current.animateToRegion(mapRegion, 1000);
+    
+  }, [selectedCurrentStation, currentStation, allStationData,mapsRef]);
+
   useEffect(() => {
     AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
       setDotButton(data === "true");
@@ -218,6 +237,7 @@ export default function Menu({ getCurrentTrain }) {
       >
         <View style={{ position: "relative", height: 0 }}>
           <MapView
+            ref={mapsRef}
             style={{
               flex: 1,
               width: "100%",