Can I use any web library with this skill?

Yes, DOM components allow you to use libraries that depend on DOM APIs, such as Recharts, Chart.js, or React Syntax Highlighter, which are typically incompatible with standard React Native.

How do DOM components communicate with native code?

Communication is handled by passing asynchronous functions as props to the DOM component, allowing the web code to trigger native actions like alerts or storage updates via a bridge.

What are the limitations of props in DOM components?

Props passed to DOM components must be serializable, meaning you can only pass strings, numbers, booleans, arrays, and plain objects. Functions must be asynchronous.

What is a DOM component in Expo?

A DOM component is a React component that uses the 'use dom' directive to run web code inside a WebView on native platforms while rendering normally on the web.

When should I avoid using DOM components?

Avoid them when native performance is the top priority, for simple UI layouts that React Native can handle efficiently, or for core navigation files like Expo Router _layout.tsx files.

Expo DOM Components

Name: Expo DOM Components
Author: expo

byexpo

•

1,643

•

Mobile Development

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

This skill enables Claude to implement and manage Expo DOM components, allowing developers to seamlessly bridge the gap between web and native environments. It facilitates the use of web-only libraries—such as complex charting engines, rich text editors, and syntax highlighters—within native apps by rendering them in a controlled WebView on iOS and Android while maintaining standard rendering on the web. This is ideal for incremental migrations, rendering complex CSS layouts, and accessing web-specific APIs like Canvas or WebGL that are not natively available in React Native.

주요 기능

01Configures WebView behavior and styling using the specialized 'dom' property

02Exposes native functionality to WebViews through asynchronous serializable props

031,643 GitHub stars

04Supports Expo Router navigation and asset handling within isolated DOM contexts

05Integrates web-only libraries like Recharts and Syntax Highlighter into mobile apps

06Implements the 'use dom' directive for hybrid web-native rendering

사용 사례

01Rendering high-performance web graphics using Canvas or WebGL APIs in a mobile context

02Migrating existing React web components to a native mobile application incrementally

03Embedding complex data visualizations using web-based charting libraries like Recharts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expo/skills use-dom

For use in Claude.ai and ChatGPT