≈485 tokens on demand. Your agent reads this file only when SKILL.md points to it.
React Native App Template
Tech Stack
| Component |
Technology |
| Framework |
React Native + Expo |
| Language |
TypeScript |
| Navigation |
Expo Router |
| State |
Zustand + React Query |
| Styling |
NativeWind |
| Testing |
Jest + RNTL |
Directory Structure
project-name/
├── app/ # Expo Router (file-based)
│ ├── _layout.tsx # Root layout
│ ├── index.tsx # Home
│ ├── (tabs)/ # Tab navigation
│ └── [id].tsx # Dynamic route
├── components/
│ ├── ui/ # Reusable
│ └── features/
├── hooks/
├── lib/
│ ├── api.ts
│ └── storage.ts
├── store/
├── constants/
└── app.json
Navigation Patterns
| Pattern |
Use |
| Stack |
Page hierarchy |
| Tabs |
Bottom navigation |
| Drawer |
Side menu |
| Modal |
Overlay screens |
State Management
| Type |
Tool |
| Local |
Zustand |
| Server |
React Query |
| Forms |
React Hook Form |
| Storage |
Expo SecureStore |
Key Packages
| Package |
Purpose |
| expo-router |
File-based routing |
| zustand |
Local state |
| @tanstack/react-query |
Server state |
| nativewind |
Tailwind styling |
| expo-secure-store |
Secure storage |
Setup Steps
npx create-expo-app {{name}} -t expo-template-blank-typescriptnpx expo install expo-router react-native-safe-area-context- Install state:
npm install zustand @tanstack/react-query
npx expo start
Best Practices
- Expo Router for navigation
- Zustand for local, React Query for server state
- NativeWind for consistent styling
- Expo SecureStore for tokens
- Test on both iOS and Android
