Merge pull request #1 from mat1th/feature/right-text

add ability to add right text.

Author: crazycodeboy

README.md

@@ -80,6 +80,7 @@ Props              | Type     | Optional | Default     | Description
 ----------------- | -------- | -------- | ----------- | -----------
 style  | View.propTypes.style  | true |   |   Custom style checkbox
 leftText | React.PropTypes.string |true |   | Custom left Text
+rightText | React.PropTypes.string |true |   | Custom right Text
 checkedImage  |  React.PropTypes.element  | true  | Default image | Custom  checked Image
 unCheckedImage  |  React.PropTypes.element  | true  |  Default image  | Custom  unchecked Image
 isChecked  |  React.PropTypes.bool |  true  |  false  | Initialization checkbox checked

index.js

@@ -1,4 +1,4 @@
-/**
+ /**
  * react-native-check-box
  * Checkbox component for react native, it works on iOS and Android
  * https://github.com/crazycodeboy/react-native-check-box
@@ -29,6 +29,8 @@ export default class CheckBox extends Component {
         ...View.propTypes,
         leftText: React.PropTypes.string,
         leftTextView: React.PropTypes.element,
+        rightText: React.PropTypes.string,
+        rightTextView: React.PropTypes.string,
         checkedImage: React.PropTypes.element,
         unCheckedImage: React.PropTypes.element,
         onClick: React.PropTypes.func.isRequired,
@@ -46,6 +48,13 @@ export default class CheckBox extends Component {
             <Text style={styles.leftText}>{this.props.leftText}</Text>
         )
     }
+    _renderRight() {
+        if (this.props.rightTextView)return this.props.rightTextView;
+        if (!this.props.rightText)return null;
+        return (
+            <Text style={styles.rightText}>{this.props.rightText}</Text>
+        )
+    }
 
     _renderImage() {
         if (this.state.isChecked) {
@@ -80,6 +89,7 @@ export default class CheckBox extends Component {
                 <View style={styles.container}>
                     {this._renderLeft()}
                     {this._renderImage()}
+                    {this._renderRight()}
                 </View>
             </TouchableHighlight>
         )
@@ -89,10 +99,12 @@ const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
         alignItems: 'center'
-        // backgroundColor:'gray'
     },
     leftText: {
         flex: 1,
-        // backgroundColor:'red',
+    },
+    rightText: {
+        flex: 1,
+        marginLeft: 10
     }
-})
+})