skills.rest
sombek
sombekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-dom

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

Updated Sep 6, 2026
Search Tags:#react native#web migration#expo#expo-router#webview#dom components#use dom
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-dom-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-dom
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/expo-dom
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-dom-sombek

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, sizing, and safe-area behavior, and follow the rules for serializable props and single default exports. - Native-to-Web Bridge: Expose native actions like alerts and storage to the webview by passing async functions as 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 screens. ## Quick Start Use the expo-dom skill to convert my recharts-based web chart component into an Expo DOM component that I can render inside my native app screen.

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. Type the special dom prop as import("expo/dom").DOMProps, then import and render the component from native screens like any other component.

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

Wrap the web library usage in an Expo DOM component with the 'use dom' directive. Libraries such as recharts or react-syntax-highlighter run verbatim in the webview on native and render as-is on web without modification.

Can DOM components use expo-router hooks like useLocalSearchParams?▼

Hooks like useLocalSearchParams, usePathname, useSegments, and useRootNavigation do not work directly inside DOM components because they need synchronous native routing state. Read these values in the native parent and pass them down as props.

How do I call native code from a DOM component webview?▼

Pass async functions as props from the native parent into the DOM component. The webview can await these functions to trigger native alerts, save data to native storage, and receive typed return values.

When should I avoid using Expo DOM components?▼

Avoid DOM components when native performance is critical, for simple UI that React Native handles more efficiently, for deep native API integration, and in _layout route files which cannot be DOM components.

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
Intelligent-InternetIntelligent-Internet
3.4k

use-dom

Run web React code inside Expo native apps using DOM components and webviews.

Official
Intermediate
aadilmallickaadilmallick

expo-dom

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

Community
Intermediate
expoexpo
2.4k

expo-dom

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

Official
Intermediate