Web Once, Native Everywhere: Introducing Expo DOM Components

Bacon says web deployment can reach users in seconds, while beta app approval can take 5 to 15 hours. Expo Router uses file-based routing and familiar web APIs across web and native, while supporting native navigation primitives and server rendering work in progress.

Bacon demonstrates taking a shadcn/ui website and opening it in an Expo app. Adding the `use dom` directive renders web code in a WebView, while developers can gradually replace surrounding parts with native tabs, stacks, headers, and search controls. A native callback can connect a web button to an iOS notification API.

Expo Atlas shows the native and web bundles created for the project and how a DOM component is represented in each. Bacon notes that WebViews must parse and compile JavaScript on the device, which can delay content after native navigation appears. Moving the initial route to native can improve startup incrementally.

Expo CLI reuses bundler configuration across platforms, including aliases and optimizations. Bacon previews experimental tree shaking planned for SDK 52, showing an example with an 87% bundle reduction and reporting early beta results generally around 20% to 30%.

Bacon shows DOM Components used for Markdown, syntax highlighting, React Flow diagrams, image cropping, Three.js scenes, and rich text editing. He describes keeping individual components in a native screen while replacing other parts with native views. He says the feature is aimed at moving existing websites toward native, and advises against replacing an already native app with web content.