fixed padding issue

4 files changed, 42 insertions, 49 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 3925d084..6fb9fca9 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -5,10 +5,12 @@ import {
   TouchableOpacity,
   StyleSheet,
   TouchableOpacityProps,
+  ScrollView,
 } from 'react-native';
 import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
+import {SCREEN_HEIGHT} from '../../utils';
 
 interface RecentSearchesProps extends TouchableOpacityProps {
   sectionTitle: PreviewType;
@@ -21,7 +23,9 @@ interface RecentSearchesProps extends TouchableOpacityProps {
  */
 const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
   return (
-    <View style={styles.mainContainer}>
+    <ScrollView
+      style={styles.mainContainer}
+      contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
       <View style={styles.container}>
         <Text style={styles.title}>{props.sectionTitle}</Text>
         {props.sectionButtonTitle && (
@@ -35,14 +39,14 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
         previewType={props.sectionTitle}
         screenType={props.screenType}
       />
-    </View>
+    </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   mainContainer: {
     marginLeft: '3%',
-    padding : 20,
+    padding: 20,
   },
   container: {
     flexDirection: 'row',
diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx
index 7f8073c4..a3d9c8c5 100644
--- a/src/components/search/SearchResultList.tsx
+++ b/src/components/search/SearchResultList.tsx
@@ -1,20 +1,15 @@
 import React, {useEffect, useState} from 'react';
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  SectionList,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import {SectionList, StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {RootState} from 'src/store/rootreducer';
+import {NO_RESULTS_FOUND} from '../../constants/strings';
 import {PreviewType, ScreenType} from '../../types';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import SearchResultsCell from './SearchResultCell';
-import {NO_RESULTS_FOUND} from '../../constants/strings';
+
 interface SearchResultsProps {
   results: Array<any> | undefined;
+  keyboardVisible: boolean;
   previewType: PreviewType;
   screenType: ScreenType;
 }
@@ -26,7 +21,10 @@ const sectionHeader: React.FC<Boolean> = (showBorder: Boolean) => {
   return null;
 };
 
-const SearchResultList: React.FC<SearchResultsProps> = ({results}) => {
+const SearchResultList: React.FC<SearchResultsProps> = ({
+  results,
+  keyboardVisible,
+}) => {
   const [showSection, setShowSection] = useState(true);
   const [showEmptyView, setshowEmptyView] = useState(false);
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
@@ -48,8 +46,11 @@ const SearchResultList: React.FC<SearchResultsProps> = ({results}) => {
       )}
       {!showEmptyView && (
         <SectionList
-          style={{height: SCREEN_HEIGHT, width: SCREEN_WIDTH}}
-          showsVerticalScrollIndicator={false}
+          style={[
+            {width: SCREEN_WIDTH},
+            keyboardVisible ? styles.keyboardOpen : {},
+          ]}
+          contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}
           sections={results}
           keyExtractor={(item, index) => item.id + index}
           renderItem={({item}) => (
@@ -69,7 +70,7 @@ const SearchResultList: React.FC<SearchResultsProps> = ({results}) => {
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: SCREEN_HEIGHT * 0.04,
+    marginTop: SCREEN_HEIGHT * 0.02,
   },
   sectionHeaderStyle: {
     width: '100%',
@@ -78,7 +79,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#C4C4C4',
   },
   keyboardOpen: {marginBottom: SCREEN_HEIGHT * 0.3},
-  keyboardClose: {marginBottom: 20},
   noResultsTextContainer: {
     justifyContent: 'center',
     flexDirection: 'row',
diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index fa4e18ca..c5fcc6fb 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Animated, {interpolate} from 'react-native-reanimated';
 import {StyleSheet} from 'react-native';
+import Animated, {interpolate} from 'react-native-reanimated';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 
 interface SearchResultsBackgroundProps {
@@ -21,11 +21,9 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
   return (
     <Animated.View
       style={[styles.container, {opacity: opacityBackground, top}]}>
-      <Animated.ScrollView
-        contentContainerStyle={styles.contentContainer}
-        style={[styles.results, {opacity: opacityContent}]}>
+      <Animated.View style={[styles.results, {opacity: opacityContent}]}>
         {children}
-      </Animated.ScrollView>
+      </Animated.View>
     </Animated.View>
   );
 };
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index b6841480..70733d7e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -3,12 +3,10 @@ import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
   Keyboard,
-  KeyboardAvoidingView,
   RefreshControl,
   ScrollView,
   StatusBar,
   StyleSheet,
-  SafeAreaView,
 } from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {useDispatch, useSelector} from 'react-redux';
@@ -23,15 +21,11 @@ import {
   TabsGradient,
 } from '../../components';
 import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
+import {loadSearchResults} from '../../services';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, UserType} from '../../types';
+import {ProfilePreviewType, ScreenType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-import {loadSearchResults} from '../../services';
-const NO_USER: UserType = {
-  userId: '',
-  username: '',
-};
 
 /**
  * Search Screen for user recommendations and a search
@@ -178,25 +172,22 @@ const SearchScreen: React.FC = () => {
         <Explore />
 
         <SearchResultsBackground {...{top}}>
-          <KeyboardAvoidingView
-            behavior={'padding'}
-            keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
-            {results === undefined && recents.length !== 0 ? (
-              <RecentSearches
-                sectionTitle="Recent"
-                sectionButtonTitle="Clear all"
-                onPress={clearRecentlySearched}
-                recents={recents}
-                screenType={ScreenType.Search}
-              />
-            ) : (
-              <SearchResultList
-                {...{results}}
-                previewType={'Search'}
-                screenType={ScreenType.Search}
-              />
-            )}
-          </KeyboardAvoidingView>
+          {results === undefined && recents.length !== 0 ? (
+            <RecentSearches
+              sectionTitle="Recent"
+              sectionButtonTitle="Clear all"
+              onPress={clearRecentlySearched}
+              recents={recents}
+              screenType={ScreenType.Search}
+            />
+          ) : (
+            <SearchResultList
+              {...{results}}
+              keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
+              previewType={'Search'}
+              screenType={ScreenType.Search}
+            />
+          )}
         </SearchResultsBackground>
       </ScrollView>
       <TabsGradient />