Walkthrough

Offline-First with AsyncStorage

Persist enough that the app is useful with no network.

Mobile apps must survive zero bars. AsyncStorage is the simple key-value store that ships in every Expo app. Pair it with a hydration step on app start and your users get a usable app on the subway.

Steps · 0 / 3 done

Install and import
AsyncStorage is a separate package; Expo install gets the right version.
```
npx expo install @react-native-async-storage/async-storage
```
VerifyPackage added to dependencies.

Wrap your store with persistence

Read on app start; write on every change.

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

export async function loadTips() {
  const raw = await AsyncStorage.getItem('tips');
  return raw ? JSON.parse(raw) : [];
}
export async function saveTips(tips: Tip[]) {
  await AsyncStorage.setItem('tips', JSON.stringify(tips));
}

VerifyTips persist across app restarts.

Hydrate before render

Show a splash until the cache is loaded; otherwise the UI flashes empty.

const [ready, setReady] = useState(false);
useEffect(() => { loadTips().then(t => { setTips(t); setReady(true); }); }, []);
if (!ready) return <SplashScreen />;

VerifyNo empty-state flash on cold start.

Check your understanding

Q1. Why hydrate from AsyncStorage *before* rendering the main UI?

· Tick off the 3 step(s) above.

· Score 100% on the quiz.

Offline-First with AsyncStorage

Install and import

Wrap your store with persistence

Hydrate before render