pproenca/dot-skills63 files

Expo React Native Coder

Comprehensive Expo React Native feature development guide. This skill should be used when building mobile app screens, navigation, data fetching, authentication, deep linking, or native UX patterns with Expo. Triggers on tasks involving Expo Router, React Native components, mobile forms, or app configuration.

Specification
Skill ID
pproenca/dot-skills/expo-react-native-coder
Publisher
pproenca
Repository
dot-skills
Installs
0
Files
63
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

pproenca/dot-skills/expo-react-native-coderInstalls these files
  • AGENTS.md
  • README.md
  • SKILL.md
  • assets/templates/_template.md
  • assets/templates/components/error-boundary.tsx
  • assets/templates/hooks/use-auth.tsx
  • assets/templates/layouts/auth-layout.tsx
  • assets/templates/layouts/tab-layout.tsx
  • assets/templates/screens/detail-screen.tsx
  • assets/templates/screens/form-screen.tsx
  • assets/templates/screens/list-screen.tsx
  • metadata.json
  • references/_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/ux-keyboard-avoiding.md
  • references/ux-safe-area-insets.md
  • references/ux-status-bar.md

What this skill tells the agent

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

PriorityCategoryImpactPrefix
1Project Setup & ConfigurationCRITICALsetup-
2Routing & NavigationCRITICALroute-
3Screen Patterns & LayoutsHIGHscreen-
4Data Fetching & StateHIGHdata-
5Authentication & SecurityHIGHauth-
6Deep Linking & Universal LinksHIGHlink-
7Native UX PatternsMEDIUM-HIGHux-
8Forms & User InputMEDIUMform-
9Assets & ThemingMEDIUMasset-
10Error Handling & TestingMEDIUMtest-

Quick Reference

1. Project Setup & Configuration (CRITICAL)

  • `setup-typescript-config` - Configure TypeScript with strict mode
  • `setup-app-config-typescript` - Use typed app.config.ts
  • `setup-environment-variables` - EXPO_PUBLIC_ prefix for client vars
  • `setup-eas-build-profiles` - EAS build profiles per environment
  • `setup-development-build` - Development builds vs Expo Go

2. Routing & Navigation (CRITICAL)

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

3. Screen Patterns & Layouts (HIGH)

  • `screen-list-flashlist` - FlashList for large lists
  • `screen-detail-params` - Pass minimal data via params
  • `screen-loading-state` - Loading and error states
  • `screen-pull-to-refresh` - Pull-to-refresh pattern
  • `screen-header-options` - Configure screen headers
  • `screen-settings-list` - Settings screen with SectionList

4. Data Fetching & State (HIGH)

  • `data-api-routes` - Server-side API routes
  • `data-secure-store` - SecureStore for sensitive data
  • `data-sqlite-local` - SQLite for complex local data
  • `data-fetch-on-focus` - Refetch on screen focus
  • `data-async-storage-simple` - AsyncStorage for preferences
  • `data-abort-controller` - Cancel fetch on unmount

5. Authentication & Security (HIGH)

  • `auth-protected-routes` - Stack.Protected guards
  • `auth-context-provider` - Auth context with session
  • `auth-oauth-flow` - OAuth with AuthSession
  • `auth-login-form` - Login form with validation
  • `auth-splash-loading` - Splash screen during auth check

6. Deep Linking & Universal Links (HIGH)

  • `link-deep-linking-scheme` - Custom URL scheme
  • `link-universal-links-ios` - iOS Universal Links
  • `link-android-app-links` - Android App Links
  • `link-handle-incoming` - Handle incoming URLs

7. Native UX Patterns (MEDIUM-HIGH)

  • `ux-safe-area-insets` - SafeAreaView for notches
  • `ux-status-bar` - Status bar styling
  • `ux-haptic-feedback` - Haptic feedback on actions
  • `ux-gesture-handler` - Gesture handler for swipes
  • `ux-keyboard-avoiding` - KeyboardAvoidingView

8. Forms & User Input (MEDIUM)

  • `form-text-input-config` - TextInput keyboard types
  • `form-controlled-inputs` - Controlled inputs with useState
  • `form-submit-button-state` - Disable button during submit
  • `form-dismiss-keyboard` - Dismiss keyboard on tap outside

9. Assets & Theming (MEDIUM)

  • `asset-image-optimization` - expo-image for caching
  • `asset-font-loading` - Load fonts with useFonts
  • `asset-vector-icons` - @expo/vector-icons
  • `asset-splash-screen` - Splash screen configuration

10. Error Handling & Testing (MEDIUM)

  • `test-jest-setup` - Jest with jest-expo preset
  • `test-component-testing` - Testing Library for components
  • `test-error-boundary` - Error boundaries
  • `test-e2e-maestro` - Maestro E2E testing

Code Templates

Production-ready templates are available in assets/templates/:

TemplateDescription
layouts/tab-layout.tsxBottom tab navigator with icons
layouts/auth-layout.tsxRoot layout with protected routes
screens/list-screen.tsxList with FlashList, refresh, states
screens/detail-screen.tsxDetail screen with param handling
screens/form-screen.tsxForm with validation, keyboard handling
hooks/use-auth.tsxAuth context with SecureStore
components/error-boundary.tsxError 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

FileDescription
AGENTS.mdComplete compiled guide with all rules
references/_sections.mdCategory definitions and ordering
assets/templates/Production-ready code templates
metadata.jsonVersion and reference information

Use this skill in a project

Open any RiverX project, search the Skills panel for pproenca/dot-skills/expo-react-native-coder, and install it in one click.

Use this skill