iOSでキーボード関係でクラッシュするバグを修正

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -44,8 +44,9 @@ export const CarouselTypeChanger = ({
   };
   return (
     <KeyboardAvoidingView
-      behavior="padding"
+      behavior="position"
-      keyboardVerticalOffset={80}
+      contentContainerStyle={{ flex: 1, flexDirection: "row" }}
+      keyboardVerticalOffset={mapMode ? 0 : 45}
       enabled={Platform.OS === "ios"}
       style={{
         width: "100%",

components/Menu/RailScope/SearchUnitBox.tsx

@@ -12,8 +12,9 @@ import Ionicons from "react-native-vector-icons/Ionicons";
 import { useWindowDimensions } from "react-native";
 import lineColorList from "@/assets/originData/lineColorList";
 import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
-export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
+export const SearchUnitBox = ({ isSearchMode, setisSearchMode, }) => {
   const { height, width } = useWindowDimensions();
+  const [input, setInput] = React.useState("");
   return (
     <>
       <TouchableOpacity
@@ -39,16 +40,35 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
       >
         {!isSearchMode && <Ionicons name="search" size={30} color="white" />}
         {!!isSearchMode && (
-          <View style={{ backgroundColor: "#0099CC" }}>
+          <View style={{ backgroundColor: "#0099CC",flexDirection:"column",display:"flex",flex:1 }}>
-            
+              <View
+                style={{
+                  backgroundColor: "white",
+                  borderRadius: 25,
+                  height: 30,
+                  paddingRight: 10,
+                  paddingLeft: 10,
+                  flex: 1,
+                }}
+              >
+                <TextInput
+                  placeholder="駅名を入力してフィルタリングします。"
+                  onEndEditing={() => {}}
+                  onChange={(ret) => setInput(ret.nativeEvent.text)}
+                  value={input}
+                  style={{ flex: 1 }}
+                />
+              </View>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <TouchableOpacity onPress={() => {
+              <TouchableOpacity
-                LayoutAnimation.configureNext({
+                onPress={() => {
-                  duration: 100,
+                  LayoutAnimation.configureNext({
-                  update: { type: "easeInEaseOut", springDamping: 0.6 },
+                    duration: 100,
-                });
+                    update: { type: "easeInEaseOut", springDamping: 0.6 },
-                setisSearchMode(false);
+                  });
-              }}>
+                  setisSearchMode(false);
+                }}
+              >
                 <Ionicons
                   name="arrow-back"
                   size={20}
@@ -60,7 +80,8 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
                 <TouchableOpacity
                   style={{
                     flex: 1,
-                    backgroundColor: lineColorList[stationIDPair[lineList_LineWebID[d]]],
+                    backgroundColor:
+                      lineColorList[stationIDPair[lineList_LineWebID[d]]],
                     padding: 5,
                     marginHorizontal: 2,
                     borderRadius: 10,
@@ -68,7 +89,12 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
                     borderWidth: 1,
                     borderStyle: "solid",
                     alignItems: "center",
-                    opacity: isSearchMode == stationIDPair[lineList_LineWebID[d]] ? 1 : !isSearchMode ? 1 : 0.5,
+                    opacity:
+                      isSearchMode == stationIDPair[lineList_LineWebID[d]]
+                        ? 1
+                        : !isSearchMode
+                        ? 1
+                        : 0.5,
                     zIndex: 10,
                   }}
                   onPress={() => {
@@ -86,25 +112,6 @@ export const SearchUnitBox = ({ isSearchMode, setisSearchMode }) => {
                   </Text>
                 </TouchableOpacity>
               ))}
-              {/* <View
-              style={{
-                backgroundColor: "white",
-                borderRadius: 25,
-                height: 30,
-                paddingRight: 10,
-                paddingLeft: 10,
-                flex: 1,
-              }}
-            >
-              <TextInput
-                placeholder="駅名を入力してフィルタリングします。"
-                //onFocus={() => setKeyBoardVisible(true)}
-                onEndEditing={() => {}}
-                //onChange={(ret) => setInput(ret.nativeEvent.text)}
-                //value={input}
-                style={{ flex: 1 }}
-              />
-            </View> */}
             </View>
           </View>
         )}

menu.js

@@ -34,7 +34,6 @@ import { useUserPosition } from "./stateBox/useUserPosition";
 import { AS } from "./storageControl";
 import { lineList_LineWebID } from "./lib/getStationList";
 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
@@ -275,9 +274,9 @@ export default function Menu(props) {
         snapToEnd={false}
         decelerationRate={"normal"}
         snapToOffsets={[mapHeight - 80]}
-        contentContainerStyle={{
+        // contentContainerStyle={{
-          position: "relative",
+        //   position: "relative",
-        }}
+        // }}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={(e) => {
           if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
@@ -291,7 +290,7 @@ export default function Menu(props) {
       >
         <MapView
           ref={mapsRef}
-          style={{ width: "100%", height: mapMode ? MapFullHeight : mapHeight }}
+          style={{ width: "100%", height:( mapMode ? MapFullHeight : mapHeight) }}
           showsUserLocation={true}
           loadingEnabled={true}
           showsMyLocationButton={false}