REACT NATIVE | AsyncStorage Example

Share the post

Hello All, In the last react native tutorial session we had discussed How to implement Progress stepper in react native application. In this react native tutorial, We will discuss How to use AsyncStorage in react native application with the help of an example. We will set one TextInput for the user & give one button to save the text entered inside TextInput using AsyncStorage. After that will give one more button just below the previous button to get the saved text. So, In this way with practical example will learn about AsnycStorage in react native.

What is AsyncStorage in react native?

AsyncStorage is a key-value asynchronous storage system available in react native which help user to store data. This data can be globally available in application. This is the best alternative of LocalStorage available in react native.

How to use AsyncStorage in react native?

Step1: Create a HomePage.js in react native project

Step2: Import the AsyncStorage from ‘react-native’

import { AsyncStorage} from 'react-native';

Step3: Declare state

 state = {
        'eusername': '',
        'susername': ''

    }

Here, We are using two state eusername for entered user text in TextInput & susername for saved TextInput.

Step4 : Write method to set Data & get Data

 getData = () => {
        AsyncStorage.getItem('username').then((value) => {
            console.log("getData" + value);
            this.setState({ 'susername': value });
        })
    }

    setData = () => {
        console.log("setData" + this.state.eusername);
        AsyncStorage.setItem('username', this.state.eusername);
    }

Here, We are using AsyncStorage.setItem to save the data & AsyncStorage.getItem to get the saved data.

Step5: The full source code for HomePage.js is as shown below

import React, { Component, useState } from 'react';
import { StyleSheet, Text, View, Dimensions, ScrollView, AsyncStorage, TextInput, Button } from 'react-native';


export default class HomePage extends Component {


    state = {
        'eusername': '',
        'susername': ''

    }


    getData = () => {
        AsyncStorage.getItem('username').then((value) => {
            console.log("getData" + value);
            this.setState({ 'susername': value });
        })
    }

    setData = () => {
        console.log("setData" + this.state.eusername);
        AsyncStorage.setItem('username', this.state.eusername);
    }

    changeText = (value) => {
        console.log(value.nativeEvent.text);
        this.setState({ 'eusername': value.nativeEvent.text })
    }

    render() {

        return (

            <View style={styles.container}>
                <TextInput style={styles.txt} onChange={this.changeText} />
                <Button color='red' onPress={this.setData} title="Set Data"></Button>
                <Button color='red' onPress={this.getData} title="Get Data"></Button>
                <Text>{this.state.susername}</Text>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        margin: 5
    },
    txt: {
        marginTop: 15,
        height: 50,
        backgroundColor: 'white',
        borderWidth: 1,
        color: 'black'

    }
})

Output

asyncstorage_output
AsyncStorage output

As shown in the above output, We entered the text “test” inside our TextInput. On changing of Text we called one function called changeText(). In this function, We are set the value of ‘eusername’. After that, click on SET DATA button. On button press we are calling another function called setData(). In this function, We are saving data using AsyncStorage.setItem(‘username’, this.state.eusername);

To get the saved data, We are calling getData() function, where we use below code to get data & set the state for ‘susername’ which we are using for display purpose.

AsyncStorage.getItem('username').then((value) => {
console.log("getData" + value);
this.setState({ 'susername': value });
})

1 thought on “REACT NATIVE | AsyncStorage Example”

Leave a Comment