diff --git a/examples/ReactExample/components/realm.js b/examples/ReactExample/components/realm.js
index 7a62e345..d1b172b7 100644
--- a/examples/ReactExample/components/realm.js
+++ b/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: ''},
]
},
{
diff --git a/examples/ReactExample/components/styles.js b/examples/ReactExample/components/styles.js
index d02ea704..798b9eef 100644
--- a/examples/ReactExample/components/styles.js
+++ b/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',
diff --git a/examples/ReactExample/components/todo-item-checkbox.js b/examples/ReactExample/components/todo-item-checkbox.js
new file mode 100644
index 00000000..6cfbd3cf
--- /dev/null
+++ b/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 (
+
+
+
+ {this.props.checked ? '✓' : ''}
+
+
+
+ );
+ }
+}
+
+module.exports = TodoItemCheckbox;
diff --git a/examples/ReactExample/components/todo-item.js b/examples/ReactExample/components/todo-item.js
index 1ca68343..710fd537 100644
--- a/examples/ReactExample/components/todo-item.js
+++ b/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 = (
@@ -42,13 +45,14 @@ class TodoItem extends React.Component {
style={styles.listItemText}
onPress={this.props.onPress}
suppressHighlighting={true}>
- {this.props.item.text}
+ {item.text}
);
}
return (
+
{contents}
);
@@ -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;