Added Searching with Roll no

app/navigation/LoginNavigation.js

@@ -9,6 +9,7 @@ import Student_Login from "../screens/Student_Login";
 import Student_Portal from "../screens/Student_Portal";
 import PersonalDocs from "../screens/PersonalDocs";
 import Staff_Portal from "../screens/Staff_Portal";
+import SearchStudent from "../screens/SearchStudent";
 const Stack = createStackNavigator();
 
 export default function LoginNavigation(props) {
@@ -23,6 +24,7 @@ export default function LoginNavigation(props) {
         <Stack.Screen name="Student_Portal" component={Student_Portal} />
         <Stack.Screen name="Staff_Portal" component={Staff_Portal} />
         <Stack.Screen name="Personal_Docs" component={PersonalDocs} />
+        <Stack.Screen name="Search_Student" component={SearchStudent} />
       </Stack.Navigator>
     </NavigationContainer>
   );

app/screens/SearchStudent.js

@@ -0,0 +1,124 @@
+import React, { Component } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  View,
+  TextInput,
+} from "react-native";
+import Card from "../component/Card";
+export default class SearchStudent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoading: true,
+      text: "",
+      data: [],
+    };
+
+    this.arrayholder = [];
+  }
+
+  componentDidMount() {
+    return fetch("https://jsonplaceholder.typicode.com/users")
+      .then((response) => response.json())
+      .then((responseJson) => {
+        this.setState(
+          {
+            isLoading: false,
+            data: responseJson,
+          },
+          () => {
+            this.arrayholder = responseJson;
+          }
+        );
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  searchData(text) {
+    const newData = this.arrayholder.filter((item) => {
+      const itemData = item.name.toUpperCase();
+      const textData = text.toUpperCase();
+      return itemData.indexOf(textData) > -1;
+    });
+
+    this.setState({
+      data: newData,
+      text,
+    });
+  }
+
+  itemSeparator = () => {
+    return (
+      <View
+        style={{
+          height: 0.5,
+          width: "100%",
+          backgroundColor: "#000",
+        }}
+      />
+    );
+  };
+
+  render() {
+    if (this.state.isLoading) {
+      return (
+        <View style={{ flex: 1, paddingTop: 20 }}>
+          <ActivityIndicator />
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.MainContainer}>
+        <TextInput
+          style={styles.textInput}
+          onChangeText={(text) => this.searchData(text)}
+          value={this.state.text}
+          underlineColorAndroid="transparent"
+          placeholder="Enter the Roll no of the Student"
+        />
+
+        <FlatList
+          data={this.state.data}
+          keyExtractor={(item, index) => index.toString()}
+          ItemSeparatorComponent={this.itemSeparator}
+          renderItem={({ item }) => (
+            <Card
+              title={item.name}
+              subtitle={item.email}
+              onPress={() => console.log("Clicked ", item.name)}
+            />
+          )}
+          style={{ marginTop: 10 }}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  MainContainer: {
+    justifyContent: "center",
+    flex: 1,
+    marginTop: 40,
+  },
+
+  row: {
+    fontSize: 18,
+    padding: 12,
+  },
+
+  textInput: {
+    textAlign: "center",
+    height: 42,
+    borderWidth: 1,
+    borderColor: "#009688",
+    borderRadius: 8,
+    backgroundColor: "#FFFF",
+  },
+});

app/screens/Staff_Portal.js

@@ -16,7 +16,7 @@ function Staff_Portal(props) {
           title="Search Student"
           subtitle="Students OD Docs can be searched based on their Reg no and Date wise"
           image={require("../../assets/logo-red.png")}
-          onPress={() => props.navigation.navigate("OD_Form")}
+          onPress={() => props.navigation.navigate("Search_Student")}
         ></Card>
       </View>
     </ScrollView>