use-dom

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, keep props serializable, and include any CSS imports inside the component file since it runs in an isolated context.

Wrap the web library in an Expo DOM component with the 'use dom' directive. The component runs in a webview on iOS and Android and renders as-is on web, so libraries like recharts or react-syntax-highlighter work without modification.

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.

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 to storage, or return results back to the web context.

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 a separate JavaScript context.