2 files changed, 44 insertions, 33 deletions

diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx
index ac5d8887..921c8b79 100644
--- a/src/screens/search/DiscoverUsers.tsx
+++ b/src/screens/search/DiscoverUsers.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import {FlatList, StatusBar, StyleSheet} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {FlatList, StatusBar, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
@@ -8,8 +8,9 @@ import {RouteProp} from '@react-navigation/native';
 import {MainStackParams} from '../../routes';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {normalize} from '../../utils';
-import {ProfilePreviewType} from 'src/types';
-import ExploreSectionUser from 'src/components/search/ExploreSectionUser';
+import {ProfilePreviewType} from '../../types';
+import ExploreSectionUser from '../../components/search/ExploreSectionUser';
+import {getDiscoverUsers} from '../../services/ExploreService';
 
 type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
 type DiscoverUsersNavigationProps = StackNavigationProp<
@@ -22,21 +23,33 @@ interface DiscoverUsersProps {
 }
 
 const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
-  const {searchCategory} = route.params;
-  // Make a function call to server to return users list in this search category
-  const users: ProfilePreviewType[] = [];
+  const {id, name} = route.params.searchCategory;
+  const [users, setUsers] = useState<ProfilePreviewType[]>();
+
+  useEffect(() => {
+    const loadData = async () => {
+      setUsers(await getDiscoverUsers(id));
+    };
+    loadData();
+  }, []);
+
+  const _renderItem = ({item: user}: {item: ProfilePreviewType}) => (
+    <ExploreSectionUser key={user.id} user={user} style={styles.user} />
+  );
+
   return (
     <SearchBackground>
       <StatusBar barStyle="light-content" />
       <SafeAreaView>
+        <Text style={styles.headerText}>{name}</Text>
         <FlatList
           data={users}
-          ListHeaderComponent={
-            <Text style={styles.headerText}>{searchCategory}</Text>
-          }
-          renderItem={({item: user}: {item: ProfilePreviewType}) => (
-            <ExploreSectionUser key={user.id} user={user} style={styles.user} />
-          )}
+          style={styles.scrollView}
+          contentContainerStyle={styles.contentContainerStyle}
+          columnWrapperStyle={styles.columnWrapperStyle}
+          numColumns={3}
+          keyExtractor={(item) => item.id}
+          renderItem={_renderItem}
         />
       </SafeAreaView>
     </SearchBackground>
@@ -44,23 +57,33 @@ const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
 };
 
 const styles = StyleSheet.create({
-  header: {width: SCREEN_WIDTH, backgroundColor: 'lightgreen'},
+  header: {width: SCREEN_WIDTH},
   headerText: {
+    top: HeaderHeight,
+    textAlign: 'center',
     color: '#fff',
     fontWeight: '600',
     fontSize: normalize(18),
     lineHeight: normalize(35),
+    marginBottom: '5%',
   },
   scrollView: {
-    width: SCREEN_WIDTH * 0.9,
-    height: SCREEN_HEIGHT * 0.8,
-    alignItems: 'center',
-    marginHorizontal: '5%',
-    paddingBottom: '10%',
+    top: HeaderHeight,
+    width: SCREEN_WIDTH * 0.95,
+    height: SCREEN_HEIGHT * 0.75,
+    alignSelf: 'center',
+    flexDirection: 'column',
   },
-  scrollViewContainer: {marginTop: HeaderHeight},
   user: {
-    marginHorizontal: 5,
+    margin: '2%',
+  },
+  columnWrapperStyle: {
+    width: SCREEN_WIDTH * 0.95,
+    justifyContent: 'space-between',
+  },
+  contentContainerStyle: {
+    width: SCREEN_WIDTH * 0.95,
+    paddingBottom: 30,
   },
 });
 
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 5c59bc0e..87efc3fd 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -170,9 +170,6 @@ const SearchScreen: React.FC = () => {
             value={query}
             {...{top, searching}}
           />
-          <Text style={styles.helperText}>
-            Try searching for people, groups, or clubs
-          </Text>
           <SearchCategories />
           <SearchResultsBackground {...{top}}>
             {results === undefined && recents.length !== 0 ? (
@@ -221,15 +218,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     flexGrow: 1,
   },
-  helperText: {
-    fontWeight: '400',
-    fontSize: 14,
-    lineHeight: normalize(16.71),
-    color: '#828282',
-    marginBottom: '2%',
-    margin: '2.5%',
-    textAlign: 'center',
-  },
   clear: {
     fontSize: 17,
     fontWeight: 'bold',