Back to guide/AI Tool Configs

CLAUDE.md — React Native + Expo

CLAUDE.md template for React Native Expo projects with file-based routing, NativeWind, and Zustand.

claude-mdreact-nativeexpomobileai-config
Edit View
Prompt
# CLAUDE.md

## Project Overview
{{project_name}}{{one-line description}}

## Tech Stack
- Framework: React Native via Expo SDK 51+
- Language: TypeScript
- Navigation: Expo Router (file-based)
- Styling: NativeWind (Tailwind for RN)
- State: Zustand
- API: React Query (TanStack Query)
- Auth: {{auth_provider}}

## Commands
```bash
npx expo start          # Dev server
npx expo run:ios        # iOS build
npx expo run:android    # Android build
npm run test            # Jest tests
```

## Directory Structure
```
app/                    # Expo Router file-based routes
├── (tabs)/             # Tab navigator group
├── (auth)/             # Auth flow screens
└── _layout.tsx         # Root layout
components/
├── ui/                 # Reusable primitives
└── {{domain}}/         # Feature components
lib/
├── api/                # API client + React Query hooks
├── stores/             # Zustand stores
└── utils/              # Shared utilities
```

## Conventions
- Use Expo modules over bare RN when available
- NativeWind className for all styling (no StyleSheet)
- Platform-specific code: .ios.tsx / .android.tsx suffixes
- Always test on both iOS and Android
- Use expo-secure-store for sensitive data, never AsyncStorage
- Screens are thin — business logic lives in hooks/stores

Variables to customize

{{project_name}}{{one-line description}}{{auth_provider}}{{domain}}

Why this prompt works

Mobile projects have platform-specific gotchas that generic AI code misses. Specifying 'NativeWind, not StyleSheet' and 'expo-secure-store, not AsyncStorage' catches the two most common RN mistakes.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.