Navigation & Data›Extra· 35 min read

Saving Data on the Device

AsyncStorage keeps small data on the phone so it survives even after the app closes.

What you will learn

Save a value with AsyncStorage.setItem
Read it back with getItem
Store and load objects with JSON

Memory that survives a restart

State (useState) is forgotten the moment the app closes. To remember things — a username, a theme, a to-do list — you save them on the device with AsyncStorage, a simple key–value store (like localStorage on the web, but async).

A key–value store is just a labelled drawer: you put a value in under a key (a name like 'username'), and later you ask for that same key to get the value back. Nothing fancy — one name, one value.

Three places data can live

It helps to know when to reach for AsyncStorage versus the other two options you already know:

Where	Survives app close?	Good for
`useState`	No — gone on close	Live screen data while the app runs
AsyncStorage	Yes — stays on the phone	Small settings & short lists (theme, username, a few notes)
A real database / cloud	Yes — and shared across devices	Large or shared data (accounts, big lists, multiple users)

AsyncStorage sits in the middle: more permanent than state, far simpler than a database. It is the right tool for small things you want the phone to remember.

Install it (one-time):

Install AsyncStorage

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

Note: Output: (Adds the AsyncStorage package. Nothing on screen yet.)

Save and load a name

Everything is async, so you use await. Values are stored as strings:

setItem saves a string; getItem reads it back

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

async function saveName() {
  await AsyncStorage.setItem('username', 'Aanya');
  console.log('Saved!');
}

async function loadName() {
  const value = await AsyncStorage.getItem('username');
  console.log('Loaded:', value);
}

saveName().then(loadName);

Note: Output: Saved! Loaded: Aanya Even if you fully close and reopen the app, getItem('username') still returns Aanya — it lives on the device.

Storing objects and lists

AsyncStorage only stores strings, so for an object or array you convert with JSON (JavaScript Object Notation — a text format for objects and lists). JSON.stringify turns your object or array into a string to save it, and JSON.parse turns that string back into a real object or array when you load it:

Use JSON.stringify / JSON.parse for objects and arrays

const todos = [{ id: 1, text: 'Buy milk' }];

// save a list
await AsyncStorage.setItem('todos', JSON.stringify(todos));

// load it back
const raw = await AsyncStorage.getItem('todos');
const loaded = raw ? JSON.parse(raw) : [];
console.log(loaded.length, 'todos loaded');

Note: Output: 1 todos loaded getItem can return null if nothing was saved, so we guard with raw ? JSON.parse(raw) : [] to avoid a crash.

The whole save-and-load flow, step by step

Saving and reading data back is a simple round trip. Follow the list above (the todos array) from "save" to "load again later", in order:

You have your data in memory as a real array: todos = [{ id: 1, text: 'Buy milk' }].
Save: AsyncStorage only stores text, so first JSON.stringify(todos) turns the array into a string like '[{"id":1,"text":"Buy milk"}]'.
await AsyncStorage.setItem('todos', ...) writes that string to the phone under the key 'todos'. The await waits until the write finishes.
Time passes — the user may even close and reopen the app. The string stays safely on the device.
Load: await AsyncStorage.getItem('todos') reads the string back (or null if nothing was ever saved under that key).
The guard raw ? JSON.parse(raw) : [] checks for null first; if there is a string, JSON.parse turns it back into the real array you can use again.
Now loaded is the array [{ id: 1, text: 'Buy milk' }] once more, so loaded.length prints 1.

Watch out: AsyncStorage is only for small data (settings, a short list). It is not a database. For large or complex data, use a real database or a cloud backend.

Tip: Always handle the null case: a key that was never saved returns null. Calling JSON.parse(null) gives null, so default to an empty array or object.

Q. Why do you call JSON.stringify before saving an array with AsyncStorage?

Answer: AsyncStorage stores strings only, so objects and arrays must be turned into a string with JSON.stringify (and back with JSON.parse).

✍️ Practice

Save a "theme" value ("dark") and read it back on the next launch.
Save an array of three names with JSON.stringify and load it with JSON.parse.

🏠 Homework

Add saving to a counter: store the count with AsyncStorage and load it when the app starts so it survives a restart.