diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx index a78d23c9..5a21d8fd 100644 --- a/src/view/com/util/forms/SearchInput.tsx +++ b/src/view/com/util/forms/SearchInput.tsx @@ -26,65 +26,80 @@ interface Props { onSubmitQuery: () => void style?: StyleProp } -export function SearchInput({ - query, - setIsInputFocused, - onChangeQuery, - onPressCancelSearch, - onSubmitQuery, - style, -}: Props) { - const theme = useTheme() - const pal = usePalette('default') - const {_} = useLingui() - const textInput = React.useRef(null) - const onPressCancelSearchInner = React.useCallback(() => { - onPressCancelSearch() - textInput.current?.blur() - }, [onPressCancelSearch, textInput]) - - return ( - - - setIsInputFocused?.(true)} - onBlur={() => setIsInputFocused?.(false)} - onChangeText={onChangeQuery} - onSubmitEditing={onSubmitQuery} - accessibilityRole="search" - accessibilityLabel={_(msg`Search`)} - accessibilityHint="" - autoCorrect={false} - autoCapitalize="none" - /> - {query ? ( - - - - ) : undefined} - - ) +export interface SearchInputRef { + focus?: () => void } +export const SearchInput = React.forwardRef( + function SearchInput( + { + query, + setIsInputFocused, + onChangeQuery, + onPressCancelSearch, + onSubmitQuery, + style, + }, + ref, + ) { + const theme = useTheme() + const pal = usePalette('default') + const {_} = useLingui() + const textInput = React.useRef(null) + + const onPressCancelSearchInner = React.useCallback(() => { + onPressCancelSearch() + textInput.current?.blur() + }, [onPressCancelSearch, textInput]) + + React.useImperativeHandle(ref, () => ({ + focus: () => textInput.current?.focus(), + blur: () => textInput.current?.blur(), + })) + + return ( + + + setIsInputFocused?.(true)} + onBlur={() => setIsInputFocused?.(false)} + onChangeText={onChangeQuery} + onSubmitEditing={onSubmitQuery} + accessibilityRole="search" + accessibilityLabel={_(msg`Search`)} + accessibilityHint="" + autoCorrect={false} + autoCapitalize="none" + /> + {query ? ( + + + + ) : undefined} + + ) + }, +) + const styles = StyleSheet.create({ container: { flex: 1, diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 6651084b..7216fd10 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -1,5 +1,11 @@ import React from 'react' -import {ActivityIndicator, StyleSheet, View, type FlatList} from 'react-native' +import { + ActivityIndicator, + StyleSheet, + View, + type FlatList, + Pressable, +} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {ViewHeader} from 'view/com/util/ViewHeader' @@ -8,9 +14,9 @@ import {Link} from 'view/com/util/Link' import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ComposeIcon2, CogIcon} from 'lib/icons' +import {ComposeIcon2, CogIcon, MagnifyingGlassIcon2} from 'lib/icons' import {s} from 'lib/styles' -import {SearchInput} from 'view/com/util/forms/SearchInput' +import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput' import {UserAvatar} from 'view/com/util/UserAvatar' import { LoadingPlaceholder, @@ -36,6 +42,7 @@ import {cleanError} from 'lib/strings/errors' import {useComposerControls} from '#/state/shell/composer' import {useSession} from '#/state/session' import {isNative} from '#/platform/detection' +import {HITSLOP_10} from 'lib/constants' type Props = NativeStackScreenProps @@ -121,6 +128,7 @@ export function FeedsScreen(_props: Props) { } = useSearchPopularFeedsMutation() const {hasSession} = useSession() const listRef = React.useRef(null) + const searchInputRef = React.useRef(null) /** * A search query is present. We may not have search results yet. @@ -330,14 +338,26 @@ export function FeedsScreen(_props: Props) { const renderHeaderBtn = React.useCallback(() => { return ( - - - + + + + + + + + ) }, [pal, _]) @@ -398,12 +418,24 @@ export function FeedsScreen(_props: Props) { My Feeds - - - + + + + + + + + ) } @@ -443,6 +475,7 @@ export function FeedsScreen(_props: Props) { {!isMobile && (