Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example AsyncStorage React Native
/**
* Example AsyncStorage React Native
* https://github.com/pradeep1991singh
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
Button,
View,
AsyncStorage
} from 'react-native';
export default class AsyncStorageExample extends Component {
constructor(props) {
super(props);
this.state = {
myKey: null
}
}
async getKey() {
try {
const value = await AsyncStorage.getItem('@MySuperStore:key');
this.setState({myKey: value});
} catch (error) {
console.log("Error retrieving data" + error);
}
}
async saveKey(value) {
try {
await AsyncStorage.setItem('@MySuperStore:key', value);
} catch (error) {
console.log("Error saving data" + error);
}
}
async resetKey() {
try {
await AsyncStorage.removeItem('@MySuperStore:key');
const value = await AsyncStorage.getItem('@MySuperStore:key');
this.setState({myKey: value});
} catch (error) {
console.log("Error resetting data" + error);
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Demo AsyncStorage!
</Text>
<TextInput
style={styles.formInput}
placeholder="Enter key you want to save!"
value={this.state.myKey}
onChangeText={(value) => this.saveKey(value)}
/>
<Button
style={styles.formButton}
onPress={this.getKey.bind(this)}
title="Get Key"
color="#2196f3"
accessibilityLabel="Get Key"
/>
<Button
style={styles.formButton}
onPress={this.resetKey.bind(this)}
title="Reset"
color="#f44336"
accessibilityLabel="Reset"
/>
<Text style={styles.instructions}>
Stored key is = {this.state.myKey}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 30,
flex: 1,
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
formInput: {
paddingLeft: 5,
height: 50,
borderWidth: 1,
borderColor: "#555555",
},
formButton: {
borderWidth: 1,
borderColor: "#555555",
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
marginTop: 5,
},
});
AppRegistry.registerComponent('AsyncStorageExample', () => AsyncStorageExample);
@pradeep1991singh
Copy link
Author

pradeep1991singh commented Apr 7, 2017

@aryejfa
Copy link

aryejfa commented Apr 25, 2018

Nicei tutor sir..

@abbasalim
Copy link

abbasalim commented Aug 8, 2018

how call getKeys when start component without need prees Button?

@mipmip
Copy link

mipmip commented Aug 27, 2018

👍

@luissmg
Copy link

luissmg commented Sep 3, 2018

@abbasalim use the constructor method or componentDidMount.

Copy link

ghost commented Mar 5, 2019

thanks for basic explanation .

I just wonder if I need to pull two or more data...
I use this, but there must be another short method.

  async getDeviceConf() {
    try {
      const deviceLanguage = await AsyncStorage.getItem('@DeviceConf:language');
      console.log("Your Language " + deviceLanguage);
    } catch (error) {
      console.log("Error retrieving data" + error);
    }
    try {
      const deviceMusic = await AsyncStorage.getItem('@DeviceConf:music');
      console.log("Music " + deviceMusic);
    } catch (error) {
      console.log("Error retrieving data" + error);
    }
  }

@AbdessamadElbassouri
Copy link

AbdessamadElbassouri commented Jul 24, 2019

@luissmg how use the constructor method to call getKeys when start component without need prees Button ?
Thanks
I need a example of this

@luissmg
Copy link

luissmg commented Jul 24, 2019

@zawya you just need to do something like this

constructor(props) {
  super(props);
  this.getKeys();
}

@AbdessamadElbassouri
Copy link

AbdessamadElbassouri commented Jul 24, 2019

@luissmg are we going to do that in component where we want to display the data or what?
and if the data is in the form of an object how do you also

@luissmg
Copy link

luissmg commented Jul 26, 2019

@zawya Yes, you call that in the component you have that function defined and you want the data, but it really depends on what you want to achieve here.
Regarding the second question, what is the problem with having an object?

@RUANDUARTE03
Copy link

RUANDUARTE03 commented Oct 24, 2019

Does anyone have a similar exploit, just saving arrays ??
Using JSON.stringify

@gandarain
Copy link

gandarain commented Mar 2, 2020

where define this '@MySuperStore' ?

@harsha-kotapati
Copy link

harsha-kotapati commented Oct 30, 2020

async translaslation2 (data) {
let val;

 await this.translaslation(data).then((res)=> {
     val = res
})
console.log("vall",val)
return val 

}
{this.translaslation2(pickupLoc.city)}
while am calling like this am getting
ExceptionsManager.js:179 Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.

@harsha-kotapati
Copy link

harsha-kotapati commented Oct 30, 2020

{this.translaslation2(pickupLoc.city)}
calling like this

@harsha-kotapati
Copy link

harsha-kotapati commented Oct 30, 2020

in side the text
and am getting err

@harsha-kotapati
Copy link

harsha-kotapati commented Oct 30, 2020

please let me know any body know solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment