From caa4694c94308a0b1d33bb13ce822dc8ced9ea52 Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Sun, 6 Jul 2025 11:14:24 +0000
Subject: [PATCH] =?UTF-8?q?=E6=A4=9C=E7=B4=A2=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E6=9A=AB=E5=AE=9A=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Menu/Carousel/CarouselTypeChanger.tsx     | 49 +++++++++---
 components/Menu/RailScope/SearchUnitBox.tsx   | 76 +++++++++++++++++++
 menu.js                                       | 31 +++++++-
 3 files changed, 143 insertions(+), 13 deletions(-)
 create mode 100644 components/Menu/RailScope/SearchUnitBox.tsx

diff --git a/components/Menu/Carousel/CarouselTypeChanger.tsx b/components/Menu/Carousel/CarouselTypeChanger.tsx
index 11f13af..84767a7 100644
--- a/components/Menu/Carousel/CarouselTypeChanger.tsx
+++ b/components/Menu/Carousel/CarouselTypeChanger.tsx
@@ -1,13 +1,23 @@
 import { AS } from "@/storageControl";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import React, { useEffect, useRef } from "react";
-import { View, TouchableOpacity, Text, LayoutAnimation } from "react-native";
+import { useWindowDimensions } from "react-native";
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  LayoutAnimation,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
+import { SearchUnitBox } from "@/components/Menu/RailScope/SearchUnitBox";
 
 export const CarouselTypeChanger = ({
   locationStatus,
   position,
   mapsRef,
+  scrollRef,
   stationListMode,
   setStationListMode,
   setSelectedCurrentStation,
@@ -15,7 +25,9 @@ export const CarouselTypeChanger = ({
   setMapMode,
 }) => {
   const tabBarHeight = useBottomTabBarHeight();
-  const returnToDefaultMode = ()=>{
+  const [isSearchMode, setisSearchMode] = React.useState(false);
+  const { height, width } = useWindowDimensions();
+  const returnToDefaultMode = () => {
     LayoutAnimation.configureNext({
       duration: 300,
       create: {
@@ -28,13 +40,32 @@ export const CarouselTypeChanger = ({
       },
     });
     setMapMode(false);
-  }
+  };
   return (
-    <View style={{ width: "100%", height: 40, flexDirection: "row", position: mapMode ? "absolute" : "relative", bottom: mapMode ? 0 : undefined}} key={"carouselTypeChanger"} >
+    <KeyboardAvoidingView
+      behavior="padding"
+      keyboardVerticalOffset={80}
+      enabled={Platform.OS === "ios"}
+      style={{
+        width: "100%",
+        height: 40,
+        flexDirection: "row",
+        position: mapMode ? "absolute" : "relative",
+        bottom: mapMode ? 0 : undefined,
+        zIndex: 1000,
+        backgroundColor: "white",
+      }}
+      key={"carouselTypeChanger"}
+    >
+      <SearchUnitBox
+        isSearchMode={isSearchMode}
+        setisSearchMode={setisSearchMode}
+      />
       <TouchableOpacity
         style={{
           flex: 1,
-          backgroundColor: stationListMode == "position" ? "#0099CC" : "#0099CC80",
+          backgroundColor:
+            stationListMode == "position" ? "#0099CC" : "#0099CC80",
           padding: 5,
           alignItems: "center",
           flexDirection: "row",
@@ -45,8 +76,7 @@ export const CarouselTypeChanger = ({
           borderBottomRightRadius: mapMode ? 0 : 20,
         }}
         disabled={!locationStatus}
-        
-        onPressIn={() =>{
+        onPressIn={() => {
           if (!position) return;
           returnToDefaultMode();
           setStationListMode("position");
@@ -99,7 +129,8 @@ export const CarouselTypeChanger = ({
       <TouchableOpacity
         style={{
           flex: 1,
-          backgroundColor: stationListMode == "favorite" ? "#0099CC" : "#0099CC80",
+          backgroundColor:
+            stationListMode == "favorite" ? "#0099CC" : "#0099CC80",
           padding: 5,
           alignItems: "center",
           flexDirection: "row",
@@ -137,6 +168,6 @@ export const CarouselTypeChanger = ({
           お気に入りリスト
         </Text>
       </TouchableOpacity>
-    </View>
+    </KeyboardAvoidingView>
   );
 };
diff --git a/components/Menu/RailScope/SearchUnitBox.tsx b/components/Menu/RailScope/SearchUnitBox.tsx
new file mode 100644
index 0000000..81512c0
--- /dev/null
+++ b/components/Menu/RailScope/SearchUnitBox.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  View,
+  LayoutAnimation,
+  TextInput,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { useWindowDimensions } from "react-native";
+export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
+  const { height, width } = useWindowDimensions();
+  return (
+    <>
+    <TouchableOpacity
+      style={{
+        position: "absolute",
+        bottom: isSearchMode ? 0 : 60,
+        right: 0,
+        padding: isSearchMode ? 5 : 10,
+        margin: isSearchMode ? 0 : 10,
+        backgroundColor: "#0099CC",
+        borderRadius: isSearchMode ? 5 : 50,
+        width: isSearchMode ? width : 50,
+        zIndex: 1000,
+      }}
+      disabled={isSearchMode}
+      onPress={() => {
+        LayoutAnimation.configureNext({
+          duration: 200,
+          update: { type: "easeInEaseOut", springDamping: 0.6 },
+        });
+        setisSearchMode(true);
+      }}
+    >
+      {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
+      {isSearchMode && (
+          <View style={{ backgroundColor: "#0099CC" }}>
+            <Text
+              style={{ color: "white" }}
+              onPress={() => {
+                LayoutAnimation.configureNext({
+                  duration: 200,
+                  update: { type: "easeInEaseOut", springDamping: 0.6 },
+                });
+                setisSearchMode(false);
+              }}
+            >
+              あああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
+            </Text>
+            <View
+              style={{
+                backgroundColor: "white",
+                borderRadius: 25,
+                height: 30,
+                paddingRight: 10,
+                paddingLeft: 10,
+              }}
+            >
+              <TextInput
+                placeholder="駅名を入力してフィルタリングします。"
+                //onFocus={() => setKeyBoardVisible(true)}
+                onEndEditing={() => {}}
+                //onChange={(ret) => setInput(ret.nativeEvent.text)}
+                //value={input}
+                style={{ flex: 1 }}
+              />
+            </View>
+          </View>
+      )}
+    </TouchableOpacity>
+    </>
+  );
+};
diff --git a/menu.js b/menu.js
index 73df951..60c57bc 100644
--- a/menu.js
+++ b/menu.js
@@ -5,6 +5,8 @@ import {
   ScrollView,
   useWindowDimensions,
   LayoutAnimation,
+  Text,
+  TouchableOpacity,
 } from "react-native";
 import Constants from "expo-constants";
 import {
@@ -30,6 +32,8 @@ import { CarouselBox } from "./components/Menu/Carousel/CarouselBox";
 import { CarouselTypeChanger } from "./components/Menu/Carousel/CarouselTypeChanger";
 import { useUserPosition } from "./stateBox/useUserPosition";
 import { AS } from "./storageControl";
+import { Ionicons } from "@expo/vector-icons";
+import { SearchUnitBox } from "./components/Menu/RailScope/SearchUnitBox";
 configureReanimatedLogger({
   level: ReanimatedLogLevel.error, // Set the log level to error
   strict: true, // Reanimated runs in strict mode by default
@@ -209,13 +213,32 @@ export default function Menu(props) {
       }}
     >
       <StatusbarDetect />
-      <TitleBar />
+      {!mapMode ? (
+        <TitleBar />
+      ) : (
+        <Text
+          style={{
+            fontSize: 30,
+            color: "#0099CC",
+            fontWeight: "bold",
+            position: "absolute",
+            top: 0,
+            zIndex: 1000,
+            fontStyle: "italic",
+          }}
+        >
+          JRShikoku RailScope
+        </Text>
+      )}
       <ScrollView
         ref={scrollRef}
         snapToStart={false}
         snapToEnd={false}
         decelerationRate={"normal"}
         snapToOffsets={[mapHeight - 80]}
+        contentContainerStyle={{
+          position: "relative",
+        }}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={(e) => {
           console.log(e.nativeEvent.velocity);
@@ -302,7 +325,7 @@ export default function Menu(props) {
             {...{
               locationStatus,
               position,
-              mapsRef,
+              mapsRef,scrollRef,
               stationListMode,
               setStationListMode,
               setSelectedCurrentStation: setListIndex,
@@ -310,7 +333,7 @@ export default function Menu(props) {
               setMapMode,
             }}
           />
-        )}
+       )}
 
         {originalStationList.length != 0 && (
           <>
@@ -322,7 +345,7 @@ export default function Menu(props) {
                 setListIndex,
                 listIndex,
                 navigate,
-                stationListMode
+                stationListMode,
               }}
             />
             {listUpStation[listIndex] && (