skills.rest
nawab69
nawab69COMMUNITY
Explore all skills by this author →
WebsiteGitHub

use-dom

Run web React components inside Expo apps via a webview-backed DOM component.

Updated Feb 27, 2026
Search Tags:#react#migration#react-native#expo#recharts#webview#dom-components
One-click install
npx skills add https://github.com/nawab69/pouch-monorepo --skill use-dom-nawab69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/nawab69/pouch-monorepo/tree/main/apps/mobile/.agents/skills/use-dom
Command: npx skills add https://github.com/nawab69/pouch-monorepo --skill use-dom-nawab69

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables running web-only React components and libraries inside Expo native apps by hosting them in an embedded DOM-backed webview on native platforms while rendering them as-is on web, removing the need to rewrite web UI for native environments.

Core Features & Use Cases

  • Use web-only libraries: Support for libraries that depend on DOM APIs such as charting and syntax highlighting without modification.
  • Incremental migration: Embed existing React web components in native screens to migrate codebases gradually.
  • Native interaction: Expose native functionality to the webview via async props and configure behavior through a dom prop for scrolling, sizing, and safe area handling.
  • Styling and assets: Allow CSS imports or inline styling within the DOM component file and require assets to be bundled alongside the component.
  • Platform behavior: Renders inside a WebView on iOS/Android and as native DOM on web, with the dom prop ignored on web.

Quick Start

Create a component file that begins with the use dom directive, export a single default React component with only serializable props, then import and render it from a native screen while passing a dom prop to configure the webview.

Frequently Asked Questions about use-dom

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

FAQPage Schema
How do I use web-only React libraries like recharts inside a React Native Expo app?▼

Components must start with a use dom directive, export a single default component, and accept only serializable props so the native parent can pass data into the webview.

What is the best way to migrate web React components to native without rewriting them?▼

This renders web components inside a WebView on iOS and Android while rendering them as native DOM on web, allowing gradual codebase migration.

Can I use CSS imports and inline styling within DOM components in Expo?▼

Assets must be bundled alongside the component to ensure they load correctly inside the webview.

Does the use dom directive affect how a component renders on the web platform?▼

The directive only enables webview hosting on iOS and Android native platforms, and the dom prop used to configure the webview is ignored on web.

How do I configure scrolling and safe area handling for embedded web components in React Native?▼

You can also expose native functionality to the webview via async props.

What are the limitations of using webview-backed DOM components for React Native migration?▼

Complex native interactions are limited to async props passed from the native parent.

Related Skills

Explore More Software Engineering Skills→
RubixOwlRubixOwl

use-dom

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

Community
Intermediate
msichtermanmsichterman

use-dom

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

Community
Intermediate
MinhmiceMinhmice

use-dom

Integrate web React components in native and web apps with Expo DOM.

Community
Intermediate
TabTabGoTabTabGo

use-dom

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

Official
Intermediate