Wrong checked/unchecked logic

[MartinMobilize]

The component does not consider the 'isChecked' property.

The component refers all the time to this.state to check if the button is checked or not, and at the onClick event it just change the this.state.

This is not good. We need to rely on the this.props to let everyone to control the behavior.

1- Remove this.setState from onClick(). 2- on _renderImage() check this.props instead this.state 3- on genCheckedImage() check this.props instead this.state.

This is how these functions should look like:

_renderImage() {
    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.props.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');

    return (
        <Image source={source}/>
    )
}

onClick() {
    this.props.onClick();
}

[wzup]

@crazycodeboy Why this is not fixed yet?? More then a year now

[DavitVosk]

I have the same problem here. I use RN 0.52.2

[DavitVosk]

Guys you can use https://github.com/DavitVosk/react-native-check-box.git fork

[dblock]

Someone turn this into a PR?

That fork changes are only this:

  componentWillReceiveProps(nextProps) {
    if (this.props.isChecked !== nextProps.isChecked) {
      this.setState({ isChecked: nextProps.isChecked })
    }
  }

Doesn't seem to be related to the suggestions above.

This is working for me now:

            <CheckBox
              isChecked={this.state.acceptedTermsAndConditions}
              onClick={() => this.setState({ acceptedTermsAndConditions: !this.state.acceptedTermsAndConditions })}