# Li Lance Android Seraphim Framework React Native Architecture > React Native Architecture - Skill: `tomevault-io/li-lance-android-seraphim-framework-react-native-architectur` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/li-lance-android-seraphim-framework-react-native-architectur` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/li-lance-android-seraphim-framework-react-native-architectur/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/li-lance-android-seraphim-framework-react-native-architectur --- # React Native Architecture ## **Priority: P0 (CRITICAL)** Feature-first organization for scalable mobile apps. ## Organize by Feature - **Feature-First**: Organize by feature/module, not by type. - **Colocation**: Keep related files together (screens, components, hooks within feature). - **Separation**: UI (screens/components) separate from logic (hooks/services). See [folder structure reference](references/folder-structure.md) for full directory tree and path alias configuration. - **Atomic Components**: Reusable components in `/components`. Feature-specific in feature folder. - **Absolute Imports**: Configure tsconfig.json paths for clean imports. - **Single Responsibility**: Each file has one clear purpose. - **Expo vs CLI**: Structure works for both. Expo uses `app.json`, CLI uses `index.js`. ## Anti-Patterns - **No Type-Based Folders**: Avoid `/containers`, `/screens` at root. Use features. - **No Logic in Screens**: Extract to hooks or services. - **No Circular Deps**: Features should not import from each other directly. - **No Deep Nesting**: Max 3 levels deep. ## Navigation Strategy - **Expo Router**: Use for new projects, web-parity, and file-based routing. - **React Navigation**: Use for complex deep-linking, legacy apps, or high-customization needs. ## Verification Checklist (Mandatory) - [ ] **Feature-First**: Is the file inside a feature directory? - [ ] **Colocation**: Are hooks/services colocated with screens? - [ ] **Logic-Free Screens**: Is there any business logic in the screen component? - [ ] **Navigation Choice**: Does the project use the navigation strategy defined above? ## References See [references/folder-structure.md](references/folder-structure.md) for full directory tree, path alias config, and service layer patterns. --- > Source: [li-lance/android-seraphim-framework](https://github.com/li-lance/android-seraphim-framework) — distributed by [TomeVault](https://tomevault.io).