hjemmesidekongen/expo-dom-components

Expo DOM Components

Expo SDK 52+ lets you render web content inside a native view using a 'use dom' directive. The file is bundled as a separate web bundle and mounted in an embedded WebView — no manual wiring required.

The 'use dom' Directive

'use dom' must be the first line of the component file (before imports):

'use dom';
export default function RichEditor({ content }: { content: string }) {
  return <div contentEditable suppressContentEditableWarning>{content}</div>;
}

Import and use it in native code like any React Native component. The bridge handles serialization.

Props and Callbacks

Props cross a serialization boundary — pass primitives and plain objects only. Function props work for web→native callbacks; the bridge serializes the call automatically.

DOM Components vs Direct WebView

Use DOM components for self-contained web UI embedded in a native screen: rich text editors, D3/Chart.js visualizations, markdown renderers, or any web-only library with no RN equivalent.

Use react-native-webview directly when you need full control: injectedJavaScript, onMessage, remote source.uri, or navigation hooks.

Shared State

DOM components run in a separate JS context — they don't share React state with native. Coordinate through props (native→web) and callbacks (web→native). For complex sync, use a shared data layer (AsyncStorage, MMKV, or server) as source of truth.

Performance

Each DOM component spawns a WebView process. Keep the count low — prefer one DOM component managing its own internal complexity over multiple small ones mounted simultaneously.

See references/process.md for WebView patterns, injectedJavaScript usage, communication protocols, debugging, and anti-patterns.