AsyncStorage Component in React Native

AsyncStorage is React Native's simple, persistent key-value store on the device – the counterpart to localStorage in the browser, just asynchronous.

1. Description

AsyncStorage (from the separately installed package @react-native-async-storage/async-storage) persistently stores strings on the device – the data survives app restarts and even device restarts. All methods return a Promise, since real storage access on the device must not block.

2. Short example

import AsyncStorage from '@react-native-async-storage/async-storage';

await AsyncStorage.setItem('username', 'anna92');
const value = await AsyncStorage.getItem('username');
console.log(value); // 'anna92'

3. Complete project: a notes app with persistent storage

npx create-expo-app asyncstorage-demo
cd asyncstorage-demo
npx expo install @react-native-async-storage/async-storage

App.js

import { useEffect, useState } from 'react';
import {
  View,
  Text,
  TextInput,
  FlatList,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const STORAGE_KEY = 'my-notes';

export default function App() {
  const [notes, setNotes] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(true);

  // On startup: load saved notes
  useEffect(() => {
    async function load() {
      try {
        const saved = await AsyncStorage.getItem(STORAGE_KEY);
        if (saved !== null) {
          setNotes(JSON.parse(saved));
        }
      } catch (error) {
        console.error('Error loading:', error);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  async function addNote() {
    if (input.trim() === '') return;
    const newNotes = [...notes, { id: Date.now().toString(), text: input }];
    setNotes(newNotes);
    setInput('');
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(newNotes));
  }

  async function deleteNote(id) {
    const newNotes = notes.filter((n) => n.id !== id);
    setNotes(newNotes);
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(newNotes));
  }

  async function clearAll() {
    setNotes([]);
    await AsyncStorage.removeItem(STORAGE_KEY);
  }

  if (loading) {
    return <Text style={styles.status}>Loading notes...</Text>;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Notes ({notes.length})</Text>
      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          placeholder="New note..."
          value={input}
          onChangeText={setInput}
        />
        <TouchableOpacity style={styles.addButton} onPress={addNote}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={notes}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.noteRow}>
            <Text style={styles.noteText}>{item.text}</Text>
            <TouchableOpacity onPress={() => deleteNote(item.id)}>
              <Text style={styles.delete}>✕</Text>
            </TouchableOpacity>
          </View>
        )}
        ListEmptyComponent={<Text style={styles.status}>No notes yet.</Text>}
      />
      {notes.length > 0 && (
        <TouchableOpacity onPress={clearAll}>
          <Text style={styles.clearAll}>Clear all</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  title: { fontSize: 22, fontWeight: 'bold', marginBottom: 16 },
  status: { textAlign: 'center', marginTop: 24, color: '#6b7280' },
  inputRow: { flexDirection: 'row', marginBottom: 16 },
  input: { flex: 1, borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10 },
  addButton: { marginLeft: 8, backgroundColor: '#2563eb', borderRadius: 8, paddingHorizontal: 18, justifyContent: 'center' },
  addButtonText: { color: '#fff', fontSize: 20 },
  noteRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  noteText: { flex: 1 },
  delete: { color: '#ef4444', marginLeft: 12 },
  clearAll: { textAlign: 'center', color: '#ef4444', marginTop: 16 },
});

4. Explanation: every function used

AsyncStorage.getItem(key) – loads the stored value for a key as a promise; returns null if nothing has been stored yet (NOT an error).
AsyncStorage.setItem(key, value) – persistently stores a STRING; complex data (arrays, objects) must be converted to a string with JSON.stringify() first.
AsyncStorage.removeItem(key) – completely deletes a single stored value.
JSON.parse(saved) – converts the loaded string back into a real JavaScript array/object.
Date.now().toString() – a simple, sufficiently unique ID for each new note, used as the key in the FlatList.
Every change (adding, deleting) FIRST updates React state (setNotes, for instant display) and THEN persists it via AsyncStorage.setItem() – both steps always belong together, or the display and storage drift apart.

5. Outputs

Ausgabe

A heading "My Notes (0)", an input field with a blue "+" button next to it. After typing text and tapping "+", the note appears in a list below, with a red "✕" to delete it. The number in the heading increases accordingly. If you fully close and reopen the app, all notes are still there – exactly what AsyncStorage demonstrates.

Achtung: AsyncStorage is NOT encrypted and not meant for sensitive data like passwords – for that, use expo-secure-store, which relies on the encrypted system keystores of iOS (Keychain) and Android (Keystore).

Tipp: Other useful AsyncStorage methods beyond setItem/getItem/removeItem: AsyncStorage.getAllKeys() (list every stored key), AsyncStorage.multiGet([...])/multiSet([...]) (read/write several values at once, more efficient than many individual calls), and AsyncStorage.clear() (deletes REALLY EVERYTHING, use with care).