reactnative-todo

import { Constants } from 'expo';
import React, { Component } from "react";
import { View, ScrollView, Button, Text, Switch, StyleSheet } from "react-native" 

let id = 0;

const styles = StyleSheet.create({
  TodoContainer: {
    flexDirection: 'row', 
    alignItems: 'center',
  },
  appContainer: {
    paddingTop: Constants.statusBarHeight,
  },
  fill: {
    flex: 1
  },
});

const Todo = props => (
  <View style={styles.TodoContainer}>
    <Switch value={props.todo.checked} onValueChange={props.onToggle} />
    <Button onPress={props.onDelete} title="Delete"/>
    <Text>{props.todo.text}</Text>
  </View>
);

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: []
    };
  }

  render() {
    return (
      <View style={[styles.appContainer, styles.fill]}>
        <Text>Todo Counter: {this.state.todos.length}</Text>
        <Text>Unchecked Count: {this.state.todos.filter(todo => !todo.checked).length}</Text>
        <Button onPress={() => this.addTodo()} title="Add Todo"/>
        <ScrollView style={styles.fill}>
          {this.state.todos.map(todo => (
            <Todo
              todo={todo}
              onDelete={() => this.removeTodo(todo.id)}
              onToggle={() => this.toggleTodo(todo.id)}
            />
          ))}
        </ScrollView>
      </View>
    );
  }

  addTodo() {
    id++;
    const text = `TODO text ${id}`;
    this.setState({
      todos: [...this.state.todos, { id: id, text: text, checked: false }]
    });
  }

  removeTodo(id) {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id !== id)
    });
  }

  toggleTodo(id) {
    this.setState({
      todos: this.state.todos.map(todo => {
        if (todo.id !== id) return todo;
        return {
          ...todo,
          checked: !todo.checked
        };
      })
    });
  }
}