Cannot Store and Retrieve data using AsyncStorage in React native

Question

I am new to react native,I was just learning react native now,i was trying to store values from TextInput and store into AsyncStorage by clicking Register Button.I am trying to get that value by clicking Get Button.I can't get value from AsyncStorage.getItem('value'), later I was thought wether data is storing in AsyncStorage.setItem('name','value').Somebody look at this code and tell me the answer where i was made mistake.

export default class AsyncStorageEample extends Component 
{

constructor(props)
{
super(props)

  this.state= { name:'', email:'',mobile:''}
  this.onRegisterPress=this.onRegisterPress.bind(this)
  this.onRetreive=this.onRetreive.bind(this)

}

onRegisterPress()
{
   let name=this.state.name
   let email=this.state.email
   let mobile=this.state.mobile

   AsyncStorage.setItem('name',name)
   AsyncStorage.setItem('email',email)
   AsyncStorage.setItem('mobile',mobile)

   this.setState({name: name, email:email,mobile:mobile})


}

onRetreive()
{
  var user;
  user= AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))

  Alert.alert('Name:'+user);
}

render() {
    return (
        <View style={styles.container}>
        <View style={styles.Signupform}>

        <Text style={styles.textStyle}> Name </Text>
        <TextInput style={styles.tInRegister} onChangeText={(text)=>   this.setState({name: text})} value = {this.state.name}/>

        <Text style={styles.textStyle}> Email </Text>
        <TextInput style={styles.tInRegister} onChangeText={(text)=> this.setState({email: text})} value= {this.state.email} />

        <Text style={styles.textStyle}> Mobile </Text>
        <TextInput style={styles.tInRegister} onChangeText={(text)=> this.setState({mobile: text})} vaue= {this.state.mobile} />

        <Button 
         onPress={this.onRegisterPress.bind(this)}
         title="Register"
         color="#841584"
        />

        <Button
        style={styles.get}
        onPress={this.onRetreive.bind(this)}
        title="Get"
        color="#841584"/>
        </View>
        </View>
    );
 }
 }

   const styles = StyleSheet.create({
       container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',

            backgroundColor: '#F5FCFF',
        },

        tInRegister: {
            fontSize: 16,
            height: 40,
            color: '#800080'
        },
        textStyle: {
            fontSize: 16,
            color: '#800080'
        },
        Signupform: {
            width: 400,
            height: 100,
            justifyContent: 'center',
            marginTop: 10,
            marginLeft: 10,
            marginRight: 10

        },
        get:
        {
          marginTop:20,
        },


});

       AppRegistry.registerComponent('AsyncStorageEample', () =>     AsyncStorageEample);

Ajith Pandian · Accepted Answer · 2017-06-14 12:54:54Z

1

AsyncStorage is an asynchronous operation. So it should be done with 'async - await' .

Try the following code

async onRetreive() {
    const user = await AsyncStorage.getItem('name');
    Alert.alert('Name:'+user);
}

answered Jun 14, 2017 at 12:54

Ajith Pandian

1,35213 silver badges21 bronze badges

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

3 Comments

Ajith Pandian Over a year ago

@sowmya Even in documentation 'async-await' is used. I don't know how you missed it.

Ajith Pandian Over a year ago

Fine. Happy coding.

sooper Over a year ago

Wrap this in a try and catch as it can throw.

Collectives™ on Stack Overflow

Cannot Store and Retrieve data using AsyncStorage in React native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related