Add a Remove Item Button to Each Row with React Native TouchableOpacity

Jason Brown
InstructorJason Brown

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

[00:00] We'll start by importing TouchableOpacity from React native. We'll then render a touchable opacity after our text, then add some text, which we'll just give it an X.

[00:13] Then, give it a style of style=styles.destroy, and we will go create our destroy style. Let's say destroy, which is an object, and we'll say fontSize of 20, and color of #cc9a9a. Now when we go and we refresh, and we type an item, you can see that an X shows up that is pressable.

[00:38] Now, we'll wire up our button, we'll add an onPress={this.props.onRemove}, go back to our app, and we'll go add a handleRemoveItem, which will just take a key. We'll then say const newItems = this.state.items.filter(), we'll say item, passing in our arrow function, and then, we'll return item.key doesn't equal key.

[01:14] Now, we'll call this.setSource, pass in newItems, and newItems, then, we'll bind this.handleRemove(item)=this.handleRemove.bind(this); then scroll down to our row render, and we'll say onRemove = an arrow function, and call this.handle RemoveItem, pass in our key.

[01:39] Now when we go and we refresh, when we add an item we can now remove that item from the list