Example AsyncStorage React Native

index.android.ios.js

/**
 * 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);

@abbasalim use the constructor method or componentDidMount.

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);
    }
  }

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

@zawya you just need to do something like this

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

@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

@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?

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

where define this '@MySuperStore' ?

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.

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

in side the text
and am getting err

please let me know any body know solution