Searching a FlatList in React Native

Question

I'm developing a simple app in React Native that consists of a React Navigation page, a FlatList (on that page), and I would like a simple iOS-friendly search bar to search the contents of that list (only the titles of each item). What is the quickest/easiest/most effective way to achieve this?

Thanks, Eric

Answer 1

Depends on where you store your data. If you are using normal state, you can do the following;

1. Define a search text in state, let's say searchInput
2. Define your data in state as array of objects, let's say it has title in field title and array is called listItems
3. On your flatlist, as your data give this.state.listItems.filter(item => item.title.includes(this.state.searchInput)).

When you update your state for searchInput, your list should update accordingly.