Fix search bar animation & search screen styles

1 files changed, 11 insertions, 20 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 84d35cac..6cea9338 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -6,6 +6,7 @@ import {
   StyleSheet,
   TouchableOpacityProps,
   ScrollView,
+  Keyboard,
 } from 'react-native';
 import {
   PreviewType,
@@ -15,7 +16,7 @@ import {
 } from '../../types';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
-import {SCREEN_HEIGHT} from '../../utils';
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 
 interface RecentSearchesProps extends TouchableOpacityProps {
   sectionTitle: PreviewType;
@@ -25,35 +26,25 @@ interface RecentSearchesProps extends TouchableOpacityProps {
 }
 
 const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
-  const {sectionTitle, recents, recentCategories, screenType} = props;
+  const {recents, recentCategories} = props;
   return (
-    <ScrollView
-      style={styles.mainContainer}
-      contentContainerStyle={styles.contentContainer}>
+    <>
       <View style={styles.header}>
-        <Text style={styles.title}>{sectionTitle}</Text>
+        <Text style={styles.title}>Recent</Text>
         <TouchableOpacity {...props}>
           <Text style={styles.clear}>Clear all</Text>
         </TouchableOpacity>
       </View>
-      <SearchResults
-        results={recents}
-        categories={recentCategories}
-        previewType={sectionTitle}
-        screenType={screenType}
-      />
-    </ScrollView>
+      <ScrollView
+        onScrollBeginDrag={Keyboard.dismiss}
+        contentContainerStyle={{paddingBottom: useBottomTabBarHeight()}}>
+        <SearchResults results={recents} categories={recentCategories} />
+      </ScrollView>
+    </>
   );
 };
 
 const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-  },
-  contentContainer: {
-    paddingBottom: SCREEN_HEIGHT * 0.1,
-    flex: 1,
-  },
   header: {
     paddingHorizontal: 25,
     paddingVertical: 5,