# React Native Architecture

> Crea apps React Native listas para producción con Expo, navegación, módulos nativos, sincronización offline y patrones multiplataforma.

Fuente: https://skillsagentes.com/skills/wshobson/agents/react-native-architecture
Markdown: https://skillsagentes.com/skills/wshobson/agents/react-native-architecture.md

Repositorio: https://github.com/wshobson/agents
Autor: wshobson
Licencia: MIT
Actualizado: hace 4 meses
Coste de contexto: 56 tok instalada, 901 tok al activarse, 4.3k tok con todos los archivos del bundle
Bundle: 2 archivos, 17 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add wshobson/agents --skill react-native-architecture --agent claude-code
# Cursor
npx -y skills add wshobson/agents --skill react-native-architecture --agent cursor
# Codex
npx -y skills add wshobson/agents --skill react-native-architecture --agent codex
# Gemini CLI
npx -y skills add wshobson/agents --skill react-native-architecture --agent gemini
# Windsurf
npx -y skills add wshobson/agents --skill react-native-architecture --agent windsurf
# Cline
npx -y skills add wshobson/agents --skill react-native-architecture --agent cline
```

## Qué hace

- Define una estructura de proyecto para apps Expo Router con carpetas app, components, hooks, services, stores, utils y types
- Compara Expo frente a React Native bare en complejidad de setup, módulos nativos, OTA updates y build service
- Proporciona comandos de inicio rápido con create-expo-app y dependencias esenciales (expo-router, async-storage, secure-store)
- Da ejemplo de _layout.tsx raíz con ThemeProvider, QueryProvider y Stack navigation
- Establece buenas prácticas: FlashList sobre FlatList, memoización, Reanimated, StyleSheet.create, error boundaries

## Cuándo usarla

- Empezar un nuevo proyecto React Native o Expo
- Implementar patrones de navegación complejos
- Integrar módulos nativos y APIs de plataforma
- Construir aplicaciones móviles offline-first

## Qué la activa

- "Ayúdame a estructurar un nuevo proyecto Expo con navegación"
- "Cómo integro módulos nativos en mi app React Native"
- "Necesito arquitectura offline-first para una app móvil"

## Antes de instalar

- Requiere Node.js y la CLI de Expo (npx create-expo-app / npx expo install) para el flujo de inicio rápido.
- Necesita en el PATH: npx

## Archivos

- SKILL.md — 4 KB
- references/details.md — 13 KB

## SKILL.md

Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés.

# React Native Architecture

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

## When to Use This Skill

- Starting a new React Native or Expo project
- Implementing complex navigation patterns
- Integrating native modules and platform APIs
- Building offline-first mobile applications
- Optimizing React Native performance
- Setting up CI/CD for mobile releases

## Core Concepts

### 1. Project Structure

```
src/
├── app/                    # Expo Router screens
│   ├── (auth)/            # Auth group
│   ├── (tabs)/            # Tab navigation
│   └── _layout.tsx        # Root layout
├── components/
│   ├── ui/                # Reusable UI components
│   └── features/          # Feature-specific components
├── hooks/                 # Custom hooks
├── services/              # API and native services
├── stores/                # State management
├── utils/                 # Utilities
└── types/                 # TypeScript types
```

### 2. Expo vs Bare React Native

| Feature            | Expo           | Bare RN        |
| ------------------ | -------------- | -------------- |
| Setup complexity   | Low            | High           |
| Native modules     | EAS Build      | Manual linking |
| OTA updates        | Built-in       | Manual setup   |
| Build service      | EAS            | Custom CI      |
| Custom native code | Config plugins | Direct access  |

## Quick Start

```bash
# Create new Expo project
npx create-expo-app@latest my-app -t expo-template-blank-typescript

# Install essential dependencies
npx expo install expo-router expo-status-bar react-native-safe-area-context
npx expo install @react-native-async-storage/async-storage
npx expo install expo-secure-store expo-haptics
```

```typescript
// app/_layout.tsx
import { Stack } from 'expo-router'
import { ThemeProvider } from '@/providers/ThemeProvider'
import { QueryProvider } from '@/providers/QueryProvider'

export default function RootLayout() {
  return (
    <QueryProvider>
      <ThemeProvider>
        <Stack screenOptions={{ headerShown: false }}>
          <Stack.Screen name="(tabs)" />
          <Stack.Screen name="(auth)" />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
      </ThemeProvider>
    </QueryProvider>
  )
}
```

## Detailed patterns and worked examples

Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.

## Best Practices

### Do's

- **Use Expo** - Faster development, OTA updates, managed native code
- **FlashList over FlatList** - Better performance for long lists
- **Memoize components** - Prevent unnecessary re-renders
- **Use Reanimated** - 60fps animations on native thread
- **Test on real devices** - Simulators miss real-world issues

### Don'ts

- **Don't inline styles** - Use StyleSheet.create for performance
- **Don't fetch in render** - Use useEffect or React Query
- **Don't ignore platform differences** - Test on both iOS and Android
- **Don't store secrets in code** - Use environment variables
- **Don't skip error boundaries** - Mobile crashes are unforgiving

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Skills relacionadas

- [Rust Async Patterns](https://skillsagentes.com/skills/wshobson/agents/rust-async-patterns.md): Domina la programación async en Rust con Tokio, traits async, manejo de errores y patrones concurrentes; útil al construir apps async, sistemas concurrentes o depurar código async.
- [Python Type Safety](https://skillsagentes.com/skills/wshobson/agents/python-type-safety.md): Seguridad de tipos en Python con anotaciones, genéricos, protocolos y verificación estricta con mypy/pyright.
- [Python Resource Management](https://skillsagentes.com/skills/wshobson/agents/python-resource-management.md): Gestión de recursos en Python con context managers, patrones de limpieza y streaming: conexiones, manejadores de archivos y lógica de cleanup con estado acumulado.
- [Python Configuration](https://skillsagentes.com/skills/wshobson/agents/python-configuration.md): Gestión de configuración en Python mediante variables de entorno y settings tipados. Útil al externalizar config, configurar pydantic-settings, gestionar secretos o implementar comportamiento por entorno.
- [Python Code Style](https://skillsagentes.com/skills/wshobson/agents/python-code-style.md): Estilo de código Python, linting, formateo, convenciones de nombres y estándares de documentación; útil al escribir código nuevo, revisar estilo, configurar linters o escribir docstrings.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)