skills.rest
bmiit145
bmiit145COMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-dom

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

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

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 platforms. 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 pass serializable props between native and web contexts. - Native-to-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 an Expo app without modification. - Use Case: You have an existing React web dashboard with recharts visualizations. Wrap the chart components as DOM components and embed them in your Expo app screens alongside native navigation, avoiding a full rewrite. ## Quick Start Use the expo-dom skill to convert my recharts-based chart component into an Expo DOM component and embed it in my app's home screen.

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 an Expo app?▼

Create a file with the 'use dom' directive at the top and a single default-exported React component. Import any web library like recharts or react-syntax-highlighter inside it, then render the component from native screens like a regular component.

How to pass data between React Native and a webview in Expo?▼

Pass serializable props (strings, numbers, booleans, arrays, plain objects) from the native parent to the DOM component. To expose native functionality, pass async functions as props that the webview code can await, such as triggering alerts or saving data.

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.

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, or in _layout route files which cannot be DOM components.

Why is my CSS not applying in an Expo DOM component?▼

DOM components run in an isolated webview context, so CSS imports must live in the DOM component file itself rather than global stylesheets. Alternatively use inline styles or CSS-in-JS defined within the component.

Related Skills

Explore More Software Engineering Skills→
danmaraudadanmarauda

haus-expo-patterns

Provide reusable Expo Router patterns, UI components, and design tokens for HAUS app screens.

Community
Intermediate
nghiahsgsnghiahsgs
32

expo-deployment

Deploy Expo React Native apps to app stores and web via EAS Build and Submit.

Community
Advanced
TechCorp25TechCorp25

use-dom

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

Community
Intermediate
bidahbidah
28

use-dom

Embed browser DOM components in React Native via isolated webviews.

Community
Intermediate