React Native es el framework de código abierto creado por Meta que permite desarrollar aplicaciones móviles nativas para iOS, Android y Web utilizando React y TypeScript. A diferencia de los enfoques híbridos basados en WebView, React Native renderiza componentes nativos reales, lo que proporciona un rendimiento y una experiencia de usuario indistinguibles de una aplicación construida con Swift o Kotlin. La New Architecture está activa por defecto, con Fabric, TurboModules, JSI, el modo bridgeless y el motor Hermes como fundamento técnico.
Este curso parte de React Native 0.77 o superior con New Architecture habilitada, Expo SDK 53 o superior con Expo Router, Reanimated 4, React Hook Form y Zod para formularios, React 19 para Suspense y Actions, y EAS Build, EAS Submit y EAS Update para todo el ciclo de vida de producción. Aprenderás a construir interfaces con componentes nativos, implementar navegación basada en ficheros con Expo Router, gestionar estado con Zustand y TanStack Query, acceder a APIs nativas como cámara, geolocalización, notificaciones push, AsyncStorage y SecureStore, y crear animaciones a 120 fps con Reanimated y Gesture Handler.
Arquitectura de React Native
El siguiente diagrama resume la pila actual de React Native con New Architecture, motor Hermes, JSI, Fabric y TurboModules como capas que sustituyen al bridge legacy.
graph TD
A[Aplicación TypeScript + React 19] --> B[Motor Hermes]
B --> C[JSI - JavaScript Interface]
C --> D[Fabric Renderer]
C --> E[TurboModules]
C --> F[Codegen]
D --> G[Vistas nativas iOS]
D --> H[Vistas nativas Android]
D --> I[Vistas web via React Native Web]
E --> J[Módulos nativos iOS]
E --> K[Módulos nativos Android]
F --> L[Interfaces tipadas JS y nativo]
Modo bridgeless
El modo bridgeless elimina por completo el bridge asíncrono de la arquitectura legacy. Toda la comunicación entre JavaScript y el hilo nativo pasa por JSI de forma directa, sin serialización JSON intermedia.
graph LR
A[JavaScript Hermes] -->|Llamada síncrona| B[JSI C plus plus]
B -->|Referencia directa| C[TurboModules]
B -->|Shadow Tree inmutable| D[Fabric]
C --> E[APIs nativas]
D --> F[UI nativa renderizada]
Navegación con Expo Router
Expo Router organiza la navegación en carpetas y ficheros dentro de app/, aplicando el mismo patrón que Next.js pero con componentes nativos y tipado estático de rutas.
graph TD
A[Carpeta app] --> B[_layout.tsx Stack root]
B --> C[index.tsx Inicio]
B --> D[Pestanas _layout tabs]
D --> E[tabs explorar index]
D --> F[tabs perfil index]
B --> G[productos bracket id tsx detalle]
B --> H[auth login tsx login]
B --> I[ajustes tsx ajustes]
React Native para iOS, Android y Web
Con React Native Web y el empaquetador Metro compartido, un mismo árbol de componentes se resuelve en las tres plataformas, aplicando extensiones .ios.tsx, .android.tsx y .web.tsx cuando se necesita código específico.
graph LR
A[src app y componentes] --> B[Metro bundler]
B --> C[iOS Simulator y dispositivos iOS]
B --> D[Android Emulator y dispositivos Android]
B --> E[React Native Web navegador]
A --> F[Platform.select y ficheros plataforma]
F --> C
F --> D
F --> E
Pipeline de EAS
EAS Build, EAS Submit y EAS Update encadenan la compilación en la nube, el envío automatizado a las tiendas y las actualizaciones OTA, con perfiles development, preview y production.
graph LR
A[Commit y push] --> B[EAS Build nube]
B --> C[Perfil development]
B --> D[Perfil preview]
B --> E[Perfil production]
E --> F[EAS Submit]
F --> G[App Store Connect iOS]
F --> H[Google Play Console Android]
E --> I[EAS Update canales y OTA]
I --> J[Clientes actualizados sin review]
Qué incluye este itinerario
- Introducción y arquitectura: qué es React Native, New Architecture con Fabric, TurboModules y JSI, modo bridgeless, motor Hermes, Expo vs CLI y ecosistema actual.
- Instalación y entorno: configuración con Expo SDK 53 o superior, simuladores, flujo de desarrollo con Fast Refresh, Dev Client y primera aplicación.
- Componentes nativos: View, Text, Image, FlatList, SectionList, StyleSheet, Flexbox y código específico por plataforma con
.ios.tsx,.android.tsxy.web.tsx. - Navegación: React Navigation y Expo Router con stack, tab, drawer, rutas dinámicas, grupos, paso de parámetros tipados y deep linking.
- Estado y hooks: useState, useEffect, Context API, Zustand, TanStack Query y patrones offline-first con soporte de React 19.
- APIs nativas: permisos, cámara, geolocalización, AsyncStorage, SecureStore, MMKV, SQLite, notificaciones push y sensores del dispositivo.
- Comunicación HTTP: fetch, axios, flujos de autenticación con tokens y refresh, soporte offline y comunicación en tiempo real con WebSocket.
- UI y animaciones: Reanimated 4 con shared values y worklets, Gesture Handler, diseño responsive, theming con modo oscuro y librerías de componentes.
- Testing y despliegue: Jest, React Native Testing Library, Detox, EAS Build, EAS Submit y EAS Update para actualizaciones OTA.
- Proyecto integrador: aplicación móvil con Expo Router, AsyncStorage y SecureStore, animaciones con Reanimated 4, y pipeline de EAS Build y EAS Submit.
Público objetivo
- Desarrolladores React que quieren llevar sus conocimientos al desarrollo de aplicaciones móviles nativas.
- Desarrolladores web (JavaScript y TypeScript) que buscan especializarse en desarrollo móvil multiplataforma.
- Desarrolladores móviles nativos (iOS y Android) que desean explorar un enfoque multiplataforma con código compartido.
- Estudiantes de informática que quieren adquirir competencias prácticas en desarrollo de aplicaciones móviles.
- Equipos de producto que necesitan lanzar aplicaciones para iOS, Android y Web con un único equipo de desarrollo.
Prerrequisitos: conocimientos de JavaScript o TypeScript y familiaridad con React (componentes, hooks y JSX). No se requiere experiencia previa en desarrollo móvil nativo.