React Native Get Save Value Locally using AsyncStorage in App Memory Example

This tutorial explains how to store and get value locally using AsyncStorage component in react native application. AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. React Native has its own solution for this by giving us a proper fully ready component named as AsyncStorage, AsyncStorage is used to store value locally in both Android and iOS react native applications by providing us a Key factor. Developers can retrieve saved value from anywhere or any activity in complete application using the Unique Key. AsyncStorage component helps to store the user login session details in login and registration system.

Note: The stored value is permanent and can be accessible after closing the app or restarting the mobile until its been deleted.

Installation of Dependency

• async-storage

An asynchronous, unencrypted, persistent, key-value storage system for React Native. To use AsyncStorage  in react native we need to use async-storage  in our project directory.

npm install --save  @react-native-community/async-storage

Screenshot For Reference:

Run below command to link async-storage library in your project :

react-native link @react-native-community/async-storage

Screenshot For Reference:

React Native AsyncStorage Example

Lets see the complete source code that helps to store and get value locally using AsyncStorage component in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages, async-storage import all required components.

import React, { Component } from 'react';
import { StyleSheet, View, TextInput, Alert, Text, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage'

Step 4: Lets create constructor block inside your App component. In the constructor block we have created state variables that helps to store and get value from Async-storage.

 constructor() {
    super();
    this.state = {
      textInputData: '',
      getValue: ''
    }
  }

Step 5: Lets create function named as setValueLocally. This function will store value in async storage when user clicks on "SAVE VALUE LOCALLY" button.

 setValueLocally = () => {
    AsyncStorage.setItem('UserData', this.state.textInputData);
    Alert.alert("Value Stored Successfully.")
  }

Step 6: Lets create function named as getValueLocally. This function will get value in async storage when user clicks on "GET VALUE LOCALLY" button.

getValueLocally = () => {
    AsyncStorage.getItem('UserData').then((value) => this.setState({ getValue: value }))
  }

Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

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

        <Text style={styles.text}> Saved Value is :- {this.state.getValue} </Text>

        <TextInput
          placeholder="Enter Some Text here"
          onChangeText={data => this.setState({ textInputData: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyle}
        />

        <TouchableOpacity onPress={this.setValueLocally} activeOpacity={0.7} style={styles.button} >
          <Text style={styles.buttonText}> SAVE VALUE LOCALLY </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.getValueLocally} activeOpacity={0.7} style={styles.button} >
          <Text style={styles.buttonText}> GET VALUE LOCALLY </Text>
        </TouchableOpacity>

      </View>
    );
  }

Step 8 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  Container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    margin: 10
  },
  TextInputStyle: {
    textAlign: 'center',
    height: 40,
    width: '100%',
    borderWidth: 1,
    borderColor: '#ab47bc',
    borderRadius: 10
  },
  button: {
    width: '100%',
    height: 40,
    padding: 10,
    backgroundColor: '#ab47bc',
    borderRadius: 7,
    marginTop: 10
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 30
  }
});

Screenshot:

This is all about React Native Get Save Value Locally using AsyncStorage in App Memory Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.