Filter Items in the React Native List View
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.
[00:00] We'll start by importing TouchableOpacity from react-native in our footer.js. Now open up the view, create another view, and add three touchableOpacities. In the first, we'll say text and say all, to show all items.
[00:26] I'll add text to show active, and text for completed. Now we'll go create a stylesheet, say const styles=Stylesheet.create. We'll give a container, which will say padding of 16, flexDirection row, we'll align the items to the center, and then, we'll say justifyContent space-between.
[00:56] Now, we'll go apply style={styles.container} to our wrapping view. Now, if we refresh, we can see that our filters are stacked on top of each other. To fix this, we'll go add a filter style, say flexDirection:"row", now, I'll apply that to our view that's wrapping our filters, we'll say style=styles.filters, and then, we refresh we see they're next to each other now.
[01:31] Now, we'll go and style each of the filters, we'll create a filter style. We'll go to padding of 8, a borderRadius of 5, a borderWidth of 1, and a borderColor of transparent.
[01:41] Now, we'll go apply style={styles.filter} to each of our touchableOpacities. Now when we refresh, we can see that there's spacing in between each of our touchabeOpacities.
[02:03] Now, we'll go add an onPress prop to each of our touchableOpacities to be a function that calls this.props.onFilter, which will take an argument of the items that we want to show, in this case, it will be all. Copy this, here we'll switch this one to active, and here, we'll say completed.
[02:29] We'll eventually pass in the selected filters, we'll go ahead and destructure that from our props, and then, we'll change our touchableOpacities over to an array and say filter=all, the we'll say styles.selected.
[02:54] We'll go ahead and do that for all of our touchableOpacities. Changed this one to active, this one to completed, and now, we'll created our selected style. Say borderColor equals rgba 175,47,47, with a .2 opacity. Now, we'll go ahead and switch back to our app.
[03:31] On our state, we'll add our default filter which will start with all, now, we'll scroll down and we'll add filter={this.state.filter} to our footer so that when we refresh, we can see that the all is the selected style around it.
[03:52] Now, scroll to the top and we'll create const filterItems, which will be an item that takes a filter, as well as items, an arrow function, and will return items.filter, we'll have our item, and if filter is equal to all, then, we'll always return true, and therefore, show all items. If it's filter equal completed, then we will return item.complete, and then if filter is equal to active, we'll return ! Item.complete.
[04:39] Now, we'll go add a handleFilter call, which will receive a filter and we'll say this.setSource, we'll say this.state.items, we'll then filter items with filter and this.state.items, because we need to filter the items that we want to display, and then, we'll then pass in filter as the extra state. Well bind this, this.handleFilter=this.handleFilter.bind(this). We'll then go down to our footer, and pass in onFilter=this.handleFilter.
[05:24] Now, we can go and re-refresh, and add an item, add another, we'll toggle one of these to complete, and then say active, which will show the active items, and then completed to show the completed items, and then back to all.
[05:48] We'll now need to go filer items on all the other calls that have called setSource. We'll scroll up, in our handleRemove item we'll say filterItems, we'll pass in this.state.filter, and then the new items that we want to render.
[06:04] We'll place that with handleToggleComplete, handleToggleAllComplete, as well as handleAddNewItem. Now if we refresh, we can add an item, add another item, and we can toggle when complete and go to completed.
[06:29] We then add an item, but because it wasn't complete, it does not show up on the view, but it will show up on the active view and the all views. Now, all of our items are getting filtered regardless of what action you take.