[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>

4 files changed, 15 insertions, 10 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 8bb93d54..ce825d8a 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -17,6 +17,10 @@ import Animated, {
 import {SCREEN_HEIGHT} from '../../utils';
 import Icon from 'react-native-vector-icons/Feather';
 
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
+
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
   top: Animated.Value<number>;
@@ -48,8 +52,6 @@ const SearchBar: React.FC<SearchBarProps> = ({
     e.preventDefault();
     Keyboard.dismiss();
   };
-  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-  const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
   return (
     <View style={[styles.container, style]}>
@@ -100,6 +102,7 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     fontSize: 16,
+    color: '#fff',
   },
   cancelButton: {
     position: 'absolute',
diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 3e1e4fdc..77b1821d 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -31,6 +31,7 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
     padding: 20,
@@ -39,7 +40,8 @@ const styles = StyleSheet.create({
     zIndex: 0,
   },
   contentContainer: {
-    flex: 1,
+    flexGrow: 1,
+    paddingBottom: SCREEN_HEIGHT / 15,
   },
   results: {
     marginTop: StatusBarHeight + 110,
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}}>