skills.rest
magicappdev
magicappdevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

use-dom

Run web code inside native apps using Expo DOM components.

2|Updated Jan 19, 2026
Search Tags:#migration#cross-platform#react-native#expo#webview#dom-components#use-dom
One-click install
npx skills add https://github.com/magicappdev/magicappdev --skill use-dom-magicappdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/magicappdev/magicappdev/tree/main/.gemini/skills/expo-app-design/use-dom
Command: npx skills add https://github.com/magicappdev/magicappdev --skill use-dom-magicappdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web and mobile teams often struggle to reuse existing web UI code in React Native without a full rewrite. Expo DOM components provide a pathway to run web code inside a native webview while rendering unchanged on web, enabling incremental migration.

Core Features & Use Cases

  • Web-to-native migration: Run DOM-based web components inside native apps with no immediate rewrites.
  • Cross-platform rendering: Same code runs on web and native via a webview wrapper.
  • Use Case: Porting a charting widget from a web dashboard to a native mobile app with minimal changes.

Quick Start

Create a DOM component with 'use dom' at the top and render it inside an Expo app to run web code in a WebView on native and as-is on web.

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 code inside a React Native app without rewriting it?▼

To run web code inside React Native, use Expo DOM components. Adding the 'use dom' directive wraps your web widgets in a native webview, enabling incremental migration without requiring an immediate rewrite.

What is the best way to migrate a web charting widget to a native mobile app?▼

The best way to migrate a web charting widget is using Expo DOM components. This approach wraps the existing web code in a webview for native rendering while running unchanged on the web, allowing cross-platform reuse.

Does Expo DOM support CSS isolation and Expo Router compatibility?▼

Expo DOM supports CSS isolation and Expo Router compatibility. It enforces proper DOM prop typing and ensures DOM components integrate seamlessly with Expo Router routing structures during web-to-native migration.

Can I use a webview to incrementally transition web components to React Native?▼

You can use a webview to incrementally transition web components to React Native via Expo DOM. It allows unchanged web code to render inside native apps, facilitating a progressive migration strategy for embedded content.

How do I start using Expo DOM components in an existing project?▼

To start using Expo DOM components, add the 'use dom' directive at the top of your web component file. Render this component inside your Expo app to execute web code in a native webview.

Why does my web component need the 'use dom' directive for native rendering?▼

Your web component needs the 'use dom' directive to activate Expo DOM rendering. This directive triggers the framework to wrap the web code in a native webview, ensuring proper DOM prop typing and CSS isolation for cross-platform compatibility.

Related Skills

Explore More Software Engineering Skills→
faw01faw01
18

use-dom

Execute web-based React components in Expo apps via DOM webviews.

Community
Intermediate
marcosmouramarcosmoura
10

building-native-ui

Guide developers in building native user interfaces with Expo Router.

Community
Intermediate
msichtermanmsichterman

use-dom

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

Community
Intermediate
emilyLi2020emilyLi2020
2

use-dom

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

Community
Intermediate