skills.rest
sofia-municipality
sofia-municipalityOFFICIAL
Explore all skills by this author →
WebsiteGitHub

use-dom

Run web code in Expo native apps using DOM components.

9|7|Updated Oct 6, 2025
Search Tags:#components#migration#react-native#web#expo#dom#webview
One-click install
npx skills add https://github.com/sofia-municipality/your-sofia-mobile --skill use-dom-sofia-municipality
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/sofia-municipality/your-sofia-mobile/tree/main/.github/skills/use-dom
Command: npx skills add https://github.com/sofia-municipality/your-sofia-mobile --skill use-dom-sofia-municipality

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries and existing web UI in Expo apps without rewriting.

Core Features & Use Cases

  • Web-to-native reuse: run libraries like charts, syntax highlighters, or HTML content inside a native or web app without changing code.
  • Incremental migration: migrate a web codebase to native step-by-step while preserving behavior.
  • Isolated webview context: code runs in an isolated webview with a dom prop for configuration and safe interaction.

Quick Start

Create a DOM component by adding 'use dom' at the top of the file and render it in your screen to host web content.

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

Run web libraries in Expo by adding the 'use dom' directive at the top of your file. This renders the web code inside an isolated WebView on native platforms while displaying it normally on the web, preventing the need for rewrites.

Can I use web-only chart libraries in Expo projects?▼

Yes, you can use web-only chart libraries in Expo projects by wrapping them in a DOM component. The component runs the web code verbatim inside a WebView, allowing safe interaction through a dom prop configuration contract.

What is the 'use dom' directive in Expo?▼

The 'use dom' directive is an instruction placed at the top of a file to create a DOM component. It enables web code to execute within an isolated WebView on native platforms, requiring a single default export component and a dom prop contract.

How do I migrate a web codebase to React Native incrementally?▼

Migrate a web codebase to React Native incrementally by using DOM components to run existing web code in a WebView. This preserves behavior during migration while allowing you to transition step-by-step within an Expo-based project.

Does React Native WebView support isolated web code execution?▼

Yes, DOM components support isolated WebView context execution in Expo. The web code runs verbatim inside an isolated WebView on native platforms, using a dom prop to safely configure and interact with the embedded content.

Related Skills

Explore More Software Engineering Skills→
treesus6treesus6
1

use-dom

Integrate web code into Expo apps using DOM components in a WebView.

Community
Intermediate
apostolos-geyerapostolos-geyer

use-dom

Run web-based React components inside Expo native apps via webview.

Community
Intermediate
msichtermanmsichterman

use-dom

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

Community
Intermediate
rostiSerostiSe
1

use-dom

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

Community
Intermediate