Make checkbox stateless

Author: gurch101

README.md

@@ -94,7 +94,7 @@ rightTextView | React.PropTypes.element | true |   | Custom right TextView
 rightTextStyle  | Text.propTypes.style | true |  | Custom right Text style
 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
+isChecked  |  React.PropTypes.bool |  false  |  false  | checkbox checked state
 onClick   |  React.PropTypes.func.isRequired |  false  |  | callback  function
 
 ## Contribution

index.js

@@ -14,17 +14,10 @@ import {
     Image,
     Text,
     TouchableHighlight
-} from 'react-native'
+} from 'react-native';
 
 
 export default class CheckBox extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isChecked: this.props.isChecked,
-        }
-    }
-
     static propTypes = {
         ...View.propTypes,
         leftText: React.PropTypes.string,
@@ -36,7 +29,7 @@ export default class CheckBox extends Component {
         checkedImage: React.PropTypes.element,
         unCheckedImage: React.PropTypes.element,
         onClick: React.PropTypes.func.isRequired,
-        isChecked: React.PropTypes.bool
+        isChecked: React.PropTypes.bool.isRequired
 
     }
     static defaultProps = {
@@ -50,44 +43,37 @@ export default class CheckBox extends Component {
         if (!this.props.leftText)return null;
         return (
             <Text style={[styles.leftText, this.props.leftTextStyle]}>{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.rightTextStyle]}>{this.props.rightText}</Text>
-        )
+        );
     }
 
     _renderImage() {
-        if (this.state.isChecked) {
+        if (this.props.isChecked) {
             return this.props.checkedImage ? this.props.checkedImage : this.genCheckedImage();
         } else {
             return this.props.unCheckedImage ? this.props.unCheckedImage : this.genCheckedImage();
         }
     }
 
     genCheckedImage() {
-        var source = this.state.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
+        var source = this.props.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
 
         return (
             <Image source={source}/>
-        )
-    }
-
-    onClick() {
-        this.setState({
-            isChecked: !this.state.isChecked
-        })
-        this.props.onClick();
+        );
     }
 
     render() {
         return (
             <TouchableHighlight
                 style={this.props.style}
-                onPress={()=>this.onClick()}
+                onPress={this.props.onClick}
                 underlayColor='transparent'
             >
                 <View style={styles.container}>
@@ -96,7 +82,7 @@ export default class CheckBox extends Component {
                     {this._renderRight()}
                 </View>
             </TouchableHighlight>
-        )
+        );
     }
 }
 const styles = StyleSheet.create({
@@ -111,4 +97,4 @@ const styles = StyleSheet.create({
         flex: 1,
         marginLeft: 10
     }
-})
+});