Show/ Hide components based on the checkbox state in react native

Question

in the settings page I have a check box checked as the default value. If a user uncheck it, then all the images in the application will be hidden and the user won't be able to see any image in the whole application. I think I need to control the state of the checkbox (checked or not ), change that value when clicking/ pressing on the checkbox, passing that new value to all the app (HOW? ), and then based on that value I can decide whether display or not the images.

So basically, my problem is to access to that status value and then decide what to display. here is the code I'm using in the settings page :

settings page:

     constructor(props) {
                super(props);

                this.state ={
                    status:false
                }
            };

        toggleStatus(){
            this.setState({
                status:!this.state.status
            });

 //I even hardcoded it to false but i keep getting null 

       AsyncStorage.setItem('myCheckbox',JSON.stringify(false));
                //AsyncStorage.setItem('myCheckbox',JSON.stringify(this.state.status));

                }
        ...
        render() {
        return(
        <TouchableOpacity onPress={()=>this.toggleStatus()}>
            <Text>
                press me to change state 
            </Text>
        </TouchableOpacity>

Second Page: where I need to access to the value stored in the asyncStorage

componentDidMount() {
        const value =   AsyncStorage.getItem('myCheckbox', (value) => {
            JSON.parse(value) 
            console.log("my check box value ", value)
        });

    }

and I keep getting in the console :

This code is working fine and it changes the value of status from false to true every time I press it

UPDATE trying to store a simple string without await in the settings page:

 toggleStatus() {
        this.setState({
            status: !this.state.status
        });
        AsyncStorage.setItem("myCheckbox", "save me");

        console.log("in the toggle status function", this.state.status)
    }

in the page I used :

componentDidMount(){

        let value = AsyncStorage.getItem("myCheckbox")

        console.log('in the other page i get ', value)

        }

and i get in the console : What's wrong ?!

PS: I'm using native base and I was wondering if I can do a onPress in the check box itself instead of touchableOpacity

Answer 1

You can use AsyncStorage as global storage mechanism.

In this case to access the variable in any other part of your app.

try {
  const value = await AsyncStorage.getItem('myCheckbox');
  if (value !== null){
    console.log(value);
  }
} catch (error) {
  // Error retrieving data
}

And to save it on toggleStatus

You can use:

try {
  await AsyncStorage.setItem('myCheckbox', 'myValue');
} catch (error) {
  // Error saving data
}

So every time you open and closes the app the state it will be available as it previously was. And you can import if from react-native.

import { AsyncStorage } from 'react-native';