skills.rest
CYRUS-pinto
CYRUS-pintoCOMMUNITY
Explore all skills by this author →
GitHub

expo-dom

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

Updated Sep 11, 2026
Search Tags:#react native#web migration#expo#expo-router#webview#web libraries#dom components
One-click install
npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-dom-cyrus-pinto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-dom
Source: https://github.com/CYRUS-pinto/pi-bot/tree/main/.agents/skills/expo-dom
Command: npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-dom-cyrus-pinto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native cannot render web-only libraries like recharts or react-syntax-highlighter, forcing developers to rewrite existing web components for native apps. This Skill guides you through using Expo DOM components to run web code verbatim in a webview on iOS and Android while rendering as-is on web. ## Core Features & Use Cases - DOM Component Creation: Build components with the 'use dom' directive, configure the dom prop for scrolling, safe areas, and sizing, and follow the rules for serializable props and single default exports. - Native-Web Bridge: Expose native actions like alerts and storage to the webview via async function props, and pass router state (params, pathname) from native parents into DOM components. - Web Library Integration: Use any React web library such as recharts or react-syntax-highlighter inside your Expo app without modification. - Use Case: You have an existing React web dashboard with recharts visualizations. Instead of rewriting charts natively, wrap them in DOM components and embed them directly in your Expo app's native screens. ## Quick Start Ask the AI to create an Expo DOM component that renders a recharts line chart inside a native screen, with the 'use dom' directive and a typed dom prop.

Frequently Asked Questions about expo-dom

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

FAQPage Schema
How do I create an Expo DOM component?▼

Create a new file with the 'use dom' directive at the top and a single default-exported React component. Include a dom prop typed as import("expo/dom").DOMProps, keep props serializable, and put any CSS imports in the same file since DOM components run in an isolated context.

How do I use web libraries like recharts in a React Native app?▼

Wrap the web library in an Expo DOM component with the 'use dom' directive. Libraries like recharts or react-syntax-highlighter then run in a webview on iOS and Android and render as-is on web, with no rewriting required.

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 down as props.

How do I call native functions from a webview in Expo?▼

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

When should I avoid using Expo DOM components?▼

Avoid DOM components when native performance is critical, the UI is simple, or you need deep native API integration, since webviews add overhead. They also cannot be used in _layout route files.

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
expoexpo
2.4k

expo-dom

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

Official
Intermediate
bmiit145bmiit145

expo-dom

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

Community
Intermediate
truongnattruongnat

react-native-native-modules

Bridge React Native JavaScript to iOS and Android native code with Promise-based APIs.

Community
Intermediate