Add checkboxes next to todo items in Example app

examples/ReactExample/components/realm.js

@@ -7,7 +7,8 @@ module.exports = new Realm({
         {
             name: 'Todo',
             properties: [
-                {name: 'text', type: Realm.Types.STRING},
+                {name: 'done', type: Realm.Types.BOOL, default: false},
+                {name: 'text', type: Realm.Types.STRING, default: ''},
             ]
         },
         {

examples/ReactExample/components/styles.js

@@ -10,21 +10,40 @@ module.exports = React.StyleSheet.create({
         backgroundColor: '#ffffff',
     },
     listItem: {
-        padding: 12,
+        paddingRight: 12,
         borderColor: "#c8c7cc",
         borderBottomWidth: 0.5,
-        alignItems: 'center',
+        alignItems: 'stretch',
         alignSelf: 'stretch',
         flexDirection: 'row',
         flex: 1,
         height: 44,
     },
+    listItemCheckboxContainer: {
+        paddingLeft: 12,
+        paddingRight: 4,
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
+    listItemCheckbox: {
+        borderColor: "#000",
+        borderWidth: 0.5,
+        marginRight: 8,
+        width: 16,
+        height: 16,
+    },
+    listItemInput: {
+        fontFamily: 'System',
+        fontSize: 15,
+        flexDirection: 'column',
+        flex: 1,
+    },
     listItemText: {
         fontFamily: 'System',
         fontSize: 15,
         flexDirection: 'column',
         flex: 1,
-        lineHeight: 16,
+        lineHeight: 30,
     },
     instructions: {
         textAlign: 'center',

examples/ReactExample/components/todo-item-checkbox.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const React = require('react-native');
+const styles = require('./styles');
+
+const { Text, TouchableWithoutFeedback, View } = React;
+
+class TodoItemCheckbox extends React.Component {
+    render() {
+        return (
+            <TouchableWithoutFeedback onPress={this.props.onPress}>
+                <View style={styles.listItemCheckboxContainer}>
+                    <View style={styles.listItemCheckbox}>
+                        <Text>{this.props.checked ? '✓' : ''}</Text>
+                    </View>
+                </View>
+            </TouchableWithoutFeedback>
+        );
+    }
+}
+
+module.exports = TodoItemCheckbox;

examples/ReactExample/components/todo-item.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react-native');
+const TodoItemCheckbox = require('./todo-item-checkbox');
 const realm = require('./realm');
 const styles = require('./styles');
 
@@ -11,6 +12,7 @@ class TodoItem extends React.Component {
         super(props);
 
         this._onChangeText = this._onChangeText.bind(this);
+        this._onPressCheckbox = this._onPressCheckbox.bind(this);
     }
 
     componentDidMount() {
@@ -23,15 +25,16 @@ class TodoItem extends React.Component {
     }
 
     render() {
+        let item = this.props.item;
         let contents;
 
         if (this.props.editing) {
             contents = (
                 <TextInput
                     ref="input"
-                    value={this.props.item.text}
+                    value={item.text}
                     placeholder="Call Mom"
-                    style={styles.listItemText}
+                    style={styles.listItemInput}
                     onChangeText={this._onChangeText}
                     onEndEditing={this.props.onEndEditing}
                     enablesReturnKeyAutomatically={true} />
@@ -42,13 +45,14 @@ class TodoItem extends React.Component {
                     style={styles.listItemText}
                     onPress={this.props.onPress}
                     suppressHighlighting={true}>
-                    {this.props.item.text}
+                    {item.text}
                 </Text>
             );
         }
 
         return (
             <View style={styles.listItem}>
+                <TodoItemCheckbox checked={item.done} onPress={this._onPressCheckbox} />
                 {contents}
             </View>
         );
@@ -62,6 +66,15 @@ class TodoItem extends React.Component {
         this.forceUpdate();
     }
 
+    _onPressCheckbox() {
+        let item = this.props.item;
+        realm.write(() => {
+            item.done = !item.done;
+        });
+
+        this.forceUpdate();
+    }
+
     _focusInputIfNecessary() {
         if (!this.props.editing) {
             return;