Save react-native-check-box status after reload

Question

I am building a React Native Iphone App.I have a checkbox "Remember me" in Login page, which I want to set to remember the username and password in order to login.I want to save the status of checkbox even after reload(Once it is ticked it should persist till it is ticked-off by the user).Below is my code.

index.js :

import React, { Component } from 'react';
import { View,KeyboardAvoidingView, Text, StyleSheet, Dimensions} from 'react- 
 native';
import CheckBox from 'react-native-check-box';
import AsyncStorage  from '@react-native-community/async-storage';

  export default class index extends Component{

  constructor() {
  super();
  this.state = {
  status: false 
  };

toggleStatus = async() =>{
  this.setState({
    status: !this.state.status
  });
  AsyncStorage.setItem("myCheckbox",JSON.stringify(this.state.status));
}

}
componentWillMount(){
AsyncStorage.getItem('myCheckbox').then((value) => {
  this.setState({
    status: (value === 'true')
  });
});
}


render() {

return (
  
  <KeyboardAvoidingView 
  style={{ flex: 1, backgroundColor: 'white', justifyContent: 'flex-end'}} 
  behavior="padding" 
  keyboardVerticalOffset={50}
  enabled>
  
   <Text>{typeof this.state.status +' : '+ this.state.status}</Text>
    
   <CheckBox
   style={{flex: 1,paddingLeft:100,paddingTop:20}}
   onClick={()=>{
   this.setState({
       isChecked:!this.state.isChecked
       
    })
   toggleStatus(this)
    }}
   isChecked={this.state.isChecked}
   rightText={"Remember me"}
    />


  
  </KeyboardAvoidingView>
);
}
}

 index.navigationOptions = {
 headerTitle: ''
 };

 const styles = StyleSheet.create({
 

 });

I could save the status but not set it after reload.I have tried some techniques using the stackoverflow logics, but dint give me proper result.Can anyone help me to set the checkbox.Thanks in advance.

question from:https://stackoverflow.com/questions/65927451/save-react-native-check-box-status-after-reload

Answer 1

I think you are making a mistake in your toggle method. async doesn't work here (Also we need to use await with async) you should write your code like this. setState take time to save the state so you need to use its callback function which called after the state saved. I am showing 2 ways here but I prefer the first one.

toggleStatus =() =>{
  this.setState({
    status: !this.state.status
  }, () => AsyncStorage.setItem("myCheckbox",JSON.stringify(this.state.status)));
}

OR You can do like

toggleStatus = () =>{
  AsyncStorage.setItem("myCheckbox",JSON.stringify(!this.state.status));
  this.setState({
    status: !this.state.status
  });
}