React Native AsyncStorage Component

Last Updated : 14 Feb, 2026

AsyncStorage is a React Native component used to store and retrieve data locally on the device in a persistent manner. It works asynchronously and is useful for saving small amounts of data like user preferences, login info, or settings.

  • Stores data locally in key–value pair format.
  • Data persists even after the app is closed or restarted.
  • Uses asynchronous methods like setItem, getItem, and removeItem.
JavaScript 
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [name, setName] = useState('');

  // Save data
  const saveData = async () => {
    await AsyncStorage.setItem('username', 'Rahul');
    alert('Data Saved');
  };

  // Get data
  const getData = async () => {
    const value = await AsyncStorage.getItem('username');
    setName(value);
  };

  return (
    <View style={{ marginTop: 50 }}>
      <Button title="Save Name" onPress={saveData} />
      <Button title="Get Name" onPress={getData} />
      <Text>Name: {name}</Text>
    </View>
  );
}
  • setItem() saves data in storage.
  • getItem() retrieves saved data.
  • Data remains saved even after app restart.

Syntax

AsyncStorage.method();

Methods in AsyncStorage

AsyncStorage provides a set of asynchronous methods to store, retrieve, update, and manage key-value data persistently across a React Native app.

  • setItem(key, value) – Stores a value with a specified key.
  • getItem(key) – Retrieves the value associated with a key.
  • removeItem(key) – Deletes the value for a given key.
  • clear() – Removes all data from AsyncStorage.
  • getAllKeys() – Returns all stored keys.
  • multiSet() – Stores multiple key–value pairs at once.
  • multiGet() – Retrieves multiple values using multiple keys.
  • multiRemove() – Removes multiple key–value pairs at once.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo.

cd app-name

Project Structure

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

  • For the Android Emulator, press "a" as mentioned in the image below.
  • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

- Import libraries: Import required libraries at the top of the file.

Here, we are going to use "@react-native-async-storage/async-storage" library for AsyncStorage, But before Using it install it with command below.

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

Now, Import!

JavaScript 
// Import necessary libraries
import React, { useState } from "react";
// Import components from React Native
import { StyleSheet, Text, View, Button } from "react-native";
// Import AsyncStorage for local storage
import AsyncStorage from "@react-native-async-storage/async-storage";

- StyleSheet: Create a StyleSheet to style the components like container, text, and button.

JavaScript 
// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 40,
    marginBottom: 30,
  },
  button: {
    margin: 20,
    width: 250,
  },
});

- Buttons: Create a couple of buttons inside the App Component named as "add" and "get".

  • add: Used to call a function that adds the data to AsyncStorage.
  • get: Used to call a function that retrieves data from AsyncStorage.

- add function: Used to add data to AsyncStorage.

JavaScript 
// Function to add data to AsyncStorage
const add = async () => {
    try {
        // Store key-value pair in AsyncStorage
        await AsyncStorage.setItem("gfg", "GeeksforGeeks"); 
    } catch (e) {
        // Log any errors
        console.error(e); 
    }
};

- get function: Used to retrieve data from AsyncStorage and update the state.

JavaScript 
// Function to retrieve data from AsyncStorage
const get = async () => {
    try {
        // Retrieve value by key
        const value = await AsyncStorage.getItem("gfg"); 
        if (value !== null) {
            // Update state with retrieved value
            setdata(value); 
        }
    } 
    catch (e) {
        // Log any errors
        console.error(e); 
    }
};

- useState: Update the state using the code below and add the updated state value in the components.

JavaScript 
// State to store retrieved data
const [data, setdata] = useState(""); 


{/* Display retrieved data */}
<Text style={styles.text}>{data}</Text>

To know more about useState in React Native refer this article: React useState Hook.

Here we created two buttons, the first button Set the value and the second button Fetch the value.

App.js

App.js 
// Import necessary libraries
import React, { useState } from "react";
// Import components from React Native
import { StyleSheet, Text, View, Button } from "react-native";
// Import AsyncStorage for local storage
import AsyncStorage from "@react-native-async-storage/async-storage";

// Main App component
export default function App() {
  
  // State to store retrieved data
  const [data, setdata] = useState(""); 

  // Function to add data to AsyncStorage
  const add = async () => {
    try {
      // Store key-value pair in AsyncStorage
      await AsyncStorage.setItem("gfg", "GeeksforGeeks"); 
    } catch (e) {
      // Log any errors
      console.error(e); 
    }
  };

  // Function to retrieve data from AsyncStorage
  const get = async () => {
    try {
      // Retrieve value by key
      const value = await AsyncStorage.getItem("gfg"); 
      if (value !== null) {
        // Update state with retrieved value
        setdata(value); 
      }
    } catch (e) {
      // Log any errors
      console.error(e); 
    }
  };

  return (
    <View style={styles.container}>
      {/* Display retrieved data */}
      <Text style={styles.text}>{data}</Text>
      {/* Button to add data */}
      <View style={styles.button}>
        <Button title={"add"} onPress={add} />
      </View>
      {/* Button to get data */}
      <View style={styles.button}>
        <Button title={"get"} onPress={get} />
      </View>
    </View>
  );
}

// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 40,
    marginBottom: 30,
  },
  button: {
    margin: 20,
    width: 250,
  },
});


Output: 

  • Store and retrieve data: Uses AsyncStorage to save a key-value pair ("gfg": "GeeksforGeeks") and fetch it later to display on the screen.
  • Interactive UI: Provides buttons to trigger storing (add) and fetching (get) data, updating the state and showing the result in a Text component.


Comment
Article Tags:
React Native
React-Native

Explore