42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import {View, Text, TextInput, SafeAreaView, Image, TouchableOpacity} from 'react-native'
|
|
import React, {useState} from 'react'
|
|
import {router, useLocalSearchParams, usePathname} from "expo-router";
|
|
import icons from "@/constants/icons";
|
|
import {useDebouncedCallback} from "use-debounce";
|
|
|
|
const Search = () => {
|
|
const path = usePathname();
|
|
const params = useLocalSearchParams<{query?: string}>();
|
|
const [search, setSearch] = useState(params.query);
|
|
|
|
// we will optimize search with debounce
|
|
|
|
const debounceSearch = useDebouncedCallback(
|
|
(text: string) => router.setParams({ query: text }),
|
|
300 // debounce delay in milliseconds
|
|
);
|
|
|
|
const handleSearch = (text: string) => {
|
|
console.log(search)
|
|
setSearch(text);
|
|
debounceSearch(text)
|
|
}
|
|
return (
|
|
<View className={'flex flex-row items-center justify-between w-full px-4 rounded-lg border border-blue-200 mt-5 py-2'}>
|
|
<View className={'flex-1 flex flex-row items-center justify-start z-50'}>
|
|
<Image source={icons.search} className={'size-5'}/>
|
|
<TextInput
|
|
value={search}
|
|
onChangeText={handleSearch}
|
|
placeholder={'Search...'}
|
|
style={{flex: 1, marginLeft: 10}}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity>
|
|
<Image source={icons.filter} className={'size-5'}/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
export default Search
|