Skip to main content
affpapa.org
RU EN
skill CX Codex

expo-react-native-coder — Claude Code skill: Expo and React Native

A skill with 50 rules and code templates for building Expo and React Native apps. Useful for screens, navigation and auth flows.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pproenca/dot-skills --skill expo-react-native-coder -a claude-code
Open on GitHub

What expo-react-native-coder does

The skill splits into 10 categories by priority: project setup, routing, screens, data fetching, auth, deep linking, native UX, forms, assets and testing. Each rule carries a prefix (setup-, route-, screen-, data-, auth-, link-, ux-, form-, asset-, test-) and lives in its own file under references/. The agent pulls the file it needs when a task touches that area.

Templates sit in assets/templates/: a bottom tab layout with icons, a root layout with protected routes, and a list screen built on FlashList with refresh and loading states. Navigation covers tabs, stacks, drawers and modals through Expo Router, plus dynamic segments [param] and typed routes. Auth uses a session context, OAuth with AuthSession and Stack.Protected guards.

The rules assume a TypeScript project: strict mode, a typed app.config.ts, environment variables with the EXPO_PUBLIC_ prefix. On a plain JavaScript codebase you will have to adapt part of them by hand. Build setup covers EAS profiles and development builds instead of Expo Go.

What it helps with

  • scaffold a new Expo project in TypeScript
  • wire up tabs, stacks and modal screens
  • guard screens behind authentication
  • set up deep links and universal links
  • test components with Jest and Maestro

Example prompts for the agent

  • Build an orders list screen with FlashList and pull-to-refresh
  • Set up protected routes so signed-out users land on the login screen
  • Handle an incoming link that opens the product detail screen

How to install expo-react-native-coder

1Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill expo-react-native-coder -a claude-code

2Manually: put the files in place

~/.claude/skills/expo-react-native-coder/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/expo-react-native-coder/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about expo-react-native-coder

How do I install expo-react-native-coder in Claude?

Run npx skills add pproenca/dot-skills --skill expo-react-native-coder -a claude-code. The skill file then lands at ~/.claude/skills/expo-react-native-coder/SKILL.md.

What does expo-react-native-coder do?

It hands the agent a set of rules and templates for Expo and React Native work: navigation, screens, data fetching, auth, deep linking, forms and tests.

What stack does the skill expect?

The rules target TypeScript with strict mode and Expo Router. Build guidance covers EAS profiles and development builds.

Source text

SKILL.md · MIT 
---
name: expo-react-native-coder
description: 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.
---

# 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 |
| `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](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Full Compiled Document

For a single comprehensive document with all rules, see [AGENTS.md](AGENTS.md).

## Reference Files

| File | Description |
|------|-------------|
| [AGENTS.md](AGENTS.md) | Complete compiled guide with all rules |
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/](assets/templates/) | Production-ready code templates |
| [metadata.json](metadata.json) | Version and reference information |

© pproenca · MIT · pproenca/dot-skills

Similar skills

Everything for Mobile →
expo-react-native-typescript Mindrally A skill that hands your agent a rulebook for Expo, React Native and TypeScript work: file layout, navigation, state, testing. CX Codex +1 2,200installs react-native-expo-cursorrules-prompt-file PatrickJS A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,011repo stars react-native-dev MiniMax-AI A React Native and Expo reference set for your agent: routing, lists, animation, state, tests and shipping. Useful when you are building a mobile app and don't want to re-explain the basics. CX Codex +1 1,900installs react-native-expert https://github.com/Jeffallan A skill for AI coding agents that helps build React Native and Expo apps: navigation, native modules, list performance, platform-specific code for iOS and Android. CX Codex +1 4,900installs react-native-architecture Seth Hobson A skill for Claude Code, Codex and Cursor that hands your agent project layout, navigation, native modules and offline sync patterns for React Native on Expo. CX Codex 15,087installs expo-web-to-native expo Guides an existing React web app into a native iOS/Android app with Expo. Use it for a staged screen-by-screen migration. CX Codex +1 19,600installs

From the same set45

debug The debug skill gives your agent a fixed order for bug work: reproduce, test hypotheses, find the root cause. Useful when a stack trace or a failing test lands on you. CX Codex +1 436installs ios-design A skill with 62 rules for building SwiftUI interfaces: semantic colors, typography, state, navigation and accessibility. CX Codex +1 418installs feature-arch Turns a React project into a feature-based layout and writes a target-architecture blueprint with directory tree, public APIs and a migration plan. CX Codex +1 412installs jscodeshift A rule set for writing and debugging jscodeshift codemods: AST traversal, code migrations, automated refactoring. CX Codex +1 410installs react-testing-library A skill with 43 React Testing Library rules. It steers the agent toward tests that check behaviour instead of component internals. CX Codex +1 402installs react-optimise A skill that walks through React app performance: React Compiler, bundle size, rendering, data fetching, Core Web Vitals. Useful when your app feels slow. CX Codex +1 396installs rails-hotwire A skill with Hotwire rules for Rails: Turbo Drive, Frames, Streams, Turbo 8 morphing and Stimulus controllers. Useful when writing or refactoring interactive pages. CX Codex +1 370installs nginx-c-module-design A skill for anyone writing nginx C modules: it helps you decide what to expose as directives, how to name them and where they belong. Most useful while the module's config interface is still being shaped. CX Codex +1 352installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor