I have created a mock list of names that will be useful for testing out the search.
Let us start coding !!
Some terms used :
searchTerm : A variable that stores the search value.
temporarySearchResults : A list of names after applying the
searchedTerm : A variable that stores the search value, which will be applied to the original list.
Edit file <SearchComponent.js>
So you can see that with
<TextInput> we also have an absolute position
<ScrollView> which render the`SearchList`.
We have used React.useMemo to update the search list only when the dependencies(here
searchTerm ) have changed.
The list gets rendered only when the
<TextInput> is focussed and the
searchTerm length is greater than 0.
Let us see how this works.
Well, it works fine.
Now moving ahead we can apply a full search on the main list.
For this, we will need to update the globally stored search variable
We will have to do this in the below-listed cases:
onSubmitEditing: Taps on the
sendbutton on the Keyboard.
onBlur: On Blur of <TextInput/> and there is a local search applied.
- On clicking the label
See all (3) namesin the dropdown.
Edit file App.js
We again use the React.useMemo which returns the memoized users list based on search applied.
This works great.
So we have made a normal SearchComponent into an Advanced Search Component.
I have checked it only in iOS, will soon fix issues surrounding Android, and will give an update.
I am sorry for using too many gifs. If there is a better way to do the same please leave a comment.
- Using just one
searchTermto handle both the local search result list and the global list.
- Including a close icon (x) inside the
<TextInput/>which can cancel the search, and it can turn into a Spinner when fetching the results.
- Better styling for list items.