Merge pull request #293 from leonyjiang/tma683-dynamic-search-placeholder

[TMA-683] Dynamic Search Suggestions

8 files changed, 253 insertions, 118 deletions

diff --git a/ios/Frontend.xcodeproj/project.pbxproj b/ios/Frontend.xcodeproj/project.pbxproj
index f763dd62..4cd4db33 100644
--- a/ios/Frontend.xcodeproj/project.pbxproj
+++ b/ios/Frontend.xcodeproj/project.pbxproj
@@ -442,7 +442,7 @@
 			name = "[CP-User] [RNFB] Core Configuration";
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "#!/usr/bin/env bash\n#\n# Copyright (c) 2016-present Invertase Limited & Contributors\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this library except in compliance with the License.\n# You may obtain a copy of the License at\n#\n#   http://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\nset -e\n\n_MAX_LOOKUPS=2;\n_SEARCH_RESULT=''\n_RN_ROOT_EXISTS=''\n_CURRENT_LOOKUPS=1\n_JSON_ROOT=\"'react-native'\"\n_JSON_FILE_NAME='firebase.json'\n_JSON_OUTPUT_BASE64='e30=' # { }\n_CURRENT_SEARCH_DIR=${PROJECT_DIR}\n_PLIST_BUDDY=/usr/libexec/PlistBuddy\n_TARGET_PLIST=\"${BUILT_PRODUCTS_DIR}/${INFOPLIST_PATH}\"\n_DSYM_PLIST=\"${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Info.plist\"\n\n# plist arrays\n_PLIST_ENTRY_KEYS=()\n_PLIST_ENTRY_TYPES=()\n_PLIST_ENTRY_VALUES=()\n\nfunction setPlistValue {\n  echo \"info:      setting plist entry '$1' of type '$2' in file '$4'\"\n  ${_PLIST_BUDDY} -c \"Add :$1 $2 '$3'\" $4 || echo \"info:      '$1' already exists\"\n}\n\nfunction getFirebaseJsonKeyValue () {\n  if [[ ${_RN_ROOT_EXISTS} ]]; then\n    ruby -e \"require 'rubygems';require 'json'; output=JSON.parse('$1'); puts output[$_JSON_ROOT]['$2']\"\n  else\n    echo \"\"\n  fi;\n}\n\nfunction jsonBoolToYesNo () {\n  if [[ $1 == \"false\" ]]; then\n    echo \"NO\"\n  elif [[ $1 == \"true\" ]]; then\n    echo \"YES\"\n  else echo \"NO\"\n  fi\n}\n\necho \"info: -> RNFB build script started\"\necho \"info: 1) Locating ${_JSON_FILE_NAME} file:\"\n\nif [[ -z ${_CURRENT_SEARCH_DIR} ]]; then\n  _CURRENT_SEARCH_DIR=$(pwd)\nfi;\n\nwhile true; do\n  _CURRENT_SEARCH_DIR=$(dirname \"$_CURRENT_SEARCH_DIR\")\n  if [[ \"$_CURRENT_SEARCH_DIR\" == \"/\" ]] || [[ ${_CURRENT_LOOKUPS} -gt ${_MAX_LOOKUPS} ]]; then break; fi;\n  echo \"info:      ($_CURRENT_LOOKUPS of $_MAX_LOOKUPS) Searching in '$_CURRENT_SEARCH_DIR' for a ${_JSON_FILE_NAME} file.\"\n  _SEARCH_RESULT=$(find \"$_CURRENT_SEARCH_DIR\" -maxdepth 2 -name ${_JSON_FILE_NAME} -print | head -n 1)\n  if [[ ${_SEARCH_RESULT} ]]; then\n    echo \"info:      ${_JSON_FILE_NAME} found at $_SEARCH_RESULT\"\n    break;\n  fi;\n  _CURRENT_LOOKUPS=$((_CURRENT_LOOKUPS+1))\ndone\n\nif [[ ${_SEARCH_RESULT} ]]; then\n  _JSON_OUTPUT_RAW=$(cat \"${_SEARCH_RESULT}\")\n  _RN_ROOT_EXISTS=$(ruby -e \"require 'rubygems';require 'json'; output=JSON.parse('$_JSON_OUTPUT_RAW'); puts output[$_JSON_ROOT]\" || echo '')\n\n  if [[ ${_RN_ROOT_EXISTS} ]]; then\n    _JSON_OUTPUT_BASE64=$(python -c 'import json,sys,base64;print(base64.b64encode(json.dumps(json.loads(open('\"'${_SEARCH_RESULT}'\"').read())['${_JSON_ROOT}'])))' || echo \"e30=\")\n  fi\n\n  _PLIST_ENTRY_KEYS+=(\"firebase_json_raw\")\n  _PLIST_ENTRY_TYPES+=(\"string\")\n  _PLIST_ENTRY_VALUES+=(\"$_JSON_OUTPUT_BASE64\")\n\n  # config.messaging_auto_init_enabled\n  _MESSAGING_AUTO_INIT=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"messaging_auto_init_enabled\")\n  if [[ $_MESSAGING_AUTO_INIT ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseMessagingAutoInitEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_MESSAGING_AUTO_INIT\")\")\n  fi\n\n  # config.crashlytics_disable_auto_disabler - undocumented for now - mainly for debugging, document if becomes useful\n  _CRASHLYTICS_AUTO_DISABLE_ENABLED=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"crashlytics_disable_auto_disabler\")\n  if [[ $_CRASHLYTICS_AUTO_DISABLE_ENABLED == \"true\" ]]; then\n    echo \"Disabled Crashlytics auto disabler.\" # do nothing\n  else\n    _PLIST_ENTRY_KEYS+=(\"FirebaseCrashlyticsCollectionEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"NO\")\n  fi\n\n  # config.admob_delay_app_measurement_init\n  _ADMOB_DELAY_APP_MEASUREMENT=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"admob_delay_app_measurement_init\")\n  if [[ $_ADMOB_DELAY_APP_MEASUREMENT == \"true\" ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GADDelayAppMeasurementInit\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"YES\")\n  fi\n\n  # config.admob_ios_app_id\n  _ADMOB_IOS_APP_ID=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"admob_ios_app_id\")\n  if [[ $_ADMOB_IOS_APP_ID ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GADApplicationIdentifier\")\n    _PLIST_ENTRY_TYPES+=(\"string\")\n    _PLIST_ENTRY_VALUES+=(\"$_ADMOB_IOS_APP_ID\")\n  fi\nelse\n  _PLIST_ENTRY_KEYS+=(\"firebase_json_raw\")\n  _PLIST_ENTRY_TYPES+=(\"string\")\n  _PLIST_ENTRY_VALUES+=(\"$_JSON_OUTPUT_BASE64\")\n  echo \"warning:   A firebase.json file was not found, whilst this file is optional it is recommended to include it to configure firebase services in React Native Firebase.\"\nfi;\n\necho \"info: 2) Injecting Info.plist entries: \"\n\n# Log out the keys we're adding\nfor i in \"${!_PLIST_ENTRY_KEYS[@]}\"; do\n  echo \"    ->  $i) ${_PLIST_ENTRY_KEYS[$i]}\" \"${_PLIST_ENTRY_TYPES[$i]}\" \"${_PLIST_ENTRY_VALUES[$i]}\"\ndone\n\nfor plist in \"${_TARGET_PLIST}\" \"${_DSYM_PLIST}\" ; do\n  if [[ -f \"${plist}\" ]]; then\n\n    # paths with spaces break the call to setPlistValue. temporarily modify\n    # the shell internal field separator variable (IFS), which normally\n    # includes spaces, to consist only of line breaks\n    oldifs=$IFS\n    IFS=\"\n\"\n\n    for i in \"${!_PLIST_ENTRY_KEYS[@]}\"; do\n      setPlistValue \"${_PLIST_ENTRY_KEYS[$i]}\" \"${_PLIST_ENTRY_TYPES[$i]}\" \"${_PLIST_ENTRY_VALUES[$i]}\" \"${plist}\"\n    done\n\n    # restore the original internal field separator value\n    IFS=$oldifs\n  else\n    echo \"warning:   A Info.plist build output file was not found (${plist})\"\n  fi\ndone\n\necho \"info: <- RNFB build script finished\"\n";
+			shellScript = "#!/usr/bin/env bash\n#\n# Copyright (c) 2016-present Invertase Limited & Contributors\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this library except in compliance with the License.\n# You may obtain a copy of the License at\n#\n#   http://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\nset -e\n\n_MAX_LOOKUPS=2;\n_SEARCH_RESULT=''\n_RN_ROOT_EXISTS=''\n_CURRENT_LOOKUPS=1\n_JSON_ROOT=\"'react-native'\"\n_JSON_FILE_NAME='firebase.json'\n_JSON_OUTPUT_BASE64='e30=' # { }\n_CURRENT_SEARCH_DIR=${PROJECT_DIR}\n_PLIST_BUDDY=/usr/libexec/PlistBuddy\n_TARGET_PLIST=\"${BUILT_PRODUCTS_DIR}/${INFOPLIST_PATH}\"\n_DSYM_PLIST=\"${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Info.plist\"\n\n# plist arrays\n_PLIST_ENTRY_KEYS=()\n_PLIST_ENTRY_TYPES=()\n_PLIST_ENTRY_VALUES=()\n\nfunction setPlistValue {\n  echo \"info:      setting plist entry '$1' of type '$2' in file '$4'\"\n  ${_PLIST_BUDDY} -c \"Add :$1 $2 '$3'\" $4 || echo \"info:      '$1' already exists\"\n}\n\nfunction getFirebaseJsonKeyValue () {\n  if [[ ${_RN_ROOT_EXISTS} ]]; then\n    ruby -e \"require 'rubygems';require 'json'; output=JSON.parse('$1'); puts output[$_JSON_ROOT]['$2']\"\n  else\n    echo \"\"\n  fi;\n}\n\nfunction jsonBoolToYesNo () {\n  if [[ $1 == \"false\" ]]; then\n    echo \"NO\"\n  elif [[ $1 == \"true\" ]]; then\n    echo \"YES\"\n  else echo \"NO\"\n  fi\n}\n\necho \"info: -> RNFB build script started\"\necho \"info: 1) Locating ${_JSON_FILE_NAME} file:\"\n\nif [[ -z ${_CURRENT_SEARCH_DIR} ]]; then\n  _CURRENT_SEARCH_DIR=$(pwd)\nfi;\n\nwhile true; do\n  _CURRENT_SEARCH_DIR=$(dirname \"$_CURRENT_SEARCH_DIR\")\n  if [[ \"$_CURRENT_SEARCH_DIR\" == \"/\" ]] || [[ ${_CURRENT_LOOKUPS} -gt ${_MAX_LOOKUPS} ]]; then break; fi;\n  echo \"info:      ($_CURRENT_LOOKUPS of $_MAX_LOOKUPS) Searching in '$_CURRENT_SEARCH_DIR' for a ${_JSON_FILE_NAME} file.\"\n  _SEARCH_RESULT=$(find \"$_CURRENT_SEARCH_DIR\" -maxdepth 2 -name ${_JSON_FILE_NAME} -print | head -n 1)\n  if [[ ${_SEARCH_RESULT} ]]; then\n    echo \"info:      ${_JSON_FILE_NAME} found at $_SEARCH_RESULT\"\n    break;\n  fi;\n  _CURRENT_LOOKUPS=$((_CURRENT_LOOKUPS+1))\ndone\n\nif [[ ${_SEARCH_RESULT} ]]; then\n  _JSON_OUTPUT_RAW=$(cat \"${_SEARCH_RESULT}\")\n  _RN_ROOT_EXISTS=$(ruby -e \"require 'rubygems';require 'json'; output=JSON.parse('$_JSON_OUTPUT_RAW'); puts output[$_JSON_ROOT]\" || echo '')\n\n  if [[ ${_RN_ROOT_EXISTS} ]]; then\n    _JSON_OUTPUT_BASE64=$(python -c 'import json,sys,base64;print(base64.b64encode(json.dumps(json.loads(open('\"'${_SEARCH_RESULT}'\"').read())['${_JSON_ROOT}'])))' || echo \"e30=\")\n  fi\n\n  _PLIST_ENTRY_KEYS+=(\"firebase_json_raw\")\n  _PLIST_ENTRY_TYPES+=(\"string\")\n  _PLIST_ENTRY_VALUES+=(\"$_JSON_OUTPUT_BASE64\")\n\n  # config.analytics_auto_collection_enabled\n  _ANALYTICS_AUTO_COLLECTION=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"analytics_auto_collection_enabled\")\n  if [[ $_ANALYTICS_AUTO_COLLECTION ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FIREBASE_ANALYTICS_COLLECTION_ENABLED\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_ANALYTICS_AUTO_COLLECTION\")\")\n  fi\n\n  # config.perf_auto_collection_enabled\n  _PERF_AUTO_COLLECTION=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"perf_auto_collection_enabled\")\n  if [[ $_PERF_AUTO_COLLECTION ]]; then\n    _PLIST_ENTRY_KEYS+=(\"firebase_performance_collection_enabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_PERF_AUTO_COLLECTION\")\")\n  fi\n\n  # config.messaging_auto_init_enabled\n  _MESSAGING_AUTO_INIT=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"messaging_auto_init_enabled\")\n  if [[ $_MESSAGING_AUTO_INIT ]]; then\n    _PLIST_ENTRY_KEYS+=(\"FirebaseMessagingAutoInitEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"$(jsonBoolToYesNo \"$_MESSAGING_AUTO_INIT\")\")\n  fi\n\n  # config.crashlytics_disable_auto_disabler - undocumented for now - mainly for debugging, document if becomes useful\n  _CRASHLYTICS_AUTO_DISABLE_ENABLED=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"crashlytics_disable_auto_disabler\")\n  if [[ $_CRASHLYTICS_AUTO_DISABLE_ENABLED == \"true\" ]]; then\n    echo \"Disabled Crashlytics auto disabler.\" # do nothing\n  else\n    _PLIST_ENTRY_KEYS+=(\"FirebaseCrashlyticsCollectionEnabled\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"NO\")\n  fi\n\n  # config.admob_delay_app_measurement_init\n  _ADMOB_DELAY_APP_MEASUREMENT=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"admob_delay_app_measurement_init\")\n  if [[ $_ADMOB_DELAY_APP_MEASUREMENT == \"true\" ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GADDelayAppMeasurementInit\")\n    _PLIST_ENTRY_TYPES+=(\"bool\")\n    _PLIST_ENTRY_VALUES+=(\"YES\")\n  fi\n\n  # config.admob_ios_app_id\n  _ADMOB_IOS_APP_ID=$(getFirebaseJsonKeyValue \"$_JSON_OUTPUT_RAW\" \"admob_ios_app_id\")\n  if [[ $_ADMOB_IOS_APP_ID ]]; then\n    _PLIST_ENTRY_KEYS+=(\"GADApplicationIdentifier\")\n    _PLIST_ENTRY_TYPES+=(\"string\")\n    _PLIST_ENTRY_VALUES+=(\"$_ADMOB_IOS_APP_ID\")\n  fi\nelse\n  _PLIST_ENTRY_KEYS+=(\"firebase_json_raw\")\n  _PLIST_ENTRY_TYPES+=(\"string\")\n  _PLIST_ENTRY_VALUES+=(\"$_JSON_OUTPUT_BASE64\")\n  echo \"warning:   A firebase.json file was not found, whilst this file is optional it is recommended to include it to configure firebase services in React Native Firebase.\"\nfi;\n\necho \"info: 2) Injecting Info.plist entries: \"\n\n# Log out the keys we're adding\nfor i in \"${!_PLIST_ENTRY_KEYS[@]}\"; do\n  echo \"    ->  $i) ${_PLIST_ENTRY_KEYS[$i]}\" \"${_PLIST_ENTRY_TYPES[$i]}\" \"${_PLIST_ENTRY_VALUES[$i]}\"\ndone\n\nfor plist in \"${_TARGET_PLIST}\" \"${_DSYM_PLIST}\" ; do\n  if [[ -f \"${plist}\" ]]; then\n\n    # paths with spaces break the call to setPlistValue. temporarily modify\n    # the shell internal field separator variable (IFS), which normally\n    # includes spaces, to consist only of line breaks\n    oldifs=$IFS\n    IFS=\"\n\"\n\n    for i in \"${!_PLIST_ENTRY_KEYS[@]}\"; do\n      setPlistValue \"${_PLIST_ENTRY_KEYS[$i]}\" \"${_PLIST_ENTRY_TYPES[$i]}\" \"${_PLIST_ENTRY_VALUES[$i]}\" \"${plist}\"\n    done\n\n    # restore the original internal field separator value\n    IFS=$oldifs\n  else\n    echo \"warning:   A Info.plist build output file was not found (${plist})\"\n  fi\ndone\n\necho \"info: <- RNFB build script finished\"\n";
 		};
 		5369A53AD507805BDB117490 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 5e3a1e64..1a855f20 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   StyleSheet,
   TextInput,
