Builds cross-platform mobile apps using React Native and the Expo framework.
Install
mkdir -p .claude/skills/react-native-oakoss && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11509" && unzip -o skill.zip -d .claude/skills/react-native-oakoss && rm skill.zipInstalls to .claude/skills/react-native-oakoss
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
React Native with Expo framework for building native mobile apps on Android, iOS, and web from a single TypeScript codebase. Covers Expo Router file-based navigation (stack, tabs, drawer), EAS Build/Submit/Update for CI/CD and OTA updates, expo-dev-client for custom development builds, Expo Modules API for native Swift/Kotlin modules, core RN patterns (StyleSheet, FlatList, Platform-specific code), native device APIs (camera, notifications, haptics), and NativeWind for Tailwind CSS styling. Use when building React Native apps with Expo, configuring Expo Router navigation, setting up EAS Build pipelines, implementing OTA updates, creating native modules, or integrating device APIs like camera and push notifications.Key capabilities
- →Build native mobile apps for Android and iOS from a single TypeScript codebase.
- →Configure file-based navigation using Expo Router for stack, tabs, and drawer.
- →Set up CI/CD pipelines with EAS Build, Submit, and Update for cloud builds and OTA updates.
- →Create native Swift/Kotlin modules using the Expo Modules API.
- →Integrate native device APIs like camera, notifications, and haptics.
- →Apply Tailwind CSS styling in React Native projects using NativeWind v4.
How it works
The skill uses the Expo framework to build universal native apps from a single TypeScript codebase, providing tools for navigation, CI/CD, native module creation, and device API integration.
Inputs & outputs
When to use react-native
- →Building native mobile apps
- →Configuring navigation
- →Implementing push notifications
- →CI/CD setup
About this skill
React Native with Expo
Overview
Expo is an open-source framework for building universal native apps with React Native from a single TypeScript codebase. It provides file-based routing (Expo Router), cloud build services (EAS Build/Submit/Update), and a rich set of native modules for device APIs.
When to use: Mobile apps targeting iOS and Android, universal apps with web support, projects needing OTA updates, apps requiring native device APIs (camera, notifications, haptics), teams preferring managed infrastructure over bare React Native.
When NOT to use: Apps requiring heavy custom native code incompatible with Expo Modules API, brownfield integration into existing native apps, apps with native-only CI/CD requirements.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Stack navigation | <Stack> from expo-router | File-based, _layout.tsx defines navigator |
| Tab navigation | <Tabs> from expo-router | (tabs) directory group with _layout.tsx |
| Drawer navigation | <Drawer> from expo-router/drawer | Requires @react-navigation/drawer |
| Typed routes | href with /(group)/route | Enable typed-routes in app.json |
| Dev build | expo-dev-client | Custom native code + dev tools |
| EAS Build | eas build --profile production | Cloud builds for app stores |
| EAS Submit | eas submit -p ios / -p android | Automated store submission |
| OTA Update | eas update --branch production | JS-only updates, no rebuild needed |
| Native module | Expo Modules API | Swift/Kotlin with expo-module.config.json |
| Platform code | Platform.select() / .ios.tsx | Per-platform logic or entire files |
| Styled lists | FlatList / FlashList | Virtualized, keyExtractor required |
| Camera | expo-camera | Permissions via useCameraPermissions() |
| Notifications | expo-notifications | Push tokens via getExpoPushTokenAsync() |
| Haptics | expo-haptics | impactAsync, notificationAsync |
| Tailwind (RN) | NativeWind v4 | className prop, Tailwind CSS in RN |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using react-navigation directly instead of Expo Router | Expo Router wraps React Navigation with file-based routing |
Forgetting _layout.tsx in route directories | Every directory with routes needs a layout file |
Using expo start for custom native code | Use expo start --dev-client with expo-dev-client |
Running eas update after native dependency changes | Native changes require eas build, OTA is JS-only |
Hardcoding platform checks with if | Use Platform.select() or platform-specific file extensions |
| Not requesting permissions before accessing device APIs | Always check/request permissions before camera, notifications |
Using ScrollView for long lists | Use FlatList or FlashList for virtualized rendering |
| Inline styles in render functions | Define styles with StyleSheet.create() outside component |
Missing keyExtractor on FlatList | Always provide keyExtractor for stable list rendering |
Importing from react-native for Expo-provided APIs | Prefer expo-* packages over react-native equivalents |
Delegation
- Pattern discovery: Use
Exploreagent - Build/deployment review: Use
Taskagent - Code review: Delegate to
code-revieweragent
If the
react-patternsskill is available, delegate React component patterns and hooks to it. If thetanstack-queryskill is available, delegate data fetching and caching to it. If thezustandskill is available, delegate client-side state management to it. If thevitest-testingskill is available, delegate unit and component testing patterns to it. If thetailwindskill is available, delegate Tailwind CSS utility patterns to it (NativeWind uses Tailwind CSS syntax). If theaccessibilityskill is available, delegate mobile accessibility patterns to it.
References
- Core patterns: StyleSheet, FlatList, Platform-specific code
- Expo Router navigation: stack, tabs, drawer, typed routes
- EAS Build, Submit, and Update workflows
- Dev client and native modules with Expo Modules API
- Device APIs: camera, notifications, haptics
- NativeWind Tailwind CSS integration
- App configuration and environment setup
- Performance optimization patterns
When not to use it
- →Apps requiring heavy custom native code incompatible with Expo Modules API.
- →Brownfield integration into existing native apps.
- →Apps with native-only CI/CD requirements.
Limitations
- →Heavy custom native code incompatible with Expo Modules API.
- →Native-only CI/CD requirements.
How it compares
This approach uses a single codebase and managed infrastructure for cross-platform development, unlike separate native development for each platform.
Compared to similar skills
react-native side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-native (this skill) | 0 | 5mo | No flags | Intermediate |
| react-native-architecture | 55 | 2mo | Review | Advanced |
| react-native-design | 33 | 2mo | No flags | Intermediate |
| heroui-native | 5 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by oakoss
View all by oakoss →You might also like
react-native-architecture
wshobson
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
react-native-design
wshobson
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
heroui-native
heroui-inc
HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when working with HeroUI Native components, installing HeroUI Native, customizing themes, or accessing component documentation. Keywords: HeroUI Native, heroui-native, React Native UI, Uniwind.
react-native
alinaqi
React Native mobile patterns, platform-specific code
json-render-react-native
vercel-labs
React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.
frontend-mobile-development-component-scaffold
sickn33
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s