expo/use-dom

¿Qué hace use-dom?

Utiliza componentes DOM de Expo para ejecutar código web en una webview en dispositivos nativos y tal cual en la web. Migra código web a nativo de forma incremental.

¿Qué es expo/use-dom?

expo/use-dom es una habilidad que te permite ejecutar componentes web existentes en un entorno nativo mediante una vista web (webview). En la web, estos componentes se renderizan directamente como HTML normal, mientras que en iOS/Android se ejecutan dentro de un contenedor WebView. Esto te permite reutilizar librerías, lógica o interfaces web sin necesidad de reescribir todo el código.

¿Cómo funciona?

Para usar expo/use-dom, envuelves un componente web en un contenedor especial que Expo proporciona. Este contenedor se encarga de:

• En la web: Renderizar el componente directamente como HTML, sin cambios.
• En nativo: Ejecutar el componente dentro de una WebView, manteniendo toda la interactividad, estilos y scripts originales.

El componente se comunica con la app nativa mediante un puente, permitiendo intercambiar datos o eventos.

Ejemplo de uso

import { WebView } from 'expo-webview';

function MiComponenteWeb() {
  return (
    <div>
      <h1>¡Hola desde la web!</h1>
      <p>Este componente funciona tanto en web como en nativo.</p>
    </div>
  );
}

// En tu app Expo
import { DomComponent } from 'expo-dom-component';

function App() {
  return (
    <DomComponent>
      <MiComponenteWeb />
    </DomComponent>
  );
}

Beneficios

• Migración incremental: Puedes mover partes de tu aplicación web a nativo paso a paso, sin romper la funcionalidad existente.
• Reutilización de código: Aprovecha componentes, librerías y lógica web ya probados.
• Compatibilidad: Funciona con Expo SDK 50+ y frameworks como React Native, Expo Router y Next.js.
• Rendimiento: En nativo, el contenido web se ejecuta en un proceso separado, evitando bloqueos en el hilo principal.

Plataformas soportadas

• Web: Renderizado directo como HTML.
• iOS: Ejecución en WKWebView.
• Android: Ejecución en WebView de Android.

Limitaciones

• La comunicación entre el componente web y la app nativa es asíncrona y limitada a datos serializables.
• No se pueden usar APIs nativas directamente desde el código web; se necesita un puente personalizado.
• El rendimiento puede verse afectado si se usan muchos componentes DOM en la misma vista.

Más información

Consulta la documentación oficial de Expo para más detalles sobre expo/use-dom y cómo integrarlo en tu proyecto.