aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/search/Explore.tsx73
-rw-r--r--src/components/search/SearchBar.tsx46
-rw-r--r--src/components/search/SearchHeader.tsx8
-rw-r--r--src/screens/search/SearchScreen.tsx125
4 files changed, 150 insertions, 102 deletions
diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index 2a3bc749..54bbe4b5 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -1,20 +1,30 @@
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
-import {useSelector} from 'react-redux';
-import {EXPLORE_SECTION_TITLES} from '../../constants';
-import {RootState} from '../../store/rootReducer';
-import {ExploreSectionType} from '../../types';
-import {normalize} from '../../utils';
-import ExploreSection from './ExploreSection';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_WIDTH} from '../../utils';
const Explore: React.FC = () => {
- const {explores} = useSelector((state: RootState) => state.taggUsers);
+ // Get categories from backend
+ const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24'];
+
return (
<View style={styles.container}>
- <Text style={styles.header}>Search Profiles</Text>
- {explores &&
- EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
- <ExploreSection key={title} title={title} users={explores[title]} />
+ {categories &&
+ categories.map((category) => (
+ <LinearGradient
+ colors={['#8000FF', '#00FFFF']}
+ start={{x: 0.0, y: 1.0}}
+ end={{x: 1.0, y: 1.0}}
+ style={styles.gradientContainer}>
+ <TouchableOpacity
+ style={styles.buttonContainer}
+ onPress={() => {
+ console.log('Navigate to Discover Users!');
+ }}>
+ <Text style={styles.buttonText}>{category}</Text>
+ </TouchableOpacity>
+ </LinearGradient>
))}
</View>
);
@@ -23,13 +33,42 @@ const Explore: React.FC = () => {
const styles = StyleSheet.create({
container: {
zIndex: 0,
+ top: '3%',
+ alignSelf: 'center',
+ flexDirection: 'row',
+ width: SCREEN_WIDTH * 0.9,
+ flexWrap: 'wrap',
+ justifyContent: 'space-evenly',
+ },
+ gradientContainer: {
+ width: 159,
+ height: 38,
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginVertical: '2.5%',
+ flexDirection: 'row',
+ alignContent: 'center',
+ borderRadius: 20,
+ borderColor: 'transparent',
+ borderWidth: 1,
+ },
+ buttonContainer: {
+ backgroundColor: 'white',
+ width: 158,
+ height: 37,
+ borderRadius: 20,
+ borderColor: 'transparent',
+ borderWidth: 1,
+ flexDirection: 'row',
+ alignContent: 'center',
+ justifyContent: 'center',
},
- header: {
- fontWeight: '700',
- fontSize: normalize(22),
- color: '#fff',
- marginBottom: '2%',
- margin: '5%',
+ buttonText: {
+ fontWeight: '400',
+ fontSize: 15,
+ lineHeight: 17.9,
+ alignSelf: 'center',
+ color: '#828282',
},
});
export default Explore;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..dce1b40c 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,9 @@ import {
NativeSyntheticEvent,
TextInputSubmitEditingEventData,
} from 'react-native';
-import Animated, {
- interpolate,
- interpolateColors,
-} from 'react-native-reanimated';
-import {SCREEN_HEIGHT} from '../../utils';
+import Animated from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/Feather';
-
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+import {normalize} from 'react-native-elements';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
@@ -31,21 +26,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
onChangeText,
value,
onCancel,
- top,
style,
}) => {
- const opacity: Animated.Node<number> = interpolate(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputRange: [0, 1],
- });
- const marginRight: Animated.Node<number> = interpolate(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputRange: [0, 57],
- });
- const color: Animated.Node<number> = interpolateColors(top, {
- inputRange: [-SCREEN_HEIGHT, 0],
- outputColorRange: ['#fff', '#000'],
- });
const handleSubmit = (
e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
) => {
@@ -55,17 +37,17 @@ const SearchBar: React.FC<SearchBarProps> = ({
return (
<View style={[styles.container, style]}>
- <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
+ <Animated.View style={[styles.inputContainer]}>
<AnimatedIcon
name="search"
- color={color}
+ color={'#7E7E7E'}
size={25}
style={styles.searchIcon}
/>
- <AnimatedTextInput
- style={[styles.input, {color}]}
- placeholder={'Search...'}
- placeholderTextColor={'#fff'}
+ <TextInput
+ style={[styles.input]}
+ placeholder={'Search'}
+ placeholderTextColor={'#828282'}
onSubmitEditing={handleSubmit}
clearButtonMode="while-editing"
autoCapitalize="none"
@@ -73,11 +55,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
{...{value, onChangeText, onFocus, onBlur}}
/>
</Animated.View>
- <Animated.View style={{opacity, marginRight}}>
+ <View style={styles.cancelButtonView}>
<TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
<Text style={styles.cancelText}>Cancel</Text>
</TouchableOpacity>
- </Animated.View>
+ </View>
</View>
);
};
@@ -86,6 +68,7 @@ const styles = StyleSheet.create({
container: {
height: 40,
flexDirection: 'row',
+ justifyContent: 'center',
alignItems: 'stretch',
zIndex: 2,
},
@@ -94,9 +77,8 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
- borderWidth: 1.5,
borderRadius: 20,
- backgroundColor: '#fff3',
+ backgroundColor: '#F0F0F0',
},
searchIcon: {
marginRight: 8,
@@ -104,8 +86,10 @@ const styles = StyleSheet.create({
input: {
flex: 1,
fontSize: 16,
- color: '#fff',
+ color: '#828282',
+ letterSpacing: normalize(0.5),
},
+ cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
cancelButton: {
position: 'absolute',
height: '100%',
diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
index 2a022f50..0d9f5973 100644
--- a/src/components/search/SearchHeader.tsx
+++ b/src/components/search/SearchHeader.tsx
@@ -25,17 +25,17 @@ const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
});
return (
<View style={[styles.container, style]}>
- <View style={styles.headerContainer}>
+ {/* <View style={styles.headerContainer}>
<Animated.Text
style={[styles.header, {opacity: exploreOpacity, color}]}>
Explore
</Animated.Text>
- </View>
- <View style={styles.headerContainer}>
+ </View> */}
+ {/* <View style={styles.headerContainer}>
<Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
Search
</Animated.Text>
- </View>
+ </View> */}
</View>
);
};
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 70733d7e..e4ac4c9e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -7,15 +7,16 @@ import {
ScrollView,
StatusBar,
StyleSheet,
+ Text,
+ View,
} 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';
import {
Explore,
RecentSearches,
- SearchBackground,
SearchBar,
- SearchHeader,
SearchResultList,
SearchResultsBackground,
TabsGradient,
@@ -25,7 +26,7 @@ import {loadSearchResults} from '../../services';
import {loadRecentlySearched, resetScreenType} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType, ScreenType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
/**
* Search Screen for user recommendations and a search
@@ -148,60 +149,65 @@ const SearchScreen: React.FC = () => {
};
return (
- <SearchBackground>
- <StatusBar barStyle="dark-content" />
- <ScrollView
- scrollEnabled={!searching}
- keyboardShouldPersistTaps={'always'}
- stickyHeaderIndices={[4]}
- contentContainerStyle={styles.contentContainer}
- showsVerticalScrollIndicator={false}
- refreshControl={
- <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
- }>
- <SearchHeader style={styles.header} {...{top}} />
- <SearchBar
- style={styles.searchBar}
- onCancel={handleBlur}
- onChangeText={handleUpdate}
- onBlur={Keyboard.dismiss}
- onFocus={handleFocus}
- value={query}
- {...{top, searching}}
- />
- <Explore />
-
- <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 />
- </SearchBackground>
+ <View style={styles.mainContainer}>
+ <SafeAreaView>
+ <StatusBar barStyle="dark-content" />
+ <ScrollView
+ scrollEnabled={!searching}
+ keyboardShouldPersistTaps={'always'}
+ stickyHeaderIndices={[4]}
+ contentContainerStyle={styles.contentContainer}
+ showsVerticalScrollIndicator={false}
+ refreshControl={
+ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+ }>
+ <SearchBar
+ style={styles.searchBar}
+ onCancel={handleBlur}
+ onChangeText={handleUpdate}
+ onBlur={Keyboard.dismiss}
+ onFocus={handleFocus}
+ value={query}
+ {...{top, searching}}
+ />
+ <Text style={styles.helperText}>
+ Try searching for people, groups, or clubs
+ </Text>
+ <Explore />
+ <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>
);
};
const styles = StyleSheet.create({
+ mainContainer: {backgroundColor: '#fff', height: SCREEN_HEIGHT * 0.9},
contentContainer: {
- paddingTop: StatusBarHeight,
- paddingBottom: SCREEN_HEIGHT / 15,
+ paddingTop: '2%',
+ paddingBottom: SCREEN_HEIGHT / 3,
+ paddingHorizontal: '3%',
},
searchBar: {
- paddingHorizontal: '3%',
+ paddingLeft: '3%',
},
header: {
marginVertical: 20,
@@ -215,6 +221,15 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
flexGrow: 1,
},
+ helperText: {
+ fontWeight: '400',
+ fontSize: 14,
+ lineHeight: normalize(16.71),
+ color: '#828282',
+ marginBottom: '2%',
+ margin: '2.5%',
+ textAlign: 'center',
+ },
clear: {
fontSize: 17,
fontWeight: 'bold',
@@ -242,5 +257,15 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: '10%',
},
+ cancelButton: {
+ position: 'absolute',
+ height: '100%',
+ justifyContent: 'center',
+ paddingHorizontal: 5,
+ },
+ cancelText: {
+ color: '#818181',
+ fontWeight: '600',
+ },
});
export default SearchScreen;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 10:25:16 +0000