Bacon describes Expo as a way to start with web code and add native features as a product grows. DOM components let teams render a component tree in a WebView, while React Server Components help fetch and prepare data. He argues that developers can improve individual components over time instead of rebuilding an entire app.
Evan Bacon on Universal React Native Apps, DOM & React Server Components
Speakers
Evan Bacon, creator of Expo Router and engineering manager for Expo’s developer tools team, discusses universal React Native apps, DOM components, and React Server Components with host Łukasz Kinski on Callstack’s React Universe On Air.
The `use dom` directive marks a component for rendering in an embedded WebView, with Metro and Expo’s universal tooling handling the web and native sides. Props go into the component, and callbacks can send events back to the native app with TypeScript support. Bacon recommends a regular WebView for loading a separately deployed website, since it cannot use the same built-in messaging.
Bacon says teams can bring an existing Expo web app to native and then choose which parts to optimize as native components. DOM components can suit content such as Markdown or complex D3 visualizations, while frequently used screens may benefit from native performance. He gives an example of putting a web page inside a DOM component and adding a widget that displays TestFlight review times.
Expo’s developer preview supports incremental adoption: an existing client app can add server functions and render their results progressively. Bacon explains that data rendered at build time can be embedded in the app, reducing repeated requests and making content available offline. Runtime server functions can still fetch newer data, with loading and error states handled through Suspense and error boundaries.
Expo builds a client bundle for the app and a JavaScript server bundle that can run through `npx expo serve` or a deployment provider. Bacon says Expo Router practices, including file-based routing and error boundaries, are useful preparation for server features. He suggests server-rendered content could let large apps download less-used screens on demand, though he says the preview is not ready for production.
Takeaways
- Start with the code and skills your team already has, then upgrade individual components as needs become clear.
- Use DOM components for web experiences that are costly to recreate natively, and consider native code for performance-sensitive screens.
- Build-time rendering can embed stable content in an app and reduce runtime requests.
- Server functions can move platform-sensitive or server-dependent work out of a mobile client.
- Treat Expo’s React Server Components support as a developer preview, and use Expo Router to align with its current direction.
Mentioned in this talk
Search inside this talk
What was claimed 16
- builtEvan Bacon built Expo Router
“I’m Evan Bacon, the creator of Expo Router”
YouTube Verified2 sources· Talk
- role atEvan Bacon is engineering manager for the developer tools team at Expo
“I’m also the engineering manager for the developer tools team”
YouTube Unverified1 source· Talk
- integrates withExpo DOM Components integrates with WebView
“render everything inside that component and below in a web view”
YouTube Unverified1 source· Talk
- featureExpo DOM Components: Renders a component and its descendants in a WebView when marked with the “use dom” directive.
“What it enables you to do is render everything inside that component and below in a web view.”
YouTube Unverified1 source· Talk
- uses
“We went all in on Metro, Meta’s bundler”
YouTube Unverified1 source· Talk
- featureExpo DOM Components: Supports typed props from native code and top-level functions for sending events back to the native app.
“To send data to the DOM component, you can pass props”
YouTube Unverified1 source· Talk
- featureExpo Router: Uses native navigation when navigating from DOM Components.
“If you navigate through Expo Router, that bubbles up to the native router”
YouTube Unverified1 source· Talk
- integrates withExpo Router integrates with Expo DOM Components
“with DOM components in Expo Router”
YouTube Unverified1 source· Talk
- metricExpo DOM Components: WebView was the fourth most-used native API in the React Native survey.
“WebView was the fourth most-used native API”
YouTube Unverified1 source· Talk
- metricExpo DOM Components: Built in a week or two by Evan Bacon and Kudo Chinn.
“I built DOM components with Kudo Chinn; it was a pretty small investment, and it only took a week or two.”
YouTube Unverified1 source· Talk
- featureExpo: Expo Server Components support can render eligible content at build time and embed it in the app binary.
“every RSC ... that can be rendered at build time will be rendered and put into the binary”
YouTube Unverified1 source· Talk
- featureExpo: Server functions only mode enables incremental adoption by adding marked server functions to an otherwise client-side app.
“You can have your entire app as a client app, an SPA style app, just like today.”
YouTube Unverified1 source· Talk
- featureExpo: Server bundles are JavaScript Node servers optimized for the Cloudflare Workers runtime.
“It optimizes it for the Cloudflare Workers runtime”
YouTube Unverified1 source· Talk
- featureExpo: Provides the npx expo serve command to run a local server for an app’s server bundle.
“You can run the server with the new npx expo serve command”
YouTube Unverified1 source· Talk
- integrates withExpo Server Components developer preview integrates with Expo API Routes
“Behind the scenes, it builds on top of API Routes”
YouTube Unverified1 source· Talk
- featureExpo Server Components developer preview: Supports loading and error handling around async server functions using Suspense and route error boundaries.
“You get fine-grained control over how the server works.”
YouTube Unverified1 source· Talk
