Menu
React Native patterns — New Architecture (Fabric/TurboModules), Expo, navigation, performance
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
When --quality-locked is active, loop review/revise at each Quality Gate until findings reach a clean bar (no Critical, no Major, only cosmetic Minor) or the iteration cap (10) is reached. Uses a deterministic Python checker for classification and decision logic; agent runs the actual review and revision steps.
Use after implementation passes the quality gates, when a change needs an independent pass over the code before it ships, or when the user asks to "QA this", "check the implementation", or "verify it matches the spec". Applies to Standard and Comprehensive scopes with the Task tool available; Lightweight tasks skip.
Use when the user picks [A] Review at a spec/plan/ADR/root-cause/fix-plan checkpoint, or asks for an independent review before implementation begins. Applies to Standard and Comprehensive scopes with the Task tool available; Lightweight tasks skip.
Use as the code-quality gate after spec-compliance and constitution checks pass, or when the user says "review my code", "quality check", "security review", or "is this code good". Runs as an independent sub-agent when the Task tool is available.
Adversarial review verifying implementation matches its specification — checks completeness (nothing missing) and precision (nothing extra). Distrusts the implementer's self-report. Use after implementation, or when the user says "check against spec", "does this match requirements", or "verify the implementation".
Configure Sage preset and project settings. Switch between base, startup, enterprise, or opensource constitution presets. Use when the user says "configure sage", "change preset", or "sage settings".
| name | react-native |
| description | React Native patterns — New Architecture (Fabric/TurboModules), Expo, navigation, performance |
| version | 1.0.0 |
| type | knowledge |
| layer | framework |
| requires | {"sage":">=1.0.0","skills":["mobile","react"]} |
| activates-when | {"detected":["react-native","expo"]} |
| tags | ["react-native","expo"] |
Layer 2 — Framework Pack
React Native patterns for the New Architecture era (0.76+). Fabric, TurboModules, Expo, navigation, and the mistakes agents make from old Bridge-era training data.
React Native underwent a fundamental architectural shift. The old Bridge (async JSON serialization between JS and native) is replaced by JSI (direct synchronous C++ references). Fabric replaces the old UI Manager. TurboModules replace legacy Native Modules. Starting from RN 0.82, the New Architecture is always-on and can't be disabled.
LLMs trained on 2018-2023 content produce Bridge-era patterns: old lifecycle methods, legacy navigation libraries, manual native module boilerplate. This pack establishes New Architecture as the baseline and corrects stale patterns.
| Type | Files | Coverage |
|---|---|---|
| Patterns | 7 | New Architecture, Expo workflow, navigation, state management, native modules, lists, styling |
| Anti-patterns | 5 | Bridge-era patterns, wrong navigation library, blocking JS thread, inline styles everywhere, unnecessary native modules |
| Constitution | 1 | 5 React Native-specific principles |
| Gate | 1 | RN pattern compliance check |
When expo is detected, read integration/expo-integration.md for the Expo +
React Navigation + Zustand + MMKV + TanStack Query seams — navigation guards,
store hydration, offline cache, and Expo Router auth flows — that the individual
docs don't cover together. This folds in the former stack-react-native-expo
skill; the content is unchanged.
Constitution: constitution/expo.constitution-additions.md ·
anti-patterns: anti-patterns/expo-anti-patterns.md.
