[TMA-25*] Search Functionality Bug Fixes (#35)

* Fix text input bugs

* Disable scrolling when searching

* Fix scroll function in results ScrollView

* Resolve animation issues

* [TMA-161] Recently Searched Users (#34)

* Basic AsyncStorage code

* Basic implementation complete

Need to fix re-rendering bug

* Removed errant comment

* Fixed bug for rerendering upon addition to recents

Need to fix bug for rerendering upon clearing

* Fixed rerendering bug for clear

* Only present recents header if users in recents

* Lint cleaning

* Basic AsyncStorage code

* Basic implementation complete

Need to fix re-rendering bug

* Removed errant comment

* Fixed bug for rerendering upon addition to recents

Need to fix bug for rerendering upon clearing

* Fixed rerendering bug for clear

* Only present recents header if users in recents

* Lint cleaning

* Added comments for a function

* Updated conditional presentation to use ternary

* Created component for List Section Headers

* Lint cleaning

* Converted component to be for Recent Searches

As opposed to just the list header

* Fix text input bugs

* Disable scrolling when searching

* Fix scroll function in results ScrollView

* Resolve animation issues

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

2 files changed, 7 insertions, 7 deletions

diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 9da9a3d8..ea557063 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -4,16 +4,13 @@ import Animated from 'react-native-reanimated';
 import {AuthContext} from '../../routes/authentication';
 import {StatusBar} from 'react-native';
 
-// destructure Value object from Animated
-const {Value} = Animated;
-
 /**
  * Profile Screen for a user's logged in profile
  * including posts, messaging, and settings
  */
 const ProfileScreen: React.FC = () => {
   const {user} = React.useContext(AuthContext);
-  const y = new Value(0);
+  const y = Animated.useValue(0);
   return (
     <>
       <StatusBar />
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index d85c0a90..2a2a5a4a 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -16,13 +16,11 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {ProfilePreviewType} from '../../types';
 import {SEARCH_ENDPOINT} from '../../constants';
 import {AuthContext} from '../../routes/authentication';
-const {Value} = Animated;
 
 /**
  * Search Screen for user recommendations and a search
  * tool to allow user to find other users
  */
-const top: Animated.Value<number> = new Value(-SCREEN_HEIGHT);
 
 const SearchScreen: React.FC = () => {
   const {recentSearches} = React.useContext(AuthContext);
@@ -31,6 +29,8 @@ const SearchScreen: React.FC = () => {
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
     recentSearches,
   );
+  const [searching, setSearching] = useState(false);
+  const top = Animated.useValue(-SCREEN_HEIGHT);
   useEffect(() => {
     if (query.length < 3) {
       setResults([]);
@@ -63,6 +63,7 @@ const SearchScreen: React.FC = () => {
       easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
     };
     timing(top, topInConfig).start();
+    setSearching(true);
   };
   const handleBlur = () => {
     Keyboard.dismiss();
@@ -72,6 +73,7 @@ const SearchScreen: React.FC = () => {
       easing: Easing.inOut(Easing.ease),
     };
     timing(top, topOutConfig).start();
+    setSearching(false);
   };
   const loadRecentlySearchedUsers = async () => {
     try {
@@ -98,6 +100,7 @@ const SearchScreen: React.FC = () => {
     <SearchBackground>
       <StatusBar />
       <ScrollView
+        scrollEnabled={!searching}
         keyboardShouldPersistTaps={'always'}
         stickyHeaderIndices={[4]}
         contentContainerStyle={styles.contentContainer}
@@ -110,7 +113,7 @@ const SearchScreen: React.FC = () => {
           onBlur={Keyboard.dismiss}
           onFocus={handleFocus}
           value={query}
-          {...{top}}
+          {...{top, searching}}
         />
         <Explore />
         <SearchResultsBackground {...{top}}>