React Native Architecture
Unverified●28/40Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor·UnknownWe have not crawled the repo tree, so we will not guess
Codex·UnknownWe have not crawled the repo tree, so we will not guess
Gemini CLI·UnknownThe spec defines no detection rule for Gemini
Copilot·UnknownWe have not crawled the repo tree, so we will not guess
npx agentalley add react-native-architectureWho is stuck, and on what
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.
The whole source
Frontmatter — 2 properties
| name | react-native-architecture |
|---|---|
| description | 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. |
| 1 | --- |
| 2 | name: react-native-architecture |
| 3 | description: 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. |
| 4 | ---A5 — No allowed-tools declared — no way to tell what this skill may touch |
| 5 | |
| 6 | # React Native Architecture |
| 7 | |
| 8 | Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture. |
| 9 | |
| 10 | ## When to Use This Skill |
| 11 | |
| 12 | - Starting a new React Native or Expo project |
| 13 | - Implementing complex navigation patterns |
| 14 | - Integrating native modules and platform APIs |
| 15 | - Building offline-first mobile applications |
| 16 | - Optimizing React Native performance |
| 17 | - Setting up CI/CD for mobile releases |
| 18 | |
| 19 | ## Core Concepts |
| 20 | |
| 21 | ### 1. Project Structure |
| 22 | |
| 23 | ``` |
| 24 | src/ |
| 25 | ├── app/ # Expo Router screens |
| 26 | │ ├── (auth)/ # Auth group |
| 27 | │ ├── (tabs)/ # Tab navigation |
| 28 | │ └── _layout.tsx # Root layout |
| 29 | ├── components/ |
| 30 | │ ├── ui/ # Reusable UI components |
| 31 | │ └── features/ # Feature-specific components |
| 32 | ├── hooks/ # Custom hooks |
| 33 | ├── services/ # API and native services |
| 34 | ├── stores/ # State management |
| 35 | ├── utils/ # Utilities |
| 36 | └── types/ # TypeScript types |
| 37 | ``` |
| 38 | |
| 39 | ### 2. Expo vs Bare React Native |
| 40 | |
| 41 | | Feature | Expo | Bare RN | |
| 42 | | ------------------ | -------------- | -------------- | |
| 43 | | Setup complexity | Low | High | |
| 44 | | Native modules | EAS Build | Manual linking | |
| 45 | | OTA updates | Built-in | Manual setup | |
| 46 | | Build service | EAS | Custom CI | |
| 47 | | Custom native code | Config plugins | Direct access | |
| 48 | |
| 49 | ## Quick Start |
| 50 | |
| 51 | ```bash |
| 52 | # Create new Expo project |
| 53 | npx create-expo-app@latest my-app -t expo-template-blank-typescript |
| 54 | |
| 55 | # Install essential dependencies |
| 56 | npx expo install expo-router expo-status-bar react-native-safe-area-context |
| 57 | npx expo install @react-native-async-storage/async-storage |
| 58 | npx expo install expo-secure-store expo-haptics |
| 59 | ``` |
| 60 | |
| 61 | ```typescript |
| 62 | // app/_layout.tsx |
| 63 | import { Stack } from 'expo-router' |
| 64 | import { ThemeProvider } from '@/providers/ThemeProvider' |
| 65 | import { QueryProvider } from '@/providers/QueryProvider' |
| 66 | |
| 67 | export default function RootLayout() { |
| 68 | return ( |
| 69 | <QueryProvider> |
| 70 | <ThemeProvider> |
| 71 | <Stack screenOptions={{ headerShown: false }}> |
| 72 | <Stack.Screen name="(tabs)" /> |
| 73 | <Stack.Screen name="(auth)" /> |
| 74 | <Stack.Screen name="modal" options={{ presentation: 'modal' }} /> |
| 75 | </Stack> |
| 76 | </ThemeProvider> |
| 77 | </QueryProvider> |
| 78 | ) |
| 79 | } |
| 80 | ``` |
| 81 | |
| 82 | ## Detailed patterns and worked examples |
| 83 | |
| 84 | Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. |
| 85 | |
| 86 | ## Best Practices |
| 87 | |
| 88 | ### Do's |
| 89 | |
| 90 | - **Use Expo** - Faster development, OTA updates, managed native code |
| 91 | - **FlashList over FlatList** - Better performance for long lists |
| 92 | - **Memoize components** - Prevent unnecessary re-renders |
| 93 | - **Use Reanimated** - 60fps animations on native thread |
| 94 | - **Test on real devices** - Simulators miss real-world issues |
| 95 | |
| 96 | ### Don'ts |
| 97 | |
| 98 | - **Don't inline styles** - Use StyleSheet.create for performance |
| 99 | - **Don't fetch in render** - Use useEffect or React QueryA4 — This skill pulls in web or user content but never says to treat that content as data. A signal, not proof. |
| 100 | - **Don't ignore platform differences** - Test on both iOS and Android |
| 101 | - **Don't store secrets in code** - Use environment variables |
| 102 | - **Don't skip error boundaries** - Mobile crashes are unforgiving |
| 103 |
Reviews
Installed this one?Write the first review and take the Trailblazer badge.
Alternatives
Subagent Driven DevelopmentUse when executing implementation plans with independent tasks in the current session◐◐◐◐◐●36/40Python Code Style & DocumentationPython code style, linting, formatting, naming conventions, and documentation standards. Use when writing new code, reviewing style, configuring linters, writing docstrings, or establishing project standards.◐····●35/40Competitor Price Analysis 💲Competitor pricing strategy analysis and market positioning. Price mapping, pricing gaps identification, elasticity signals evaluation, and strategic pricing optimization. Use when the user asks about competitor pricing, price analysis, pricing strategy, or co◐····●34/40Competitor Price Tracker 📊Set up competitor price tracking and monitoring workflows. Track price changes, detect promotions, analyze pricing patterns, and get alerts for competitive price movements.◐····●34/40