skills.rest
aadilmallick
aadilmallickCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-dom

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native cannot run web-only libraries like recharts, react-syntax-highlighter, or rich text editors, forcing developers to rewrite existing web components from scratch. This Skill guides you through using Expo DOM components to run web code verbatim in a webview on iOS and Android while rendering it as-is on web. ## Core Features & Use Cases - DOM Component Creation: Add the 'use dom' directive to a file with a single default export to render web React code inside a native webview. - Native-to-Web Bridge: Pass async functions as props to expose native actions like alerts or storage to the webview, and configure the webview via the dom prop (scrollEnabled, contentInsetAdjustmentBehavior, style). - Web Library Integration: Use libraries like recharts or react-syntax-highlighter directly, with CSS imported inside the component file since DOM components run in an isolated context. - Use Case: You have an existing analytics dashboard built with recharts for the web. Wrap it in a DOM component and embed it in your Expo app alongside native screens without rewriting the charting logic. ## Quick Start Use the expo-dom skill to create a DOM component that renders my recharts line chart inside my Expo 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 dom prop as import("expo/dom").DOMProps, then import and render the component from any native screen like a regular component.

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

Wrap the web library in an Expo DOM component by adding 'use dom' at the top of the file. The component runs in a webview on iOS and Android and renders as-is on web, so libraries depending on DOM APIs work without modification.

Can DOM components use expo-router navigation hooks?▼

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 code from a DOM component webview?▼

Pass async functions as props from the native parent to the DOM component. The webview can await these functions to trigger native alerts, save data, or interact with native APIs, and receive their 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. Webviews add overhead and run in an isolated JavaScript context.

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
1natsu1721natsu172
1

use-dom

Run web-centric React components in a WebView across iOS, Android, and Web.

Community
Intermediate
apostolos-geyerapostolos-geyer

use-dom

Run web-based React components inside Expo native apps via webview.

Community
Intermediate