skills.vishalvoidskills/vishalvoid
Technical & DevelopmentIntermediate

use-dom

Run web code in a webview on native using DOM components

Developer Setup

Setup & Installation

bash
npx skills add https://github.com/expo/skills --skill use-dom

Overview

What This Skill Does

expo/use-dom lets you run React web components inside a webview on iOS and Android while rendering them natively on web. Add the 'use dom' directive to a file and it works with web-only libraries like recharts or react-syntax-highlighter without rewriting anything. Props passed from native code are serialized automatically, and async functions become a bridge between the webview and native APIs.

Application

When to use this Skill

Documentation

Show Skills.md file

What are DOM Components?

DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like recharts, react-syntax-highlighter, or any React web library in your Expo app without modification.

When to Use DOM Components

Use DOM components when you need:

  • Web-only libraries — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs
  • Migrating web code — Bring existing React web components to native without rewriting
  • Complex HTML/CSS layouts — When CSS features aren't available in React Native
  • iframes or embeds — Embedding external content that requires a browser context
  • Canvas or WebGL — Web graphics APIs not available natively

When NOT to Use DOM Components

Avoid DOM components when:

  • Native performance is critical — Webviews add overhead
  • Simple UI — React Native components are more efficient for basic layouts
  • Deep native integration — Use local modules instead for native APIs
  • Layout routes_layout files cannot be DOM components

Basic DOM Component

Lines 1 - 25 of 410

Recommendations

Explore other random skills

All skillsMy patterns