1 files changed, 72 insertions, 74 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index e80e09aa..728510c5 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Keyboard, ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {Keyboard, ScrollView, StatusBar, StyleSheet} from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
@@ -54,16 +54,10 @@ const SearchScreen: React.FC = () => {
   const dispatch = useDispatch();
 
   /*
-   * If user begins actively searching, refresh recently-searched list.
-   */
-  useEffect(() => {
-    if (searching) loadRecentSearches();
-  }, [searching]);
-
-  /*
    * Main handler for changes in query.
    */
   useEffect(() => {
+    if (!searching) return;
     if (!query.length) loadRecentSearches();
     if (query.length < 3) {
       setResults(undefined);
@@ -104,25 +98,16 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
-  const handleFocus = () => {
-    const topInConfig = {
-      duration: 180,
-      toValue: 0,
-      easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
-    };
-    timing(top, topInConfig).start();
-    setSearching(true);
-  };
-  const handleCancel = () => {
-    Keyboard.dismiss();
-    const topOutConfig = {
-      duration: 180,
-      toValue: -SCREEN_HEIGHT,
-      easing: Easing.inOut(Easing.ease),
-    };
-    timing(top, topOutConfig).start(() => setQuery(''));
-    setSearching(false);
-  };
+  // when searching state changes, run animation and reset query accordingly
+  useEffect(() => {
+    if (searching) {
+      timing(top, topInConfig).start();
+    } else {
+      setQuery('');
+      handleBlur();
+      timing(top, topOutConfig).start(() => setResults(undefined));
+    }
+  }, [searching]);
 
   const loadRecentlySearchedUsers = async () => {
     try {
@@ -159,56 +144,72 @@ const SearchScreen: React.FC = () => {
     }
   };
 
+  const topInConfig = {
+    duration: 180,
+    toValue: 0,
+    easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
+  };
+  const topOutConfig = {
+    duration: 180,
+    toValue: -SCREEN_HEIGHT,
+    easing: Easing.inOut(Easing.ease),
+  };
+  const handleFocus = () => {
+    setSearching(true);
+  };
+  const handleBlur = () => {
+    Keyboard.dismiss();
+  };
+  const handleCancel = () => {
+    setSearching(false);
+  };
+
   return (
-    <View style={styles.mainContainer}>
-      <SafeAreaView>
-        <StatusBar barStyle="dark-content" />
-        <ScrollView
-          scrollEnabled={!searching}
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <SearchBar
-            style={styles.searchBar}
-            onCancel={handleCancel}
-            onChangeText={setQuery}
-            onBlur={Keyboard.dismiss}
-            onFocus={handleFocus}
-            value={query}
-            {...{top, searching}}
-          />
-          <SearchCategories />
-          <SearchResultsBackground {...{top}}>
-            {results === undefined &&
-            recents.length + recentCategories.length !== 0 ? (
-              <RecentSearches
-                sectionTitle="Recent"
-                sectionButtonTitle="Clear all"
-                onPress={clearRecentlySearched}
-                screenType={ScreenType.Search}
-                {...{recents, recentCategories}}
-              />
-            ) : (
-              <SearchResultList
-                {...{results}}
-                keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
-                previewType={'Search'}
-                screenType={ScreenType.Search}
-              />
-            )}
-          </SearchResultsBackground>
-        </ScrollView>
-        <TabsGradient />
-      </SafeAreaView>
-    </View>
+    <SafeAreaView style={styles.screenContainer}>
+      <StatusBar barStyle="dark-content" />
+      <SearchBar
+        onCancel={handleCancel}
+        onChangeText={setQuery}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={query}
+        {...{top}}
+      />
+      <ScrollView
+        scrollEnabled={!searching}
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}>
+        <SearchCategories />
+        <SearchResultsBackground {...{top}}>
+          {results === undefined &&
+          recents.length + recentCategories.length !== 0 ? (
+            <RecentSearches
+              sectionTitle="Recent"
+              onPress={clearRecentlySearched}
+              screenType={ScreenType.Search}
+              {...{recents, recentCategories}}
+            />
+          ) : (
+            <SearchResultList
+              {...{results}}
+              keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
+              previewType={'Search'}
+              screenType={ScreenType.Search}
+            />
+          )}
+        </SearchResultsBackground>
+      </ScrollView>
+      <TabsGradient />
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  mainContainer: {
+  screenContainer: {
+    paddingTop: 15,
     backgroundColor: '#fff',
-    height: SCREEN_HEIGHT,
   },
   contentContainer: {
     height: SCREEN_HEIGHT,
@@ -216,9 +217,6 @@ const styles = StyleSheet.create({
     paddingBottom: SCREEN_HEIGHT / 3,
     paddingHorizontal: '3%',
   },
-  searchBar: {
-    paddingLeft: '3%',
-  },
   header: {
     marginVertical: 20,
     zIndex: 1,