skills.rest
nickcorin
nickcorinCOMMUNITY
Explore all skills by this author →
𝕏@maxxedgoofGitHub

use-dom

Run web code in Expo apps using DOM components with a webview.

2|Updated Feb 27, 2020
Search Tags:#javascript#migration#react-native#expo#dom#webview#dom-components
One-click install
npx skills add https://github.com/nickcorin/dotfiles --skill use-dom-nickcorin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/nickcorin/dotfiles/tree/main/dot_config/opencode/skill/use-dom
Command: npx skills add https://github.com/nickcorin/dotfiles --skill use-dom-nickcorin

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, enabling incremental migration of web code to native.

Core Features & Use Cases

  • Run web libraries in DOM components (e.g., charts, syntax highlighters) inside a native app while preserving web behavior on web.
  • Migrate existing web components to native incrementally by embedding them in a webview.
  • Handle complex HTML/CSS layouts, embeds (iframes), and Canvas/WebGL by isolating web context.

Quick Start

Create a new component with the 'use dom'; directive at the top and export a default component, then pass a dom prop to native components.

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

To run web code inside a React Native app, you can use Expo DOM components to execute web code verbatim in a webview on native platforms while rendering it unchanged on the web. This enables incremental migration of web UI to native.

Can I migrate web components to native incrementally without rewriting them?▼

Yes, you can migrate web components to native incrementally by embedding them in a webview using Expo DOM components. This isolates the web context, allowing complex HTML, CSS, and embeds to function natively without immediate rewrites.

How do I use web libraries like charts or syntax highlighters in Expo?▼

To use web libraries like charts or syntax highlighters in Expo, create a component with the 'use dom' directive at the top, export a default component, and pass a dom prop to native components to configure the webview.

Does Expo DOM rendering work the same on web and native platforms?▼

Yes, Expo DOM components render web code as-is on web platforms, while running the same code verbatim inside a webview on native platforms. This preserves standard web behavior across both environments.

What are the requirements for creating an Expo DOM component?▼

Creating an Expo DOM component requires adding the 'use dom' directive at the top of the file, ensuring there is a single default export per file, and passing a dom prop to native components for webview configuration.

When should I use a webview for complex HTML or Canvas layouts in React Native?▼

You should use a webview for complex HTML, CSS layouts, embeds like iframes, and Canvas or WebGL in React Native when you need to isolate the web context, allowing existing web code to run verbatim without native conversion.

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
softwarebyzesoftwarebyze

use-dom

Run React web code in Expo apps via DOM components in a native webview.

Community
Intermediate
voidrotvoidrot

react-native-architecture

Guide React Native app architecture with Expo, navigation, native modules, and offline sync.

Community
Advanced
TabTabGoTabTabGo

use-dom

Run React web components in WebView on native platforms and as-is on web.

Official
Intermediate