expo-react-native-coder

Files (63)

• AGENTS.md
• README.md
• SKILL.md
• _template.md · assets/templates/
• error-boundary.tsx · assets/templates/components/
• use-auth.tsx · assets/templates/hooks/
• auth-layout.tsx · assets/templates/layouts/
• tab-layout.tsx · assets/templates/layouts/
• detail-screen.tsx · assets/templates/screens/
• form-screen.tsx · assets/templates/screens/
• list-screen.tsx · assets/templates/screens/
• metadata.json
• _sections.md · references/
• asset-font-loading.md · references/
• asset-image-optimization.md · references/
• asset-splash-screen.md · references/
• asset-vector-icons.md · references/
• auth-context-provider.md · references/
• auth-login-form.md · references/
• auth-oauth-flow.md · references/
• auth-protected-routes.md · references/
• auth-splash-loading.md · references/
• data-abort-controller.md · references/
• data-api-routes.md · references/
• data-async-storage-simple.md · references/
• data-fetch-on-focus.md · references/
• data-secure-store.md · references/
• data-sqlite-local.md · references/
• form-controlled-inputs.md · references/
• form-dismiss-keyboard.md · references/
• form-submit-button-state.md · references/
• form-text-input-config.md · references/
• link-android-app-links.md · references/
• link-deep-linking-scheme.md · references/
• link-handle-incoming.md · references/
• link-universal-links-ios.md · references/
• route-drawer-navigator.md · references/
• route-dynamic-segments.md · references/
• route-file-based-routing.md · references/
• route-modal-presentation.md · references/
• route-stack-within-tabs.md · references/
• route-tab-navigator.md · references/
• route-typed-routes.md · references/
• screen-detail-params.md · references/
• screen-header-options.md · references/
• screen-list-flashlist.md · references/
• screen-loading-state.md · references/
• screen-pull-to-refresh.md · references/
• screen-settings-list.md · references/
• setup-app-config-typescript.md · references/
• setup-development-build.md · references/
• setup-eas-build-profiles.md · references/
• setup-environment-variables.md · references/
• setup-typescript-config.md · references/
• test-component-testing.md · references/
• test-e2e-maestro.md · references/
• test-error-boundary.md · references/
• test-jest-setup.md · references/
• ux-gesture-handler.md · references/
• ux-haptic-feedback.md · references/
• …and 3 more

SKILL.md (first lines)

# 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`](references/setup-typescript-config.md) - Configure TypeScript with strict mode
- [`setup-app-config-typescript`](references/setup-app-config-typescript.md) - Use typed app.config.ts
- [`setup-environment-variables`](references/setup-environment-variables.md) - EXPO_PUBLIC_ prefix for client vars
- [`setup-eas-build-profiles`](references/setup-eas-build-profiles.md) - EAS build profiles per environment
- [`setup-development-build`](references/setup-development-build.md) - Development builds vs Expo Go

### 2. Routing & Navigation (CRITICAL)

- [`route-file-based-routing`](references/route-file-based-routing.md) - File-based routing with Expo Router
- [`route-tab-navigator`](references/route-tab-navigator.md) - Tab navigator with route groups
- [`route-dynamic-segments`](references/route-dynamic-segments.md) - Dynamic route segments [param]
- [`route-stack-within-tabs`](references/route-stack-within-tabs.md) - Nested stack in tabs
- [`route-modal-presentation`](references/route-modal-presentation.md) - Modal screen presentation
- [`route-typed-routes`](references/route-typed-routes.md) - Enable typed routes
- [`route-drawer-navigator`](references/route-drawer-navigator.md) - Drawer navigator setup

### 3. Screen Patterns & Layouts (HIGH)

- [`screen-list-flashlist`](references/screen-list-flashlist.md) - FlashList for large lists
- [`screen-detail-params`](references/screen-detail-params.md) - Pass minimal data via params
- [`screen-loading-state`](references/screen-loading-state.md) - Loading and error states
- [`screen-pull-to-refresh`](references/screen-pull-to-refresh.md) - Pull-to-refresh pattern
- [`screen-header-options`](references/screen-header-options.md) - Configure screen headers
- [`screen-settings-list`](references/screen-settings-list.md) - Settings screen with SectionList

### 4. Data Fetching & State (HIGH)

- [`data-api-routes`](references/data-api-routes.md) - Server-side API routes
- [`data-secure-store`](references/data-secure-store.md) - SecureStore for sensitive data
- [`data-sqlite-local`](references/data-sqlite-local.md) - SQLite for complex local data
- [`data-fetch-on-focus`](references/data-fetch-on-focus.md) - Refetch on screen focus
- [`data-async-storage-simple`](references/data-async-storage-simple.md) - AsyncStorage for preferences
- [`data-abort-controller`](references/data-abort-controller.md) - Cancel fetch on unmount

### 5. Authentication & Security (HIGH)

- [`auth-protected-routes`](references/auth-protected-routes.md) - Stack.Protected guards
- [`auth-context-provider`](references/auth-context-provider.md) - Auth context with session
- [`auth-oauth-flow`](references/auth-oauth-flow.md) - OAuth with AuthSession
- [`auth-login-form`](references/auth-login-form.md) - Login form with validation
- [`auth-splash-loading`](references/auth-splash-loading.md) - Splash screen during auth check

### 6. Deep Linking & Universal Links (HIGH)

- [`link-deep-linking-scheme`](references/link-deep-linking-scheme.md) - Custom URL scheme
- [`link-universal-links-ios`](references/link-universal-links-ios.md) - iOS Universal Links
- [`link-android-app-links`](references/link-android-app-links.md) - Android App Links
- [`link-handle-incoming`](references/link-handle-incoming.md) - Handle incoming URLs

### 7. Native UX Patterns (MEDIUM-HIGH)

- [`ux-safe-area-insets`](references/ux-safe-area-insets.md) - SafeAreaView for notches
- [`ux-status-bar`](references/ux-status-bar.md) - Status bar styling
- [`ux-haptic-feedback`](references/ux-haptic-feedback.md) - Haptic feedback on actions
- [`ux-gesture-handler`](references/ux-gesture-handler.md) - Gesture handler for swipes
- [`ux-keyboard-avoiding`](references/ux-keyboard-avoiding.md) - KeyboardAvoidingView

### 8. Forms & User Input (MEDIUM)

- [`form-text-input-config`](references/form-text-input-config.md) - TextInput keyboard types
- [`form-controlled-inputs`](references/form-controlled-inputs.md) - Controlled inputs with useState
- [`form-submit-button-state`](references/form-submit-button-state.md) - Disable button during submit
- [`form-dismiss-keyboard`](references/form-dismiss-keyboard.md) - Dismiss keyboard on tap outside

### 9. Assets & Theming (MEDIUM)

- [`asset-image-optimization`](references/asset-image-optimization.md) - expo-image for caching
- [`asset-font-loading`](references/asset-font-loading.md) - Load fonts with useFonts
- [`asset-vector-icons`](references/asset-vector-icons.md) - @expo/vector-icons
- [`asset-splash-screen`](references/asset-splash-screen.md) - Splash screen configuration

### 10. Error Handling & Testing (MEDIUM)

- [`test-jest-setup`](references/test-jest-setup.md) - Jest with jest-expo preset
- [`test-component-testing`](references/test-component-testing.md) - Testing Library for components
- [`test-error-boundary`](references/test-error-boundary.md) - Error boundaries
- [`test-e2e-maestro`](references/test-e2e-maestro.md) - 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 |

From pproenca/dot-skills, MIT.

More from pproenca/dot-skills