Permalink
Browse files

Quick tweaks to get the Android TODO app working

  • Loading branch information...
lmorchard committed Sep 17, 2015
1 parent 38fb7af commit fd80e9859400744ac5fcffc8f7d75d6703a3856d
Showing with 41 additions and 49 deletions.
  1. +23 −47 lib/views/android/App.js
  2. +2 −2 lib/views/android/TodoItem.js
  3. +16 −0 lib/views/android/styles.js
View
@@ -1,48 +1,10 @@
var React = require('react-native');
var { ListView, Text, TextInput, View, SegmentedControlIOS } = React;
var { ListView, Text, TextInput, View, TouchableHighlight } = React;
var Views = require('../index');
var styles = require('./styles');
var NativeApp = module.exports = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to ANDROID STUB APP!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
});
var styles = React.StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
/*
var TodoList = require('./TodoList');
var App = module.exports = React.createClass({
@@ -53,9 +15,25 @@ var App = module.exports = React.createClass({
render() {
// Build segmented control labels with current filtered list totals
var listModeValues = Views.LIST_MODES.map((item) =>
item.label.replace('%s', this.state.app[item.state]));
var listModeButtons = Views.LIST_MODES.map((item) => {
var textStyle = (this.state.app.mode == item.mode) ?
styles.todoListFilterButtonTextSelected :
styles.todoListFilterButtonText;
return (
<TouchableHighlight
activeOpacity={1}
animationVelocity={0}
underlayColor="rgb(210, 230, 255)"
onPress={()=>this.setListMode(item.mode)}>
<View style={styles.todoListFiltersButton}>
<Text style={textStyle}>{item.label.replace('%s', this.state.app[item.state])}</Text>
</View>
</TouchableHighlight>
);
});
return (
<View style={styles.appContainer}>
@@ -64,10 +42,9 @@ var App = module.exports = React.createClass({
ref="newField"
placeholder="tap to add a new todo"
onSubmitEditing={this.handleNewTodoSubmit} />
<SegmentedControlIOS style={styles.todoListMode}
values={listModeValues}
selectedIndex={0}
onChange={this.handleListModeChange} />
<View style={styles.todoListFilters}>
{listModeButtons}
</View>
<TodoList collection={this.state.app.todos.subset} />
</View>
);
@@ -89,4 +66,3 @@ var App = module.exports = React.createClass({
}
});
*/
@@ -1,6 +1,6 @@
var React = require('react-native');
var { Text, TextInput, View, ListView, SwitchIOS,
var { Text, TextInput, View, ListView, SwitchAndroid,
TouchableHighlight } = React;
var Views = require('../index');
@@ -41,7 +41,7 @@ var TodoItem = module.exports = React.createClass({
return (
<View style={styles.todoItem}>
<SwitchIOS
<SwitchAndroid
style={styles.todoCompleted}
onValueChange={this.handleCompletedChange}
value={this.state.item.completed} />
@@ -12,6 +12,22 @@ module.exports = React.StyleSheet.create({
textAlign: 'center',
margin: 10,
},
todoListFilters: {
height: 40,
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'flex-start',
alignItems: 'center'
},
todoListFiltersButton: {
borderWidth: 1,
borderColor: '#000',
padding: 10,
height: 40
},
todoListFilterButtonTextSelected: {
fontWeight: 'bold'
},
todoList: {
// padding: 10
},

0 comments on commit fd80e98

Please sign in to comment.