地図の下部内容をabsoluteにして機能切り替えをスクロールで発動しないように変更

MenuPage.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef,useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useWindowDimensions, Platform } from "react-native";
 import Constants from "expo-constants";
@@ -50,8 +50,9 @@ export function MenuPage() {
   }, []);
 
   const scrollRef = useRef(null);
-  const [mapHeight,setMapHeight] = useState(0);
+    const [mapMode, setMapMode] = useState(false);
-  useEffect(()=>{
+  const [mapHeight, setMapHeight] = useState(0);
+  useEffect(() => {
     const MapHeight =
       height -
       tabBarHeight +
@@ -60,12 +61,21 @@ export function MenuPage() {
       ((((width / 100) * 80) / 20) * 9 + 10 + 30);
     setMapHeight(MapHeight);
   }, [height, tabBarHeight, width]);
+  const [MapFullHeight, setMapFullHeight] = useState(0);
+  useEffect(() => {
+    const MapFullHeight =
+      height -
+      tabBarHeight +
+      (Platform.OS == "android" ? Constants.statusBarHeight : 0);
+    setMapFullHeight(MapFullHeight);
+  }, [height, tabBarHeight, width]);
   useEffect(() => {
     const unsubscribe = addListener("tabPress", (e) => {
       scrollRef.current.scrollTo({
         y: mapHeight - 80,
         animated: true,
       });
+      setMapMode(false);
       AS.getItem("favoriteStation")
         .then((d) => {
           const returnData = JSON.parse(d);
@@ -87,7 +97,15 @@ export function MenuPage() {
           gestureEnabled: true,
           headerTransparent: true,
         }}
-        children={() => <Menu scrollRef={scrollRef} mapHeight={mapHeight} />}
+        children={() => (
+          <Menu
+            scrollRef={scrollRef}
+            mapHeight={mapHeight}
+            MapFullHeight={MapFullHeight}
+            mapMode={mapMode}
+            setMapMode={setMapMode}
+          />
+        )}
       />
       <Stack.Screen name="news" options={optionData} component={News} />
       <Stack.Screen

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -1,3 +1,4 @@
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import React, { useEffect, useRef } from "react";
 import { View, TouchableOpacity, Text, LayoutAnimation } from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
@@ -9,8 +10,10 @@ export const CarouselTypeChanger = ({
   stationListMode,
   setStationListMode,
   setSelectedCurrentStation,
+  mapMode,
   setMapMode,
 }) => {
+  const tabBarHeight = useBottomTabBarHeight();
   const returnToDefaultMode = ()=>{
     LayoutAnimation.configureNext({
       duration: 300,
@@ -26,7 +29,7 @@ export const CarouselTypeChanger = ({
     setMapMode(false);
   }
   return (
-    <View style={{ width: "100%", height: 40, flexDirection: "row" }}>
+    <View style={{ width: "100%", height: 40, flexDirection: "row", position: mapMode ? "absolute" : "relative", bottom: mapMode ? 0 : undefined}} key={"carouselTypeChanger"} >
       <TouchableOpacity
         style={{
           flex: 1,
@@ -41,6 +44,12 @@ export const CarouselTypeChanger = ({
           borderBottomRightRadius: stationListMode == "position" ? 0 : 20,
         }}
         disabled={!locationStatus}
+        
+        onPressIn={() =>{
+          if (!position) return;
+          returnToDefaultMode();
+          setStationListMode("position");
+        }}
         onPress={() => {
           if (!position) return;
           returnToDefaultMode();
@@ -76,7 +85,7 @@ export const CarouselTypeChanger = ({
         onPressIn={() => returnToDefaultMode()}
       >
         <Ionicons
-          name="menu"
+          name={!mapMode ? "menu" : "chevron-up-outline"}
           size={30}
           color="#0099CC"
           style={{ marginHorizontal: 5 }}
@@ -95,6 +104,12 @@ export const CarouselTypeChanger = ({
           borderBottomLeftRadius: stationListMode == "favorite" ? 0 : 20,
           borderBottomRightRadius: stationListMode == "favorite" ? 0 : 20,
         }}
+        onPressIn={() => {
+          returnToDefaultMode();
+          // お気に入りリスト更新
+          setStationListMode("favorite");
+          setSelectedCurrentStation(0);
+        }}
         onPress={() => {
           returnToDefaultMode();
           // お気に入りリスト更新

menu.js

@@ -33,32 +33,20 @@ configureReanimatedLogger({
   level: ReanimatedLogLevel.error, // Set the log level to error
   strict: true, // Reanimated runs in strict mode by default
 });
-export default function Menu({ scrollRef, mapHeight }) {
+export default function Menu({ scrollRef, mapHeight, MapFullHeight, mapMode, setMapMode }) {
   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 [stationListMode, setStationListMode] = useState(
     /*<"position"|"favorite">*/ "position"
   );
   const mapsRef = useRef(null);
-  const MapHeight =
-    height -
-    tabBarHeight +
-    (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 returnToTop = (bool = true) => {
     scrollRef.current.scrollTo({
-      y: mapHeight > 80 ?mapHeight - 80 :0,
+      y: mapHeight > 80 ? mapHeight - 80 : 0,
       animated: bool,
     });
   };
@@ -69,11 +57,12 @@ export default function Menu({ scrollRef, mapHeight }) {
     });
   };
   useEffect(() => {
-    setTimeout(()=>{
+    setTimeout(() => {
       returnToTop(false);
     }, 10);
   }, [mapHeight]);
-  const returnToDefaultMode = () => {
+  const [scrollStartPosition, setScrollStartPosition] = useState(0);
+  const onScrollBeginDrag = (e) => {
     LayoutAnimation.configureNext({
       duration: 300,
       create: {
@@ -85,6 +74,7 @@ export default function Menu({ scrollRef, mapHeight }) {
         property: LayoutAnimation.Properties.opacity,
       },
     });
+    setScrollStartPosition(e.nativeEvent.contentOffset.y);
     setMapMode(false);
   };
   //現在地基準の駅名標リストアップ機能
@@ -189,12 +179,22 @@ export default function Menu({ scrollRef, mapHeight }) {
         snapToStart={false}
         snapToEnd={false}
         decelerationRate={"normal"}
-        snapToOffsets={[MapHeight - 80]}
+        snapToOffsets={[mapHeight - 80]}
-        onScrollBeginDrag={() => returnToDefaultMode()}
+        onScrollBeginDrag={onScrollBeginDrag}
+        onScrollEndDrag={(e) => {
+          console.log(e.nativeEvent.velocity);
+          if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
+            if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
+              goToMap();
+            } else {
+              returnToTop();
+            }
+          }
+        }}
       >
         <MapView
           ref={mapsRef}
-          style={{ width: "100%", height: mapMode ? MapFullHeight : MapHeight }}
+          style={{ width: "100%", height: mapMode ? MapFullHeight : mapHeight }}
           showsUserLocation={true}
           loadingEnabled={true}
           showsMyLocationButton={false}
@@ -261,17 +261,21 @@ export default function Menu({ scrollRef, mapHeight }) {
             />
           ))}
         </MapView>
-        <CarouselTypeChanger
+        {!mapMode && (
-          {...{
+          <CarouselTypeChanger
-            locationStatus,
+            {...{
-            position,
+              locationStatus,
-            mapsRef,
+              position,
-            stationListMode,
+              mapsRef,
-            setStationListMode,
+              stationListMode,
-            setSelectedCurrentStation: setListIndex,
+              setStationListMode,
-            setMapMode,
+              setSelectedCurrentStation: setListIndex,
-          }}
+              mapMode,
-        />
+              setMapMode,
+            }}
+          />
+        )}
+
         {listUpStation.length != 0 && originalStationList.length != 0 && (
           <>
             <CarouselBox
@@ -298,6 +302,20 @@ export default function Menu({ scrollRef, mapHeight }) {
         <JRSTraInfoBox />
         <FixedContentBottom navigate={navigate} />
       </ScrollView>
+      {mapMode && (
+        <CarouselTypeChanger
+          {...{
+            locationStatus,
+            position,
+            mapsRef,
+            stationListMode,
+            setStationListMode,
+            setSelectedCurrentStation: setListIndex,
+            mapMode,
+            setMapMode,
+          }}
+        />
+      )}
     </View>
   );
-}
+}