3 files changed, 105 insertions, 1 deletions
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 63a7b9c2..c9c4f27a 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -6,3 +6,4 @@ export {default as GradientBackground} from './GradientBackground';
 export {default as Post} from './post';
 export {default as SocialIcon} from './SocialIcon';
 export {default as TabsGradient} from './TabsGradient';
+export {default as RecentSearches} from '../search/RecentSearches';
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
new file mode 100644
index 00000000..a5c08984
--- /dev/null
+++ b/src/components/search/RecentSearches.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TouchableOpacityProps,
+} from 'react-native';
+import {ProfilePreviewType} from 'src/types';
+import SearchResults from './SearchResults';
+
+interface RecentSearchesProps extends TouchableOpacityProps {
+  sectionTitle: string;
+  sectionButtonTitle: string;
+  recents: Array<ProfilePreviewType>;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
+  return (
+    <>
+      <View style={styles.container}>
+        <Text style={styles.title}>{props.sectionTitle}</Text>
+        {props.sectionButtonTitle && (
+          <TouchableOpacity {...props}>
+            <Text style={styles.clear}>Clear all</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      <SearchResults results={props.recents} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 'bold',
+    flexGrow: 1,
+  },
+  clear: {
+    fontSize: 17,
+    fontWeight: 'bold',
+    color: '#698DD3',
+  },
+});
+
+export default RecentSearches;
diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
index 60c22d41..e65be1f4 100644
--- a/src/components/search/SearchResult.tsx
+++ b/src/components/search/SearchResult.tsx
@@ -9,6 +9,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import RNFetchBlob from 'rn-fetch-blob';
+import AsyncStorage from '@react-native-community/async-storage';
 import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
 
 interface SearchResultProps extends ViewProps {
@@ -48,8 +49,58 @@ const SearchResult: React.FC<SearchResultProps> = ({
     };
   }, [id]);
 
+  /**
+   * Adds a searched user to the recently searched cache if they're tapped on.
+   * Cache maintains 10 recently searched users, popping off the oldest one if
+   * needed to make space.
+   */
+  const addToRecentlyStored = async () => {
+    let user: ProfilePreviewType = {
+      id,
+      username,
+      first_name,
+      last_name,
+    };
+    try {
+      const jsonValue = await AsyncStorage.getItem('@recently_searched_users');
+      let recentlySearchedList =
+        jsonValue != null ? JSON.parse(jsonValue) : null;
+      if (recentlySearchedList) {
+        if (recentlySearchedList.length > 0) {
+          if (
+            recentlySearchedList.some(
+              (saved_user: ProfilePreviewType) => saved_user.id === id,
+            )
+          ) {
+            console.log('User already in recently searched.');
+          } else {
+            if (recentlySearchedList.length >= 10) {
+              recentlySearchedList.pop();
+            }
+            recentlySearchedList.unshift(user);
+          }
+        }
+      } else {
+        recentlySearchedList = [user];
+      }
+      try {
+        let recentlySearchedListString = JSON.stringify(recentlySearchedList);
+        await AsyncStorage.setItem(
+          '@recently_searched_users',
+          recentlySearchedListString,
+        );
+      } catch (e) {
+        console.log(e);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   return (
-    <TouchableOpacity style={[styles.container, style]}>
+    <TouchableOpacity
+      onPress={addToRecentlyStored}
+      style={[styles.container, style]}>
       <Image
         style={styles.avatar}
         source={