{"slug":"react-native-architecture","title":"react-native-architecture","summary":"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.","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-01T18:59:27.898407Z","repo":{"url":"https://github.com/wshobson/agents","stars":40003,"forks":4267,"license":"MIT","updatedAt":"2026-09-26T19:54:17Z"},"bodyHtml":"<hr>\n<h2>name: react-native-architecture\ndescription: 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.</h2>\n<h1>React Native Architecture</h1>\n<p>Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.</p>\n<h2>When to Use This Skill</h2>\n<ul>\n<li>Starting a new React Native or Expo project</li>\n<li>Implementing complex navigation patterns</li>\n<li>Integrating native modules and platform APIs</li>\n<li>Building offline-first mobile applications</li>\n<li>Optimizing React Native performance</li>\n<li>Setting up CI/CD for mobile releases</li>\n</ul>\n<h2>Core Concepts</h2>\n<h3>1. Project Structure</h3>\n<pre><code>src/\n├── app/                    # Expo Router screens\n│   ├── (auth)/            # Auth group\n│   ├── (tabs)/            # Tab navigation\n│   └── _layout.tsx        # Root layout\n├── components/\n│   ├── ui/                # Reusable UI components\n│   └── features/          # Feature-specific components\n├── hooks/                 # Custom hooks\n├── services/              # API and native services\n├── stores/                # State management\n├── utils/                 # Utilities\n└── types/                 # TypeScript types\n</code></pre>\n<h3>2. Expo vs Bare React Native</h3>\n<table>\n<thead>\n<tr>\n<th>Feature</th>\n<th>Expo</th>\n<th>Bare RN</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Setup complexity</td>\n<td>Low</td>\n<td>High</td>\n</tr>\n<tr>\n<td>Native modules</td>\n<td>EAS Build</td>\n<td>Manual linking</td>\n</tr>\n<tr>\n<td>OTA updates</td>\n<td>Built-in</td>\n<td>Manual setup</td>\n</tr>\n<tr>\n<td>Build service</td>\n<td>EAS</td>\n<td>Custom CI</td>\n</tr>\n<tr>\n<td>Custom native code</td>\n<td>Config plugins</td>\n<td>Direct access</td>\n</tr>\n</tbody>\n</table>\n<h2>Quick Start</h2>\n<pre><code># Create new Expo project\nnpx create-expo-app@latest my-app -t expo-template-blank-typescript\n\n# Install essential dependencies\nnpx expo install expo-router expo-status-bar react-native-safe-area-context\nnpx expo install @react-native-async-storage/async-storage\nnpx expo install expo-secure-store expo-haptics\n</code></pre>\n<pre><code>// app/_layout.tsx\nimport { Stack } from 'expo-router'\nimport { ThemeProvider } from '@/providers/ThemeProvider'\nimport { QueryProvider } from '@/providers/QueryProvider'\n\nexport default function RootLayout() {\n  return (\n    &lt;QueryProvider&gt;\n      &lt;ThemeProvider&gt;\n        &lt;Stack screenOptions={{ headerShown: false }}&gt;\n          &lt;Stack.Screen name=\"(tabs)\" /&gt;\n          &lt;Stack.Screen name=\"(auth)\" /&gt;\n          &lt;Stack.Screen name=\"modal\" options={{ presentation: 'modal' }} /&gt;\n        &lt;/Stack&gt;\n      &lt;/ThemeProvider&gt;\n    &lt;/QueryProvider&gt;\n  )\n}\n</code></pre>\n<h2>Detailed patterns and worked examples</h2>\n<p>Detailed pattern documentation lives in <code>references/details.md</code>. Read that file when the navigation tier above is insufficient.</p>\n<h2>Best Practices</h2>\n<h3>Do's</h3>\n<ul>\n<li><strong>Use Expo</strong> - Faster development, OTA updates, managed native code</li>\n<li><strong>FlashList over FlatList</strong> - Better performance for long lists</li>\n<li><strong>Memoize components</strong> - Prevent unnecessary re-renders</li>\n<li><strong>Use Reanimated</strong> - 60fps animations on native thread</li>\n<li><strong>Test on real devices</strong> - Simulators miss real-world issues</li>\n</ul>\n<h3>Don'ts</h3>\n<ul>\n<li><strong>Don't inline styles</strong> - Use StyleSheet.create for performance</li>\n<li><strong>Don't fetch in render</strong> - Use useEffect or React Query</li>\n<li><strong>Don't ignore platform differences</strong> - Test on both iOS and Android</li>\n<li><strong>Don't store secrets in code</strong> - Use environment variables</li>\n<li><strong>Don't skip error boundaries</strong> - Mobile crashes are unforgiving</li>\n</ul>\n","files":[{"path":"references/details.md","sizeBytes":13728,"isText":true},{"path":"SKILL.md","sizeBytes":3602,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-01T19:00:18.569074Z","sha256":"7AFBC48A2BF3F0DB0D67F1F169DB57F4F4B69956AF9AFB551AB3160A73B7E9D3","sizeBytes":6208},"review":null,"source":{"repositoryUrl":"https://github.com/wshobson/agents","path":"plugins/frontend-mobile-development/skills/react-native-architecture","license":"MIT","commit":"9b15b34b0bfc13a815cbfc2366e14ea549e09422","subtreeSha":"2E495412D6B213134D53CE15EEA0431317BAB03AA1742B0CA3F3EA1A60EC13D8","lastSyncedAt":"2026-09-26T23:12:03.520842Z"},"reviewedAt":"2026-09-01T19:02:43.310536Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/react-native-architecture"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install wshobson-agents@llmmart"},{"target":"git","command":"git clone https://github.com/wshobson/agents.git"}]}