検索ボタン暫定実装

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>
   );
 };

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>
+    </>
+  );
+};

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] && (