Expo DOM Components
Reuse web code and browser-only libraries inside Expo native apps with incremental migration support.
The document defines boundaries for native callbacks, serializable props, and WebView configuration, but it does not require user confirmation for native actions, constrain external iframes/libraries, explain sensitive-data handling, or provide rollback guidance. The MIT license is verifiable, so this is a deduction rather than a red-line finding.
The guidance is internally coherent and covers creation, routing, assets, platform behavior, and limitations with multiple examples. However, it lacks dependency/version setup, a test suite, abnormal-input handling, and diagnosable failure feedback; the score remains within the static-review ceiling.
Use and non-use cases, platform differences, and several capability boundaries are reasonably clear for semantic triggering. Expo SDK/React version requirements, dependency prerequisites, broader non-fit ranges, and Chinese-language support are not specified. Core functionality does not entirely depend on overseas services, so no additional mainland-China reachability deduction is applied.
The skill has a name, description, version, MIT license, layered sections, substantial examples, and disclosures about performance, hot reload, and context isolation. It lacks maintainer responsibility, changelog, update path, dependency installation notes, and FAQs; publisher identity is unknown under the stated rule.
The material directly addresses core tasks including migration, DOM configuration, web libraries, CSS, routing, and native actions, and the examples are useful starting points. There is no execution evidence, examples still require project dependencies and platform/version adaptation, and broad claims such as support for any web library are not substantiated; the score stays below the static cap.
The skill supplies auditable rules, a platform table, and code examples, while repository context shows only generic limits and version-check workflows. There are no skill-specific tests, third-party execution records, or corroborating sources, so evidence coverage is thin.
- Treat WebView callbacks and external content as security boundaries; add least-privilege design, input validation, and explicit confirmation before sensitive-data transfer or native writes/alerts.
- The examples do not pin Expo SDK, React, or web-library versions; verify against current Expo documentation and validate on iOS, Android, and Web before adoption.
- Do not interpret “any web library” as unconditional compatibility; check for unsupported browser APIs, native integration, and build configuration requirements.
What does this skill do, and when should you use it?
This skill guides developers in using Expo DOM components to run web code in a WebView on native platforms and render it directly on the web. It covers component structure, serializable props, CSS, web libraries, Expo Router, assets, and bridging native actions. It fits incremental reuse of existing React web components and browser-dependent content. It is not intended for performance-critical native UI, deep native integration, or simple interfaces.
Guides developers to create standalone components with the “use dom” directive and one default export; type and configure expo/dom DOMProps; expose native actions through async props; import CSS, web libraries, and bundled assets in the isolated DOM context; use Expo Router Link and router APIs; pass synchronous routing state from native parents as props; and account for iOS, Android, and web rendering behavior.
- Expo developers who need recharts, Chart.js, syntax highlighters, or other web-only libraries in native apps.
- Teams bringing existing React web components to iOS and Android without an immediate rewrite.
- Projects requiring complex HTML/CSS layouts, iframes, external embeds, Canvas, or WebGL.
- Developers combining native screen content with specialized web content.
What are this skill's strengths and limitations?
- Runs web code in native WebViews while rendering directly on web.
- Supports web-only libraries, complex CSS layouts, iframes, Canvas, and WebGL.
- Documents native-action bridging, DOMProps, CSS, assets, and routing patterns.
- Enables incremental migration instead of requiring an immediate rewrite.
- WebViews add overhead on native platforms, so this is unsuitable for performance-critical native UI.
- Components must be standalone files with “use dom”, one default export, and serializable props.
- The WebView has its own JavaScript context and cannot directly share native state.
- The source provides no test suite, performance benchmarks, or specific Expo SDK compatibility matrix.
How do you install this skill?
The skill is located at plugins/expo/skills/expo-dom/SKILL.md in the repository. To install the full Expo skill collection, run: npx skills@latest add expo/skills --skill '*'. In Codex, the Expo plugin can also be installed with: codex plugin add expo@openai-curated. The source does not provide a command for installing only expo-dom.
How do you use this skill?
In an Expo project, ask an agent for a concrete task such as: “Create an Expo DOM chart component using recharts inside a native screen and set its height through the dom prop.” Ensure the component file starts with “use dom”, has one default export, and receives serializable props from its native parent.
How does this skill compare with similar options?
Compared with React Native components, DOM components are better suited to web-only libraries and complex web layouts but carry WebView overhead. Compared with local modules, they are not the recommended choice for deep native API integration. For migrating an entire web app, the source points to the expo-web-to-native skill.