Tu cliente pide una app de iOS. Abres la documentación de Expo, hojeas la guía de configuración, y piensas: ¿Qué tan difícil puede ser? Tres semanas después, estás debuggeando una librería de navegación a las 11 PM, tu diseñador pregunta por qué las fuentes se ven diferentes en Android, y tu margen de ganancia se evaporó en quirks específicos de plataforma que no facturaste. Aprendí React Native de la manera difícil — shiping cuatro proyectos de agencia antes de descifrar la matemática de compartir código que realmente protege tu timeline. El mercado móvil de $935B llegó en 2025, los clientes ahora esperan apps nativas junto con tus builds de Next.js, y si ya escribes React, estás 68% del camino. Pero hay un campo minado entre "funciona en mi simulador" y shipping de apps en producción que no te cuesta los fines de semana. Este es el playbook de expansión que hubiera querido tener en 2023 — los costos reales, el stack Expo + EAS Build que te salva del infierno de Xcode, y la estructura de precios que convierte mobile de un riesgo a tu servicio con mayor margen.

Este artículo es la guía que hubiera querido tener cuando comenzamos a tomar clientes de mobile en serio. Cubre la realidad de la ingeniería, la economía del negocio, y el pipeline de deployment que necesitarás. Sin vaguedades sobre "sinergias" — solo lecciones aprendidas en el campo desde shipping de apps en producción.

Tabla de Contenidos

React Native para Agencias Web: Añadiendo Mobile a tu Práctica Next.js en 2026

Por qué 2026 es el Momento Correcto para que Agencias Web Vayan a Mobile

El argumento del timing no es solo sobre el tamaño del mercado. Se trata de tres cambios específicos que convergieron:

La New Architecture de React Native es estable. El renderer Fabric y TurboModules que estaban "próximamente" durante años ahora son el default. Los gaps de performance entre React Native y Swift/Kotlin nativo se redujeron a casi irrelevancia para el 90% de categorías de apps. El JSI (JavaScript Interface) significa que ya no cruzas un puente para cada llamada nativa — es síncrono y rápido.

Expo se convirtió en una plataforma completa. Expo SDK 53 (lanzado a principios de 2026) soporta prácticamente cada API nativa que necesitarías. Los días de eyectar de Expo para features básicas como Bluetooth o ubicación de fondo terminaron. EAS Build maneja todo el pipeline de compilación. Nunca necesitas Xcode en tu máquina para la mayoría de proyectos.

La demanda del cliente cambió. Veo un patrón en agencias en nuestra red: clientes que solían pedir "un sitio web" ahora piden "un producto digital." Esperan una presencia web Y una app móvil, y esperan que compartan un design system. Si puedes entregar ambas desde un equipo, no estás compitiendo contra tiendas web y móvil separadas — estás reemplazando ambas.

Los Números del Mercado

Según datos de Statista 2025, los ingresos globales de apps móviles se proyectan alcanzarán $1.1 billones para 2027. Pero más relevante para agencias: el presupuesto de app móvil promedio de cliente empresarial en 2026 está entre $150K-$500K para un MVP. Eso es 2-3x lo que la mayoría de proyectos web de agencia comandarian.

El Solapamiento del Ecosistema React: Lo que Realmente se Transfiere

Matemos el mito primero: React Native no es "solo React para teléfonos." Tus desarrolladores tendrán una curva de aprendizaje. Pero es mucho más corta que aprender Swift y Kotlin desde cero.

Aquí está el desglose honesto de lo que se transfiere y qué no:

Skill/Tecnología ¿Se Transfiere a React Native? Notas
Patrones de componentes React ✅ Sí, directamente Hooks, context, state management — todos idénticos
TypeScript ✅ Sí, directamente Mismo lenguaje, mismo tooling
State management (Zustand, Jotai, Redux) ✅ Sí, directamente Compatible drop-in
React Query / TanStack Query ✅ Sí, directamente Misma API, mismas estrategias de caching
CSS / Tailwind ⚠️ Parcialmente Sin CSS cascade. NativeWind cierra este gap
Routing de Next.js ⚠️ Parcialmente Expo Router es file-based también, pero los paradigmas de navegación difieren
Manipulación DOM ❌ No No hay DOM. Punto.
Elementos HTML ❌ No <View>, <Text>, <Pressable> en su lugar
APIs del navegador ❌ No Necesitas módulos Expo o módulos nativos
Animaciones CSS ❌ No Usa Reanimated 3 (que es realmente mejor)

El sweet spot es esto: tus desarrolladores React pueden ser productivos en React Native dentro de 2-3 semanas. No serán expertos, pero pueden shipping features. Ese es un gran ventaja comparado a contratar desarrolladores nativos.

Lo que Me Sorprendió Más

Lo que se transfirió mejor de lo que esperaba fue el modelo mental. La composición de componentes de React, el flujo de datos unidireccional, y el paradigma de UI declarativa — esos son las partes difíciles de aprender. Las diferencias de superficie de API (<div> vs <View>) son triviales en comparación.

Lo que se transfirió peor de lo que esperaba fue el layout. Sí, React Native usa Flexbox. Pero es Flexbox con flexDirection: 'column' como el default, sin display: grid, sin media queries (usas useWindowDimensions), y sin estilos en cascada. Cada desarrollador en nuestro equipo tropezó con esto la primera semana.

Expo en 2026: La Plataforma que lo Cambió Todo

Si probaste React Native en 2019-2020 y rebotaste, lo entiendo. La experiencia de desarrollo era áspera. Expo ha transformado esto fundamentalmente.

Here's what Expo gives you in 2026:

  • Expo Router v4: Routing basado en archivos que refleja convenciones de Next.js. Tus devs se sentirán como en casa inmediatamente.
  • Expo Modules API: Escribe módulos nativos en Swift/Kotlin con una interfaz TypeScript limpia. Sin más código bridge janky.
  • EAS Build: Builds basadas en la nube para iOS y Android. No se necesita Mac para iOS builds.
  • EAS Submit: Submissions automatizadas a App Store y Play Store.
  • EAS Update: Actualizaciones over-the-air que evitan revisión de app store para cambios solo-JS.
  • Expo Dev Client: Custom development builds que incluyen tus módulos nativos pero mantienen la DX de fast refresh.
# Creando un nuevo proyecto Expo en 2026
npx create-expo-app@latest my-app --template tabs
cd my-app
npx expo start

Eso es. Estás ejecutando en iOS Simulator y Android Emulator (o dispositivos físicos vía Expo Go) en menos de dos minutos.

Expo Router: El Puente desde Next.js

Expo Router merece atención especial porque es la única razón más grande por la que desarrolladores Next.js se adaptan rápidamente. Mira la estructura:

app/
  (tabs)/
    index.tsx        # Home tab
    settings.tsx     # Settings tab
    _layout.tsx      # Tab layout
  profile/
    [id].tsx         # Dynamic route
  _layout.tsx        # Root layout

Si estás construyendo con Next.js App Router, esta estructura es casi idéntica. Dynamic routes, layouts, navegación anidada — los conceptos mapean directamente. La diferencia principal es que navegación móvil usa stacks y tabs en lugar de páginas y rutas de URL, pero Expo Router lo abstrae bellamente.

React Native para Agencias Web: Añadiendo Mobile a tu Práctica Next.js en 2026 - arquitectura

Compartir Código Entre Next.js y React Native

Aquí es donde las agencias obtienen el ROI real. Compartir código entre web y mobile no es solo agradable de tener — es la justificación económica para ofrecer ambos servicios.

Qué Compartir

Comparte agresivamente:

  • Lógica de negocio y utilities
  • Clientes de API y hooks de data fetching
  • Stores de state management
  • Definiciones de tipos y schemas de validación (Zod funciona muy bien aquí)
  • Lógica de autenticación

Comparte con cuidado:

  • Design tokens (colores, spacing, escalas de tipografía)
  • Lógica de componentes (pero no renderizado de componentes)

No compartas:

  • Componentes de UI directamente (los primitivos de renderizado son diferentes)
  • Lógica de navegación
  • Animaciones específicas de plataforma

Setup de Monorepo

El enfoque estándar en 2026 es un monorepo Turborepo o Nx. Aquí hay una estructura típica:

packages/
  shared/
    src/
      hooks/
        useAuth.ts
        useProducts.ts
      utils/
        formatCurrency.ts
        validateEmail.ts
      types/
        user.ts
        product.ts
      api/
        client.ts
apps/
  web/          # App Next.js
  mobile/       # App Expo

// packages/shared/src/hooks/useProducts.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { Product } from '../types/product';

export function useProducts(categoryId: string) {
  return useQuery<Product[]>({
    queryKey: ['products', categoryId],
    queryFn: () => apiClient.get(`/products?category=${categoryId}`),
    staleTime: 5 * 60 * 1000,
  });
}

Este hook funciona idénticamente en tu app Next.js y tu app React Native. El data fetching, caching, y state management están completamente compartidos. Solo la capa de UI que renderiza los productos difiere.

El Enfoque Solito / Universal

Para agencias que quieren empujar compartir código aún más lejos, Solito (de Fernando Rojo) habilita navegación universal y algunos componentes compartidos entre Next.js y Expo. En 2026, la librería React Native react-native-web también es lo suficientemente madura para compartir design system, aunque recomendaría esto solo para equipos que hayan shipped al menos un proyecto React Native. Añade complejidad.

Nuestra relación típica de compartir código: 40-60% de codebase total está compartido entre web y mobile. Eso no es fluff de marketing — eso está medido a través de seis proyectos de cliente.

EAS Build y Deployment: Tu Pipeline CI/CD

El deployment es donde el desarrollo móvil históricamente ha sido doloroso. Firma de apps, perfiles de provisioning, cumplimiento de App Store — es un laberinto. EAS lo hace manejable.

Precios de EAS Build (2026)

Plan Precio Créditos de Build/Mes Velocidad de Build
Free $0 30 iOS + 30 Android ~40 min por build
Production $99/mo 200 total ~15 min por build
Enterprise $999/mo Ilimitado ~8 min por build (prioridad)

Para la mayoría de agencias, el plan Production es el sweet spot. Quemarás créditos del tier free rápido una vez que tengas más de un proyecto activo.

Un Pipeline CI/CD Real

Aquí está el pipeline que usamos, y ha funcionado bien a través de múltiples proyectos de cliente:

# .github/workflows/mobile-deploy.yml
name: Mobile Deploy
on:
  push:
    branches: [main]
    paths:
      - 'apps/mobile/**'
      - 'packages/shared/**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx eas-cli build --platform all --non-interactive --profile production
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

  submit:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx eas-cli submit --platform all --non-interactive
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

Para actualizaciones solo-JavaScript que no toquen código nativo, usa EAS Update en lugar de un build completo:

# Empuja una actualización OTA — usuarios la obtienen en el próximo lanzamiento de app
eas update --branch production --message "Fix checkout button alignment"

Esto es enorme para agencias. Bug fixes que tomaría 1-3 días esperando revisión de App Store ahora llegan a usuarios en minutos.

Economía de Agencias: Precios, Personal, y Márgenes

Hablemos de dinero. Aquí es donde veo agencias cometer los errores más grandes.

Precios de Proyectos Móviles

No precios proyectos móviles como proyectos web. Son más caros de construir, más caros de mantener, y vienen con costos de plataforma continuos. Aquí hay lo que hemos visto que funciona:

Tipo de Proyecto Tarifa Típica de Agencia Timeline Rango Total
App simple (contenido, auth, CRUD básico) $180-250/hr 8-12 semanas $90K-$180K
App media (pagos, tiempo real, integraciones) $180-250/hr 12-20 semanas $180K-$400K
App compleja (offline-first, heavy features nativas) $200-300/hr 20-32 semanas $350K-$750K
Bundle Web + Mobile (codebase compartido) $180-250/hr 16-28 semanas $250K-$550K

El bundle web + mobile es tu arma competitiva. Un cliente obteniendo ambas por $350K está obteniendo un mejor deal que pagando $200K por web y $300K por mobile a tiendas separadas. Y tus márgenes son mejores por compartir código.

Modelo de Personal

No necesitas contratar desarrolladores móviles dedicados inmediatamente. Aquí está la progresión que funciona:

  1. Fase 1 (primer proyecto móvil): Tu dev React senior lidera, con un contratista que tiene experiencia React Native como guía. Presupuesta $15-25K para el contratista.
  2. Fase 2 (2-3 proyectos en): Tu equipo tiene suficiente experiencia. Contrata un desarrollador con fuerte background React Native para ser el lead móvil.
  3. Fase 3 (mobile es 30%+ de ingresos): Construye un pod móvil dedicado de 2-3 desarrolladores.

El Flujo de Ingresos de Mantenimiento

Aquí hay lo que nadie te dice sobre mobile: requiere mantenimiento continuó incluso si el cliente no está añadiendo features. iOS y Android lanzan versiones mayores de OS anualmente. Las dependencias necesitan actualización. Las políticas de App Store cambian. Este es ingresos recurrentes.

Cargamos $3,000-$8,000/mes para retainers de mantenimiento de apps móviles dependiendo de la complejidad de app. A través de 8-10 clientes, eso es ingresos recurrentes significativos que suavizan la volatilidad de ingresos basados en proyectos.

Cuándo Decir Sí (y No) a Clientes de Mobile

No cada proyecto móvil es correcto para tu agencia. He aprendido esto de la manera difícil.

Dí Sí Cuando:

  • El cliente ya tiene un producto web que construiste — conoces el dominio, la API, la lógica de negocio. Estás 40% hecho antes del día uno.
  • La app es principalmente data-driven — Apps de CRUD, dashboards, e-commerce, entrega de contenido. React Native excele aquí.
  • El cliente tiene timelines realistas — 8 semanas mínimo para cualquier cosa significativa.
  • El presupuesto es $80K+ — Abajo de esto, no puedes entregar calidad y mantener márgenes.

Dí No Cuando:

  • La app requiere GPU/graphics pesados — Juegos, experiencias AR, 3D complejo. Usa Unity o nativo.
  • La app necesita integración profunda de hardware — Periféricos Bluetooth LE, custom pipelines de cámara, procesamiento de pagos NFC. Posible en React Native, pero el desarrollo de módulo nativo volará tu presupuesto.
  • El cliente quiere "pixel-perfect platform native" design — Si quieren que su app iOS se sienta exactamente como una app SwiftUI y su app Android se sienta exactamente como Jetpack Compose, React Native añade overhead.
  • El presupuesto es menor a $50K — Perderás dinero. Refiere a un freelancer o a una plataforma no-code.
  • El cliente no tiene una API — Si necesitas construir el backend, la app móvil, Y una app web, scopea cuidadosamente. Estos son tres proyectos, no uno.

Costos de Ingeniería: Los Números que Nadie Habla

Más allá de salarios de desarrolladores, mobile añade costos que agencias web no piensan:

Costo Cantidad Anual Notas
Apple Developer Account $99/año por cliente Requerido para App Store
Google Play Developer Account $25 una sola vez por cliente Requerido para Play Store
EAS Build (Production) $1,188/año Compartido a través de proyectos
Screenshots & assets de App Store $500-2,000 por app A menudo olvidado en scoping
Device testing lab $2,000-5,000/año Dispositivos físicos o BrowserStack
Servicio de notificaciones push $0-500/mes Firebase es gratis para empezar, escala
Certificados de firma de código Incluido en cuenta Apple Dev Pero manejarlos es tiempo
App Store Optimization $500-2,000/lanzamiento Si estás haciendo esto para clientes

El costo sneaky es testing en dispositivos reales. Los simuladores mienten. Mantenemos un device lab con 6 iPhones (varios modelos) y 4 dispositivos Android (Samsung, Pixel, un teléfono barato para testing de performance). Presupuesta para esto.

Costos de Tiempo

La revisión de App Store toma típicamente 24-48 horas, pero puede tomar una semana durante temporadas de vacaciones. Revisión de Play Store es usualmente más rápida (horas a un día). Cuenta para esto en tus timelines de proyecto — no puedes simplemente "desplegar el viernes" como haces con apps web.

Submisiones de apps de primera vez toman más tiempo. Apple especialmente escrutiniza cuentas de desarrollador nuevas. Hemos tenido primeras submissions tomar 5-7 días con ciclos de rechazo-resubmisión.

Un Camino Práctico de Migración para Agencias Web

Si estás vendido en añadir mobile a tu práctica, aquí está el camino que recomendaría:

Mes 1-2: Proyecto Interno Construye una app interna simple usando Expo. Un time tracker, un dashboard de proyecto, lo que sea. Familiariza tu equipo con el tooling sin presión del cliente. Usa esto para configurar tu estructura de monorepo, pipeline CI/CD, y proceso de device testing.

Mes 3-4: Upsell de Cliente Existente Acércate a tu mejor cliente existente sobre una app móvil compañera. Ya conoces su dominio, su API, su equipo. Ofrécela a un descuento ligero en cambio de ser un caso de referencia.

Mes 5-8: Primer Cliente Móvil Externo Toma un proyecto móvil con un scope realista. Mantenerlo a 12 semanas máximo. Usa tu proyecto interno y primer proyecto de cliente como prueba de capacidad.

Mes 9+: Productizar Crea un template de proyecto móvil estándar, spreadsheet de estimación, y proceso de onboarding. Esto es cuando mobile se convierte en una línea de servicio real, no un experimento.

Durante todo este proceso, invierte en tus capacidades de headless CMS — apps móviles dirigidas por contenido que tiran del mismo CMS que el web son uno de los bundles de mayor valor que puedes ofrecer a clientes.

Recomendación de Tech Stack

Para agencias empezando en 2026, aquí está el stack que apostaría:

  • Expo SDK 53+ con Expo Router v4
  • NativeWind v4 para styling (Tailwind CSS para React Native)
  • TanStack Query para server state
  • Zustand para client state
  • React Native Reanimated 3 para animaciones
  • Turborepo para gestión de monorepo
  • EAS Build + EAS Update para CI/CD

Si tu práctica web usa Astro en lugar de Next.js, la estrategia de compartir código aún funciona — estás solo compartiendo la capa de datos y paquetes de lógica de negocio en lugar de componentes React.

FAQ

¿Cuánto tiempo toma para que un desarrollador React/Next.js se vuelva productivo en React Native?

Basado en nuestra experiencia onboarding de cinco desarrolladores web, espera 2-3 semanas para productividad básica (puede construir pantallas e implementar features) y 2-3 meses para lo que yo llamaría independencia confiada (puede arquitectar features, debuggear issues nativos, manejar edge cases específicos de plataforma). La curva de aprendizaje inicial es principalmente sobre patrones de navegación, convenciones UX móvil-específicas, y las diferencias de styling.

¿Puedo usar los mismos componentes en Next.js y React Native?

No directamente — los primitivos de renderizado son diferentes (<div> vs <View>, <span> vs <Text>). Sin embargo, puedes compartir lógica de componentes a través de custom hooks, compartir design tokens, y usar librerías como Solito o react-native-web para cerrar el gap. En práctica, compartimos 40-60% de código total entre plataformas, principalmente lógica de negocio y código de capa de datos.

¿Cuánto cuesta mantener una app React Native anualmente?

Para una app típica de complejidad media, espera $36K-$96K/año en costos de mantenimiento. Esto cubre actualizaciones de compatibilidad de OS (iOS y Android lanzan versiones mayores anualmente), actualizaciones de dependencias, bug fixes, adiciones menores de features, y cumplimiento de política de App Store. Este es un costo real que clientes necesitan presupuestar.

¿Es React Native lo suficientemente rápido para apps en producción en 2026?

Sí, definitivamente. Con la New Architecture (Fabric + TurboModules + JSI) ahora el default, apps React Native logran 60fps consistentemente para UI estándar. Apps como Discord, Shopify Shop, y Coinbase usan React Native a escala. El gap de performance con nativo es negligible para 90%+ de categorías de apps. Donde aún está rezagado es animación pesada o workloads intensivos de GPU.

¿Debería usar Expo o bare React Native?

Expo. Esto ni siquiera es una comparación cercana en 2026. Expo soporta prácticamente cada API nativa, la Expo Modules API te permite escribir código nativo personalizado cuando sea necesario, y EAS Build elimina los dolores de cabeza de native toolchain. El consejo antiguo de "eyectar de Expo si necesitas X" es obsoleto. Aproximadamente 85-90% de apps React Native en producción ahora usan Expo, incluyendo apps mayores.

¿Cuál es el equipo viable mínimo para un proyecto móvil?

Dos desarrolladores y un diseñador que entienda convenciones móviles. Uno de los desarrolladores debería tener experiencia React Native (incluso si es vía tu proyecto de training interno). Puedes escalar desde aquí, pero ir solo en un proyecto móvil de cliente es riesgoso — hay demasiado conocimiento específico de plataforma necesario. Para tu primer proyecto, considera un contratista React Native part-time como una red de seguridad.

¿Cómo manejo submissions de app store y reviews?

EAS Submit automatiza el proceso de carga binaria. Pero aún necesitarás manejar App Store Connect y Google Play Console manualmente para metadata, screenshots, declaraciones de privacidad, y respuestas de revisión. El proceso de revisión de Apple toma 24-48 horas típicamente. Presupuesta 1-2 semanas para submissions de primer momento debido a rechazos potenciales. Razones de rechazo comunes: política de privacidad faltante, funcionalidad de login inadecuada, y metadata incompleta.

¿Vale la pena ofrecer desarrollo móvil si solo tenemos 5-10 desarrolladores?

Absolutamente — ese es en realidad el tamaño ideal para empezar. No necesitas un equipo móvil dedicado en el día uno. Comienza entrenando 2-3 de tus desarrolladores React más fuertes, toma un proyecto móvil a la vez, y crece desde allí. El compartir código entre web y mobile significa que tu equipo no está dividido — estamos trabajando a través de plataformas con fundaciones compartidas. Revisa nuestra página de precios o contacta directamente si quieres discutir cómo otras agencias de tamaño similar han hecho esta transición.