expo-react-native-coder
Expo React Native Coder Best Practices
Comprehensive feature development guide for Expo React Native applications. Contains 50 rules across 10 categories, covering everything from project setup to testing. Includes production-ready code templates for common features.
When to Apply
Reference these guidelines when:
- Setting up a new Expo project with TypeScript
- Building navigation with Expo Router (tabs, stacks, drawers, modals)
- Creating screens (list, detail, form, settings)
- Implementing authentication flows with protected routes
- Configuring deep linking and universal links
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Project Setup & Configuration | CRITICAL | setup- |
| 2 | Routing & Navigation | CRITICAL | route- |
| 3 | Screen Patterns & Layouts | HIGH | screen- |
| 4 | Data Fetching & State | HIGH | data- |
| 5 | Authentication & Security | HIGH | auth- |
| 6 | Deep Linking & Universal Links | HIGH | link- |
| 7 | Native UX Patterns | MEDIUM-HIGH | ux- |
| 8 | Forms & User Input | MEDIUM | form- |
| 9 | Assets & Theming | MEDIUM | asset- |
| 10 | Error Handling & Testing | MEDIUM | test- |
Quick Reference
1. Project Setup & Configuration (CRITICAL)
setup-typescript-config- Configure TypeScript with strict modesetup-app-config-typescript- Use typed app.config.tssetup-environment-variables- EXPO_PUBLIC_ prefix for client varssetup-eas-build-profiles- EAS build profiles per environmentsetup-development-build- Development builds vs Expo Go
2. Routing & Navigation (CRITICAL)
route-file-based-routing- File-based routing with Expo Routerroute-tab-navigator- Tab navigator with route groupsroute-dynamic-segments- Dynamic route segments [param]route-stack-within-tabs- Nested stack in tabsroute-modal-presentation- Modal screen presentationroute-typed-routes- Enable typed routesroute-drawer-navigator- Drawer navigator setup
3. Screen Patterns & Layouts (HIGH)
screen-list-flashlist- FlashList for large listsscreen-detail-params- Pass minimal data via paramsscreen-loading-state- Loading and error statesscreen-pull-to-refresh- Pull-to-refresh patternscreen-header-options- Configure screen headersscreen-settings-list- Settings screen with SectionList
4. Data Fetching & State (HIGH)
data-api-routes- Server-side API routesdata-secure-store- SecureStore for sensitive datadata-sqlite-local- SQLite for complex local datadata-fetch-on-focus- Refetch on screen focusdata-async-storage-simple- AsyncStorage for preferencesdata-abort-controller- Cancel fetch on unmount
5. Authentication & Security (HIGH)
auth-protected-routes- Stack.Protected guardsauth-context-provider- Auth context with sessionauth-oauth-flow- OAuth with AuthSessionauth-login-form- Login form with validationauth-splash-loading- Splash screen during auth check
6. Deep Linking & Universal Links (HIGH)
link-deep-linking-scheme- Custom URL schemelink-universal-links-ios- iOS Universal Linkslink-android-app-links- Android App Linkslink-handle-incoming- Handle incoming URLs
7. Native UX Patterns (MEDIUM-HIGH)
ux-safe-area-insets- SafeAreaView for notchesux-status-bar- Status bar stylingux-haptic-feedback- Haptic feedback on actionsux-gesture-handler- Gesture handler for swipesux-keyboard-avoiding- KeyboardAvoidingView
8. Forms & User Input (MEDIUM)
form-text-input-config- TextInput keyboard typesform-controlled-inputs- Controlled inputs with useStateform-submit-button-state- Disable button during submitform-dismiss-keyboard- Dismiss keyboard on tap outside
9. Assets & Theming (MEDIUM)
asset-image-optimization- expo-image for cachingasset-font-loading- Load fonts with useFontsasset-vector-icons- @expo/vector-iconsasset-splash-screen- Splash screen configuration
10. Error Handling & Testing (MEDIUM)
test-jest-setup- Jest with jest-expo presettest-component-testing- Testing Library for componentstest-error-boundary- Error boundariestest-e2e-maestro- Maestro E2E testing
Code Templates
Production-ready templates are available in assets/templates/:
| Template | Description |
|---|---|
layouts/tab-layout.tsx |
Bottom tab navigator with icons |
layouts/auth-layout.tsx |
Root layout with protected routes |
screens/list-screen.tsx |
List with FlashList, refresh, states |
screens/detail-screen.tsx |
Detail screen with param handling |
screens/form-screen.tsx |
Form with validation, keyboard handling |
hooks/use-auth.tsx |
Auth context with SecureStore |
components/error-boundary.tsx |
Error boundary component |
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
Full Compiled Document
For a single comprehensive document with all rules, see AGENTS.md.
Reference Files
| File | Description |
|---|---|
| AGENTS.md | Complete compiled guide with all rules |
| references/_sections.md | Category definitions and ordering |
| assets/templates/ | Production-ready code templates |
| metadata.json | Version and reference information |
More from pproenca/dot-skills
zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
2.0Kclean-architecture
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
1.4Kemilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
918vitest
Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
907typescript
This skill should be used when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "configure tsconfig.json", "fix type errors", "improve async patterns", or encounters TS errors (TS2322, TS2339, "is not assignable to"). Also triggers on .ts, .tsx, .d.ts file work involving type definitions, module organization, or memory management. Does NOT cover TypeScript basics, framework-specific patterns, or testing.
821nuqs
nuqs (type-safe URL query state) best practices for Next.js applications. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, or Next.js routing with state.
735