jorcan 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