aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/search/RecentSearches.tsx10
-rw-r--r--src/components/search/SearchBar.tsx97
-rw-r--r--src/components/search/SearchResults.tsx32
-rw-r--r--src/components/search/SearchResultsBackground.tsx14
4 files changed, 58 insertions, 95 deletions
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index b4cc5483..84d35cac 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -25,12 +25,7 @@ interface RecentSearchesProps extends TouchableOpacityProps {
}
const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
- const {
- sectionTitle,
- recents,
- recentCategories,
- screenType,
- } = props;
+ const {sectionTitle, recents, recentCategories, screenType} = props;
return (
<ScrollView
style={styles.mainContainer}
@@ -53,10 +48,11 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
const styles = StyleSheet.create({
mainContainer: {
- flexGrow: 1,
+ flex: 1,
},
contentContainer: {
paddingBottom: SCREEN_HEIGHT * 0.1,
+ flex: 1,
},
header: {
paddingHorizontal: 25,
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index be0eecc7..5e3a1e64 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
import {
StyleSheet,
TextInput,
@@ -10,10 +10,10 @@ import {
NativeSyntheticEvent,
TextInputSubmitEditingEventData,
} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {interpolate} from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/Feather';
import {normalize} from 'react-native-elements';
-import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT} from '../../utils';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);
@@ -27,7 +27,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
onChangeText,
value,
onCancel,
- style,
+ top,
}) => {
const handleSubmit = (
e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
@@ -36,47 +36,52 @@ const SearchBar: React.FC<SearchBarProps> = ({
Keyboard.dismiss();
};
+ /*
+ * CSS properties for width change animation.
+ */
+ const marginRight: Animated.Node<number> = interpolate(top, {
+ inputRange: [-SCREEN_HEIGHT, 0],
+ outputRange: [0, 58],
+ });
+ const opacity: Animated.Node<number> = interpolate(top, {
+ inputRange: [-SCREEN_HEIGHT, 0],
+ outputRange: [0, 1],
+ });
+
return (
- <>
- <View style={[styles.container, style]}>
- <Animated.View style={[styles.inputContainer]}>
- <AnimatedIcon
- name="search"
- color={'#7E7E7E'}
- size={25}
- style={styles.searchIcon}
- />
- <TextInput
- style={[styles.input]}
- placeholder={'Search'}
- placeholderTextColor={'#828282'}
- onSubmitEditing={handleSubmit}
- clearButtonMode="while-editing"
- autoCapitalize="none"
- autoCorrect={false}
- {...{value, onChangeText, onFocus, onBlur}}
- />
- </Animated.View>
- <View style={styles.cancelButtonView}>
- <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
- <Text style={styles.cancelText}>Cancel</Text>
- </TouchableOpacity>
- </View>
- </View>
- <Text style={styles.helperText}>
- Try searching for "trending on tagg"
- </Text>
- </>
+ <View style={styles.container}>
+ <Animated.View style={styles.inputContainer}>
+ <AnimatedIcon
+ name="search"
+ color={'#7E7E7E'}
+ size={25}
+ style={styles.searchIcon}
+ />
+ <TextInput
+ style={[styles.input]}
+ placeholder={'Search'}
+ placeholderTextColor={'#828282'}
+ onSubmitEditing={handleSubmit}
+ clearButtonMode="while-editing"
+ autoCapitalize="none"
+ autoCorrect={false}
+ {...{value, onChangeText, onFocus, onBlur}}
+ />
+ </Animated.View>
+ <Animated.View style={{marginRight, opacity}}>
+ <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+ <Text style={styles.cancelText}>Cancel</Text>
+ </TouchableOpacity>
+ </Animated.View>
+ </View>
);
};
const styles = StyleSheet.create({
container: {
height: 40,
+ paddingHorizontal: 20,
flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'stretch',
- zIndex: 2,
},
inputContainer: {
flexGrow: 1,
@@ -95,27 +100,15 @@ const styles = StyleSheet.create({
color: '#000',
letterSpacing: normalize(0.5),
},
- cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
cancelButton: {
- position: 'absolute',
height: '100%',
+ position: 'absolute',
justifyContent: 'center',
- paddingHorizontal: 5,
+ paddingHorizontal: 8,
},
cancelText: {
color: '#818181',
- fontWeight: '600',
- },
- helperText: {
- fontWeight: '400',
- fontSize: 14,
- lineHeight: normalize(16.71),
- color: '#828282',
- marginBottom: '2%',
- marginHorizontal: '2.5%',
- marginTop: '1%',
- textAlign: 'center',
- width: SCREEN_WIDTH * 0.74,
+ fontWeight: '500',
},
});
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index 798d3251..fbeae1d8 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -5,7 +5,6 @@ import {
ScreenType,
CategoryPreviewType,
} from '../../types';
-import ProfilePreview from '../profile/ProfilePreview';
import {StyleSheet, View} from 'react-native';
import SearchResultsCell from './SearchResultCell';
import {useSelector} from 'react-redux';
@@ -16,30 +15,14 @@ interface SearchResultsProps {
screenType: ScreenType;
categories: CategoryPreviewType[];
}
-const SearchResults: React.FC<SearchResultsProps> = ({
- results,
- previewType,
- screenType,
- categories,
-}) => {
+const SearchResults: React.FC<SearchResultsProps> = ({results, categories}) => {
/**
* Added the following swicth case to make Results on Search and Recents screen a list
* Flex is love
*/
const {user: loggedInUser} = useSelector((state: RootState) => state.user);
- let containerStyle;
- switch (previewType) {
- case 'Search':
- containerStyle = styles.containerSearch;
- break;
- case 'Recent':
- containerStyle = styles.containerSearch;
- break;
- default:
- containerStyle = styles.container;
- }
return (
- <View style={containerStyle}>
+ <View>
{categories.map((category: CategoryPreviewType) => (
<SearchResultsCell
key={category.name}
@@ -58,15 +41,4 @@ const SearchResults: React.FC<SearchResultsProps> = ({
);
};
-const styles = StyleSheet.create({
- containerSearch: {
- flexDirection: 'column',
- flexWrap: 'wrap',
- },
- container: {
- flexDirection: 'row',
- flexWrap: 'wrap',
- },
-});
-
export default SearchResults;
diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 25dcf781..2833553d 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,15 @@ 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,
+ paddingVertical: 10,
+ paddingBottom: SCREEN_HEIGHT / 15,
},
});
export default SearchResultsBackground;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 04:08:56 +0000