Skills

use-dom

Installation
Summary

Run web-only libraries in Expo apps by rendering them in webviews on native and as-is on web.

  • Supports any React web library (recharts, react-syntax-highlighter, canvas, WebGL) without modification by wrapping it in a DOM component file with the 'use dom'; directive
  • Passes serializable props and async functions from native to webview, enabling bidirectional communication between native and web contexts
  • Includes webview configuration options via the dom prop: scroll control, safe area behavior, manual sizing, and style overrides
  • Works with Expo Router navigation APIs; router state hooks require passing values as props from native parent components
  • Renders in WKWebView on iOS, WebView on Android, and as standard React on web with identical code
SKILL.md

What are DOM Components?

DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like recharts, react-syntax-highlighter, or any React web library in your Expo app without modification.

When to Use DOM Components

Use DOM components when you need:

  • Web-only libraries — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs
  • Migrating web code — Bring existing React web components to native without rewriting
  • Complex HTML/CSS layouts — When CSS features aren't available in React Native
  • iframes or embeds — Embedding external content that requires a browser context
  • Canvas or WebGL — Web graphics APIs not available natively

When NOT to Use DOM Components

Avoid DOM components when:

  • Native performance is critical — Webviews add overhead
Related skills

More from expo/skills

Installs
19.3K
Repository
expo/skills
GitHub Stars
1.9K
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass