mobile-native-bestpracticeslisted

# Mobile Native Best Practices Production-grade React Native/Expo guide focused on real-device performance, native UX, and maintainability. ## When to Use - React Native screen/component files (`.tsx`, `.jsx`) - Expo configuration (`app.json`, `app.config.ts`) - Navigation setup (React Navigation stacks, tabs) - Native module integration (`expo-*` packages) - Hooks, context providers, StyleSheet, push/voice/sensor code ## 1. Architecture ### Folder Structure ``` src/ screens/ # Full-page components (1 per route) components/ # Reusable UI (stateless when possible) hooks/ # Custom hooks (data fetching, behavior, sensors) context/ # React Context providers (thin — delegate to hooks) lib/ api.ts # HTTP client (single entry point) config.ts # App config + AsyncStorage persistence domain/ # Pure business logic (zero React imports) navigation/ # Type-safe route definitions types/ # Shared TypeScript contracts ``` ### Principles - **Screens orchestrate**: compose hooks + components, never own business logic - **Hooks own data**: fetching, caching, state transforms live in hooks - **Domain is pure**: `lib/domain/` = plain TypeScript, no React - **Context is thin**: providers wire hooks, never implement logic | Anti-pattern | Fix | |---|---| | Business logic in screens | Extract to `lib/domain/` | | API calls inside components | Extract to `lib/api.ts` + hook | | Fat context pr