|
| 1 | +> This project was generated from the [Obytes React Native Template](https://github.com/obytes/react-native-template-obytes), a production-ready React Native starter with modern tooling and best practices. |
| 2 | +
|
| 3 | +## What: Technology Stack |
| 4 | + |
| 5 | +- **Expo SDK 54** with React Native 0.81.5 - Managed React Native development |
| 6 | +- **TypeScript** - Strict type safety throughout |
| 7 | +- **Expo Router 6** - File-based routing (like Next.js) |
| 8 | +- **TailwindCSS** via Uniwind/Nativewind - Utility-first styling for React Native |
| 9 | +- **Zustand** - Lightweight global state management |
| 10 | +- **React Query** - Server state and data fetching |
| 11 | +- **TanStack Form + Zod** - Type-safe form handling and validation |
| 12 | +- **MMKV** - Encrypted local storage |
| 13 | +- **Jest + React Testing Library** - Unit testing |
| 14 | + |
| 15 | +## What: Project Structure |
| 16 | + |
| 17 | +``` |
| 18 | +src/ |
| 19 | +├── app/ # Expo Router file-based routes (add new routes here) |
| 20 | +├── features/ # Feature modules - auth, feed, settings are EXAMPLES |
| 21 | +├── components/ui/ # Pre-built UI components (button, input, modal, etc.) |
| 22 | +├── lib/ # Pre-configured utilities (api, auth, i18n, storage) |
| 23 | +├── translations/ # i18n files (en.json, ar.json - add more languages) |
| 24 | +└── global.css # TailwindCSS configuration |
| 25 | +
|
| 26 | +Root Files: |
| 27 | +├── env.ts # Environment config (CUSTOMIZE bundle IDs, API URLs) |
| 28 | +├── app.config.ts # Expo configuration |
| 29 | +└── README.md # Project-specific documentation |
| 30 | +``` |
| 31 | + |
| 32 | +## How: Development Workflow |
| 33 | + |
| 34 | +**Essential Commands:** |
| 35 | +```bash |
| 36 | +pnpm start # Start dev server |
| 37 | +pnpm ios/android # Run on platform |
| 38 | +pnpm lint # ESLint check |
| 39 | +pnpm type-check # TypeScript validation |
| 40 | +pnpm test # Run Jest tests |
| 41 | +pnpm check-all # All quality checks |
| 42 | +``` |
| 43 | + |
| 44 | +**Environment-Specific:** |
| 45 | +```bash |
| 46 | +pnpm start:preview # Preview environment |
| 47 | +pnpm ios:production # Production iOS |
| 48 | +pnpm build:production:ios # EAS production build |
| 49 | +``` |
| 50 | + |
| 51 | +## How: Key Patterns |
| 52 | + |
| 53 | +- **Create features**: New folder in `src/features/[your-feature]/` with screens, components, API hooks |
| 54 | +- **Add routes**: Create files in `src/app/` (file-based routing) |
| 55 | +- **Forms**: Use TanStack Form + Zod (see `src/features/auth/components/login-form.tsx`) |
| 56 | +- **Data fetching**: Use React Query (see `src/features/feed/api.ts`) |
| 57 | +- **Global state**: Use Zustand (see `src/features/auth/use-auth-store.tsx`) |
| 58 | +- **Styling**: NativeWind/Tailwind classes (see `src/components/ui/button.tsx`) |
| 59 | +- **Storage**: Use MMKV via `src/lib/storage.tsx` for sensitive data |
| 60 | +- **Imports**: Always use `@/` prefix, never relative imports |
| 61 | + |
| 62 | +## How: Essential Rules |
| 63 | + |
| 64 | +- ✅ **DO** use absolute imports: `@/components/ui/button` |
| 65 | +- ✅ **DO** follow feature-based structure: `src/features/[name]/` |
| 66 | +- ✅ **DO** use TanStack Form for forms (not react-hook-form) |
| 67 | +- ✅ **DO** use MMKV storage for sensitive data (not AsyncStorage) |
| 68 | +- ✅ **DO** use EAS Build for production: `pnpm build:production:ios` |
| 69 | +- ✅ **DO** prefix env vars with `EXPO_PUBLIC_*` for app access |
| 70 | +- ❌ **DO NOT** modify `android/` or `ios/` directly (use Expo config plugins) |
0 commit comments