React Native & Expo Development Guide
A practical guide for building production-ready React Native and Expo applications. Covers UI, animations, state, testing, performance, and deployment.
References
Consult these resources as needed:
- references/navigation.md — Expo Router: Stack, Tabs, NativeTabs (
headerLargeTitle, headerBackButtonDisplayMode), links, modals, sheets, context menus
- references/components.md — FlashList patterns,
expo-image, safe areas (contentInsetAdjustmentBehavior), native controls, blur/glass effects, storage
- references/styling.md — StyleSheet, NativeWind/Tailwind, platform styles, theming, dark mode
- references/animations.md — Reanimated 3: entering/exiting, shared values, gestures, scroll-driven
- references/state-management.md — Zustand (selectors, persist), Jotai (atoms, derived), React Query, Context
- references/forms.md — React Hook Form + Zod: validation, multi-step, dynamic arrays
- references/networking.md — fetch wrapper, React Query (optimistic updates), auth tokens, offline, API routes, webhooks
- references/performance.md — Profiling workflow, FlashList +
memo, bundle analysis, TTI, memory leaks, animation perf
- references/testing.md — Jest, React Native Testing Library, E2E with Maestro
- references/native-capabilities.md — Camera, location, permissions (
use*Permissions hooks), haptics, notifications, biometrics
- references/engineering.md — Project layout (
components/ui/, stores/, services/), path aliases, SDK upgrades, EAS build/submit, CI/CD, DOM components
Quick Reference
Component Preferences
| Purpose |
Use |
Instead of |
| Lists |
FlashList (@shopify/flash-list) + memo items |
FlatList (no view recycling) |
| Images |
expo-image |
RN <Image> (no cache, no WebP) |
| Press |
Pressable |
TouchableOpacity (legacy) |
| Audio |
expo-audio |
expo-av (deprecated) |
| Video |
expo-video |
expo-av (deprecated) |
| Animations |
Reanimated 3 |
RN Animated API (limited) |
| Gestures |
Gesture Handler |
PanResponder (legacy) |
| Platform check |
process.env.EXPO_OS |
Platform.OS |
| Context |
React.use() |
React.useContext() (React 18) |
| Safe area scroll |
contentInsetAdjustmentBehavior="automatic" |
<SafeAreaView> |
| SF Symbols |
expo-image with source="sf:name" |
expo-symbols |
Scaling Up
| Situation |
Consider |
| Long lists with scroll jank |
Virtualized list libraries (e.g. FlashList) |
| Want Tailwind-style classes |
NativeWind v4 |
| High-frequency storage reads |
Sync-based storage (e.g. MMKV) |
| New project with Expo |
Expo Router over bare React Navigation |
State Management
| State Type |
Solution |
| Local UI state |
useState / useReducer |
| Shared app state |
Zustand or Jotai |
| Server / async data |
React Query |
| Form state |
React Hook Form + Zod |
Performance Priorities
| Priority |
Issue |
Fix |
| CRITICAL |
Long list jank |
FlashList + memoized items |
| CRITICAL |
Large bundle |
Avoid barrel imports, enable R8 |
| HIGH |
Too many re-renders |
Zustand selectors, React Compiler |
| HIGH |
Slow startup |
Disable bundle compression, native nav |
| MEDIUM |
Animation drops |
Only animate transform/opacity |
New Project Init
# 1. Create project
npx create-expo-app@latest my-app --template blank-typescript
cd my-app
# 2. Install Expo Router + core deps
npx expo install expo-router react-native-safe-area-context react-native-screens
# 3. (Optional) Common extras
npx expo install expo-image react-native-reanimated react-native-gesture-handler
Then configure:
- Set entry point in
package.json: "main": "expo-router/entry"
- Add scheme in
app.json: "scheme": "my-app"
- Delete
App.tsx and index.ts
- Create
app/_layout.tsx as root Stack layout
- Create
app/(tabs)/_layout.tsx for tab navigation
- Create route files in
app/(tabs)/ (see navigation.md)
For web support, also install: npx expo install react-native-web react-dom @expo/metro-runtime
Core Principles
Consult references before writing: when implementing navigation, lists, networking, or project setup, read the matching reference file above for patterns and pitfalls.
Try Expo Go first (npx expo start). Custom builds (eas build) only needed when using local Expo modules, Apple targets, or third-party native modules not in Expo Go.
Conditional rendering: use {count > 0 && <Text />} not {count && <Text />} (renders "0").
Animation rule: only animate transform and opacity — GPU-composited, no layout thrash.
Imports: always import directly from source, not barrel files — avoids bundle bloat.
Lists and images: before using FlatList or RN Image, check the Component Preferences table above — FlashList and expo-image are almost always the right choice.
Route files: always use kebab-case, never co-locate components/types/utils in app/.
Checklist
New Project Setup
Before Shipping
Flutter development → see flutter-dev skill.
iOS native (UIKit/SwiftUI) → see ios-application-dev skill.
Android native (Kotlin/Compose) → see android-native-dev skill.
React Native is a trademark of Meta Platforms, Inc. Expo is a trademark of 650 Industries, Inc. All other product names are trademarks of their respective owners.
1---2name: react-native-dev3description: React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind.4license: MIT5---67# React Native & Expo Development Guide89A practical guide for building production-ready React Native and Expo applications. Covers UI, animations, state, testing, performance, and deployment.1011## References1213Consult these resources as needed:1415- [references/navigation.md](references/navigation.md) — Expo Router: Stack, Tabs, NativeTabs (`headerLargeTitle`, `headerBackButtonDisplayMode`), links, modals, sheets, context menus16- [references/components.md](references/components.md) — FlashList patterns, `expo-image`, safe areas (`contentInsetAdjustmentBehavior`), native controls, blur/glass effects, storage17- [references/styling.md](references/styling.md) — StyleSheet, NativeWind/Tailwind, platform styles, theming, dark mode18- [references/animations.md](references/animations.md) — Reanimated 3: entering/exiting, shared values, gestures, scroll-driven19- [references/state-management.md](references/state-management.md) — Zustand (selectors, persist), Jotai (atoms, derived), React Query, Context20- [references/forms.md](references/forms.md) — React Hook Form + Zod: validation, multi-step, dynamic arrays21- [references/networking.md](references/networking.md) — fetch wrapper, React Query (optimistic updates), auth tokens, offline, API routes, webhooks22- [references/performance.md](references/performance.md) — Profiling workflow, FlashList + `memo`, bundle analysis, TTI, memory leaks, animation perf23- [references/testing.md](references/testing.md) — Jest, React Native Testing Library, E2E with Maestro24- [references/native-capabilities.md](references/native-capabilities.md) — Camera, location, permissions (`use*Permissions` hooks), haptics, notifications, biometrics25- [references/engineering.md](references/engineering.md) — Project layout (`components/ui/`, `stores/`, `services/`), path aliases, SDK upgrades, EAS build/submit, CI/CD, DOM components2627## Quick Reference2829### Component Preferences3031| Purpose | Use | Instead of |32|---------|-----|------------|33| Lists | `FlashList` (`@shopify/flash-list`) + `memo` items | `FlatList` (no view recycling) |34| Images | `expo-image` | RN `<Image>` (no cache, no WebP) |35| Press | `Pressable` | `TouchableOpacity` (legacy) |36| Audio | `expo-audio` | `expo-av` (deprecated) |37| Video | `expo-video` | `expo-av` (deprecated) |38| Animations | Reanimated 3 | RN Animated API (limited) |39| Gestures | Gesture Handler | PanResponder (legacy) |40| Platform check | `process.env.EXPO_OS` | `Platform.OS` |41| Context | `React.use()` | `React.useContext()` (React 18) |42| Safe area scroll | `contentInsetAdjustmentBehavior="automatic"` | `<SafeAreaView>` |43| SF Symbols | `expo-image` with `source="sf:name"` | `expo-symbols` |4445### Scaling Up4647| Situation | Consider |48|-----------|----------|49| Long lists with scroll jank | Virtualized list libraries (e.g. FlashList) |50| Want Tailwind-style classes | NativeWind v4 |51| High-frequency storage reads | Sync-based storage (e.g. MMKV) |52| New project with Expo | Expo Router over bare React Navigation |5354### State Management5556| State Type | Solution |57|------------|----------|58| Local UI state | `useState` / `useReducer` |59| Shared app state | Zustand or Jotai |60| Server / async data | React Query |61| Form state | React Hook Form + Zod |6263### Performance Priorities6465| Priority | Issue | Fix |66|----------|-------|-----|67| CRITICAL | Long list jank | `FlashList` + memoized items |68| CRITICAL | Large bundle | Avoid barrel imports, enable R8 |69| HIGH | Too many re-renders | Zustand selectors, React Compiler |70| HIGH | Slow startup | Disable bundle compression, native nav |71| MEDIUM | Animation drops | Only animate `transform`/`opacity` |7273## New Project Init7475```bash76# 1. Create project77npx create-expo-app@latest my-app --template blank-typescript78cd my-app7980# 2. Install Expo Router + core deps81npx expo install expo-router react-native-safe-area-context react-native-screens8283# 3. (Optional) Common extras84npx expo install expo-image react-native-reanimated react-native-gesture-handler85```8687Then configure:88891. Set entry point in `package.json`: `"main": "expo-router/entry"`902. Add scheme in `app.json`: `"scheme": "my-app"`913. Delete `App.tsx` and `index.ts`924. Create `app/_layout.tsx` as root Stack layout935. Create `app/(tabs)/_layout.tsx` for tab navigation946. Create route files in `app/(tabs)/` (see [navigation.md](references/navigation.md))9596For web support, also install: `npx expo install react-native-web react-dom @expo/metro-runtime`9798## Core Principles99100**Consult references before writing**: when implementing navigation, lists, networking, or project setup, read the matching reference file above for patterns and pitfalls.101102**Try Expo Go first** (`npx expo start`). Custom builds (`eas build`) only needed when using local Expo modules, Apple targets, or third-party native modules not in Expo Go.103104**Conditional rendering**: use `{count > 0 && <Text />}` not `{count && <Text />}` (renders "0").105106**Animation rule**: only animate `transform` and `opacity` — GPU-composited, no layout thrash.107108**Imports**: always import directly from source, not barrel files — avoids bundle bloat.109110**Lists and images**: before using `FlatList` or RN `Image`, check the Component Preferences table above — `FlashList` and `expo-image` are almost always the right choice.111112**Route files**: always use kebab-case, never co-locate components/types/utils in `app/`.113114## Checklist115116### New Project Setup117- [ ] `tsconfig.json` path aliases configured118- [ ] `EXPO_PUBLIC_API_URL` env var set per environment119- [ ] Root layout has `GestureHandlerRootView` (if using gestures)120- [ ] `contentInsetAdjustmentBehavior="automatic"` on all scroll views121- [ ] `FlashList` instead of `FlatList` for lists > 20 items122123### Before Shipping124- [ ] Profile in `--profile` mode, fix frames > 16ms125- [ ] Bundle analyzed (`source-map-explorer`), no barrel imports126- [ ] R8 enabled for Android127- [ ] Unit + component tests for critical paths128- [ ] E2E flows for login, core feature, checkout129130---131132Flutter development → see `flutter-dev` skill.133iOS native (UIKit/SwiftUI) → see `ios-application-dev` skill.134Android native (Kotlin/Compose) → see `android-native-dev` skill.135136*React Native is a trademark of Meta Platforms, Inc. Expo is a trademark of 650 Industries, Inc. All other product names are trademarks of their respective owners.*
x-cmd