Expert React Native and Expo development skill for building cross-platform mobile apps. Use this skill when creating, debugging, or optimizing React Native projects - Expo setup, native modules, navigation (React Navigation, Expo Router), performance tuning (Hermes, FlatList, re-render prevention), OTA updates (EAS Update, CodePush), and bridging native iOS/Android code. Triggers on mobile app architecture, Expo config plugins, app store deployment, push notifications, and React Native CLI tasks.
Instrucciones de origen · Vista previa de solo lectura
name
react-native
version
0.1.0
description
Expert React Native and Expo development skill for building cross-platform mobile apps. Use this skill when creating, debugging, or optimizing React Native projects - Expo setup, native modules, navigation (React Navigation, Expo Router), performance tuning (Hermes, FlatList, re-render prevention), OTA updates (EAS Update, CodePush), and bridging native iOS/Android code. Triggers on mobile app architecture, Expo config plugins, app store deployment, push notifications, and React Native CLI tasks.
When this skill is activated, always start your first response with the 🧢 emoji.
React Native
A comprehensive mobile development skill covering the full React Native ecosystem - from
bootstrapping an Expo project to shipping production apps on iOS and Android. It encodes
deep expertise in Expo (managed and bare workflows), React Navigation and Expo Router,
native module integration, Hermes-powered performance optimization, and over-the-air update
strategies. Whether you are building a greenfield app or maintaining a complex production
codebase, this skill provides actionable patterns grounded in real-world mobile engineering.
When to use this skill
Trigger this skill when the user:
Wants to create, configure, or scaffold a React Native or Expo project
Needs help with React Navigation or Expo Router (stacks, tabs, deep linking)
Is writing or debugging a native module or Turbo Module bridge
Asks about mobile performance (Hermes, FlatList optimization, re-render prevention)
Wants to set up OTA updates with EAS Update or CodePush
Needs guidance on Expo config plugins or prebuild customization
Is deploying to the App Store or Google Play (EAS Build, Fastlane, signing)
Asks about push notifications, background tasks, or device APIs in React Native
Do NOT trigger this skill for:
Web-only React development with no mobile component
Flutter, Swift-only, or Kotlin-only native app development
Setup & authentication
Environment variables
EXPO_TOKEN=your-expo-access-token
# Optional: for EAS Build and Update
EAS_BUILD_PROFILE=production
Installation
# Create a new Expo project (recommended starting point)
npx create-expo-app@latest my-app
cd my-app
# Or add Expo to an existing React Native project
npx install-expo-modules@latest
# Install EAS CLI for builds and updates
npm install -g eas-cli
eas login
React Native renders native platform views (UIView on iOS, Android View on Android) driven by JavaScript business logic. The architecture has evolved through three eras:
The Bridge (Legacy): JS and native communicate via an asynchronous JSON bridge. All data is serialized/deserialized. This is the bottleneck behind most performance complaints in older RN apps.
The New Architecture (Fabric + TurboModules): Released as default in RN 0.76+. Fabric replaces the old renderer with synchronous, concurrent-capable rendering. TurboModules replace the bridge with JSI (JavaScript Interface) - direct C++ bindings for native module calls with no serialization overhead. Codegen generates type-safe interfaces from TypeScript specs.
Expo as the Platform Layer: Expo provides a managed layer on top of React Native - prebuild (generates native projects from config), EAS (cloud build and OTA update services), Expo Modules API (write native modules in Swift/Kotlin with a unified API), and Expo Router (file-based navigation). The vast majority of new RN projects should start with Expo. "Bare workflow" is only needed when Expo's managed layer cannot accommodate a specific native requirement.
Navigation Model: React Navigation (imperative) and Expo Router (file-based, built on React Navigation) are the standard. Navigation state lives in a stack machine - screens push/pop onto stacks, tabs switch between stack navigators, and drawers wrap stacks. Deep linking maps URLs to screen paths.
Common tasks
1. Set up navigation with Expo Router
File-based routing where the file system defines the navigation structure.
Prefer Expo Modules API over bare TurboModules for new code - it handles iOS/Android symmetry and codegen automatically.
4. Configure OTA updates with EAS Update
Push JS bundle updates without going through app store review.
# Install and configure
npx expo install expo-updates
eas update:configure
# Publish an update to the preview channel
eas update --branch preview --message "Fix checkout bug"# Publish to production
eas update --branch production --message "v1.2.1 hotfix"
// app.config.ts - use the plugin
{ plugins: [['./plugins/withCustomScheme', { scheme: 'myapp' }]] }
6. Set up EAS Build for production
Cloud builds for iOS and Android without local Xcode/Android Studio.
# Initialize EAS Build
eas build:configure
# Build for both platforms
eas build --platform all --profile production
# Submit to stores
eas submit --platform ios
eas submit --platform android
Use React profiling and memoization strategically - not everywhere.
// Use React DevTools Profiler or why-did-you-render to find actual problems first// Memoize expensive computationsconst sortedItems = useMemo(() =>
items.sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
// Memoize callbacks passed to child componentsconst handlePress = useCallback((id: string) => {
navigation.navigate('Details', { id });
}, [navigation]);
// Memoize entire components when props are stableconstExpensiveChart = memo(({ data }: { data: DataPoint[] }) => {
// heavy rendering logic
});
// Use Zustand or Jotai for fine-grained state subscriptions// instead of React Context which re-renders all consumersimport { create } from'zustand';
const useStore = create<AppState>((set) => ({
count: 0,
increment: () =>set((state) => ({ count: state.count + 1 })),
}));
Do not sprinkle memo() everywhere. Measure first with React DevTools Profiler, then memoize the actual bottleneck.
Gotchas
OTA update applied to incompatible native runtime - EAS Update pushes JS bundles, but if a native module was added or changed since the last app store build, the JS update will crash on load. Use runtimeVersion.policy: 'fingerprint' to automatically detect native changes and prevent incompatible updates from being served.
memo() applied without measuring first - Adding memo() everywhere is a common premature optimization. It adds object comparison overhead on every render and can cause subtle bugs when object references change unexpectedly. Profile with React DevTools first, then memoize actual bottlenecks.
Config plugin modifying already-ejected native files - If native files have been manually edited after expo prebuild, re-running prebuild overwrites those changes. Either commit all native customizations to config plugins or document explicitly which files are manually managed and must not be regenerated.
Expo Router file not a default export - Expo Router requires every route file to have a default export. A named-only export silently breaks routing with an opaque error. Always use export default function ScreenName() for route files.
Context as global state causing full tree re-renders - React Context triggers a re-render in every consumer when any value changes. Using a single large Context object for app state causes cascading re-renders. Use Zustand, Jotai, or split contexts with narrow value shapes for any state accessed by more than a few components.
Error handling
Error
Cause
Resolution
Invariant Violation: requireNativeComponent
Native module not linked or pod not installed
Run npx expo prebuild --clean then npx expo run:ios
Error: No route named "X" exists
Expo Router file missing or misnamed
Check file exists at app/X.tsx and is a default export
RuntimeVersion mismatch (EAS Update)
JS update targets a different native runtime
Set runtimeVersion.policy: 'fingerprint' to auto-detect
Task :app:mergeDebugNativeLibs FAILED
Duplicate native libraries on Android
Check for conflicting native deps, use resolutions in package.json
Metro ENOSPC or slow bundling
File watcher limit exceeded on Linux/WSL
Increase fs.inotify.max_user_watches to 524288
References
For detailed guidance on specific topics, load the relevant reference file:
references/expo-ecosystem.md - Expo SDK modules, config plugins, prebuild, EAS services, and managed vs bare workflow decisions
references/navigation.md - React Navigation and Expo Router patterns, deep linking, authentication flows, nested navigators, and modal stacks
references/native-modules.md - Expo Modules API, TurboModules, JSI, native views, bridging Swift/Kotlin, and the New Architecture
references/performance.md - Hermes optimization, FlatList tuning, re-render prevention, memory profiling, startup time, and bundle analysis
references/ota-updates.md - EAS Update workflows, CodePush migration, runtime versioning, rollback strategies, and update policies
Only load a reference file when the current task requires that depth - they are detailed and will consume context.
Companion check
On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:
