Creating a Todo List with React Native

In this recipe, we are going to learn how to handle events in React Native and how to handle the state by creating a simple Todo list.

How to do it...

For this recipe, I created a new React Application called "MySecondReactNativeApp":

1. Create an src folder and move the App.js file inside. Also, modify this file to include our Todo list:

import React, { Component } from 'react';

import Todo from './components/Todo';

 export default class App extends Component {
render() {
return (
        <Todo />
      );
    }
  }

File: src/App.js

2. Our Todo component will be:

import React, { Component } from 'react';
import { 
    Text, 
    View, 
    TextInput, 
    TouchableOpacity, 
    ScrollView 
  } from 'react-native';

import styles from './TodoStyles';

class Todo extends Component {
state = {
task: '',
list: []
    };

onPressAddTask = () => {
if (this.state.task) {
const newTask = this.state.task;
const lastTask = this.state.list[0] || { id: 0 };
const...