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.