マップの移動機能を追加

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { View, TouchableOpacity, Text } from "react-native";
+import { View, TouchableOpacity, Text, LayoutAnimation } from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 
 export const CarouselTypeChanger = ({
@@ -7,8 +7,24 @@ export const CarouselTypeChanger = ({
   position,
   mapsRef,
   stationListMode,
-  setStationListMode,setSelectedCurrentStation
+  setStationListMode,
+  setSelectedCurrentStation,
+  setMapMode,
 }) => {
+  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);
+  }
   return (
     <View style={{ width: "100%", height: 40, flexDirection: "row" }}>
       <TouchableOpacity
@@ -27,6 +43,7 @@ export const CarouselTypeChanger = ({
         disabled={!locationStatus}
         onPress={() => {
           if (!position) return;
+          returnToDefaultMode();
           const { latitude, longitude } = position.coords;
           mapsRef.current.animateToRegion(
             {
@@ -66,20 +83,7 @@ export const CarouselTypeChanger = ({
           marginHorizontal: 5,
           borderRadius: 50,
         }}
-        disabled={true}
-        onPress={() => {
-          if (!position) return;
-          const { latitude, longitude } = position.coords;
-          mapsRef.current.animateToRegion(
-            {
-              latitude,
-              longitude,
-              latitudeDelta: 0.05,
-              longitudeDelta: 0.05,
-            },
-            1000
-          );
-        }}
+        onPress={() => returnToDefaultMode()}
       >
         <Ionicons
           name="menu"
@@ -102,6 +106,7 @@ export const CarouselTypeChanger = ({
           borderBottomRightRadius: stationListMode == "favorite" ? 0 : 20,
         }}
         onPress={() => {
+          returnToDefaultMode();
           // お気に入りリスト更新
           setStationListMode("favorite");
           setSelectedCurrentStation(0);

menu.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
-import { Platform, View, ScrollView, useWindowDimensions } from "react-native";
+import { Platform, View, ScrollView, useWindowDimensions, LayoutAnimation } from "react-native";
 import Constants from "expo-constants";
 import {
   configureReanimatedLogger,
@@ -17,7 +17,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useStationList } from "./stateBox/useStationList";
 import { TopMenuButton } from "@/components/Menu/TopMenuButton";
 import { JRSTraInfoBox } from "@/components/Menu/JRSTraInfoBox";
-import MapView from "react-native-maps";
+import MapView, { Marker } from "react-native-maps";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import { CarouselBox } from "./components/Menu/Carousel/CarouselBox";
@@ -27,14 +27,14 @@ 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 }) {
   const { navigate, addListener, isFocused } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { originalStationList } = useStationList();
   const { height, width } = useWindowDimensions();
   const { bottom, left, right, top } = useSafeAreaInsets();
+  const [mapMode, setMapMode] = useState(false);
   const tabBarHeight = useBottomTabBarHeight();
-  const [mapsOpacity, setMapsOpacity] = useState(false);
   const [stationListMode, setStationListMode] = useState(
     /*<"position"|"favorite">*/ "position"
   );
@@ -45,6 +45,7 @@ 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;
   useEffect(() => {
     setTimeout(() => {
       if (scrollRef.current) {
@@ -95,12 +96,13 @@ export default function Menu({scrollRef }) {
     };
 
     let returnDataBase = lineList
-      .map((d) =>  findStationEachLine(originalStationList[d]))
+      .map((d) => findStationEachLine(originalStationList[d]))
       .filter((d) => d.length > 0)
       .reduce((pre, current) => {
         pre.push(...current);
         return pre;
-      }, []).map((d) => [d]);
+      }, [])
+      .map((d) => [d]);
     setNearPositionStation(returnDataBase.length ? returnDataBase : []);
   };
 
@@ -154,15 +156,11 @@ export default function Menu({scrollRef }) {
         snapToStart={false}
         snapToEnd={false}
         decelerationRate={"normal"}
-        onScroll={(d) => {
-          const scrollY = d.nativeEvent.contentOffset.y + 100;
-          setMapsOpacity(scrollY < MapHeight);
-        }}
         snapToOffsets={[MapHeight - 80]}
       >
         <MapView
           ref={mapsRef}
-          style={{ flex: 1, width: "100%", height: MapHeight }}
+          style={{ width: "100%", height: mapMode ? MapFullHeight : MapHeight }}
           showsUserLocation={true}
           loadingEnabled={true}
           showsMyLocationButton={false}
@@ -175,8 +173,32 @@ export default function Menu({scrollRef }) {
             latitudeDelta: 1.8, //小さくなるほどズーム
             longitudeDelta: 1.8,
           }}
-          onPress={() => alert("地図をタップ")}
-        />
+          onTouchStart={() => {
+            LayoutAnimation.configureNext({
+              duration: 300,
+              create: {
+                type: LayoutAnimation.Types.easeInEaseOut,
+                property: LayoutAnimation.Properties.opacity,
+              },
+              update: {
+                type: LayoutAnimation.Types.easeInEaseOut,
+                property: LayoutAnimation.Properties.opacity,
+              },
+            });
+            setMapMode(true);
+          }}
+        >
+          {listUpStation.map(([{ lat, lng, StationNumber }], index) => (
+            <Marker
+              key={index + StationNumber}
+              coordinate={{
+                latitude: parseFloat(lat),
+                longitude: parseFloat(lng),
+              }}
+              image={require("@/assets/reccha-small.png")}
+            />
+          ))}
+        </MapView>
         <CarouselTypeChanger
           {...{
             locationStatus,
@@ -185,6 +207,7 @@ export default function Menu({scrollRef }) {
             stationListMode,
             setStationListMode,
             setSelectedCurrentStation: setListIndex,
+            setMapMode,
           }}
         />
         {listUpStation.length != 0 && originalStationList.length != 0 && (
@@ -194,7 +217,7 @@ export default function Menu({scrollRef }) {
                 originalStationList,
                 listUpStation,
                 nearPositionStation,
-                setListIndex ,
+                setListIndex,
                 listIndex,
                 navigate,
               }}