全列番検索システムにフィルタリング入力欄を追加

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={{

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