From d40951441f7ffaa3d452dea24bb5db52d65dd64e Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Sun, 7 Mar 2021 23:43:39 -0500 Subject: Hide cancel button when not searching --- src/components/search/SearchBar.tsx | 97 +++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 52 deletions(-) (limited to 'src') 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 = ({ onChangeText, value, onCancel, - style, + top, }) => { const handleSubmit = ( e: NativeSyntheticEvent, @@ -36,47 +36,52 @@ const SearchBar: React.FC = ({ Keyboard.dismiss(); }; + /* + * CSS properties for width change animation. + */ + const marginRight: Animated.Node = interpolate(top, { + inputRange: [-SCREEN_HEIGHT, 0], + outputRange: [0, 58], + }); + const opacity: Animated.Node = interpolate(top, { + inputRange: [-SCREEN_HEIGHT, 0], + outputRange: [0, 1], + }); + return ( - <> - - - - - - - - Cancel - - - - - Try searching for "trending on tagg" - - + + + + + + + + Cancel + + + ); }; 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', }, }); -- cgit v1.2.3-70-g09d2 From 8183ce18a4b8fedb02c5af59f3021cc4d75f29f7 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 | 12 +- src/screens/search/SearchScreen.tsx | 131 +++++++++++----------- 2 files changed, 68 insertions(+), 75 deletions(-) (limited to 'src') 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 = ({ return ( - + {children} @@ -29,19 +30,14 @@ const SearchResultsBackground: React.FC = ({ }; 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 ( - - - - - - - - {results === undefined && recents.length !== 0 ? ( - - ) : ( - - )} - - - - - + + + + + + + {results === undefined && recents.length !== 0 ? ( + + ) : ( + + )} + + + + ); }; 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, -- cgit v1.2.3-70-g09d2 From 5ca6ad3110ed086bec82b30090fb2f508f083025 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 00:01:27 -0500 Subject: Increase paddingTop to lower search bar --- src/screens/search/SearchScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 2c580c5b..61dea11e 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -176,7 +176,7 @@ const SearchScreen: React.FC = () => { const styles = StyleSheet.create({ screenContainer: { - paddingTop: 10, + paddingTop: 15, backgroundColor: '#fff', }, contentContainer: { -- cgit v1.2.3-70-g09d2 From 80e3f85701e08492164296823741ba3d2585e0eb Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 00:29:49 -0500 Subject: Adjust search results top padding --- src/components/search/SearchResultList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 14d5de6d..f6e26820 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -70,7 +70,7 @@ const SearchResultList: React.FC = ({ const styles = StyleSheet.create({ container: { - marginTop: SCREEN_HEIGHT * 0.02, + paddingTop: 25, height: SCREEN_HEIGHT, }, sectionHeaderStyle: { -- cgit v1.2.3-70-g09d2 From f712d3f5fad5cfbf523d99fd42f472f4f1b62686 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 20:12:56 -0500 Subject: Fix query clearing delay --- src/screens/search/SearchScreen.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 61dea11e..df3c1d67 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -51,6 +51,7 @@ const SearchScreen: React.FC = () => { const dispatch = useDispatch(); useEffect(() => { + if (!searching) return; if (query.length < 3) { setResults(undefined); return; @@ -88,6 +89,17 @@ const SearchScreen: React.FC = () => { dispatch(resetScreenType(ScreenType.Search)); }); + // when searching state changes, run animation and reset query accordingly + useEffect(() => { + if (searching) { + timing(top, topInConfig).start(() => setResults(undefined)); + } else { + setQuery(''); + handleBlur(); + timing(top, topOutConfig).start(); + } + }, [searching]); + const loadRecentlySearchedUsers = async () => { try { const asyncCache = await AsyncStorage.getItem('@recently_searched_users'); @@ -120,15 +132,12 @@ const SearchScreen: React.FC = () => { 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); }; @@ -141,7 +150,7 @@ const SearchScreen: React.FC = () => { onBlur={handleBlur} onFocus={handleFocus} value={query} - {...{top, searching}} + {...{top}} /> Date: Sun, 7 Mar 2021 23:43:39 -0500 Subject: Hide cancel button when not searching --- src/components/search/SearchBar.tsx | 97 +++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 52 deletions(-) (limited to 'src') 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 = ({ onChangeText, value, onCancel, - style, + top, }) => { const handleSubmit = ( e: NativeSyntheticEvent, @@ -36,47 +36,52 @@ const SearchBar: React.FC = ({ Keyboard.dismiss(); }; + /* + * CSS properties for width change animation. + */ + const marginRight: Animated.Node = interpolate(top, { + inputRange: [-SCREEN_HEIGHT, 0], + outputRange: [0, 58], + }); + const opacity: Animated.Node = interpolate(top, { + inputRange: [-SCREEN_HEIGHT, 0], + outputRange: [0, 1], + }); + return ( - <> - - - - - - - - Cancel - - - - - Try searching for "trending on tagg" - - + + + + + + + + Cancel + + + ); }; 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', }, }); -- cgit v1.2.3-70-g09d2 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; @@ -21,7 +21,8 @@ const SearchResultsBackground: React.FC = ({ return ( - + {children} @@ -29,14 +30,14 @@ const SearchResultsBackground: React.FC = ({ }; 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 ( - - - - - - - - {results === undefined && - recents.length + recentCategories.length !== 0 ? ( - - ) : ( - - )} - - - - - + + + + + + + {results === undefined && + recents.length + recentCategories.length !== 0 ? ( + + ) : ( + + )} + + + + ); }; 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 From da87ce9d43e1d5c93e9c3cbd7f1e90aa195fb023 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 00:01:27 -0500 Subject: Increase paddingTop to lower search bar --- src/screens/search/SearchScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index dae1b174..34d98977 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -204,7 +204,7 @@ const SearchScreen: React.FC = () => { const styles = StyleSheet.create({ screenContainer: { - paddingTop: 10, + paddingTop: 15, backgroundColor: '#fff', }, contentContainer: { -- cgit v1.2.3-70-g09d2 From 78954d1bfe2e3c385bd575f0dedbb65bb574078f Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 00:29:49 -0500 Subject: Adjust search results top padding --- src/components/search/SearchResultList.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 41c8c8b2..f6e26820 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -70,6 +70,7 @@ const SearchResultList: React.FC = ({ const styles = StyleSheet.create({ container: { + paddingTop: 25, height: SCREEN_HEIGHT, }, sectionHeaderStyle: { -- cgit v1.2.3-70-g09d2 From fe8220212c64c5d60b43785f4e669642c8761631 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 20:12:56 -0500 Subject: Fix query clearing delay --- src/screens/search/SearchScreen.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 34d98977..4e6ce6a4 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -64,6 +64,7 @@ const SearchScreen: React.FC = () => { * Main handler for changes in query. */ useEffect(() => { + if (!searching) return; if (!query.length) loadRecentSearches(); if (query.length < 3) { setResults(undefined); @@ -102,6 +103,17 @@ const SearchScreen: React.FC = () => { dispatch(resetScreenType(ScreenType.Search)); }); + // when searching state changes, run animation and reset query accordingly + useEffect(() => { + if (searching) { + timing(top, topInConfig).start(() => setResults(undefined)); + } else { + setQuery(''); + handleBlur(); + timing(top, topOutConfig).start(); + } + }, [searching]); + const loadRecentlySearchedUsers = async () => { try { const asyncCache = await AsyncStorage.getItem('@recently_searched_users'); @@ -148,15 +160,12 @@ const SearchScreen: React.FC = () => { 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); }; -- cgit v1.2.3-70-g09d2 From c6c0370bf1ddf052fbb56d32b9e21097950b8b16 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 21:00:39 -0500 Subject: Fix styles messed up during merges --- src/components/search/RecentSearches.tsx | 10 +++------- src/components/search/SearchResultCell.tsx | 1 + src/components/search/SearchResultList.tsx | 1 - src/components/search/SearchResults.tsx | 1 + src/components/search/SearchResultsBackground.tsx | 1 + 5 files changed, 6 insertions(+), 8 deletions(-) (limited to 'src') 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 = (props) => { - const { - sectionTitle, - recents, - recentCategories, - screenType, - } = props; + const {sectionTitle, recents, recentCategories, screenType} = props; return ( = (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/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index e0351d96..5e6bb026 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -169,6 +169,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', paddingHorizontal: 25, paddingVertical: 15, + backgroundColor: 'pink', }, imageContainer: { width: SCREEN_WIDTH * 0.112, diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index f6e26820..41c8c8b2 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -70,7 +70,6 @@ const SearchResultList: React.FC = ({ const styles = StyleSheet.create({ container: { - paddingTop: 25, height: SCREEN_HEIGHT, }, sectionHeaderStyle: { diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index 798d3251..f9de8927 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -10,6 +10,7 @@ import {StyleSheet, View} from 'react-native'; import SearchResultsCell from './SearchResultCell'; import {useSelector} from 'react-redux'; import {RootState} from 'src/store/rootReducer'; +import {SCREEN_WIDTH} from '../../utils'; interface SearchResultsProps { results: ProfilePreviewType[]; previewType: PreviewType; diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index 7c1244fe..2833553d 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -37,6 +37,7 @@ const styles = StyleSheet.create({ }, contentContainer: { flex: 1, + paddingVertical: 10, paddingBottom: SCREEN_HEIGHT / 15, }, }); -- cgit v1.2.3-70-g09d2 From ce4b25405b1a17ddf80211d903ce02b992422323 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 21:08:40 -0500 Subject: Fix other styles screwed up during merging --- src/components/search/SearchResultCell.tsx | 1 - src/components/search/SearchResults.tsx | 33 ++---------------------------- 2 files changed, 2 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 5e6bb026..e0351d96 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -169,7 +169,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', paddingHorizontal: 25, paddingVertical: 15, - backgroundColor: 'pink', }, imageContainer: { width: SCREEN_WIDTH * 0.112, diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index f9de8927..fbeae1d8 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -5,42 +5,24 @@ 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'; import {RootState} from 'src/store/rootReducer'; -import {SCREEN_WIDTH} from '../../utils'; interface SearchResultsProps { results: ProfilePreviewType[]; previewType: PreviewType; screenType: ScreenType; categories: CategoryPreviewType[]; } -const SearchResults: React.FC = ({ - results, - previewType, - screenType, - categories, -}) => { +const SearchResults: React.FC = ({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 ( - + {categories.map((category: CategoryPreviewType) => ( = ({ ); }; -const styles = StyleSheet.create({ - containerSearch: { - flexDirection: 'column', - flexWrap: 'wrap', - }, - container: { - flexDirection: 'row', - flexWrap: 'wrap', - }, -}); - export default SearchResults; -- cgit v1.2.3-70-g09d2