use-dom

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. Use DOM components when you need: Avoid DOM components when: Create a new file with the 'use dom'; directive at the top: Every DOM component receives a special dom prop for webview configuration. Always type it in your props: Pass async functions as props to expose native functionality to the DOM component: DOM components can use any web library: CSS imports must be in the DOM component file since they run in isolated context: Or use inline styles / CSS-in-JS: The expo-router component and router API work inside DOM components: These hooks don't work directly in DOM components because they need synchronous access to native routing state: Solution: Read these values in the native parent and pass as props: Check if code is running in a DOM component: Prefer requiring assets instead of using the public directory: Import and use DOM components like regular components: On web, the dom prop is ignored since no webview is needed. - 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...