Implement focus event listener for Search tab

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

View file

@ -130,11 +130,14 @@ const SearchScreen = () => {
const catalogSnapPoints = useMemo(() => ['50%'], []);
const genreSnapPoints = useMemo(() => ['50%'], []);
// Scroll to top handler
const scrollToTop = useCallback(() => {
scrollViewRef.current?.scrollTo({ y: 0, animated: true });
}, []);
const handleHeaderPress = useCallback(() => {
scrollViewRef.current?.scrollTo({ y: 0, animated: true });
}, []);
useScrollToTop('Search', scrollToTop);
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 = () => {
if (pendingDiscoverResults.length === 0) return;
@ -906,10 +939,10 @@ const SearchScreen = () => {
isGrid && styles.discoverGridItem
]}
onPress={() => {
navigation.navigate('Metadata', {
id: item.id,
navigation.navigate('Metadata', {
id: item.id,
type: item.type,
addonId: item.addonId
addonId: item.addonId
});
}}
onLongPress={() => {
@ -1147,60 +1180,67 @@ const SearchScreen = () => {
/>
{/* ScreenHeader Component */}
<ScreenHeader
title="Search"
isTablet={isTV || isLargeTablet || isTablet}
<TouchableOpacity
onPress={handleHeaderPress}
activeOpacity={1}
>
{/* Search Bar */}
<View style={styles.searchBarContainer}>
<View style={[
styles.searchBarWrapper,
{ width: '100%' }
]}>
<ScreenHeader
title="Search"
isTablet={isTV || isLargeTablet || isTablet}
>
{/* Search Bar */}
<View style={styles.searchBarContainer}>
<View style={[
styles.searchBar,
{
backgroundColor: currentTheme.colors.elevation2,
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1,
}
styles.searchBarWrapper,
{ width: '100%' }
]}>
<MaterialIcons
name="search"
size={24}
color={currentTheme.colors.lightGray}
style={styles.searchIcon}
/>
<TextInput
style={[
styles.searchInput,
{ color: currentTheme.colors.white }
]}
placeholder="Search movies, shows..."
placeholderTextColor={currentTheme.colors.lightGray}
value={query}
onChangeText={setQuery}
returnKeyType="search"
keyboardAppearance="dark"
ref={inputRef}
/>
{query.length > 0 && (
<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 style={[
styles.searchBar,
{
backgroundColor: currentTheme.colors.elevation2,
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1,
}
]}>
<MaterialIcons
name="search"
size={24}
color={currentTheme.colors.lightGray}
style={styles.searchIcon}
/>
<TextInput
style={[
styles.searchInput,
{ color: currentTheme.colors.white }
]}
placeholder="Search movies, shows..."
placeholderTextColor={currentTheme.colors.lightGray}
value={query}
onChangeText={setQuery}
returnKeyType="search"
keyboardAppearance="dark"
ref={inputRef}
onFocus={handleSearchFocus}
onBlur={handleSearchBlur}
/>
{query.length > 0 && (
<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>
</ScreenHeader>
</ScreenHeader>
</TouchableOpacity>
{/* Content Container */}
<View style={[styles.contentContainer, { backgroundColor: currentTheme.colors.darkBackground }]}>