Add delete buttons for todo items in Example app

examples/ReactExample/components/styles.js

@@ -10,7 +10,6 @@ module.exports = React.StyleSheet.create({
         backgroundColor: '#ffffff',
     },
     listItem: {
-        paddingRight: 12,
         borderColor: "#c8c7cc",
         borderBottomWidth: 0.5,
         alignItems: 'stretch',
@@ -45,6 +44,12 @@ module.exports = React.StyleSheet.create({
         flex: 1,
         lineHeight: 30,
     },
+    listItemDelete: {
+        paddingLeft: 12,
+        paddingRight: 12,
+        flexDirection: 'column',
+        justifyContent: 'center',
+    },
     instructions: {
         textAlign: 'center',
         color: '#333333',

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

@@ -0,0 +1,20 @@
+'use strict';
+
+const React = require('react-native');
+const styles = require('./styles');
+
+const { Text, TouchableWithoutFeedback, View } = React;
+
+class TodoItemDelete extends React.Component {
+    render() {
+        return (
+            <TouchableWithoutFeedback onPress={this.props.onPress}>
+                <View style={styles.listItemDelete}>
+                    <Text>𐄂</Text>
+                </View>
+            </TouchableWithoutFeedback>
+        );
+    }
+}
+
+module.exports = TodoItemDelete;

examples/ReactExample/components/todo-item.js

@@ -2,6 +2,7 @@
 
 const React = require('react-native');
 const TodoItemCheckbox = require('./todo-item-checkbox');
+const TodoItemDelete = require('./todo-item-delete');
 const realm = require('./realm');
 const styles = require('./styles');
 
@@ -26,6 +27,7 @@ class TodoItem extends React.Component {
 
     render() {
         let item = this.props.item;
+        let deleteButton;
         let contents;
 
         if (this.props.editing) {
@@ -48,12 +50,17 @@ class TodoItem extends React.Component {
                     {item.text}
                 </Text>
             );
+
+            deleteButton = (
+                <TodoItemDelete onPress={this.props.onPressDelete} />
+            );
         }
 
         return (
             <View style={styles.listItem}>
                 <TodoItemCheckbox checked={item.done} onPress={this._onPressCheckbox} />
                 {contents}
+                {deleteButton}
             </View>
         );
     }

examples/ReactExample/components/todo-list.js

@@ -39,6 +39,7 @@ class TodoList extends React.Component {
                 item={item}
                 editing={this.state.editingRow == rowIndex}
                 onPress={() => this._onPressRow(rowIndex)}
+                onPressDelete={() => this._onPressDeleteRow(rowIndex)}
                 onEndEditing={() => this._onEndEditingRow(rowIndex)} />
         );
     }
@@ -53,6 +54,14 @@ class TodoList extends React.Component {
         this.setState({editingRow: rowIndex});
     }
 
+    _onPressDeleteRow(rowIndex) {
+        let items = this.props.list.items;
+
+        realm.write(() => items.splice(rowIndex, 1));
+
+        this.forceUpdate();
+    }
+
     _onEndEditingRow(rowIndex) {
         let items = this.props.list.items;