From 4a2f66366e6cb6802494711f157d509d083c7a1a Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Sun, 7 Mar 2021 23:45:57 -0500
Subject: Update and prune style rules

---
 src/components/search/SearchResultsBackground.tsx |  13 ++-
 src/screens/search/SearchScreen.tsx               | 132 +++++++++++-----------
 2 files changed, 71 insertions(+), 74 deletions(-)

(limited to 'src')

diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 25dcf781..7c1244fe 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated, {interpolate} from 'react-native-reanimated';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 interface SearchResultsBackgroundProps {
   top: Animated.Value<number>;
@@ -21,7 +21,8 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
   return (
     <Animated.View
       style={[styles.container, {opacity: opacityBackground, top}]}>
-      <Animated.View style={{opacity: opacityContent}}>
+      <Animated.View
+        style={[styles.contentContainer, {opacity: opacityContent}]}>
         {children}
       </Animated.View>
     </Animated.View>
@@ -29,14 +30,14 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
     position: 'absolute',
     backgroundColor: 'white',
-    paddingTop: 60,
-    paddingBottom: 10,
-    zIndex: 0,
+  },
+  contentContainer: {
+    flex: 1,
+    paddingBottom: SCREEN_HEIGHT / 15,
   },
 });
 export default SearchResultsBackground;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 835a5622..dae1b174 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';
@@ -102,26 +102,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 handleCancel = () => {
-    Keyboard.dismiss();
-    const topOutConfig = {
-      duration: 180,
-      toValue: -SCREEN_HEIGHT,
-      easing: Easing.inOut(Easing.ease),
-    };
-    timing(top, topOutConfig).start(() => setQuery(''));
-    setSearching(false);
-  };
-
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -157,56 +137,75 @@ const SearchScreen: React.FC = () => {
     }
   };
 
+  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={handleCancel}
-            onChangeText={setQuery}
-            onBlur={Keyboard.dismiss}
-            onFocus={handleFocus}
-            value={query}
-            {...{top, searching}}
-          />
-          <SearchCategories />
-          <SearchResultsBackground {...{top}}>
-            {results === undefined &&
-            recents.length + recentCategories.length !== 0 ? (
-              <RecentSearches
-                sectionTitle="Recent"
-                sectionButtonTitle="Clear all"
-                onPress={clearRecentlySearched}
-                screenType={ScreenType.Search}
-                {...{recents, recentCategories}}
-              />
-            ) : (
-              <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={setQuery}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={query}
+        {...{top}}
+      />
+      <ScrollView
+        scrollEnabled={!searching}
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}>
+        <SearchCategories />
+        <SearchResultsBackground {...{top}}>
+          {results === undefined &&
+          recents.length + recentCategories.length !== 0 ? (
+            <RecentSearches
+              sectionTitle="Recent"
+              onPress={clearRecentlySearched}
+              screenType={ScreenType.Search}
+              {...{recents, recentCategories}}
+            />
+          ) : (
+            <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,
@@ -214,9 +213,6 @@ const styles = StyleSheet.create({
     paddingBottom: SCREEN_HEIGHT / 3,
     paddingHorizontal: '3%',
   },
-  searchBar: {
-    paddingLeft: '3%',
-  },
   header: {
     marginVertical: 20,
     zIndex: 1,
-- 
cgit v1.2.3-70-g09d2