CODEWITHSUNDEEP
androidreactjsreact-native
Sxribe
Sxribe

Reputation: 815

React-Native Checkbox can't be unchecked

I have a CheckBox in my react-native application. When pressed, it can activate. However when pressed again, it doesn't uncheck itself. What am I doing wrong?

export default class MyClass extends Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: false
        };
    };

    render() {
        return (
            <View>
                <CheckBox
                    title='Click Here'
                    checked={this.state.checked}
                    onChange={() => {this.setState({checked: !this.state.checked})}}
                />
            </View>
        );
    }
}

Upvotes: 0

Views: 1190

Answers (2)

ParthS007
ParthS007

Reputation: 2689

Depending on the Checkbox you are using, you have to use correct prop for changing the state

<CheckBox
   ...
   checked={this.state.checked}
   onPress={() => this.setState({ checked: !this.state.checked })}
 />

<CheckBox
   ...
   value={this.state.checked}
   onValueChange={() => this.setState({ checked: !this.state.checked })}
 />

Upvotes: 1

Ishara Sandun
Ishara Sandun

Reputation: 737

right method will depend on the checkbox you are using. Please go through the props list of the checkbox you are using here.

If you are using 'react-native-checkbox' use onValueChange instead of onChange.

https://github.com/react-native-community/react-native-checkbox

If you're using checkbox from react-native-elements use onPress instead of onChange.

https://react-native-elements.github.io/react-native-elements/docs/checkbox.html#props

hope this helps

Upvotes: 0

Related Questions