Search Filter with React Native on FlatList

Question

I am trying to search through a flatlist based on a search bar text. The problem I am running into is that when the user mistypes...say they wanted to type \"burger\" but ty

Answer 1

For a useful in-memory search you should keep initial data seperately.

I have more simple solution for this.

This solution for in-memory search on FlatList's data and uses it String.prototype​.includes() method to search substring.

You can find full source code of this component in this gist; https://gist.github.com/metehansenol/46d065b132dd8916159910d5e9586058

My initial state;

this.state = {
  searchText: "",
  data: [],
  filteredData: []
};

My SearchBar component (it comes from react-native-elements package);

My search method;

search = (searchText) => {
  this.setState({searchText: searchText});

  let filteredData = this.state.data.filter(function (item) {
    return item.description.includes(searchText);
  });

  this.setState({filteredData: filteredData});
};

And last my FlatList's DataSource expression;

 0 ? this.state.filteredData : this.state.data}
  keyExtractor={(item) => `item-${item.id}`}
  renderItem={({item}) => }
/>

Happy coding...