skills.rest
qbstabletampa-creator
qbstabletampa-creatorCOMMUNITY
Explore all skills by this author →
GitHub

use-dom

Implement Expo DOM components that run web code in native webviews.

Updated May 28, 2026
Search Tags:#React Native#Expo#cross-platform#WebView#web libraries#dom components#use dom
One-click install
npx skills add https://github.com/qbstabletampa-creator/firmware-foundation-studios --skill use-dom-qbstabletampa-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/qbstabletampa-creator/firmware-foundation-studios/tree/main/archive/apps/manna-catch/.agents/skills/use-dom
Command: npx skills add https://github.com/qbstabletampa-creator/firmware-foundation-studios --skill use-dom-qbstabletampa-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native apps cannot directly use web-only libraries like recharts or react-syntax-highlighter, forcing developers to rewrite existing React web components for native platforms. ## Core Features & Use Cases - DOM Component Creation: Build components with the 'use dom' directive that render in a webview on iOS/Android and as-is on web. - Native-Webview Bridge: Pass async function props to expose native actions like alerts and storage to the webview context. - Web Library Integration: Use any React web library (charts, syntax highlighters, rich text editors) inside an Expo app without modification. - Use Case: You need an interactive chart in your Expo app. Create a DOM component wrapping recharts, pass serializable data as props, and render it alongside native components. ## Quick Start Create an Expo DOM component that renders a recharts line chart from data passed by a native screen.

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 libraries like recharts in an Expo app?▼

Create a file with the 'use dom' directive at the top and a single default-exported React component. Import recharts normally inside that file, then render the component from native code with serializable props and a dom prop for sizing.

What are Expo DOM components and when should I use them?▼

Expo DOM components run web code in a webview on iOS and Android while rendering as-is on web. Use them for web-only libraries, complex CSS layouts, or migrating web code; avoid them when native performance is critical.

Can I use expo-router hooks inside DOM components?▼

Link and useRouter work inside DOM components, but useLocalSearchParams, usePathname, useSegments, and similar hooks do not because they need synchronous native routing state. Read those values in the native parent and pass them as props.

How do I call native code from an Expo DOM component?▼

Pass async functions as props from the native parent to the DOM component. The webview can await these functions to trigger native actions like alerts or storage writes and receive serializable return values.

What are the limitations of Expo DOM components?▼

DOM components require serializable props only, must be a single default export in their own file, and cannot be used as _layout routes. The webview runs an isolated JavaScript context, so state cannot be shared directly with native code.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

use-dom

Migrate web React code into Expo apps using DOM components rendered in native webviews.

Official
Intermediate
aadilmallickaadilmallick

expo-dom

Run web React code in native webviews using Expo DOM components.

Community
Intermediate
RubixOwlRubixOwl

use-dom

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

Community
Intermediate
expoexpo
2.4k

expo-dom

Execute React web code in Expo native webviews via the DOM module.

Official
Intermediate