title: retrieve data from asyncStorage in react native
body: <p>I know the similar question has been asked such as <a href="https://stackoverflow.com/questions/33553112/react-native-asyncstorage-fetches-data-after-rendering">this</a>, but am not able to find an answer to this. I am a newbie to react-native as well. I need to retrieve data from storage this is how I store the value after API call </p>
  
  <pre><code>_storeData = async response =&gt; {
   it AsyncStorage.setItem(token, (response))
    .then(() =&gt; {
    this.setState({
       shouldLoad : false
     });  
      console.log("Data saved successfully" + response);
      this.props.navigation.navigate("HomeScreen");
    })
    .catch(() =&gt; {
      console.log("There was an error saving the data");
    });
   };
  </code></pre>
  
  <p>This is how I tried to retrieve data from <strong>AsyncStorage</strong> </p>
  
  <pre><code> AsyncStorage.getItem(token).then((token) =&gt; {
    this.setState({
      token : tokentoken,
      currentState : false
    });
  });
  </code></pre>
  
  <p>What am trying to achieve is session management. On login, I save the sessionToken to AsyncStorage, and when the app is started again, I need to retrieve the data back. I tried different code but am not getting output. </p>
  
  <p>Any help will be appreciated
  Thanks in advance</p>
  
  <p><strong>EDIT 1.</strong></p>
  
  <p>Am pasting the whole code here so that anyone could point out where am going wrong.</p>
  
  <pre><code>export default class App extends Component {
   constructor() {
  super();
  this.state = {
    token: null,
    currentState : true,
  };
  }
  
   componentDidMount() {
  AsyncStorage.getItem(token).then((token) =&gt; {
    this.setState({
      token : tokentoken,
      currentState : false
    });
  });
    }
  
  
    render() {
  var ggg = this.state.token;
  console.log(ggg);
  
  if(this.state.currentState === false){
  
  if (this.state.token === "" || this.state.token === null) {
    return &lt;LoginNav /&gt;;
  } else {
    return &lt;HomeNavigatorNew /&gt;;
  }
  
  }
  
   else{
  return (  &lt;ActivityIndicator  
    animating={true}
      style={{ 
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
  
        height: 80
      }}
      size="large"
    /&gt;)
    }
    }
   }
  </code></pre>
  
  <p><strong>EDIT 2.</strong> </p>
  
  <p>I was writing the above code in App.js I just moved the whole code to Login.js(another file) and it just worked. Does that mean anything.. .? Is it like that I should write retreiving code in App.js</p>
  
  <p><strong>EDIT 3.</strong>
  Thanks to @Mohammed Ashfaq and @Samer Murad for responding so quickly. 
  In Sammrs code I noticed the AsyncStorage is imported in  curly parenthes not without them. I was importing without them. I had mentioned in my EDIT 2 that the code was working in another file in which the AsyncStorage is impoted in curly paranthes. Leaving the modified working code for future reference for someone</p>
  
  <pre><code> import React, {Component} from "react";
   import   {AsyncStorage, ActivityIndicator} from "react-native";
   import { createStackNavigator} from "react-navigation";
  
   export default class App extends Component {
    constructor() {
     super();
     this.state = {
    token: null,
    currentState: true,
  };
   }
    _retrieveData = async () =&gt; {
     console.log("Data retrieved successfully");
  
   // var tokenRetrieved = AsyncStorage.getItem('LoginTocken');
  await AsyncStorage.getItem('LoginTocken')
    .then(value =&gt; { 
      return (value);
    })
    .then ( valueJson =&gt; {
      this.setState({
        token : valueJson,
        currentState : false
      });
      console.log("Data retrieved successfully", valueJson);
    })
    .catch((error) =&gt; {
      console.log("There was an error retrieving the data" + error);
    });
  
  
  
    };
  
    handleSession = async () =&gt; {
  console.log("handleSession");
     this._retrieveData().catch((error) =&gt; {console.log("error is " + 
   error);});
    };
  
    componentWillMount() {
  console.log("componentWillMount");
  this.handleSession();
    }
  
  
    render() {
  
  
  if (this.state.token === "" || this.state.token === null) {
    return &lt;LoginNav / &gt; ;
  } else {
    return &lt;HomeNavigatorNew / &gt; ;
  }
   }
  
  }
  </code></pre>
  
  <p>I don't have a clue why and how it make difference when some import are done without curly parenthes**{}** where some are done with them. If anyone know why the curly paranthes are omitted/added at times I request them to leave a answer.</p>