Filter Items in the React Native List View

InstructorJason Brown

React Native0.35 - 0.37
React^15.0.0

Share this video with your friends

Send Tweet

We'll setup 3 buttons (All, Active, Complete) to filter the displayed items based on their completion status. We'll also show how to use flexbox flexDirection row lays out items differently than column.

Jean-Marie Porchet

~ 7 years ago

(duplicate post)

Jean-Marie Porchet

~ 7 years ago

If like me you're using a FlatList component instead of a ListView, you'll need to use filterItems on the FlatList data prop:

<FlatList data={filterItems(this.state.filter, this.state.items)}

handleFilter can just be this:

handleFilter (filter) {
  this.setState({ filter });
}