React native web aparece como una solución para compartir lógica y componentes entre aplicaciones móviles y sitios web; esta guía aborda cuándo aplicar React native web, cómo migrar una base existente y qué optimizaciones y riesgos considerar antes del despliegue.
Contexto: por qué las empresas plantean usar React native web
La decisión de usar React native web suele nacer de la necesidad de reducir duplicidad de código y acelerar la entrega. Técnicamente, react-native-web hace mapings de las APIs de React Native al DOM y CSS, permitiendo reutilizar componentes que ya se usan en iOS/Android. No es una magia: ciertos módulos nativos, estilos y expectativas de rendimiento cambian para la web; comprender esos límites evita sorpresas en etapas avanzadas.
Cuándo elegir React native web y cuándo descartarlo
No todas las apps ganan al portar componentes móviles a la web. Estas pautas ayudan a decidir:
- Conviene cuando la interfaz es modular y centrada en componentes reutilizables (listados, formularios, tarjetas, flujos CRUD).
- Evitar si la app web requiere SEO intensivo o necesita primeras impresiones muy optimizadas con SSR complejo; las adaptaciones para SEO pueden añadir trabajo.
- Elegir React native web si el equipo domina React y React Native; la curva será más corta que aprender un stack web distinto completo.
- Valorar alternativas si la experiencia web necesita animaciones pesadas específicas del DOM o integraciones con librerías web que no tienen equivalente móvil.
Migrar una app React Native a la web: guía paso a paso
La migración no es solo ejecutar una dependencia: implica preparar el proyecto, adaptar estilos, garantizar compatibilidad y probar en distintos navegadores.
1. Preparación y auditoría del código
Hacer un inventario rápido de dependencias nativas (cámaras, sensores, módulos nativos). Clasificarlas en: compatibles, con polifill posible, o no compatibles. Priorizar componentes UI para reutilización y anotar los que requieren reescritura.
2. Configuración inicial
Agregar las dependencias básicas: instalar react-dom y react-native-web. Con Expo o Create React App la integración puede ser más sencilla; con bundlers personalizados (Webpack/Vite) hay que ajustar alias para resolver react-native a react-native-web y configurar loaders para assets y fuentes.
Ejemplo de pasos comunes:
- Instalar paquetes: yarn add react-dom react-native-web
- Configurar alias: resolver «react-native» a «react-native-web» en la configuración del bundler
- Ajustar punto de entrada para registrar la app en un elemento del DOM
3. Ajustes de estilos y layout
React native usa Flexbox por defecto; la web entiende Flexbox pero también depende de reglas CSS (box-sizing, tipografías, tamaños relativos). Conviene:
- Normalizar box-sizing y tipografías base.
- Revisar unidades: evitar dependencias estrictas de dp o medidas absolutas que funcionen en móvil pero no en pantallas amplias.
- Implementar breakpoints cuando la interfaz debe adaptarse a escritorio.
4. Navegación, rutas y estado
Las soluciones de navegación móvil (React Navigation) funcionan con adaptaciones; sin embargo, la web exige rutas accesibles (URLs) y manejo de historial. Integrar la navegación con react-router o adaptar React Navigation para web evita inconsistencias en la experiencia de usuario.
5. Formularios, inputs y accesibilidad
Inputs en la web requieren atención: autocompletado, labels, roles ARIA y manejo de teclado. No confiar únicamente en comportamiento móvil: probar con lector de pantalla y teclado mejora la calidad y reduce rechazos de auditoría de accesibilidad.
6. Pruebas y despliegue
Automatizar pruebas visuales y unitarias. Ejecutar pruebas en navegadores reales (Lighthouse, WebPageTest) para medir tiempo hasta interactividad y tamaño del bundle.
Optimización y rendimiento en React native web
Compartir código no debe sacrificar la velocidad. Estas técnicas ayudan a mantener una experiencia web competitiva:
- Bundle splitting: separar el código de la app del runtime y librerías pesadas para mejorar el tiempo de carga inicial.
- Tree-shaking y eliminar dependencias que solo se usan en móvil.
- Uso condicionado de módulos: cargar funcionalidades pesadas solo cuando son necesarias mediante imports dinámicos.
- Optimizar imágenes y servir formatos modernos (WebP, AVIF) con tamaños adaptativos usando el atributo srcset o técnicas equivalentes en el bundler.
- Minimizar repaints: evitar estilos que fuerzan reflow constante y preferir transformaciones por GPU para animaciones.
Ejemplo práctico: una lista infinita que en móvil usa un componente nativo de reciclado puede necesitar un reemplazo en la web (por ejemplo, react-window) para mantener uso de memoria bajo en escritorios.
Errores frecuentes y cómo resolverlos
- Dependencias nativas no encontradas: identificar y sustituir por alternativas web o encapsular en adaptadores que fallen de forma controlada.
- Estilos que se rompen en anchos grandes: introducir breakpoints y componentes responsive en lugar de confiar en valores fijos.
- Tamaños de bundle excesivos: revisar imports por defecto (importar módulos completos en lugar de funciones) y aplicar code splitting.
- Comportamiento distinto en focus y teclas: ajustar handlers para teclado y añadir roles ARIA para mejorar accesibilidad.
- Problemas de tipografías o icons: preferir fuentes web subsetting y icon fonts o SVG inlining optimizados.
Pasos recomendados para lanzar y mantener una app con React native web
Al preparar un lanzamiento conviene seguir un checklist técnico y operativo:
- Definir claramente qué componentes se comparten y cuáles se mantienen específicos por plataforma.
- Establecer guardrails en el repositorio: reglas de linting, pruebas y una CI que genere builds web automáticos.
- Medir indicadores clave: TTI (Time to Interactive), CLS (Cumulative Layout Shift) y tamaño de bundle gzipped.
- Plan de rollbacks y feature flags para desplegar gradualmente cambios en la versión web.
- Documentar buenas prácticas para el equipo: cómo escribir componentes multiplataforma, cuándo evitar APIs nativas y cómo aislar dependencias problemáticas.
Mini-caso: una pequeña empresa migró su app interna de inventarios con formularios y listados. Al reutilizar componentes básicos y reescribir solo la capa de camera/scan para web (usando WebRTC), se redujo el tiempo de desarrollo en 40% respecto a crear una interfaz web desde cero, pero requirió dos sprints extra para optimizar estilos y bundle. Lección: el ahorro existe, pero conviene reservar tiempo para ajustes propios de la web.
Conclusión práctica: evaluar alcance, probar con un prototipo y medir. React native web puede reducir esfuerzo y unificar experiencia, siempre que se planifiquen adaptaciones para rendimiento, accesibilidad y rutas web. Antes del lanzamiento, validar métricas de rendimiento y simplificar dependencias; si esos objetivos no son alcanzables sin reescribir gran parte del UI, entonces optar por una implementación web nativa podría ser la opción más eficiente. React native web debe aparecer en la estrategia técnica como una alternativa viable, no como una expectativa automática, y su uso debe justificarse desde la arquitectura y el coste. React native web
