Fix query clearing delay

1 files changed, 13 insertions, 4 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 61dea11e..df3c1d67 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -51,6 +51,7 @@ const SearchScreen: React.FC = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    if (!searching) return;
     if (query.length < 3) {
       setResults(undefined);
       return;
@@ -88,6 +89,17 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
+  // when searching state changes, run animation and reset query accordingly
+  useEffect(() => {
+    if (searching) {
+      timing(top, topInConfig).start(() => setResults(undefined));
+    } else {
+      setQuery('');
+      handleBlur();
+      timing(top, topOutConfig).start();
+    }
+  }, [searching]);
+
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -120,15 +132,12 @@ const SearchScreen: React.FC = () => {
     easing: Easing.inOut(Easing.ease),
   };
   const handleFocus = () => {
-    timing(top, topInConfig).start();
     setSearching(true);
   };
   const handleBlur = () => {
     Keyboard.dismiss();
   };
   const handleCancel = () => {
-    handleBlur();
-    timing(top, topOutConfig).start(() => setQuery(''));
     setSearching(false);
   };
 
@@ -141,7 +150,7 @@ const SearchScreen: React.FC = () => {
         onBlur={handleBlur}
         onFocus={handleFocus}
         value={query}
-        {...{top, searching}}
+        {...{top}}
       />
       <ScrollView
         scrollEnabled={!searching}