skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

expo-dom

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

Updated Mar 27, 2026
Search Tags:#mobile#Expo#react-native#web migration#WebView#dom components#use dom
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-dom-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-dom
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-dom
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-dom-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native apps cannot directly use web-only libraries like recharts or react-syntax-highlighter, forcing costly rewrites when migrating web code to native. 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-Webview Bridge: Expose native actions like alerts and storage to the webview via async function props, and pass router state (params, pathname) from native parents since hooks like useLocalSearchParams don't work inside DOM components. - Web Library Integration: Use any React web library (charts, syntax highlighters, rich text editors) inside your Expo app without modification. - Use Case: You have an existing React web dashboard built with recharts. Instead of rewriting it with a native charting library, wrap it in a DOM component and embed it directly in your Expo app's native screens. ## Quick Start Use the expo-dom skill to convert my recharts-based web chart component into an Expo DOM component that runs inside my native app.

Frequently Asked Questions about expo-dom

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

FAQPage Schema
How do I use web React libraries in a React Native app?▼

Create an Expo DOM component by adding the 'use dom' directive at the top of a file with a single default-exported React component. The component runs in a webview on native platforms, so libraries like recharts or react-syntax-highlighter work without modification.

How to migrate React web components to Expo incrementally?▼

Wrap existing web components as DOM components with the 'use dom' directive and embed them alongside native components in your screens. For migrating an entire web app end-to-end, use the expo-web-to-native skill instead.

Does useLocalSearchParams work inside Expo DOM components?▼

No. Hooks like useLocalSearchParams, usePathname, and useSegments require synchronous access to native routing state and fail in DOM components. Read these values in the native parent screen and pass them down as props.

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, when deep native API integration is needed, and in _layout route files, which cannot be DOM components.

How do DOM components communicate with native code?▼

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 data saving and receive serialized return values.

Related Skills

Explore More Software Engineering Skills→
muhammaddadumuhammaddadu
1

building-native-ui

Build native iOS and Android app interfaces with Expo Router, Reanimated, and platform-native components.

Community
Advanced
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
bidahbidah
28

use-dom

Embed browser DOM components in React Native via isolated webviews.

Community
Intermediate