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.

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.

주요 기능

01327 GitHub stars

02Configuration of the specialized 'dom' prop for webview behavior control

03Bidirectional communication patterns between native code and DOM components

04Implementation of the 'use dom' directive for hybrid web-native rendering

05Support for web-only libraries like Recharts, Chart.js, and syntax highlighters

06Best practices for asset handling and Expo Router integration within webviews

사용 사례

01Performing incremental migrations of existing React web components to Expo

02Rendering rich text or code snippets using advanced web-based formatting libraries

03Integrating complex data visualizations and charts into native mobile apps

주요 기능

01327 GitHub stars

02Configuration of the specialized 'dom' prop for webview behavior control

03Bidirectional communication patterns between native code and DOM components

04Implementation of the 'use dom' directive for hybrid web-native rendering

05Support for web-only libraries like Recharts, Chart.js, and syntax highlighters

06Best practices for asset handling and Expo Router integration within webviews

사용 사례

01Performing incremental migrations of existing React web components to Expo

02Rendering rich text or code snippets using advanced web-based formatting libraries

03Integrating complex data visualizations and charts into native mobile apps