React Native Search Part — II

Let us try to show the search results with the <SearchComponent/> we have already built in the previous post react native search component.

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 searchTerm

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 searchedTerm .

We will have to do this in the below-listed cases:

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.

Improvements :

A repo can be found here.

This is Karthik representing Timeless.

If you find this blog post helpful, share it with a friend.

If you find any difficulties please feel free to add your comments.

Timeless

Practical Design and Development