¿Qué es React Native?

¿Qué es React Native?

React Native es un framework de código abierto, creado en Meta, para desarrollar apps de iOS y Android con JavaScript (o TypeScript) y React. Escribes los componentes una vez y React Native los dibuja como las vistas nativas propias de cada plataforma, no como una página web dentro de un contenedor. La lógica de tu app se ejecuta en un motor de JavaScript, Hermes por defecto, y se comunica con la parte nativa para pintar la interfaz y usar funciones del dispositivo como la cámara. Por eso una app de React Native se ve y se desplaza como una nativa, aunque la mayor parte del código se comparta entre plataformas.

Cómo funciona React Native

• Capa de JavaScript. Aquí se ejecutan tus componentes, el estado y la lógica de negocio, sobre el motor Hermes. Hermes es el motor por defecto, y las compilaciones de producción precompilan tu JavaScript a bytecode para mejorar el arranque.
• Capa nativa. Las vistas y API de la plataforma: UIKit en iOS, Android Views en Android.
• JSI. La JavaScript Interface permite que JavaScript tenga una referencia a un objeto nativo de C++ y lo llame directamente. Sustituye al antiguo puente asíncrono que pasaba mensajes serializados entre ambos mundos.
• Fabric y TurboModules. Fabric es el renderizador y los TurboModules son los módulos nativos construidos sobre JSI. Junto con JSI forman la Nueva Arquitectura, que pasó a ser la opción por defecto en los proyectos nuevos con React Native 0.76. Estaba disponible como opción desde la 0.68, y las apps existentes aún pueden desactivarla. Activarla no acelera una app por sí sola, y parte del código necesita cambios para aprovecharla.
• Módulos nativos. Cuando el framework no expone una función de la plataforma, escribes Swift, Kotlin o C++ y la llamas desde JavaScript, o usas una biblioteca de la comunidad que lo hace.

React Native y Expo

Puedes usar React Native solo, pero la documentación oficial recomienda empezar una app nueva con un framework, y destaca Expo. Expo aporta enrutado basado en archivos, bibliotecas mantenidas y plugins de configuración que modifican los proyectos nativos sin que edites archivos nativos. Un proyecto nuevo arranca con npx create-expo-app@latest. Sin framework, montas tú mismo la navegación, las API nativas y la configuración de compilación. Expo no sustituye a React Native: tu app sigue siendo una app de React Native.

Ejemplo

Una startup de reparto de comida con un equipo web de React crea su app de clientes en React Native. El equipo reutiliza sus modelos de TypeScript, el cliente de API y la lógica de estado, escribe las pantallas con componentes de React Native y publica en las dos tiendas. El mapa y la hoja de pago usan módulos nativos. En la semana de lanzamiento llega una oleada de peticiones al mismo backend que sirve a la web, así que el riesgo real está detrás de las pantallas, en la API.

En qué es bueno React Native

• Una base de código para dos plataformas. Se comparte casi toda la lógica y muchas pantallas.
• Equipos que ya conocen React. Los componentes, los hooks y el estado se trasladan desde React en la web.
• Iteración rápida. Los cambios aparecen en la app en ejecución sin una recompilación nativa completa.
• Apps de producto habituales. Encajan bien las de contenido, comercio, redes sociales y productividad.

Dónde le cuesta

• Gráficos pesados y tiempo real. La realidad aumentada, los juegos y las animaciones exigentes suelen necesitar código nativo.
• Funciones nuevas de la plataforma. Las API nuevas de iOS o Android suelen requerir un módulo nativo o la actualización de una biblioteca antes de poder usarlas desde JavaScript.
• Calidad desigual de las bibliotecas. Comprueba que un paquete esté mantenido y sea compatible con la Nueva Arquitectura antes de depender de él.
• Depuración entre capas. Un fallo puede implicar JavaScript, la capa nativa y la plataforma.

React Native frente a Flutter y desarrollo nativo

• React Native: JavaScript o TypeScript con React, dibujado con las vistas nativas de la plataforma. Encaja de forma natural con equipos de React.
• Flutter: Dart, con su propio motor de renderizado que dibuja la interfaz, lo que da el mismo aspecto en ambas plataformas. Consulta Flutter.
• Nativo (Swift y Kotlin): dos bases de código, acceso completo a cada función de la plataforma desde el primer día y el mayor esfuerzo de mantenimiento.

Errores frecuentes

• Suponer que iOS y Android se comportan igual. El texto, el desplazamiento, los permisos y el teclado difieren. Prueba en ambos.
• No probar las compilaciones de producción. Las compilaciones de depuración son mucho más lentas y ocultan el comportamiento real de arranque y memoria.
• Añadir bibliotecas sin mantenimiento. Una dependencia abandonada puede bloquear una actualización.
• No subir los source maps al sistema de informes de fallos. Sin ellos las trazas son ilegibles.
• Probar solo la interfaz. Unas API lentas o con fallos hacen que hasta la mejor interfaz parezca rota.

Probar el backend de una app de React Native

Herramientas de interfaz como Detox y Maestro prueban la propia app. La parte de red es otro trabajo. Los clientes móviles reintentan, generan picos al arrancar y funcionan con conexiones lentas, y todos llegan a tu API. La monitorización de API de LoadFocus comprueba tus endpoints de forma programada desde varias ubicaciones y te avisa cuando se ralentizan o fallan, la alerta más temprana para una app cuyos usuarios culpan a la app. Antes de un lanzamiento o una campaña, las pruebas de carga muestran cómo se comporta ese backend con muchos usuarios concurrentes. Usa la monitorización de API como control permanente y las pruebas de carga para los picos previstos. Para ver ejemplos prácticos (en inglés), lee el estudio de caso sobre tiempos de carga de apps móviles y por qué las pruebas de rendimiento importan a las empresas mobile-first.

Preguntas frecuentes: React Native

¿React Native es lo mismo que React?

Comparten las mismas ideas básicas: componentes, props, estado y hooks. React dibuja en el DOM del navegador y React Native en vistas móviles nativas, así que los elementos básicos cambian (View y Text en lugar de div y span).

¿Es la Nueva Arquitectura la opción por defecto?

Sí, en los proyectos nuevos desde React Native 0.76. Las apps existentes aún pueden desactivarla con un ajuste en los archivos de proyecto de Android e iOS, como describe la documentación de React Native.

¿Necesito Expo para usar React Native?

No, pero la documentación de React Native recomienda usar un framework en las apps nuevas y presenta Expo. Puedes usar React Native sin framework si prefieres gestionar tú los proyectos nativos.

¿Una app de React Native es una app nativa de verdad?

Sí. El resultado es una app instalable de iOS o Android que dibuja vistas nativas. Tu JavaScript se ejecuta dentro de ella con el motor Hermes.

¿Puedo compartir código entre una web en React y una app de React Native?

La lógica de negocio, los hooks, los clientes de API y los tipos se comparten con facilidad. Los componentes de interfaz suelen diferir, porque web y móvil usan elementos básicos distintos, salvo que uses una capa como React Native Web.