diff --git a/ReactNativeClient/package.json b/ReactNativeClient/package.json
index 67eef6ea14..2b3387c00d 100644
--- a/ReactNativeClient/package.json
+++ b/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"
},
diff --git a/ReactNativeClient/src/components/checkbox.js b/ReactNativeClient/src/components/checkbox.js
new file mode 100644
index 0000000000..cec9b1677b
--- /dev/null
+++ b/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 (
+
+
+ );
+ }
+}
+
+export { Checkbox }
\ No newline at end of file
diff --git a/ReactNativeClient/src/components/item-list.js b/ReactNativeClient/src/components/item-list.js
index d121c7f00d..afd8b586ed 100644
--- a/ReactNativeClient/src/components/item-list.js
+++ b/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 (
- {item.title}{editable}
+
+ { isEditable && }
+ { !isEditable && {item.title} }
+
);
}