use-dom

Run React web components verbatim in Expo apps via webview.

34|2|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/FilenCloudDienste/filen-ts --skill use-dom-filenclouddienste
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/FilenCloudDienste/filen-ts/tree/main/.claude/skills/use-dom
Command: npx skills add https://github.com/FilenCloudDienste/filen-ts --skill use-dom-filenclouddienste

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you reuse existing React web code inside an Expo app by running it in a controlled webview environment while still rendering as-is on web.

Core Features & Use Cases

  • Use Expo DOM components to render verbatim web UI: Render DOM-based React components in a webview on native platforms while behaving naturally on web.
  • Incremental migration of web libraries: Bring in web-only libraries (e.g., charts, syntax highlighters, rich editors) without rewriting them for React Native.
  • Expose native actions to webview code: Pass async functions from native to the DOM component to trigger alerts, save data, and other native behaviors.
  • Use Cases: Migrating existing UI, building complex HTML/CSS layouts, embedding iframes/embeds, and using canvas/WebGL where native equivalents are limited.

Quick Start

Create a new component file and add the directive 'use dom' at the top, then export a single default React component that accepts a typed dom prop from expo/dom.

Frequently Asked Questions about use-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run existing React web components inside an Expo app?▼

To run React web components inside an Expo app, use a 'use dom' directive at the top of your component file. The Skill renders verbatim DOM-based UI in a webview on native platforms while behaving naturally on web for incremental migration.

Can I use web-only libraries like charts and rich editors in Expo without rewriting them?▼

Yes, you can use web-only libraries like charts and rich editors in Expo without rewriting them. The Skill runs existing web code in a controlled webview environment, allowing you to migrate complex HTML/CSS layouts incrementally.

How do I call native functions from a DOM component rendered in a webview?▼

You call native functions from a DOM component by passing async functions from native to the webview code. This deterministic native-to-web action passing allows you to trigger alerts, save data, and execute other native behaviors directly.

Does Expo support rendering canvas and WebGL content on native platforms?▼

Yes, Expo supports rendering canvas and WebGL content on native platforms using this Skill. It targets scenarios where native equivalents are limited by embedding canvas or WebGL elements via a webview-driven environment.

What is the best way to incrementally migrate a React web app to React Native?▼

The best way to incrementally migrate a React web app to React Native is using a 'use dom' directive to render verbatim web UI inside Expo. This allows you to bring in web-only libraries and complex layouts without a full rewrite.

Are there limitations when embedding iframes in Expo using DOM components?▼

Embedding iframes in Expo using DOM components requires a root-level SKILL.md entry defining discoverable metadata. The Skill supports embeddings via a webview-driven environment, but you must use a typed expo/dom DOMProps prop for proper integration.