Skip to content

Instantly share code, notes, and snippets.

@williamwa
Last active August 29, 2015 14:17
Show Gist options
  • Save williamwa/8de6b06c48282d6ce57f to your computer and use it in GitHub Desktop.
Save williamwa/8de6b06c48282d6ce57f to your computer and use it in GitHub Desktop.
A todo list app by react native
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TextInput,
TouchableOpacity,
} = React;
var MyApp = React.createClass({
todos: [],
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});
//for(var i = 0; i<=10; i++){this.todos.push({text: 'I Will do:'+i, done: Math.random() > 0.5})}
return {
dataSource: ds.cloneWithRows(this.todos),
input: ''
};
},
editTodo: function(text){
this.setState({input:text});
},
submitTodo: function(){
this.todos.unshift({text: this.state.input, done: false});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.todos),
input: '',
});
},
toggleTodo: function(i){
this.todos[i].done = !this.todos[i].done;
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.todos),
});
},
renderTodoItem: function(item, si, i){
return (
<View style={styles.row}>
<View style={styles.rowLeft}>
<Text>{item.text}</Text>
</View>
<View style={styles.rowRight}>
<TouchableOpacity onPress={this.toggleTodo.bind(this, i)}>
<Text style={[styles.todoText, item.done?styles.todoTextDone:null]}>√</Text>
</TouchableOpacity>
</View>
</View>
);
},
render: function() {
return (
<View style={styles.container}>
<View style={styles.titleBar}>
<Text style={styles.title}>Todo List</Text>
</View>
<View style={styles.listArea}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderTodoItem} />
</View>
<TextInput
style={styles.input}
value={this.state.input}
onChangeText={this.editTodo}
onSubmitEditing={this.submitTodo} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
titleBar:{
height: 55,
padding: 20,
backgroundColor: 'white',
flex: 0,
},
title: {
fontSize: 22,
textAlign: 'center',
},
listArea: {
flex: 1,
},
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
rowLeft:{
flex: 1
},
rowRight:{
flex: 0,
width: 20,
},
todoText: {
textAlign: 'center',
color: '#DDDDDD',
},
todoTextDone: {
color: 'green',
},
input:{
height: 40,
borderColor: 'gray',
borderWidth: 1,
padding: 5,
flex: 0,
},
});
AppRegistry.registerComponent('MyApp', () => MyApp);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment