3 files changed, 70 insertions, 2 deletions
diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx
new file mode 100644
index 00000000..ac5d8887
--- /dev/null
+++ b/src/screens/search/DiscoverUsers.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {FlatList, StatusBar, StyleSheet} 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';
+import {SearchBackground} from '../../components';
+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';
+
+type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
+type DiscoverUsersNavigationProps = StackNavigationProp<
+  MainStackParams,
+  'DiscoverUsers'
+>;
+
+interface DiscoverUsersProps {
+  route: DiscoverUsersRouteProps;
+}
+
+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[] = [];
+  return (
+    <SearchBackground>
+      <StatusBar barStyle="light-content" />
+      <SafeAreaView>
+        <FlatList
+          data={users}
+          ListHeaderComponent={
+            <Text style={styles.headerText}>{searchCategory}</Text>
+          }
+          renderItem={({item: user}: {item: ProfilePreviewType}) => (
+            <ExploreSectionUser key={user.id} user={user} style={styles.user} />
+          )}
+        />
+      </SafeAreaView>
+    </SearchBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {width: SCREEN_WIDTH, backgroundColor: 'lightgreen'},
+  headerText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: normalize(18),
+    lineHeight: normalize(35),
+  },
+  scrollView: {
+    width: SCREEN_WIDTH * 0.9,
+    height: SCREEN_HEIGHT * 0.8,
+    alignItems: 'center',
+    marginHorizontal: '5%',
+    paddingBottom: '10%',
+  },
+  scrollViewContainer: {marginTop: HeaderHeight},
+  user: {
+    marginHorizontal: 5,
+  },
+});
+
+export default DiscoverUsers;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index e4ac4c9e..5c59bc0e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -14,7 +14,7 @@ import Animated, {Easing, timing} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {
-  Explore,
+  SearchCategories,
   RecentSearches,
   SearchBar,
   SearchResultList,
@@ -173,7 +173,7 @@ const SearchScreen: React.FC = () => {
           <Text style={styles.helperText}>
             Try searching for people, groups, or clubs
           </Text>
-          <Explore />
+          <SearchCategories />
           <SearchResultsBackground {...{top}}>
             {results === undefined && recents.length !== 0 ? (
               <RecentSearches
diff --git a/src/screens/search/index.ts b/src/screens/search/index.ts
index d5eb9c3e..d127db72 100644
--- a/src/screens/search/index.ts
+++ b/src/screens/search/index.ts
@@ -1,2 +1,3 @@
 export {default as SearchScreen} from './SearchScreen';
 export {default as RequestContactsAccess} from './RequestContactsAccess';
+export {default as DiscoverUsers} from './DiscoverUsers';