2 files changed, 84 insertions, 0 deletions
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
new file mode 100644
index 00000000..8ef56b73
--- /dev/null
+++ b/src/screens/search/SearchScreen.tsx
@@ -0,0 +1,83 @@
+import React, {useState} from 'react';
+import {
+  StatusBar,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+} from 'react-native';
+import {SearchBar, SuggestedSection, SearchBackground} from '../../components';
+import {SCREEN_HEIGHT} from '../../utils';
+
+/**
+ * Search Screen for user recommendations and a search
+ * tool to allow user to find other users
+ */
+
+const SearchScreen: React.FC = () => {
+  const sections: Array<string> = [
+    'People you follow',
+    'People you may know',
+    'Trending in sports',
+    'Trending on Tagg',
+    'Trending in music',
+  ];
+  // dummy user data
+  const users: Array<string> = [
+    'Sam Davis',
+    'Becca Smith',
+    'Ann Taylor',
+    'Clara Johnson',
+    'Sarah Jung',
+    'Lila Hernandez',
+  ];
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const handleFocus = () => {
+    setIsSearching(true);
+  };
+  const handleBlur = () => {
+    setIsSearching(false);
+  };
+  return (
+    <SearchBackground style={styles.screen}>
+      <StatusBar />
+      <SafeAreaView>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <Text style={styles.header}>Explore</Text>
+          <SearchBar
+            active={isSearching}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+          {!isSearching && (
+            <View style={styles.content}>
+              {sections.map((title) => (
+                <SuggestedSection key={title} title={title} users={users} />
+              ))}
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SearchBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    paddingTop: 50,
+    paddingBottom: SCREEN_HEIGHT / 10,
+    paddingHorizontal: 15,
+  },
+  content: {
+    paddingVertical: 20,
+  },
+  header: {
+    fontWeight: 'bold',
+    fontSize: 24,
+    color: '#fff',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+});
+export default SearchScreen;
diff --git a/src/screens/search/index.ts b/src/screens/search/index.ts
new file mode 100644
index 00000000..b6680aa4
--- /dev/null
+++ b/src/screens/search/index.ts
@@ -0,0 +1 @@
+export {default as SearchScreen} from './SearchScreen';