Boky
Boky

Reputation: 12064

Get item from AsyncStorage in React Native

I have a list of companies in React Native.

When I click on one of those companies I get the url of the API that is used for selected company. Then I store it to AsyncStorage and then I show the login screen. The function is as follows:

selectCompany(data_url, e) {
    AsyncStorage.setItem("data_url", JSON.stringify(data_url), () => this.props.login());
}

Then on login page if I click on sign in button I go to the onLogin function, the function is as follows:

onLogin: function() {  
  fetch(data.url + '/manager/api/v1/obtain-auth-token/', })
    .then(function(body) {
    return body.json();
  }).then(function(json) {
    .....
  }).catch(function() {
    ....
  });
},

And data.url comes from data.js file, and I try to get url from the data.js file as follows:

let data_url = AsyncStorage.getItem("data_url").then(json => JSON.parse(json));
module.exports = {

    url: data_url,
    .....
}

But it doesn't work. Any advice?

Upvotes: 1

Views: 2794

Answers (2)

Sricharan Kambhammettu
Sricharan Kambhammettu

Reputation: 308

AsyncStorage.getItem is a promise and needs to await for response rather than accessing direct and the function calling it should be defined as async. Here is an example to retrieve from AsyncStorage..

export async function getAccessKey(){
 let accessToken =  await AsyncStorage.getItem(ACCESS_TOKEN);
 return accessToken;
}

Upvotes: 0

Matt Aft
Matt Aft

Reputation: 8936

AsyncStorage is async, therefore data_url will not be defined until it's retrieved what its looking for, you would need to move the fetch into the promise thats returned from the get so it will run it once it's done getting the data. This might be one way you tackle it:

const data_url = () => AsyncStorage.getItem("data_url"); //change this into a function
module.exports = {

    url: data_url,
    .....
}

now inside your component...

onLogin: function() {
  data.url().then((url) => {
   fetch(JSON.parse(url) + '/manager/api/v1/obtain-auth-token/', })
    .then(function(body) {
      return body.json();
    }).then(function(json) {
    .....
    }).catch(function() {
    ....
    });
  });
},

Upvotes: 1

Related Questions