diff options
| -rw-r--r-- | src/components/search/SearchResultsBackground.tsx | 12 | ||||
| -rw-r--r-- | src/screens/search/SearchScreen.tsx | 131 |
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, |