Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    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
    reactReact
    Code

    Code

    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
    Transcript

    Transcript

    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

    Discuss

    Discuss