| name | react-native-development |
| description | Use when building screens, navigation, styling, or platform behavior in this Expo React Native app, to follow mobile-first conventions and keep logic testable. |
React Native Development (Expo)
Overview
Build mobile UI with Expo and React Native. Keep screens in components; extract
testable logic into pure functions under src/.
Process
- Prefer React Native core components and
StyleSheet.create before adding UI
libraries.
- Keep
App.tsx (or future screens) focused on layout and wiring; move
non-trivial logic to pure helpers you can test with npm test.
- Handle platform differences explicitly (
Platform.OS, platform-specific
files) instead of guessing runtime behavior.
- Respect safe areas and accessibility: meaningful labels, tappable targets,
sufficient contrast.
- Verify with
npm run typecheck and npm test before claiming completion.
Structure
- Screens under
app/ or src/screens/ (follow existing project layout).
- Shared UI in small components; no mega-files.
- Navigation: use Expo Router conventions if added later; document stack changes.
Testing Strategy
- Unit tests for pure functions (formatting, validation, reducers) — required.
- Component tests when logic is intertwined with rendering — optional in this
starter; prefer extracting logic first.
- Device/simulator for layout, gestures, and platform-specific UI — manual
smoke test before release.
Guidelines
- Do not block the JS thread with heavy sync work; defer or chunk large tasks.
- Read secrets from environment at build time via Expo config — never hardcode
API keys in source.
- Adding native modules may require an Expo config plugin and a dev client build;
document that before adding dependencies.
- Test on at least one target (iOS simulator, Android emulator, or web) for UI
changes; logic-only changes can rely on
npm test.
- Use
project-security checks for auth tokens, deep links, and WebViews.
Anti-patterns
- Copy-pasting web React patterns that assume DOM APIs.
- Storing refresh tokens in AsyncStorage without encryption requirements documented.
- Skipping tests because "it's just UI" while logic lives in the component.
