Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
};
})
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment