Durante una década, el debate “híbrido versus nativo” fue una guerra santa. Los puristas nativos afirmaron que JavaScript nunca podría alcanzar los 60 FPS. Los defensores de las plataformas cruzadas afirmaron que el desarrollo nativo estricto era un suicidio financiero.

En 2025, la guerra habrá terminado. React Native ganó. No porque sea “más fácil”, sino porque la Nueva Arquitectura (sin puentes) resolvió fundamentalmente la brecha de rendimiento. Aplicaciones como Discord, Shopify y Coinbase se ejecutan en React Native y no se nota la diferencia.

En Maison Code Paris, utilizamos React Native no como un compromiso, sino como un arma estratégica. Nos permite realizar envíos a Web, iOS y Android desde un único monorepo, compartiendo el 95% de nuestra lógica empresarial.

Por qué Maison Code analiza esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos pilas “modernas” que se construyeron sin una comprensión fundamental de la escala. Vemos API simples que tardan 4 segundos en responder debido a problemas de consultas N+1 y “microservicios” que cuestan €5000 al mes en tarifas de nube inactiva.

Discutimos este tema porque representa un punto crítico en la madurez de la ingeniería. Implementar esto correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial que puede manejar el tráfico del Black Friday sin sudar.

La Arquitectura: Por qué murió el “Puente”

Para comprender React Native moderno, debe comprender por qué la versión anterior era lenta.

El Viejo Mundo: El Puente Asincrónico

En la arquitectura clásica (2015-2022), se aislaron el subproceso de JavaScript y el subproceso de UI (principal). Para renderizar una Vista, JS tuvo que:

Serializar un mensaje JSON ({ tipo: 'createView', ancho: 100 }).
Envíelo por el “Puente”.
Espere a que el lado nativo lo deserialice y lo procese.

Si se desplazaba rápidamente por una lista, el Puente se atascaba con miles de mensajes JSON. El hilo de la interfaz de usuario se congelaría esperando a JS. Esto provocó el famoso “Destello Blanco” durante el desplazamiento rápido.

El nuevo mundo: JSI y Fabric

La Nueva Arquitectura eliminó el Puente por completo. Introdujo la Interfaz JavaScript (JSI). Esto permite que el motor JavaScript (Hermes) contenga una referencia C++ a un objeto nativo. JS puede llamar a métodos en elementos de la interfaz de usuario Sincrónicamente.

TurboModules: cargue módulos nativos (Bluetooth, cámara) solo cuando sea necesario, no al inicio.
Fabric: El nuevo sistema de renderizado. Prioriza las actualizaciones de la interfaz de usuario del mismo modo que un navegador prioriza CSS.

Resultado: 60 FPS (o 120 FPS en pantallas ProMotion) ahora es el estado predeterminado, no es un problema.

La pila: la Expo es el marco

En 2025, no ejecutamos npx react-native init. Usamos Expo. Expo es React Native lo que Next.js es React. Es el metamarco el que maneja las cosas aburridas.

1. Expo Router (enrutamiento basado en archivos)

El enrutamiento en dispositivos móviles era notoriamente difícil (texto estándar de React Navigation). Expo Router lleva el modelo Next.js a dispositivos móviles.

// aplicación/producto/[id].tsx
importar {useLocalSearchParams} desde 'expo-router';
importar {Texto} desde 'react-native';

exportar función predeterminada ProductScreen() {
  const {identificación} = useLocalSearchParams();
  return <Texto>ID del producto: {id}</Texto>;
}

Este archivo se convierte automáticamente en un enlace profundo: myapp://product/123. En la web, se convierte en “https://myapp.com/product/123”. Un enrutador. Ejecución universal.

2. Complementos de configuración (CNG)

Ya casi nunca tocamos las carpetas ios/ o android/. Esto nos permite utilizar Generación Nativa Continua (GNC). En lugar de enviar archivos de proyecto nativos (que se pudren y causan conflictos de fusión), los generamos en el momento de la compilación basados en app.json.

¿Necesita agregar permisos de cámara?

// aplicación.json
{
  "complementos": [
    [
      "cámara expo",
      {
        "cameraPermission": "Permitir que Maison Code escanee códigos QR."
      }
    ]
  ]
}

Ingeniería de rendimiento

Incluso con Fabric, puedes escribir código React lento. Así es como optimizamos para lograr la sensación de “suave con mantequilla”.

1. FlashList (El Reciclador)

El estándar FlatList crea un nuevo componente React para cada fila. El uso de la memoria crece linealmente. Usamos FlashList (de Shopify). Se ejecuta en el subproceso de la interfaz de usuario y “recicla” vistas. Cuando una fila se desplaza fuera de la pantalla, no la destruye; lo mueve hacia la parte inferior y cambia el texto. Esto reduce las listas enormes (10.000 elementos) al uso constante de la memoria (solo existen ~10 elementos en la memoria).

importar {FlashList} desde "@shopify/flash-list";

<Lista Flash
  datos={productos}
  renderItem={({ elemento }) => <ProductCard elemento={item} />}
  Tamaño del artículo estimado={200} 
/>

2. MMKV (almacenamiento sincrónico)

AsyncStorage es lento porque trata la E/S del disco como una promesa JSON. Descargamos almacenamiento a MMKV (escrito por Tencent para WeChat). Es un almacén de valores-clave mapeado en memoria de C++. Es aproximadamente 30 veces más rápido. Lo usamos para almacenar tokens de autenticación y preferencias de usuario para que la aplicación se inicie instantáneamente cuando el usuario inicia sesión.

Estrategia de código compartido: Monorepo

El mayor retorno de la inversión de React Native es el código compartido. Pero no deberías limitarte a copiar y pegar archivos. Deberías diseñar un Monorepo (usando TurboRepo o Nx).

/aplicaciones
  /web (Siguiente.js)
  /móvil (Expo)
/paquetes
  /ui (componentes Tamagui compartidos/NativeWind)
  /logic (tiendas Zustand, ganchos de consulta de React, esquemas Zod)
  /api (cliente API tipificado)

La aplicación “móvil” importa: importar {useCart} desde '@maison/logic'; importar {Botón} desde '@maison/ui';

La aplicación “web” importa exactamente lo mismo. Escribimos la lógica “Añadir al carrito” una vez. Lo probamos una vez. Lo enviamos a todas partes. La única divergencia es la navegación y los gestos específicos de la plataforma.

Actualizaciones OTA: sin pasar por la App Store

Una ventaja comercial fundamental son las Actualizaciones inalámbricas (OTA) a través de Actualización EAS. Si encuentra un error crítico en su flujo de pago el Black Friday:

Aplicación nativa: Enviar corrección -> Espere 24 horas para la revisión de Apple -> Espere a que los usuarios actualicen. Costo: Miles en ventas perdidas.
Aplicación Expo: actualización eas --producción de sucursales. El nuevo paquete JS se descarga silenciosamente en segundo plano. Los usuarios obtienen la solución en el próximo lanzamiento. Tiempo: 10 minutos.

Nota: Solo puedes cambiar JavaScript/Activos a través de OTA. No puede cambiar el código binario nativo (por ejemplo, agregar un nuevo módulo de permisos).

10. Accesibilidad (VoiceOver / TalkBack)

Las aplicaciones nativas deben ser accesibles. React Native asigna accesorios estándar a API de accesibilidad nativas. <Ver accesible={true} accesibilidadLabel="Agregar al carrito"> Utilice el Inspector de accesibilidad en Xcode para verificar. Si las personas ciegas no pueden utilizar su aplicación, está dejando atrás el 15% del mercado (y provocando demandas).

11. Pruebas E2E automatizadas: Maestro

La desintoxicación era el estándar, pero era inestable. Maestro es el nuevo rey. Maneja la interfaz de usuario como un ser humano (usando ID de accesibilidad).

ejecutarFlow: app_flow.yaml


## 11. Conclusión

React Native ya no es la "alternativa". Es el valor predeterminado.
Si está creando una aplicación para el consumidor en 2026 y no está utilizando Expo + React Native, está eligiendo trabajar el doble para obtener el mismo resultado.
Ayudamos a las marcas a migrar de bases de código "nativas" heredadas a pilas modernas y unificadas.

<hr estilo="margen: 1rem 0" />


<hr style="margin: 1rem 0" />

**[Contrata a nuestros Arquitectos](/contacto)**.