| name | mobile-architecture-react-native-expo |
| description | Expo Managed Workflow, Expo Router, NativeWind, and Strict TypeScript for zero-hallucination cross-platform apps. |
React Native (Expo) — AI-Native Scaffolding
AI Context & Token Optimization (Zero-Hallucination Rules)
- Expo Managed Workflow ONLY: You are strictly BANNED from modifying
ios/ or android/ native folders, Podfile, or build.gradle. Native configuration causes massive AI hallucinations. Use Expo Config plugins instead.
- Strict TypeScript: Pure JavaScript is banned. All components, props, and API responses must be strongly typed.
- Expo Router: Use file-based routing (
app/). It drastically reduces navigation boilerplate.
- NativeWind: Use NativeWind (Tailwind for RN) over
StyleSheet.create. It reduces line count and token usage significantly.
Project Structure
project/
├── app/ # Expo Router file-based routing
│ ├── (auth)/ # Authentication flow
│ ├── (tabs)/ # Tab bar layout
│ └── _layout.tsx # Root layout / Providers
├── components/ # Reusable UI components
├── constants/ # Colors, Layout dimensions, Config
├── hooks/ # Custom React hooks
├── services/ # API clients and external services
├── store/ # Global state (Zustand)
└── assets/ # Images, fonts
Naming Conventions
- Components:
PascalCase (e.g., PrimaryButton.tsx)
- Hooks:
camelCase starting with use (e.g., useColorScheme.ts)
- Routes:
kebab-case or exact URL match.
Architectural Patterns
- Expo Router: Use the
app/ directory for routing. Use <Link> from expo-router.
- Styling: NativeWind is mandatory. Keep styles inline as utility classes.
- State: Use
Zustand. Avoid Redux.
- Safe Areas: Wrap top-level screen views in
SafeAreaView from react-native-safe-area-context.
Testing Strategies
- Framework:
Jest + @testing-library/react-native.
- Approach: Test component rendering and user interactions natively.
