skills.rest
jakubciszak
jakubciszakCOMMUNITY
Explore all skills by this author →
GitHub

use-dom

Run web-based React code inside native Expo apps using DOM components.

1|Updated Dec 10, 2025
Search Tags:#migration#react-native#expo#interop#dom#webview#web-libraries
One-click install
npx skills add https://github.com/jakubciszak/family-plan --skill use-dom-jakubciszak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/jakubciszak/family-plan/tree/main/.claude/skills/external/expo-app-design/skills/use-dom
Command: npx skills add https://github.com/jakubciszak/family-plan --skill use-dom-jakubciszak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web-to-native interoperability is often hampered by rewriting web UI for native platforms. This skill enables running web-based React components inside native Expo apps using DOM components, allowing gradual migration of web code to native while preserving behavior.

Core Features & Use Cases

  • Run web-only libraries in native apps by rendering web code in a webview on mobile while preserving native rendering on web.
  • Migrate existing web UIs to native incrementally by wrapping with DOM components and progressively removing the webview dependency.
  • Interoperate between web and native through a dom prop, exposing native actions to the web view and controlling configuration.

Quick Start

Create a DOM component with the 'use dom'; directive at the top to render web code inside a native webview and progressively migrate it to native.

Frequently Asked Questions about use-dom

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

FAQPage Schema
How do I run web-based React code inside an Expo native app?▼

Web-to-native interop is achieved by rendering web-based React code inside a native webview using Expo DOM components, which requires the 'use dom' directive and a single default export per file.

What is the best way to migrate web-only libraries to React Native?▼

Migrating web libraries to React Native is done by wrapping them with Expo DOM components and progressively removing the webview dependency, allowing incremental migration while preserving behavior.

How does the dom prop work for native and web interoperation in Expo?▼

The dom prop enables interoperation between web and native by exposing native actions to the web view and controlling configuration from the native side of the Expo application.

Can I incrementally migrate a web UI to native without rewriting everything?▼

Yes, you can incrementally migrate web UI to native by wrapping existing web components with Expo DOM components and progressively removing the webview dependency step by step.

What are the limitations of using 'use dom' directives in React Native?▼

Limitations of using 'use dom' directives include requiring a single default export per file, needing platform-aware rendering, and relying on a webview for mobile rendering while preserving native rendering on web.

Related Skills

Explore More Software Engineering Skills→
PolGubauPolGubau

use-dom

Run React web components in native mobile apps and web environments.

Community
Intermediate
rostiSerostiSe
1

use-dom

Render web code in Expo React Native apps via DOM components in a webview.

Community
Intermediate
emilyLi2020emilyLi2020
2

use-dom

Execute DOM-dependent React web code in native Expo applications.

Community
Intermediate
msichtermanmsichterman

use-dom

Embed web-only code in native Expo apps using DOM components.

Community
Intermediate