Week 9: On-Device Storage: AsyncStorage, SecureStore & SQLite

1. AsyncStorage Basics & Limits

npx expo install @react-native-async-storage/async-storage

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

async function saveDraft(text: string) {
  await AsyncStorage.setItem('draft-note', text);
}

async function loadDraft() {
  return await AsyncStorage.getItem('draft-note'); // string | null
}

async function saveObject(key: string, value: object) {
  await AsyncStorage.setItem(key, JSON.stringify(value));
}

AsyncStorage is a flat, unencrypted, string-only key-value store — everything written to it, including anything you JSON.stringify into it, is readable in plain text by anyone with access to the device's file system. It's the right tool for drafts, cached lists, and UI preferences; it is not the right tool for anything sensitive.

2. SecureStore for Sensitive Data

expo-secure-store uses the platform's real encrypted storage — the iOS Keychain and Android's Keystore-backed EncryptedSharedPreferences — for anything that actually needs protecting.

npx expo install expo-secure-store

import * as SecureStore from 'expo-secure-store';

async function saveToken(token: string) {
  await SecureStore.setItemAsync('auth-token', token);
}

async function getToken() {
  return await SecureStore.getItemAsync('auth-token');
}

async function clearToken() {
  await SecureStore.deleteItemAsync('auth-token');
}

SecureStore has a much smaller per-value size limit than AsyncStorage (around 2KB on iOS) — it's built for tokens and credentials, not for caching a JSON response.

3. Structured Data with expo-sqlite

Once data has real structure and needs to be queried — a list of notes with tags and dates, not just one blob — a real embedded SQL database beats hand-rolled JSON parsing on every read.

npx expo install expo-sqlite

import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabaseSync('notes.db');

export function initDb() {
  db.execSync(
    'CREATE TABLE IF NOT EXISTS notes (id INTEGER PRIMARY KEY NOT NULL, title TEXT NOT NULL, body TEXT, created_at INTEGER);'
  );
}

export function addNote(title: string, body: string) {
  db.runSync(
    'INSERT INTO notes (title, body, created_at) VALUES (?, ?, ?);',
    [title, body, Date.now()]
  );
}

export function getAllNotes() {
  return db.getAllSync('SELECT * FROM notes ORDER BY created_at DESC;');
}

The synchronous *Sync methods shown here run on the JS thread and are fine for typical note-taking-app volumes; for large datasets or heavier queries, expo-sqlite also exposes async equivalents that don't block rendering.

4. Choosing the Right Storage

These aren't mutually exclusive — a real app typically uses all three at once: a refresh token in SecureStore, a "last opened tab" preference in AsyncStorage, and the user's actual content in SQLite.

5. Hands-on Exercise

6. Knowledge Check

Four quick questions. Expand each to check your answer.