diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx index 5572524..301762d 100644 --- a/app/components/TextInput.tsx +++ b/app/components/TextInput.tsx @@ -1,18 +1,22 @@ import colors from '@app/styles/colors' import font from '@app/styles/font' import React from 'react' -import { TextInput as ReactTextInput, StyleSheet, StyleProp, TextStyle, KeyboardTypeOptions } from 'react-native' +import { TextInput as ReactTextInput, StyleSheet, KeyboardTypeOptions, StyleProp, TextStyle } from 'react-native' -const TextInput = React.memo<{ - style?: StyleProp - value?: string - placeholder?: string - onChangeText?: (text: string) => void - onSubmitEditing?: () => void - keyboardType?: KeyboardTypeOptions -}>(({ style, value, placeholder, onChangeText, onSubmitEditing, keyboardType }) => { +const TextInput = React.forwardRef< + ReactTextInput, + { + style?: StyleProp + value?: string + placeholder?: string + onChangeText?: (text: string) => void + onSubmitEditing?: () => void + keyboardType?: KeyboardTypeOptions + } +>(({ style, value, placeholder, onChangeText, onSubmitEditing, keyboardType }, ref) => { return ( (({ item }) => { const setQueue = useStore(selectTrackPlayer.setQueue) @@ -82,6 +89,19 @@ const Search = () => { const [results, setResults] = useState({ artists: [], albums: [], songs: [] }) const [refreshing, setRefreshing] = useState(false) const [text, setText] = useState('') + const searchBarRef = useRef(null) + + useFocusEffect( + useCallback(() => { + const task = InteractionManager.runAfterInteractions(() => { + setTimeout(() => { + setText('') + searchBarRef.current?.focus() + }, 50) + }) + return () => task.cancel() + }, [searchBarRef]), + ) useActiveServerRefresh( useCallback(() => { @@ -114,7 +134,13 @@ const Search = () => { - +