From a4e85ff2e6bccb35ecf04f6bdf51ac193585b765 Mon Sep 17 00:00:00 2001
From: harukin-OneMix4 <harukin@haruk.in>
Date: Fri, 29 Dec 2023 03:46:48 +0900
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E5=88=97=E7=95=AA=E6=A4=9C=E7=B4=A2?=
 =?UTF-8?q?=E3=82=B7=E3=82=B9=E3=83=86=E3=83=A0=E3=81=AB=E3=83=95=E3=82=A3?=
 =?UTF-8?q?=E3=83=AB=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0=E5=85=A5=E5=8A=9B?=
 =?UTF-8?q?=E6=AC=84=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.js                            |  4 ++-
 components/AllTrainDiagramView.js | 57 ++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/App.js b/App.js
index 05c16c5..76d74dd 100644
--- a/App.js
+++ b/App.js
@@ -116,7 +116,9 @@ export function AppContainer() {
 
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }}>
-      <Tab.Navigator detachInactiveScreens={false}>
+      <Tab.Navigator
+        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
+      >
         <Tab.Screen
           name="login"
           options={{
diff --git a/components/AllTrainDiagramView.js b/components/AllTrainDiagramView.js
index 66e422a..c37a048 100644
--- a/components/AllTrainDiagramView.js
+++ b/components/AllTrainDiagramView.js
@@ -6,6 +6,10 @@ import {
   Linking,
   ScrollView,
   FlatList,
+  KeyboardAvoidingView,
+  TextInput,
+  Platform,
+  Keyboard,
 } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -30,6 +34,22 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
     () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
     []
   );
+  const [input, setInput] = useState(""); // 文字入力
+  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+      setKeyBoardVisible(true);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyBoardVisible(false);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
 
   const openTrainInfo = (d) => {
     const train = customTrainDataDetector(d);
@@ -60,13 +80,46 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
   return (
     <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
       <FlatList
-        data={keyList}
+        style={{ flex: 1 }}
+        data={keyList?.filter((d) => d.includes(input))}
         renderItem={({ item }) => (
           <Item openTrainInfo={openTrainInfo} id={item} />
         )}
         keyExtractor={(item) => item}
         initialNumToRender={100}
       />
+      <KeyboardAvoidingView
+        behavior="padding"
+        keyboardVerticalOffset={80}
+        enabled={Platform.OS === "ios"}
+      >
+        <View
+          style={{
+            height: 35,
+            margin: 5,
+            alignItems: "center",
+            backgroundColor: "#F4F4F4",
+            flexDirection: "row",
+            paddingLeft: 10,
+            paddingRight: 10,
+            borderRadius: 25,
+            borderColor: "#F4F4F4",
+          }}
+        >
+          <TextInput
+            placeholder="列番を入力してフィルタリングします。"
+            onFocus={() => {
+              setKeyBoardVisible(true);
+            }}
+            onEndEditing={() => {}}
+            onChange={(ret) => {
+              setInput(ret.nativeEvent.text);
+            }}
+            value={input}
+            style={{ flex: 1 }}
+          />
+        </View>
+      </KeyboardAvoidingView>
 
       <TouchableOpacity
         style={{
@@ -77,6 +130,8 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
           margin: 10,
           borderRadius: 5,
           alignItems: "center",
+          display:
+            Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
         }}
         onPress={() => navigate("menu")}
       >