Name: Add a Remove Item Button to Each Row with React Native TouchableOpacity
Uploaded: 2016-11-19T13:30:31-06:00
Description: 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

Setup React Native for iOS and Android

Create the Basic React Native Todo Application Layout

Create a React Native TextInput

Add a Toggle All Complete Button with React Native TouchableOpacity

Create a List of Items with a React Native ListView

Add a Complete Toggle with React Native Switch

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

Filter Items in the React Native List View

Add the Total Remaining Item Count to the Footer with React Native Text

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity 

Persist Items with React Native AsyncStorage

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

Inline Edit Todo Items in a React Native ListView

Build a React Native Todo Application

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

https://app.egghead.io/api/v1/lessons/react-add-a-remove-item-button-to-each-row-with-react-native-touchableopacity/subtitles

[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

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

Share this video with your friends

Course

Build a React Native Todo Application