Improve look of checkbox and smart list badges

examples/ReactExample/components/styles.js

@@ -28,10 +28,22 @@ module.exports = React.StyleSheet.create({
         width: 36,
     },
     listItemCheckbox: {
-        borderColor: "#000",
+        borderColor: '#ccc',
-        borderWidth: 0.5,
+        borderWidth: 1,
+        textAlign: 'center',
         width: 16,
         height: 16,
+        lineHeight: 14,
+    },
+    listItemCount: {
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        textAlign: 'center',
+        fontSize: 12,
+        width: 24,
+        height: 18,
+        lineHeight: 16,
     },
     listItemInput: {
         fontFamily: 'System',

examples/ReactExample/components/todo-item.js

@@ -34,9 +34,9 @@ class TodoItem extends TodoListItem {
         return (
             <TouchableWithoutFeedback onPress={this._onPressCheckbox}>
                 <View style={styles.listItemLeftSide}>
-                    <View style={styles.listItemCheckbox}>
+                    <Text style={styles.listItemCheckbox}>
-                        <Text>{this.done ? '✓' : ''}</Text>
+                        {this.done ? '✓' : ''}
-                    </View>
+                    </Text>
                 </View>
             </TouchableWithoutFeedback>
         );

examples/ReactExample/components/todo-listview.js

@@ -131,7 +131,9 @@ class TodoListExtraItem extends TodoListItem {
     renderLeftSide() {
         return (
             <View style={styles.listItemLeftSide}>
-                <Text>{this.props.item.items.length}</Text>
+                <Text style={styles.listItemCount}>
+                    {this.props.item.items.length}
+                </Text>
             </View>
         );
     }