DOM Components in React Native ('use dom')

Overview

The 'use dom' directive lets you embed web code inside React Native apps. Components marked with 'use dom' render in a native webview (WKWebView on iOS, WebView on Android), giving you access to the full browser DOM while keeping the rest of your app native.

Core principle: Use 'use dom' as a bridge to web-only libraries that have no React Native equivalent. The DOM component runs in an isolated webview, communicating with your native app through serializable props.

When to Use

• Rendering charts with web libraries (recharts, Chart.js, D3)
• Syntax highlighting code blocks (Prism, Shiki, highlight.js)
• Rich text editors (TipTap, Lexical, Quill)
• Embedding maps with web map libraries (Leaflet, Mapbox GL JS)
• Rendering complex HTML/CSS content (markdown, documentation)
• Using any npm package that depends on browser APIs (DOM, Canvas, WebGL)

When NOT to Use