Componentes de React Native en Next.js con @expo/next-adapter

Uso de componentes de React Native en una app web Next.js con @expo/next-adapter

Este artículo explica cómo integrar una librería de componentes de React Native en un proyecto Next.js con pages router y renderizarla en la web mediante React Native Web, @expo/next-adapter, NativeWind y Babel. Con esta configuración evitarás duplicar UI entre tu app móvil y tu app web en Next.js, manteniendo un único sistema de diseño.

En Q2BSTUDIO desarrollamos aplicaciones a medida y software a medida con un enfoque multiplataforma y escalable. Además, somos especialistas en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, power bi, agentes IA e ia para empresas. Si buscas un partner para acelerar tu roadmap digital con código compartido móvil web, descubre nuestro enfoque de desarrollo multiplataforma en software a medida y aplicaciones a medida.

Pila técnica utilizada

Next.js 15 con pages router y React 19. React Native Web. Tailwind CSS v4 y NativeWind v4. @expo/next-adapter. react-native-css-interop. Babel con .babelrc para habilitar el importSource de NativeWind. Librerías compartidas de RN y paquetes de primitivas RN.

Ideas clave

Tailwind v4 cambia el modelo de importación, usa arroba import tailwindcss en el archivo globals.css en lugar de la sintaxis de v3. Los componentes de RN no entienden className sin CSS interop, por lo que debes mapear className a style en las primitivas que realmente se renderizan en tu app o librerías. Muchos botones y triggers de terceros están construidos sobre Pressable, así que es esencial interop para Pressable. Añade todos los paquetes RN y tus librerías compartidas a transpilePackages para evitar errores de sintaxis o ejecución en el navegador. Configura important html en Tailwind para que sus utilidades tengan precedencia sobre otras hojas de estilo. NativeWind funciona correctamente con el pages router y rutas use client, mientras que el soporte completo para RSC está en progreso.

Integración de la librería de React Native en Next.js

1 Instala la librería y sus peer dependencies. 2 Añade la librería a transpilePackages para que Next la transpile para el navegador. 3 Incluye la ruta de la librería en el campo content de Tailwind para que se generen las utilidades usadas dentro de ella. 4 Asegúrate de que CSS interop cubra las primitivas que renderiza la librería, como View, Text, TouchableOpacity y especialmente Pressable para triggers y botones.

Con esta preparación podrás importar componentes de tu librería RN y usarlos en páginas Next de forma directa, combinándolos con textos y wrappers web sin duplicar lógica de UI.

Configuración esencial descrita sin código

next.config con withExpo activado, lista completa en transpilePackages incluyendo react native, react native web, nativewind, react native css interop, tus paquetes y reanimated, y alias que resuelvan react native hacia react native web y mapeos de iconos si procede. tsconfig con jsxImportSource apuntando a nativewind, jsx en modo preserve, moduleResolution bundler y strict activo. babelrc con presets de Next y el plugin de transform react jsx en runtime automatic e importSource nativewind. archivo de tipos para NativeWind referenciado en el proyecto. tailwind config v4 con content apuntando a pages, components y la carpeta de tu librería en node modules, preset de nativewind, important html y cualquier extensión de tema que necesites. postcss configurado con el plugin de tailwind v4. globals.css importando tailwindcss mediante la directiva v4. en pages app define el mapeo de css interop para View, Text, TouchableOpacity y Pressable de modo que className se traduzca a style.

Problemas frecuentes y soluciones

Colores de fondo que no aparecen Causa uso de directivas de Tailwind v3 en un proyecto con v4, las clases no se generan. Solución usa arroba import tailwindcss en globals.css. Bordes visibles pero sin color Causa el componente base es Pressable sin CSS interop. Solución mapea Pressable con className hacia style en CSS interop. Errores de sintaxis desde node modules Causa paquetes RN o compartidos sin transpilar. Solución añade todos estos paquetes a transpilePackages y asegúrate de que la librería publica JS compatible con navegador. Estilos presentes pero sobreescritos Solución añade important html en la configuración de Tailwind para elevar la especificidad.

Buenas prácticas adicionales

Mantén un catálogo de primitivas RN realmente usadas en la web y limita el interop a esas primitivas para reducir superficie de errores. Centraliza tokens de diseño en Tailwind v4 y NativeWind para que móvil y web compartan la misma semántica. Valida que tus componentes RN no dependan de APIs nativas no disponibles en web o provee fallback. Si utilizas animaciones con reanimated, confirma que está incluida en transpilePackages y sigue sus requisitos en web.

Conclusión

Con @expo/next-adapter, React Native Web, Tailwind v4, NativeWind, react native css interop y Babel, puedes consumir una librería de React Native dentro de una app Next.js sin duplicar código. Los pasos clave son transpilar paquetes RN y la librería, usar el import de Tailwind v4 en CSS, incluir las rutas de la librería en content de Tailwind y mapear primitivas de RN incluyendo Pressable con CSS interop para que className se resuelva correctamente a estilos. Si necesitas llevar esta arquitectura a producción con estándares de seguridad, observabilidad y escalabilidad, en Q2BSTUDIO combinamos desarrollo multiplataforma con ciberseguridad, servicios cloud aws y azure, inteligencia artificial y servicios inteligencia de negocio con power bi para crear soluciones robustas y preparadas para crecer.