How to use asyncstorage in ReactNative

Question

I made localstorage in ReactJS that works well.
But I want to use this code to React-native.
I am confused how I can apply to
This code is of ReactJs.

...
  componentWillMount(){
    const contactData = localStorage.contactData;
    if(contactData){
      this.setState({
        contactData:JSON.parse(contactData)
      })
    }
  }
...
...
  componentWillMount(){
    const contactData = localStorage.contactData;
    if(contactData){
      this.setState({
        contactData:JSON.parse(contactData)
      })
    }
  }
...

I read this "https://facebook.github.io/react-native/docs/asyncstorage.html"
But I don't understand well.

mahmoudafer · Accepted Answer · 2019-01-01 08:22:52Z

4

For the React-native storage, you have to use the AsyncStorage. Above Code in react-native will become.

...
async componentWillMount(){
const contactData = await AsyncStorage.getItem('contactData');
if(contactData){
  this.setState({
    contactData:JSON.parse(contactData)
  })
}
}
...
...
async componentWillMount(){
const contactData = localStorage.getItem('contactData');
if(contactData){
  this.setState({
    contactData:JSON.parse(contactData)
  })
}
}
...

You can either use the async-await or then/catch promise for handling the data.

edited Jan 1, 2019 at 8:22

mahmoudafer

1,1823 gold badges14 silver badges30 bronze badges

answered Dec 31, 2018 at 13:35

Charanjeet Singh

2511 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ammar Iqbal · Accepted Answer · 2018-12-31 13:47:04Z

1

    this.retrieveItem(goalCategory).then((goals) => {
              //this callback is executed when your Promise is resolved
              }).catch((error) => {
              //this callback is executed when your Promise is rejected
              console.log('Promise is rejected with error: ' + error);
              }); 

//the functionality of the retrieveItem is shown below
async retrieveItem(key) {
    try {
      const retrievedItem =  await AsyncStorage.getItem(key);
      const item = JSON.parse(retrievedItem);
      return item;
    } catch (error) {
      console.log(error.message);
    }
    return
  }

answered Dec 31, 2018 at 13:47

Ammar Iqbal

514 bronze badges

Comments

nipek · Accepted Answer · 2019-01-01 08:52:50Z

Save to AsyncStorage

const saveUserId = async userId => {
  try {
    await AsyncStorage.setItem('userId', userId);
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
  }
};

Retrieve a value from AsyncStorage

    const getUserId = async () => {
          try {
            const uid = await AsyncStorage.getItem('userId');
             console.log(uid);
              } catch (error) {
                // Error retrieving data
                console.log(error.message);
              }
            };

Delete from AsyncStorage

const deleteUserId = async () => {
  try {
    await AsyncStorage.removeItem('userId');
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
  }
}

Collectives™ on Stack Overflow

How to use asyncstorage in ReactNative

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related