Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-21 00:32:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement focus event listener for Search tab

Browse source 
Added a focus event listener to handle when the Search tab is pressed while already on the Search screen, focusing the input and clearing previous results.
This commit is contained in:
AdityasahuX07 2026-01-06 17:02:38 +05:30 committed by GitHub
parent 20601cd7ba
commit 56df30a4da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 93 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
src/screens/SearchScreen.tsx
View file

@ -130,11 +130,14 @@ const SearchScreen = () => {
const catalogSnapPoints = useMemo(() => ['50%'], []); const catalogSnapPoints = useMemo(() => ['50%'], []);
const genreSnapPoints = useMemo(() => ['50%'], []); const genreSnapPoints = useMemo(() => ['50%'], []);
// Scroll to top handler
const scrollToTop = useCallback(() => { const scrollToTop = useCallback(() => {
scrollViewRef.current?.scrollTo({ y: 0, animated: true }); scrollViewRef.current?.scrollTo({ y: 0, animated: true });
}, []); }, []);
const handleHeaderPress = useCallback(() => {
scrollViewRef.current?.scrollTo({ y: 0, animated: true });
}, []);
useScrollToTop('Search', scrollToTop); useScrollToTop('Search', scrollToTop);
useEffect(() => { useEffect(() => {
@ -144,6 +147,36 @@ const SearchScreen = () => {
}; };
}, []); }, []);
// NEW: Add focus event listener for when Search tab is pressed while already on Search screen
useEffect(() => {
const focusSubscription = DeviceEventEmitter.addListener(
'FOCUS_SEARCH_INPUT',
() => {
console.log('Search tab pressed while on Search screen - focusing input');
// Clear any search results to show a fresh state
if (query.length === 0) {
setResults({ byAddon: [], allResults: [] });
setSearched(false);
setShowRecent(true);
loadRecentSearches();
}
// Focus the input after a small delay
setTimeout(() => {
if (inputRef.current && isMounted.current) {
console.log('Focusing search input');
inputRef.current.focus();
}
}, 100);
}
);
return () => {
focusSubscription.remove();
};
}, [query]);
const handleShowMore = () => { const handleShowMore = () => {
if (pendingDiscoverResults.length === 0) return; if (pendingDiscoverResults.length === 0) return;
@ -906,10 +939,10 @@ const SearchScreen = () => {
isGrid && styles.discoverGridItem isGrid && styles.discoverGridItem
]} ]}
onPress={() => { onPress={() => {
navigation.navigate('Metadata', { navigation.navigate('Metadata', {
id: item.id, id: item.id,
type: item.type, type: item.type,
addonId: item.addonId addonId: item.addonId
}); });
}} }}
onLongPress={() => { onLongPress={() => {
@ -1147,60 +1180,67 @@ const SearchScreen = () => {
/> />
{/* ScreenHeader Component */} {/* ScreenHeader Component */}
<ScreenHeader <TouchableOpacity
title="Search" onPress={handleHeaderPress}
isTablet={isTV || isLargeTablet || isTablet} activeOpacity={1}
> >
{/* Search Bar */} <ScreenHeader
<View style={styles.searchBarContainer}> title="Search"
<View style={[ isTablet={isTV || isLargeTablet || isTablet}
styles.searchBarWrapper, >
{ width: '100%' } {/* Search Bar */}
]}> <View style={styles.searchBarContainer}>
<View style={[ <View style={[
styles.searchBar, styles.searchBarWrapper,
{ { width: '100%' }
backgroundColor: currentTheme.colors.elevation2,
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1,
}
]}> ]}>
<MaterialIcons <View style={[
name="search" styles.searchBar,
size={24} {
color={currentTheme.colors.lightGray} backgroundColor: currentTheme.colors.elevation2,
style={styles.searchIcon} borderColor: 'rgba(255,255,255,0.1)',
/> borderWidth: 1,
<TextInput }
style={[ ]}>
styles.searchInput, <MaterialIcons
{ color: currentTheme.colors.white } name="search"
]} size={24}
placeholder="Search movies, shows..." color={currentTheme.colors.lightGray}
placeholderTextColor={currentTheme.colors.lightGray} style={styles.searchIcon}
value={query} />
onChangeText={setQuery} <TextInput
returnKeyType="search" style={[
keyboardAppearance="dark" styles.searchInput,
ref={inputRef} { color: currentTheme.colors.white }
/> ]}
{query.length > 0 && ( placeholder="Search movies, shows..."
<TouchableOpacity placeholderTextColor={currentTheme.colors.lightGray}
onPress={handleClearSearch} value={query}
style={styles.clearButton} onChangeText={setQuery}
hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }} returnKeyType="search"
> keyboardAppearance="dark"
<MaterialIcons ref={inputRef}
name="close" onFocus={handleSearchFocus}
size={20} onBlur={handleSearchBlur}
color={currentTheme.colors.lightGray} />
/> {query.length > 0 && (
</TouchableOpacity> <TouchableOpacity
)} onPress={handleClearSearch}
style={styles.clearButton}
hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
>
<MaterialIcons
name="close"
size={20}
color={currentTheme.colors.lightGray}
/>
</TouchableOpacity>
)}
</View>
</View> </View>
</View> </View>
</View> </ScreenHeader>
</ScreenHeader> </TouchableOpacity>
{/* Content Container */} {/* Content Container */}
<View style={[styles.contentContainer, { backgroundColor: currentTheme.colors.darkBackground }]}> <View style={[styles.contentContainer, { backgroundColor: currentTheme.colors.darkBackground }]}>