This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


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

    Jason BrownJason Brown

    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

    react-nativeReact Native
    >0.35.0 <0.37.0


    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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