From abc2d25bfc06a40129b86d8387d6bec1dd197711 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Wed, 19 Aug 2020 11:54:00 -0700 Subject: [TMA-25*] Search Functionality Bug Fixes (#35) * Fix text input bugs * Disable scrolling when searching * Fix scroll function in results ScrollView * Resolve animation issues * [TMA-161] Recently Searched Users (#34) * Basic AsyncStorage code * Basic implementation complete Need to fix re-rendering bug * Removed errant comment * Fixed bug for rerendering upon addition to recents Need to fix bug for rerendering upon clearing * Fixed rerendering bug for clear * Only present recents header if users in recents * Lint cleaning * Basic AsyncStorage code * Basic implementation complete Need to fix re-rendering bug * Removed errant comment * Fixed bug for rerendering upon addition to recents Need to fix bug for rerendering upon clearing * Fixed rerendering bug for clear * Only present recents header if users in recents * Lint cleaning * Added comments for a function * Updated conditional presentation to use ternary * Created component for List Section Headers * Lint cleaning * Converted component to be for Recent Searches As opposed to just the list header * Fix text input bugs * Disable scrolling when searching * Fix scroll function in results ScrollView * Resolve animation issues Co-authored-by: Justin Shillingford --- src/components/search/SearchBar.tsx | 7 +++++-- src/components/search/SearchResultsBackground.tsx | 4 +++- src/screens/profile/ProfileScreen.tsx | 5 +---- src/screens/search/SearchScreen.tsx | 9 ++++++--- 4 files changed, 15 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 8bb93d54..ce825d8a 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -17,6 +17,10 @@ import Animated, { import {SCREEN_HEIGHT} from '../../utils'; import Icon from 'react-native-vector-icons/Feather'; +const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); + +const AnimatedIcon = Animated.createAnimatedComponent(Icon); + interface SearchBarProps extends TextInputProps { onCancel: () => void; top: Animated.Value; @@ -48,8 +52,6 @@ const SearchBar: React.FC = ({ e.preventDefault(); Keyboard.dismiss(); }; - const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); - const AnimatedIcon = Animated.createAnimatedComponent(Icon); return ( @@ -100,6 +102,7 @@ const styles = StyleSheet.create({ input: { flex: 1, fontSize: 16, + color: '#fff', }, cancelButton: { position: 'absolute', diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index 3e1e4fdc..77b1821d 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -31,6 +31,7 @@ const SearchResultsBackground: React.FC = ({ }; const styles = StyleSheet.create({ container: { + flex: 1, height: SCREEN_HEIGHT, width: SCREEN_WIDTH, padding: 20, @@ -39,7 +40,8 @@ const styles = StyleSheet.create({ zIndex: 0, }, contentContainer: { - flex: 1, + flexGrow: 1, + paddingBottom: SCREEN_HEIGHT / 15, }, results: { marginTop: StatusBarHeight + 110, diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx index 9da9a3d8..ea557063 100644 --- a/src/screens/profile/ProfileScreen.tsx +++ b/src/screens/profile/ProfileScreen.tsx @@ -4,16 +4,13 @@ import Animated from 'react-native-reanimated'; import {AuthContext} from '../../routes/authentication'; import {StatusBar} from 'react-native'; -// destructure Value object from Animated -const {Value} = Animated; - /** * Profile Screen for a user's logged in profile * including posts, messaging, and settings */ const ProfileScreen: React.FC = () => { const {user} = React.useContext(AuthContext); - const y = new Value(0); + const y = Animated.useValue(0); return ( <> diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index d85c0a90..2a2a5a4a 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -16,13 +16,11 @@ import AsyncStorage from '@react-native-community/async-storage'; import {ProfilePreviewType} from '../../types'; import {SEARCH_ENDPOINT} from '../../constants'; import {AuthContext} from '../../routes/authentication'; -const {Value} = Animated; /** * Search Screen for user recommendations and a search * tool to allow user to find other users */ -const top: Animated.Value = new Value(-SCREEN_HEIGHT); const SearchScreen: React.FC = () => { const {recentSearches} = React.useContext(AuthContext); @@ -31,6 +29,8 @@ const SearchScreen: React.FC = () => { const [recents, setRecents] = useState>( recentSearches, ); + const [searching, setSearching] = useState(false); + const top = Animated.useValue(-SCREEN_HEIGHT); useEffect(() => { if (query.length < 3) { setResults([]); @@ -63,6 +63,7 @@ const SearchScreen: React.FC = () => { easing: Easing.bezier(0.31, 0.14, 0.66, 0.82), }; timing(top, topInConfig).start(); + setSearching(true); }; const handleBlur = () => { Keyboard.dismiss(); @@ -72,6 +73,7 @@ const SearchScreen: React.FC = () => { easing: Easing.inOut(Easing.ease), }; timing(top, topOutConfig).start(); + setSearching(false); }; const loadRecentlySearchedUsers = async () => { try { @@ -98,6 +100,7 @@ const SearchScreen: React.FC = () => { { onBlur={Keyboard.dismiss} onFocus={handleFocus} value={query} - {...{top}} + {...{top, searching}} /> -- cgit v1.2.3-70-g09d2