How can i store if checkbox is true using asyncstorage?

Question

I'm trying to make so, if the checkbox is true it should save it with asyncstorage but no matter what I try, I can't make it to work nor does google get me anything. I'm also new to asyncstorage aswell.

import React, { Component } from 'react';
import { CheckBox } from 'react-native-elements'
import AsyncStorage from '@react-native-community/async-storage';

import Fontisto from 'react-native-vector-icons/Fontisto';


export default class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: 'false',

    };
  }

  storeData = async () => {
    try {
      await AsyncStorage.setItem('@storage_Key')
    } catch (e) {

    }
  }

  getData = async () => {
    try {
      const value = await AsyncStorage.getItem('@storage_Key')
      if(value !== null) {

      }
    } catch(e) {

    }
  }

  render() {
    return (
      <CheckBox
        checkedIcon={<Fontisto name='checkbox-active' size={15} color='#000' />}
        uncheckedIcon={<Fontisto name='checkbox-passive' size={15} color='#000' />}
        checked={this.state.checked}
        onPress={() => this.setState({ checked: !this.state.checked })}
      />
    );
  }
}

UPDATED CODE BELOW

import React, { Component } from 'react';
import { CheckBox } from 'react-native-elements'
import AsyncStorage from '@react-native-community/async-storage';

import Fontisto from 'react-native-vector-icons/Fontisto';


export default class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,

    };
  }

  storeData = async () => {
    try {
     await AsyncStorage.setItem('@storage_Key', JSON.stringnify({checked: false}))
    } catch (e) {
      console.log('error storing data')
      console.log(e)
    }
  }

  componentDidMount(getData) {
    getData = async () => {
      try {
        const value = await AsyncStorage.getItem('@storage_Key')
        if(value !== null) {
          this.setState({checked: JSON.parse(value).checked})
        }
      } catch(e) {
        console.log('error restoring data')
        console.log(e)
      }
    }
  }

  render() {
    return (
      <CheckBox
        checkedIcon={<Fontisto name='checkbox-active' size={15} color='#000' />}
        uncheckedIcon={<Fontisto name='checkbox-passive' size={15} color='#000' />}
        checked={this.state.checked}
        onPress={() => this.componentDidMount()}
      />
    );
  }
}

THIS TEXT IS JUST HERE CUZ OF STACKOVERFLOW COMPLAINING ABOUT MORE CODE THAN TEXT.

Answer 1

First things first, I don't see you loading the data from the storage. You should call getData function in the componentDidMount lifecycle event and update your state with retreived value.

Also, you should add some item that you want to save. Here is a documentation on how the setItem method is used. As you can see, you need to pass some string as well. In your case, that could be something like "checked".

Answer 2

You can only store a string in AsyncStorage , So before storing, stringify your object value and also you are not passing any value while setting the item in AsyncStorage which you wanted to store , here is the solution.

Store like this.

await AsyncStorage.setItem('@storage_Key', JSON.stringnify({checked: false}))

And get like this

const value = await AsyncStorage.getItem('@storage_Key')

Also after getting value from storage setState to that value like this

this.setState({checked: JSON.parse(value).checked})

Then called your getData function inside componentDidMount

Answer 3

setItem take 2 parameters: key & value. Also when you setState based on previous state you should call setState with callback. And I see also that you're not calling storeData function any where

import React, { Component } from 'react';
import { CheckBox } from 'react-native-elements'
import AsyncStorage from '@react-native-community/async-storage';

import Fontisto from 'react-native-vector-icons/Fontisto';


export default class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: 'false',

    };
  }

  storeData = async () => {
    await this.setState(prevState => ({ checked: !prevState.checked }))
    try {
      await AsyncStorage.setItem('@storage_Key', this.state.checked)
    } catch (e) {
      console.log(e);
    }
  }

  getData = async () => {
    try {
      const value = await AsyncStorage.getItem('@storage_Key')
      if(value !== null) {
        console.log(value);
      }
    } catch(e) {
      console.log(e);
    }
  }

  render() {
    return (
      <CheckBox
        checkedIcon={<Fontisto name='checkbox-active' size={15} color='#000' />}
        uncheckedIcon={<Fontisto name='checkbox-passive' size={15} color='#000' />}
        checked={this.state.checked}
        onPress={() => storeData()}
      />
    );
  }
}