When should I use 'use dom' instead of native components?

Use them when you need web-only libraries (like Recharts), complex HTML/CSS layouts not supported by React Native, or when migrating existing web code to mobile.

What are Expo DOM components?

DOM components are React components marked with the 'use dom' directive that run in a webview on native platforms and as standard web components on the web.

Can I share state between native and DOM components?

Direct state sharing isn't possible because the webview has its own JS context, but you can communicate by passing serializable props and async functions.

Are there limitations to DOM components?

Yes, they must be the single default export of their own file, only accept serializable props, and generally have higher performance overhead than native components.

Expo DOM Components

Name: Expo DOM Components
Author: expo

byexpo

•

327

Mobile Development

Integrates React web components and web-only libraries into Expo native applications using the 'use dom' directive.

About

This skill provides specialized guidance for implementing Expo DOM components, which allow developers to run web code verbatim in a webview on native platforms while rendering as-is on the web. It enables the use of powerful web-only libraries like Recharts, React Syntax Highlighter, and complex CSS layouts within a native Expo environment. By bridging the gap between web and native, it facilitates incremental migrations and allows developers to leverage the full power of the web DOM APIs where native React Native components fall short.

Key Features

327 GitHub stars
Configuration of the specialized 'dom' prop for webview behavior control
Bidirectional communication patterns between native code and DOM components
Implementation of the 'use dom' directive for hybrid web-native rendering
Support for web-only libraries like Recharts, Chart.js, and syntax highlighters
Best practices for asset handling and Expo Router integration within webviews

Use Cases

Performing incremental migrations of existing React web components to Expo
Rendering rich text or code snippets using advanced web-based formatting libraries
Integrating complex data visualizations and charts into native mobile apps

About

Key Features

327 GitHub stars
Configuration of the specialized 'dom' prop for webview behavior control
Bidirectional communication patterns between native code and DOM components
Implementation of the 'use dom' directive for hybrid web-native rendering
Support for web-only libraries like Recharts, Chart.js, and syntax highlighters
Best practices for asset handling and Expo Router integration within webviews

Use Cases

Performing incremental migrations of existing React web components to Expo
Rendering rich text or code snippets using advanced web-based formatting libraries
Integrating complex data visualizations and charts into native mobile apps