Fixed list update

ReactNativeClient/package.json

@@ -9,6 +9,8 @@
   "dependencies": {
     "react": "16.0.0-alpha.6",
     "react-native": "0.44.0",
+    "react-native-checkbox": "^1.1.0",
+    "react-native-vector-icons": "^2.0.3",
     "react-navigation": "^1.0.0-beta.9",
     "uuid": "^3.0.1"
   },

ReactNativeClient/src/components/checkbox.js

@@ -0,0 +1,36 @@
+// https://hellokoding.com/todo-app-with-react-native/
+
+import React, { Component } from 'react';
+import Icon from  'react-native-vector-icons/MaterialIcons';
+
+class Checkbox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: this.props.data
+    };
+  }
+
+  render() {
+    let iconName = 'check-box'; //this.state.data.completed ? 'check-box' : 'check-box-outline-blank';
+    let color = this.props.color || '#000';
+
+    return (
+      <Icon.Button
+        data={this.state.data}
+        name={iconName}
+        backgroundColor='rgba(0,0,0,0)'
+        color={color}
+        underlayColor='rgba(0,0,0,0)'
+        size={20}
+        iconStyle={{marginLeft: -10, marginRight: 0}}
+        activeOpacity={1}
+        borderRadius={5}
+        onPress={this.props.onCheckboxPressed}
+      >
+      </Icon.Button>
+    );
+  }
+}
+
+export { Checkbox }

ReactNativeClient/src/components/item-list.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
-import { ListView, Text, TouchableHighlight } from 'react-native';
+import { ListView, Text, TouchableHighlight, Switch, View } from 'react-native';
 import { Log } from 'src/log.js';
+import Checkbox from 'react-native-checkbox';
 import { _ } from 'src/locale.js';
 
 class ItemListComponent extends Component {
@@ -19,6 +20,11 @@ class ItemListComponent extends Component {
 		};
 	}
 
+	componentWillMount() {
+		const newDataSource = this.state.dataSource.cloneWithRows(this.props.items);
+		this.state = { dataSource: newDataSource };
+	}
+
 	componentWillReceiveProps(newProps) {
 		// When the items have changed, we just pass this to the data source. However, 
 		// when the list mode change, we need to clone the items to make sure the whole
@@ -61,10 +67,13 @@ class ItemListComponent extends Component {
 			let onLongPress = () => {
 				this.listView_itemLongPress(item.id);
 			}
-			let editable = this.props.listMode == 'edit' ? ' [X] ' : '';
+			let isEditable = this.props.listMode == 'edit';
 			return (
 				<TouchableHighlight onPress={onPress} onLongPress={onLongPress}>
-					<Text>{item.title}<Text>{editable}</Text></Text>
+					<View>
+						{ isEditable  && <Checkbox label={item.title} ></Checkbox> }
+						{ !isEditable && <Text>{item.title}</Text> }
+					</View>
 				</TouchableHighlight>
 			);
 		}