# How to Use AsyncStorage with Vega

**URL:** <https://community.amazondeveloper.com/t/how-to-use-asyncstorage-with-vega/4957>\
**Category:** Knowledge Base\
**Tags:** vega-libraries, vega-tech-doc\
**Created:** [May 10, 2024, 9:20pm UTC](https://community.amazondeveloper.com/t/how-to-use-asyncstorage-with-vega/4957 "2024-05-10T21:20:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![JiahuanLi](https://avatars.discourse-cdn.com/v4/letter/j/b5e925/32.png) [@JiahuanLi](https://community.amazondeveloper.com/u/JiahuanLi)\
**Post date:** [May 10, 2024, 9:20pm UTC](https://community.amazondeveloper.com/t/how-to-use-asyncstorage-with-vega/4957/1 "2024-05-10T21:20:57Z")

</div>

AsyncStorage is a library for storing small string values locally on the device. It provides a simple key-value API to store, read, and delete data asynchronously. It’s not intended for large values like images or video. For more information, see the [AsyncStorage documentation](https://developer.amazon.com/docs/vega-api/latest/react-native-async-storage.html).

## Sample App

This sample app shows the basic functionalities of AsyncStorage to manage local storage. The app allows users to read, write, and clear data stored on their device with simple button interactions.

Here are the key functionalities in the sample app:

1. **Read from Storage** : Read and display the last stored message.

2. **Write Random Message** : Write one of several predefined messages to storage.

3. **Clear Storage** : Clear all data stored in AsyncStorage.

### Install the library

To install the `react-native-async-storage` library, follow the instructions below.

1. Add the JavaScript library dependency in your app’s `package.json`.

```auto
"dependencies": {
    ...
    "@amazon-devices/react-native-async-storage__async-storage": "~2.0.2+1.23.1",
    "@react-native-async-storage/async-storage": "1.23.1"
}

```

1. Reinstall `package-lock.json` file using `npm install` command.

### App.tsx example

```auto
import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, ScrollView } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const App = () => {
  const key = 'HELLO';
  const [storedValue, setStoredValue] = useState('No messages read yet.');
  const [log, setLog] = useState('Start by storing or reading a message.');

  const helloMessages = [
    'Hello Vega!',
    'Hello there, it is me :)',
    'Hello! Isn\'t it a great day?',
    'Hello! Thank you for checking out this sample app!',
  ];

  // Function to read the last stored item
  const readLastItem = async () => {
    try {
      const readValue = await AsyncStorage.getItem(key);
      if (readValue) {
        setStoredValue(`Last read message: "${readValue}"`);
        setLog(`Successfully read the message from storage.`);
      } else {
        setStoredValue('No message found in storage.');
        setLog('Attempted to read but no message was found.');
      }
    } catch (e) {
      setLog(`Error reading from storage: ${e}`);
    }
  };

  // Function to write a random hello message
  const writeRandomValue = async () => {
    try {
      const randomIndex = Math.floor(Math.random() * helloMessages.length);
      const messageToStore = helloMessages[randomIndex];
      await AsyncStorage.setItem(key, messageToStore);
      setLog(`Stored: "${messageToStore}"\nNow, you can read this message.`);
    } catch (e) {
      setLog(`Error writing to storage: ${e}`);
    }
  };

  // Function to clear the storage
  const clearStore = async () => {
    try {
      await AsyncStorage.clear();
      setStoredValue('No messages read yet.');
      setLog('Cleared all items from storage.\nStorage is now empty.');
    } catch (e) {
      setLog(`Error clearing storage: ${e}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>AsyncStorage Example</Text>

      <View style={styles.content}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={readLastItem}>
            <Text style={styles.buttonLabel}>Read from Storage</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={writeRandomValue}>
            <Text style={styles.buttonLabel}>Write Random Message</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={clearStore}>
            <Text style={styles.buttonLabel}>Clear Storage</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.messageContainer}>
          <Text style={styles.helloText}>{storedValue}</Text>
          <Text style={styles.logText}>{log}</Text>
        </View>
      </View>

      <View style={styles.footer}>
        <Text style={styles.footerTitle}>Possible Messages:</Text>
        <ScrollView style={styles.messagesList}>
          {helloMessages.map((message, index) => (
            <Text key={index} style={styles.messageItem}>{message}</Text>
          ))}
        </ScrollView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: 30,
  },
  titleText: {
    fontSize: 40,
    fontWeight: 'bold',
    marginBottom: 100,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    width: '100%',
    paddingHorizontal: 20,
    flex: 1,
  },
  buttonContainer: {
    width: '30%',
    justifyContent: 'space-around',
  },
  messageContainer: {
    width: '60%',
    padding: 10,
    justifyContent: 'center',
    alignItems: 'flex-start',
    flex: 1,
  },
  button: {
    backgroundColor: '#007bff',
    padding: 30,
    borderRadius: 5,
    marginBottom: 50,
  },
  buttonLabel: {
    color: '#fff',
    fontSize: 30,
    textAlign: 'center',
  },
  helloText: {
    fontSize: 30,
    marginVertical: 40,
    padding: 40,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 5,
    textAlign: 'left',
    width: '100%',
  },
  logText: {
    fontSize: 30,
    color: '#333',
    marginTop: 20,
    padding: 40,
    width: '100%',
    backgroundColor: '#e9ecef',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#ddd',
    textAlign: 'left',
  },
  footer: {
    width: '100%',
    padding: 10,
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    marginTop: 10,
    flex: 0.4,
  },
  footerTitle: {
    fontSize: 30,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  messagesList: {
    marginTop: 5,
  },
  messageItem: {
    fontSize: 30,
    color: '#555',
    marginBottom: 5,
  },
});

```

_Last updated: Mar 7, 2026_