@@ -13,13 +13,14 @@ import {
 import Animated, {interpolate} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {normalize} from 'react-native-elements';
-import {SCREEN_HEIGHT} from '../../utils';
+import {SCREEN_HEIGHT, getSearchSuggestions} from '../../utils';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
   top: Animated.Value<number>;
+  searching: boolean;
 }
 const SearchBar: React.FC<SearchBarProps> = ({
   onFocus,
@@ -27,6 +28,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
+  searching,
   top,
 }) => {
   const handleSubmit = (
@@ -35,9 +37,76 @@ const SearchBar: React.FC<SearchBarProps> = ({
     e.preventDefault();
     Keyboard.dismiss();
   };
+  const DEFAULT_PLACEHOLDER: string = 'Search';
+  // the list of suggestions to cycle through. TODO: get this from the backend
+  const SEARCH_SUGGESTIONS: string[] = getSearchSuggestions();
+  /*
+   * index & id of current placeholder, used in selecting next placeholder. -1
+   * indicates DEFAULT_PLACEHOLDER. TODO: make it appear more random by tracking
+   * last 3-5 ids & use longer list of placeholders
+   */
+  const [placeholderId, setPlaceholderId] = useState<number>(-1);
+  // the current placeholder
+  const [placeholder, setPlaceholder] = useState<string>(DEFAULT_PLACEHOLDER);
+
+  /*
+   * Utility function that generates a random integer in [0, xCeil).
+   *
+   * @param xCeil - the exclusive ceiling (getRandomInt(2) => 0 or 1, not 2)
+   * @returns a random integer in the range [0, xCeil)
+   */
+  const getRandomInt = (xCeil: number): number => {
+    return Math.floor(Math.random() * Math.floor(xCeil));
+  };
+
+  /*
+   * Handler for `placeholderChangeInterval` that sets the next placeholderId.
+   */
+  const updatePlaceholder = () => {
+    let nextId: number = getRandomInt(SEARCH_SUGGESTIONS.length);
+    while (nextId === placeholderId) {
+      nextId = getRandomInt(SEARCH_SUGGESTIONS.length);
+    }
+    // TODO: FIGURE OUT WHY CHANGES IN placeholderId ARE NOT REFLECTED HERE
+    // my thought: the value is set when the function is defined, so it keeps
+    // its inital value of -1 forever.
+    console.log(`Previous ID: ${placeholderId}`);
+    console.log(`Next ID: ${nextId}`);
+    setPlaceholderId(nextId);
+  };
+
+  /*
+   * Update `placeholder` when `placeholderId` is updated by the interval handler.
+   */
+  useEffect(() => {
+    if (placeholderId === -1) {
+      setPlaceholder(DEFAULT_PLACEHOLDER);
+      return;
+    }
+    setPlaceholder(
+      DEFAULT_PLACEHOLDER.concat(` '${SEARCH_SUGGESTIONS[placeholderId]}'`),
+    );
+  }, [placeholderId]);
+
+  /*
+   * Sets the interval when the user begins searching and clears it when the user is done.
+   */
+  useEffect(() => {
+    if (!searching) {
+      return;
+    }
+    updatePlaceholder();
+    const updateInterval = setInterval(() => {
+      updatePlaceholder();
+    }, 4000);
+    return () => {
+      clearInterval(updateInterval);
+      setPlaceholderId(-1);
+    };
+  }, [searching]);
 
   /*
-   * CSS properties for width change animation.
+   * Animated nodes used in search bar activation animation.
    */
   const marginRight: Animated.Node<number> = interpolate(top, {
     inputRange: [-SCREEN_HEIGHT, 0],
@@ -59,13 +128,12 @@ const SearchBar: React.FC<SearchBarProps> = ({
         />
         <TextInput
           style={[styles.input]}
-          placeholder={'Search'}
           placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="while-editing"
           autoCapitalize="none"
           autoCorrect={false}
-          {...{value, onChangeText, onFocus, onBlur}}
+          {...{placeholder, value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
       <Animated.View style={{marginRight, opacity}}>
diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 6954ff8c..70adcd94 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -14,11 +14,11 @@ import {
 } from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import {
-  addUserToRecentlyViewed,
   checkIfUserIsBlocked,
   defaultUserProfile,
   fetchUserX,
   userXInStore,
+  addUserToRecentlySearched,
   addCategoryToRecentlySearched,
 } from '../../utils/users';
 
@@ -74,7 +74,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
         return;
       }
 
-      addUserToRecentlyViewed({
+      addUserToRecentlySearched({
         id,
         first_name,
         last_name,
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index 277b3454..ef518d8b 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -23,20 +23,26 @@ const SearchResults: React.FC<SearchResultsProps> = ({results, categories}) => {
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
   return (
     <View>
-      {categories.map((category: CategoryPreviewType) => (
-        <SearchResultsCell
-          key={category.name}
-          profileData={category}
-          {...{loggedInUser}}
-        />
-      ))}
-      {results.map((profile: ProfilePreviewType) => (
-        <SearchResultsCell
-          key={profile.id}
-          profileData={profile}
-          {...{loggedInUser}}
-        />
-      ))}
+      {categories
+        .slice(0)
+        .reverse()
+        .map((category: CategoryPreviewType) => (
+          <SearchResultsCell
+            key={category.name}
+            profileData={category}
+            {...{loggedInUser}}
+          />
+        ))}
+      {results
+        .slice(0)
+        .reverse()
+        .map((profile: ProfilePreviewType) => (
+          <SearchResultsCell
+            key={profile.id}
+            profileData={profile}
+            {...{loggedInUser}}
+          />
+        ))}
     </View>
   );
 };
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 728510c5..59b17f57 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -18,7 +18,13 @@ import {loadSearchResults} from '../../services';
 import {resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  getRecentlySearchedCategories,
+  getRecentlySearchedUsers,
+} from '../../utils';
 
 /**
  * Search Screen for user recommendations and a search
@@ -58,9 +64,8 @@ const SearchScreen: React.FC = () => {
    */
   useEffect(() => {
     if (!searching) return;
-    if (!query.length) loadRecentSearches();
     if (query.length < 3) {
-      setResults(undefined);
+      loadRecentlySearched().then(() => setResults(undefined));
       return;
     }
     (async () => {
@@ -101,7 +106,9 @@ const SearchScreen: React.FC = () => {
   // when searching state changes, run animation and reset query accordingly
   useEffect(() => {
     if (searching) {
-      timing(top, topInConfig).start();
+      loadRecentlySearched().then(() => {
+        timing(top, topInConfig).start();
+      });
     } else {
       setQuery('');
       handleBlur();
@@ -109,36 +116,23 @@ const SearchScreen: React.FC = () => {
     }
   }, [searching]);
 
-  const loadRecentlySearchedUsers = async () => {
-    try {
-      const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
-      asyncCache != null ? setRecents(JSON.parse(asyncCache)) : setRecents([]);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  const loadRecentlySearchedCategories = async () => {
-    try {
-      const recentCategoriesJSON = await AsyncStorage.getItem(
-        '@recently_searched_categories',
-      );
-      setRecentCategories(
-        recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [],
-      );
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  const loadRecentSearches = () => {
-    loadRecentlySearchedUsers();
-    loadRecentlySearchedCategories();
+  // loads recent searches (users & categories) from AsyncStorage
+  const loadRecentlySearched = async () => {
+    return Promise.all([
+      getRecentlySearchedUsers(),
+      getRecentlySearchedCategories(),
+    ]).then(
+      ([users, categories]: [ProfilePreviewType[], CategoryPreviewType[]]) => {
+        setRecents(users);
+        setRecentCategories(categories);
+      },
+    );
   };
   const clearRecentlySearched = async () => {
     try {
       AsyncStorage.removeItem('@recently_searched_users');
       AsyncStorage.removeItem('@recently_searched_categories');
-      loadRecentlySearchedUsers();
-      loadRecentlySearchedCategories();
+      loadRecentlySearched();
     } catch (e) {
       console.log(e);
     }
@@ -173,7 +167,7 @@ const SearchScreen: React.FC = () => {
         onBlur={handleBlur}
         onFocus={handleFocus}
         value={query}
-        {...{top}}
+        {...{top, searching}}
       />
       <ScrollView
         scrollEnabled={!searching}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 82c94100..739e6fb8 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './moments';
 export * from './common';
 export * from './users';
 export * from './friends';
+export * from './search';
diff --git a/src/utils/search.ts b/src/utils/search.ts
new file mode 100644
index 00000000..4293ff25
--- /dev/null
+++ b/src/utils/search.ts
@@ -0,0 +1,132 @@
+import AsyncStorage from '@react-native-community/async-storage';
+
+import {BADGE_DATA} from '../constants/badges';
+import {ProfilePreviewType, CategoryPreviewType} from '../types';
+
+/*
+ * Gets all possible search suggestions.
+ */
+export const getSearchSuggestions = (): string[] => {
+  const suggestions: string[] = [];
+  for (const category of BADGE_DATA) {
+    for (const interest of category.data) {
+      suggestions.push(interest.badgeName);
+    }
+  }
+  return suggestions;
+};
+
+/*
+ * AsyncStorage key for list of recently-searched users.
+ */
+const recentlySearchedUsersKey = '@recently_searched_users';
+
+/*
+ * Stores `user` in AsyncStorage as a recently-searched user.
+ */
+export const addUserToRecentlySearched = async (user: ProfilePreviewType) => {
+  let users: ProfilePreviewType[];
+  // retrieve and update recently-searched categories list
+  try {
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) {
+      users = JSON.parse(usersJSON);
+      // if category already exists, move it to the end
+      for (let i = 0; i < users.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (users[i].id === user.id) {
+          users.splice(i, 1);
+          break;
+        }
+      }
+      users.push(user);
+    } else {
+      users = [user];
+    }
+    // store updated list of recently-searched categories
+    try {
+      AsyncStorage.setItem(recentlySearchedUsersKey, JSON.stringify(users));
+    } catch (e) {
+      console.log(e);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedUsers = async (): Promise<
+  ProfilePreviewType[]
+> => {
+  try {
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) return JSON.parse(usersJSON);
+  } catch (e) {
+    console.log(e);
+  }
+  return [];
+};
+
+/*
+ * AsyncStorage key for list of recently-searched categories.
+ */
+const recentlySearchedCategoriesKey = '@recently_searched_categories';
+
+/*
+ * Stores `category` in AsyncStorage as a recently-searched category.
+ */
+export const addCategoryToRecentlySearched = async (
+  category: CategoryPreviewType,
+) => {
+  let categories: CategoryPreviewType[];
+  // retrieve and update recently-searched categories list
+  try {
+    const categoriesJSON = await AsyncStorage.getItem(
+      recentlySearchedCategoriesKey,
+    );
+    if (categoriesJSON) {
+      categories = JSON.parse(categoriesJSON);
+      // if category already exists, move it to the end
+      for (let i = 0; i < categories.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (categories[i].name === category.name) {
+          categories.splice(i, 1);
+          break;
+        }
+      }
+      categories.push(category);
+    } else {
+      categories = [category];
+    }
+    // store updated list of recently-searched categories
+    try {
+      AsyncStorage.setItem(
+        recentlySearchedCategoriesKey,
+        JSON.stringify(categories),
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedCategories = async (): Promise<
+  CategoryPreviewType[]
+> => {
+  try {
+    const categoriesJSON = await AsyncStorage.getItem(
+      '@recently_searched_categories',
+    );
+    if (categoriesJSON) return JSON.parse(categoriesJSON);
+  } catch (e) {
+    console.log(e);
+  }
+  return [];
+};
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 15107c99..af4f3813 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -166,69 +166,3 @@ export const defaultUserProfile = () => {
   return defaultImage;
 };
 
-export const addUserToRecentlyViewed = async (user: ProfilePreviewType) => {
-  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 === user.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);
-  }
-};
-
-/*
- * Stores `category` in AsyncStorage as a recently searched category.
- */
-export const addCategoryToRecentlySearched = async (
-  category: CategoryPreviewType,
-) => {
-  const recentlySearchedCategoriesKey = '@recently_searched_categories';
-  let categories: CategoryPreviewType[];
-  // retrieve recently-searched categories and set new list
-  try {
-    const categoriesJSON = await AsyncStorage.getItem(
-      recentlySearchedCategoriesKey,
-    );
-    if (categoriesJSON) {
-      categories = JSON.parse(categoriesJSON);
-      // TODO: make this more efficient by comparing shorter key
-      if (categories.find((c) => c.name === category.name)) return;
-      categories.push(category);
-    } else {
-      categories = [category];
-    }
-    // store updated list of recently-searched categories
-    try {
-      AsyncStorage.setItem(
-        recentlySearchedCategoriesKey,
-        JSON.stringify(categories),
-      );
-    } catch (e) {
-      console.log(e);
-    }
-  } catch (e) {
-    console.log(e);
-  }
-};