How it works...

The first thing we did in our component was set our state. The task state is for the input to create new items, and the list state is to save all the tasks items:

    state = {
      task: '',
      list: []
    };

The TextInput component creates an input element, the main difference from the input in React is that instead of using the onChange method, it is using onChangeText and by default gets the value, and we can update our state directly:

  <TextInput
    style={styles.inputText}
    placeholder="Add a new task"
    onChangeText={(value) => this.setState({ task: value })}
    value={this.state.task}
  />

The TouchableOpacity component is to handle click events (onPress in React Native) and can be used as a button. Maybe you're wondering why I didn't use the component Button directly; this is because on iOS it's not possible to add a background color to the button, it only works with backgrounds on Android. Using TouchableOpacity (or TouchableHighlight), you can personalize the styles, and it works perfectly as a button:

  <TouchableOpacity
    style={styles.button}
    onPress={this.onPressAddTask}
  >
    <Text style={styles.submitText}>+ Add Task</Text>
  </TouchableOpacity>

In the render of the tasks, I implemented a Zebra style (mixed colors) for the tasks. Also, we are handling onPressDeleteTask to remove each item by clicking the X button:

    {list.map((item, i) => {
      zebraIndex = zebraIndex === 2 ? 1 : 2;

      return (
        <View key={`task${i}`} style={styles[`task${zebraIndex}`]}>
          <Text>{item.task}</Text>
          <TouchableOpacity onPress={() => { 
           this.onPressDeleteTask(item.id) }}>
            <Text style={styles.delete}>
              X
            </Text>
          </TouchableOpacity>
        </View>
      );
    })}

If we run the application, the first thing we are going to see is this view:

If we don't have any tasks, we will see the "There are no tasks yet, create a new one!" message.

As you can see, there is an input on the top that has the "Add a new task" placeholder. Let's add some tasks:

Finally, we can delete the tasks by clicking on the X; I'll remove the Pay the rent task:

As you can see with this basic Todo list, we learned how to use the local state and how to handle click and change events in React Native.