Add profile, group, and Courses cards

Views/Search.js

@@ -1,8 +1,9 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { View, ScrollView, StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
 import UserName from "../components/UserName";
+import ProfileCard from "../components/ProfileCard";
 import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
 
 const Search = () => {
@@ -11,36 +12,40 @@ const Search = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(() => {
-        API.searchProfiles('').then((data)=>{
+        API.searchProfiles('').then((data) => {
             setProfiles(data.profiles || []);
         });
     }, [])
-    
+
     const onChangeSearch = query => {
         setSearchQuery(query);
-        if(queryTimer) clearTimeout(queryTimer);
-        let timerId = setTimeout(()=>{
-            API.searchProfiles(query).then((data)=>{
+        if (queryTimer) clearTimeout(queryTimer);
+        let timerId = setTimeout(() => {
+            API.searchProfiles(query).then((data) => {
                 setProfiles(data.profiles || []);
             });
         }, 300);
         setQueryTimer(timerId);
     };
     const renderProfile = (({ item }) => {
-        return (<ProfileSmallHeader profileObj={item} />);
+        return (<ProfileCard profileObj={item} />);
     });
     return (
-        <SafeAreaView style={styles.container}>
+        <SafeAreaView >
             <Searchbar
                 placeholder="Search Users"
                 onChangeText={onChangeSearch}
                 value={searchQuery}
+                elevation={3}
             />
             <FlatList
-                    data={profiles}
-                    renderItem={renderProfile}
-                    keyExtractor={item => item._id}
-                />
+                contentContainerStyle={styles.container}
+                numColumns={2}
+                columnWrapperStyle={{justifyContent: "space-evenly"}}
+                data={profiles}
+                renderItem={renderProfile}
+                keyExtractor={item => item._id}
+            />
         </SafeAreaView>
     )
 }
@@ -49,7 +54,6 @@ export default Search;
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
-        backgroundColor: "#edf2f7",
+        padding: 5,
     },
 });