react-native-check-box
react-native-check-box copied to clipboard
Checkbox is not changing value dinamically
I have a simple login screen which has an implementation of this check box; the form has a username, password and remember password field (the checkbox), all of them retrieving their values from the component's state. The constructor initially sets the checkbox as false on the first run like this:
constructor(props){
super(props);
this.state = {
username: '',
password: '',
remember_password: false
}
}
Then inside componentWillMount
the app checks on the internal storage for stored values for username, password and remember password. If there are stored values, it sets the state of each to the corresponding values, making a re render For testing purposes, I encapsulated the checkbox render inside a function called renderCheckbox
which is called on the Login render
method whenever the checkbox is being rendered and made a log with the state value passed:
{this.renderCheckbox(this.state.remember_password)}
The problem is when the app loads the username and the password get filled with the stored data, but the checkbox is still unchecked even when the stored value is set to true.
renderCheckbox = (checked) => {
console.log("receiving checked as: ", checked);
return (
<CheckBox
checkBoxColor='#d0d0d0'
rightText="Remember Password"
onClick={() => this.storeCredentials(checked)}
isChecked={checked}
rightTextStyle={{color: '#d0d0d0'}}
style={{marginTop: 5, marginBottom: 15}}
/>
);
}
As you can see it first receives the remember_password: false
from the constructor on the state but then receives the true
value from componentWillMount
but it still shows unchecked on the screen. Am I missing something or is the component not capable of handling such situations?
Thanks
Additional information update: it looks like the problem comes when the component is updated from an async function, if I set remember_password
to true directly on componentWillMount
, it renders properly but if I set its state inside the async function that gets the values from the internal storage it fails to render the proper value.
As a side note, the exact same code works with other checkbox components.
Update: this is totally related to #9, if I set it up on my end it does render initially with the expected value, but I can't set it back to unchecked.
me too
i have the same problem
@JuanCAlpizar @ludashen
go to it's source code, and delete it's constructor function. then change all this.state
to this.props
.
It's because the isChecked
was pass to CheckBox as it's state
, when you change isChecked
value, it's not going to change CheckBox 's isChecked
state.