update: Add labels

README.md

@@ -19,7 +19,8 @@ Circle-style checkbox component for React Native.
 ## Preview
 
 ![alt tag](http://s28.postimg.org/55twmp73d/uncheck.png)
-![alt tag](http://s22.postimg.org/q8398tg8t/check.png)
+![alt tag](http://s22.postimg.org/q8398tg8t/check.png)   
+![alt tag](http://s13.postimg.org/o5xeouklj/Screen_Shot_2016_01_22_at_17_08_28.png)
 
 ## Available properties:
 
@@ -31,3 +32,5 @@ Circle-style checkbox component for React Native.
 - `outerColor` : Color of outer circle. Default: `#FC9527`
 - `filterColor` : Color of underlayer circle. Default: `#FFF`
 - `innerColor` : Color of flag. Default: `#FC9527`
+- `label` : Checkbox label. Default: empty
+- `labelPosition` : Label rendering position. Default: `right`, may be 'right' or 'left'

index.js

@@ -1,5 +1,5 @@
 /*
-  ReactNativeCircleCheckbox 0.1.2
+  ReactNativeCircleCheckbox 0.2.0
   https://github.com/ParamoshkinAndrew/ReactNativeCircleCheckbox
   (c) 2016 Andrew Paramoshkin <paramoshkin.andrew@gmail.com>
   ReactNativeCircleCheckbox may be freely distributed under the MIT license.
@@ -11,6 +11,7 @@ var React = require('react-native');
 var {
   StyleSheet,
   View,
+  Text,
   Component,
   TouchableHighlight
 } = React;
@@ -19,13 +20,15 @@ class CircleCheckBox extends Component {
 
   static propTypes = {
    checked: React.PropTypes.bool,
+   label: React.PropTypes.string,
    outerSize: React.PropTypes.number,
    filterSize: React.PropTypes.number,
    innerSize: React.PropTypes.number,
    outerColor: React.PropTypes.string,
    filterColor: React.PropTypes.string,
    innerColor: React.PropTypes.string,
-   onToggle: React.PropTypes.func.isRequired
+   onToggle: React.PropTypes.func.isRequired,
+   labelPosition: React.PropTypes.oneOf(['right', 'left'])
   };
 
   static defaultProps = {
@@ -35,7 +38,9 @@ class CircleCheckBox extends Component {
     innerSize: 18,
     outerColor: '#FC9527',
     filterColor: '#FFF',
-    innerColor: '#FC9527'
+    innerColor: '#FC9527',
+    label: '',
+    labelPosition: 'right'
   };
 
   constructor(props) {
@@ -72,11 +77,15 @@ class CircleCheckBox extends Component {
 
   render() {
     return (
-      <TouchableHighlight style={[styles.alignStyle, this.state.customStyle._circleOuterStyle]} onPress={this._onToggle.bind(this)}>
-        <View style={[styles.alignStyle, this.state.customStyle._circleFilterStyle]}>
-          {this._renderInner()}
-        </View>
-      </TouchableHighlight>
+      <View style={styles.checkBoxContainer}>
+        {this._renderLabel('left')}
+        <TouchableHighlight style={[styles.alignStyle, this.state.customStyle._circleOuterStyle]} onPress={this._onToggle.bind(this)}>
+          <View style={[styles.alignStyle, this.state.customStyle._circleFilterStyle]}>
+            {this._renderInner()}
+          </View>
+        </TouchableHighlight>
+        {this._renderLabel('right')}
+      </View>
     );
   }
 
@@ -89,13 +98,30 @@ class CircleCheckBox extends Component {
   _renderInner() {
     return this.props.checked ? (<View style={this.state.customStyle._circleInnerStyle} />) : (<View/>);
   }
+
+  _renderLabel(position) {
+    var templ = (<View></View>);
+    if ((this.props.label.length > 0) && (position === this.props.labelPosition)) {
+      templ = (<Text style={styles.checkBoxLabel}>{this.props.label}</Text>);
+    }
+    return templ;
+
+  }
 }
 
 var styles = StyleSheet.create({
+  checkBoxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
   alignStyle: {
     justifyContent: 'center',
     alignItems: 'center'
   },
+  checkBoxLabel: {
+    marginLeft: 5,
+    marginRight: 5
+  }
 });
 
 module.exports = CircleCheckBox;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-circle-checkbox",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Circle checkbox component for React Native",
   "main": "index.js",
   "scripts": {