How to Use AsyncStorage with Vega

Vega Open Beta Knowledge Base
1

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.

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.
"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

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