Skip to content

Instantly share code, notes, and snippets.

@pradeep1991singh
Last active October 30, 2020 14:44
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save pradeep1991singh/60f8ee10975307f908f4912cf6996e97 to your computer and use it in GitHub Desktop.
Save pradeep1991singh/60f8ee10975307f908f4912cf6996e97 to your computer and use it in GitHub Desktop.
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);
@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

@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

@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

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

@gandarain
Copy link

where define this '@MySuperStore' ?

@harsha-kotapati
Copy link

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

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

@harsha-kotapati
Copy link

in side the text
and am getting err

@harsha-kotapati
Copy link

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