title: Show/ Hide components based on the checkbox state in react native
body: <p>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 (<strong>HOW?</strong> ), and then based on that value I can decide whether display or not the images.</p>
  
  <p>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 : </p>
  
  <p>settings page: </p>
  
  <pre><code>     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(
          &lt;TouchableOpacity onPress={()=&gt;this.toggleStatus()}&gt;
              &lt;Text&gt;
                  press me to change state 
              &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>Second Page: where I need to access to the value stored in the asyncStorage</p>
  
  <pre><code>componentDidMount() {
          const value =   AsyncStorage.getItem('myCheckbox', (value) =&gt; {
              JSON.parse(value) 
              console.log("my check box value ", value)
          });
  
      }
  </code></pre>
  
  <p>and I keep getting in the console : 
  <a href="https://i.stack.imgur.com/6UfHe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6UfHe.png" alt="enter image description here"></a></p>
  
  <p>This code is working fine and it changes the value of status from false to true every time I press it </p>
  
  <p><strong>UPDATE</strong> trying to store a simple string without await 
  in the settings page: </p>
  
  <pre><code> toggleStatus() {
          this.setState({
              status: !this.state.status
          });
          AsyncStorage.setItem("myCheckbox", "save me");
  
          console.log("in the toggle status function", this.state.status)
      }
  </code></pre>
  
  <p>in the page I used : </p>
  
  <pre><code>componentDidMount(){
  
          let value = AsyncStorage.getItem("myCheckbox")
  
          console.log('in the other page i get ', value)
  
          }
  </code></pre>
  
  <p>and i get in the console : <a href="https://i.stack.imgur.com/l2FVO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l2FVO.png" alt="enter image description here"></a>
  What's wrong ?!</p>
  
  <p>PS: I'm using native base and I was wondering if I can do a onPress in the check box itself instead of touchableOpacity </p>