diff options
| -rw-r--r-- | src/components/search/SearchResultsBackground.tsx | 13 | ||||
| -rw-r--r-- | src/screens/search/SearchScreen.tsx | 132 |
2 files changed, 71 insertions, 74 deletions
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, |