[TMA-160] Search Page Suggestions ("Explore") UI (#30)

* Fix require cycle in Checkpoint.tsx

* Create file structure for search

* Add react-native-vector-icons to project

* Create search page UI

* Create search page UI

* [TMA-65] Onboarding Link Social Media UI (#29)

* Basic setup for SocialMediaLinker component

* Added social media icons

* Displayed 3 main social components

* Layout components in a row

* Added base Show More/Less button

* Display all 9 socials with Show More button

* Added different font colors for each linker

* Realized that the check doesn't replace the text

* Added type-checking to some constants

* Updated state name

* Fixed Checkpoint.tsx merge issue

* Removed unnecessary path element

* Fixed type issues on Verification.tsx

* Create file structure for search

* Add react-native-vector-icons to project

* Create search page UI

* Replace avatars with image placeholder

* Add search bar placeholder

Co-authored-by: Justin Shillingford <jgs272@cornell.edu>

5 files changed, 85 insertions, 25 deletions

diff --git a/src/screens/index.ts b/src/screens/index.ts
index 5dd3007a..13a9799c 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1,3 +1,4 @@
 export * from './main';
 export * from './onboarding';
 export * from './profile';
+export * from './search';
diff --git a/src/screens/main/Search.tsx b/src/screens/main/Search.tsx
deleted file mode 100644
index 19e35d04..00000000
--- a/src/screens/main/Search.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import {Text} from 'react-native-animatable';
-import {StyleSheet} from 'react-native';
-import {GradientBackground} from '../../components';
-
-/**
- * Search Screen for user recommendations and a search
- * tool to allow user to find other users
- */
-
-const Search: React.FC = () => {
-  return (
-    <GradientBackground>
-      <Text style={styles.text}> Search for people here 👀 </Text>
-    </GradientBackground>
-  );
-};
-const styles = StyleSheet.create({
-  text: {
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-});
-export default Search;
diff --git a/src/screens/main/index.ts b/src/screens/main/index.ts
index fb1bf49b..b15f76da 100644
--- a/src/screens/main/index.ts
+++ b/src/screens/main/index.ts
@@ -1,4 +1,3 @@
 export {default as Home} from './Home';
 export {default as Notifications} from './Notifications';
-export {default as Search} from './Search';
 export {default as Upload} from './Upload';
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';