How to Create Search Filter in React Native | Search in FlatList

In this tutorial, you'll learn how to create search filter in react native. Here I've generated a user list from an API and then implemented search functionality in that list. So you'll learn how to fetch API data in react native and display those in FlatList and search using loadash.filter package.
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
1:22 Create the Search Box
4:14 Fetch the Data from API Endpoint
8:46 Display Fetched Data in FlatList
12:24 Implement the Search Filter Functionality
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@salilkaul364]

A very good tutorial man , informative and consice

[@TuiLaVu]

Thank bro, you save my day

[@ajalasegun1]

Great job!

[@harisgunasekaran4874]

Thanks for helping

[@user-ot2zu5mv4v]

You are Grate!!

[@Shubuu7]

Hello sir how to make responsive screen any plugin you used or not please make one dedicated video

[@rathierry]

Thank you ☺

[@itzpradip]

You're welcome 😊

[@fmaylinch]

Hi, thanks for the tutorial! Is the code uploaded anywhere?

[@ahsanali580]

Nice tutorial. Can you make react native series with supabase ? . Waiting for your series

[@yashwanthyash3846]

is it possible to create seach filter without using flatlist, is this possible to apply search filter in your react navigation v6 series homescreen ? and thank you for great videos

[@mounirben9370]

Great

[@manytechlive]

ขอขอบคุณ

[@DanKardell]

Great tutorial. How would you do this if you were not using Expo

[@itzpradip]

It'll be the same for react native cli also.

[@DanKardell]

So not using expo did not appear to be an issue. Thanks!

[@DanKardell]

Also on using the FILTERED package, why not just use the built-in filter. Keeping it simple.

[@user-mw7xr7vv1n]

Why you didn't used built in filter as you are using two data variables.
What lodash doing here?

[@yulius4527]

hello teacher, I try this worked butt the "first letter" query not include into seacrh ... example I try search "Ida" it wil not return but when I seacrh "da" it will return ida .. am i missing something ? ..

[@yulius4527]

ohh.. i try comment the toLowerCase Function , and works but i must write case sensitive ...

[@Gamerfan2000]

I have been following the video and it says Uncaught Error undefined is not a function

[@DanKardell]

One last thing.. why is it that you can't scroll all the way to the bottom when the keyboard is showing?

[@yanndeo9501]

hi , what framework ui do you used ??

[@itzpradip]

No UI framework... It's vanilla react native

[@muhammadumar-lw9fg]

@@itzpradip Keyboard is not appearing when text input is in focus ?

[@028-manikandan3]

Bro please put reactnative with typescript videos and projects bro.its very useful for all others

[@itzpradip]

Sure 👍 I'll do it soon.

[@user-qe1sh7nf7o]

its not filtering data from first character , just checking inbetween chars in a words

[@taiwodamilola8636]

the fix will be to also convert not just the query but also the item u are search against e.g
const contains = (
{lastName, firstName, userName}: Followerprops,
query: string,
) => {
if (
lastName.toLowerCase()?.includes(query) ||
userName.toLowerCase()?.includes(query) ||
firstName.toLowerCase()?.includes(query)
) {
return true;
}
return false;
};

[@ThannMalin]

TS please 😢

[@paysnug4470]

when data is much it will become slower