スクロールの挙動がおかしかったバグを修正

menu.js

@@ -1,5 +1,11 @@
 import React, { useRef, useState, useEffect } from "react";
-import { Platform, View, ScrollView, useWindowDimensions, LayoutAnimation } from "react-native";
+import {
+  Platform,
+  View,
+  ScrollView,
+  useWindowDimensions,
+  LayoutAnimation,
+} from "react-native";
 import Constants from "expo-constants";
 import {
   configureReanimatedLogger,
@@ -27,7 +33,7 @@ configureReanimatedLogger({
   level: ReanimatedLogLevel.error, // Set the log level to error
   strict: true, // Reanimated runs in strict mode by default
 });
-export default function Menu({ scrollRef }) {
+export default function Menu({ scrollRef, mapHeight }) {
   const { navigate, addListener, isFocused } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { originalStationList } = useStationList();
@@ -45,18 +51,42 @@ export default function Menu({ scrollRef }) {
     (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
     100 -
     ((((width / 100) * 80) / 20) * 9 + 10 + 30);
-  const MapFullHeight = height - tabBarHeight + (Platform.OS == "android" ? Constants.statusBarHeight : 0) - 100;
+  const MapFullHeight =
+    height -
+    tabBarHeight +
+    (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
+    100;
+  const returnToTop = (bool = true) => {
+    scrollRef.current.scrollTo({
+      y: mapHeight > 80 ?mapHeight - 80 :0,
+      animated: bool,
+    });
+  };
+  const goToMap = () => {
+    scrollRef.current.scrollTo({
+      y: 0,
+      animated: true,
+    });
+  };
   useEffect(() => {
-    setTimeout(() => {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTo({
-          y: MapHeight - 80,
-          animated: false,
-        });
-      }
+    setTimeout(()=>{
+      returnToTop(false);
     }, 10);
-  }, []);
-
+  }, [mapHeight]);
+  const returnToDefaultMode = () => {
+    LayoutAnimation.configureNext({
+      duration: 300,
+      create: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+      update: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+    });
+    setMapMode(false);
+  };
   //現在地基準の駅名標リストアップ機能
   const { position, locationStatus } = useUserPosition();
   useEffect(() => {
@@ -125,6 +155,7 @@ export default function Menu({ scrollRef }) {
     }
     if (listUpStation[listIndex] == undefined) {
       const count = listIndex - 1;
+      setMapMode(false);
       setListIndex(count);
     }
   }, [listIndex, nearPositionStation, listUpStation]);
@@ -139,8 +170,10 @@ export default function Menu({ scrollRef }) {
       latitudeDelta: 0.05,
       longitudeDelta: 0.05,
     };
+    if (mapMode) return;
     mapsRef.current.animateToRegion(mapRegion, 1000);
   }, [listIndex, nearPositionStation, listUpStation, mapsRef]);
+
   return (
     <View
       style={{
@@ -157,6 +190,7 @@ export default function Menu({ scrollRef }) {
         snapToEnd={false}
         decelerationRate={"normal"}
         snapToOffsets={[MapHeight - 80]}
+        onScrollBeginDrag={() => returnToDefaultMode()}
       >
         <MapView
           ref={mapsRef}
@@ -186,6 +220,7 @@ export default function Menu({ scrollRef }) {
               },
             });
             setMapMode(true);
+            goToMap();
           }}
         >
           {listUpStation.map(([{ lat, lng, StationNumber }], index) => (
@@ -196,6 +231,33 @@ export default function Menu({ scrollRef }) {
                 longitude: parseFloat(lng),
               }}
               image={require("@/assets/reccha-small.png")}
+              onPress={() => {
+                setMapMode(false);
+                setListIndex(index);
+                if (mapsRef.current) {
+                  mapsRef.current.animateToRegion(
+                    {
+                      latitude: parseFloat(lat),
+                      longitude: parseFloat(lng),
+                      latitudeDelta: 0.05,
+                      longitudeDelta: 0.05,
+                    },
+                    1000
+                  );
+                }
+                LayoutAnimation.configureNext({
+                  duration: 300,
+                  create: {
+                    type: LayoutAnimation.Types.easeInEaseOut,
+                    property: LayoutAnimation.Properties.opacity,
+                  },
+                  update: {
+                    type: LayoutAnimation.Types.easeInEaseOut,
+                    property: LayoutAnimation.Properties.opacity,
+                  },
+                });
+                returnToTop();
+              }}
             />
           ))}
         </MapView>
@@ -238,4 +300,4 @@ export default function Menu({ scrollRef }) {
       </ScrollView>
     </View>
   );
-}
+}