Update and prune style rules

2 files changed, 68 insertions, 75 deletions

diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index f6f40f52..7339b3ea 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -21,7 +21,8 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
   return (
     <Animated.View
       style={[styles.container, {opacity: opacityBackground, top}]}>
-      <Animated.View style={[styles.results, {opacity: opacityContent}]}>
+      <Animated.View
+        style={[styles.contentContainer, {opacity: opacityContent}]}>
         {children}
       </Animated.View>
     </Animated.View>
@@ -29,19 +30,14 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
     position: 'absolute',
-    backgroundColor: '#fff',
-    zIndex: 0,
+    backgroundColor: 'white',
   },
   contentContainer: {
-    flexGrow: 1,
+    flex: 1,
     paddingBottom: SCREEN_HEIGHT / 15,
   },
-  results: {
-    marginTop: StatusBarHeight,
-  },
 });
 export default SearchResultsBackground;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 223fc2b2..2c580c5b 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Keyboard, ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {Keyboard, ScrollView, StatusBar, StyleSheet} from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
@@ -88,26 +88,6 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
-  const handleFocus = () => {
-    const topInConfig = {
-      duration: 180,
-      toValue: 0,
-      easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
-    };
-    timing(top, topInConfig).start();
-    setSearching(true);
-  };
-  const handleBlur = () => {
-    setQuery('');
-    Keyboard.dismiss();
-    const topOutConfig = {
-      duration: 180,
-      toValue: -SCREEN_HEIGHT,
-      easing: Easing.inOut(Easing.ease),
-    };
-    timing(top, topOutConfig).start();
-    setSearching(false);
-  };
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -129,55 +109,75 @@ const SearchScreen: React.FC = () => {
     loadRecentlySearchedUsers();
   };
 
+  const topInConfig = {
+    duration: 180,
+    toValue: 0,
+    easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
+  };
+  const topOutConfig = {
+    duration: 180,
+    toValue: -SCREEN_HEIGHT,
+    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);
+  };
+
   return (
-    <View style={styles.mainContainer}>
-      <SafeAreaView>
-        <StatusBar barStyle="dark-content" />
-        <ScrollView
-          scrollEnabled={!searching}
-          keyboardShouldPersistTaps={'always'}
-          stickyHeaderIndices={[4]}
-          contentContainerStyle={styles.contentContainer}
-          showsVerticalScrollIndicator={false}>
-          <SearchBar
-            style={styles.searchBar}
-            onCancel={handleBlur}
-            onChangeText={handleUpdate}
-            onBlur={Keyboard.dismiss}
-            onFocus={handleFocus}
-            value={query}
-            {...{top, searching}}
-          />
-          <SearchCategories />
-          <SearchResultsBackground {...{top}}>
-            {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 />
-      </SafeAreaView>
-    </View>
+    <SafeAreaView style={styles.screenContainer}>
+      <StatusBar barStyle="dark-content" />
+      <SearchBar
+        onCancel={handleCancel}
+        onChangeText={handleUpdate}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={query}
+        {...{top, searching}}
+      />
+      <ScrollView
+        scrollEnabled={!searching}
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}>
+        <SearchCategories />
+        <SearchResultsBackground {...{top}}>
+          {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 />
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  mainContainer: {
+  screenContainer: {
+    paddingTop: 10,
     backgroundColor: '#fff',
-    height: SCREEN_HEIGHT,
   },
   contentContainer: {
     height: SCREEN_HEIGHT * 0.9,
@@ -185,9 +185,6 @@ const styles = StyleSheet.create({
     paddingBottom: SCREEN_HEIGHT / 3,
     paddingHorizontal: '3%',
   },
-  searchBar: {
-    paddingLeft: '3%',
-  },
   header: {
     marginVertical: 20,
     zIndex: 1,