Discussion on: Solito 5 is now web-first (but still unifies NextJS and React Native)

View post

> but Expo allows some HTML components now doesn’t it?

You’ve raised an excellent point! Let’s explore whether Expo allows the use of HTML components in React Native apps, especially in the context of Solito 5 (released October 21, 2025), and how this might relate to your question about using "web stuff" on native with Solito. Given the current date and time—04:11 PM CEST on Wednesday, October 22, 2025—I’ll incorporate the latest developments based on available documentation and the X posts provided.

Expo and HTML Components: The Current State

Expo has indeed introduced capabilities that allow some level of HTML or web-like behavior in React Native apps, particularly with recent updates to its SDK (e.g., SDK 52 and later, with Solito 5 supporting Expo SDK 54). Let’s break this down:

Expo’s `use dom` Directive

Introduction: As noted in the Expo Documentation (e.g., Using React DOM in Expo native apps), Expo introduced the use dom directive starting with SDK 52. This allows developers to render React DOM components (e.g., <div>, <p>, <img>) within a native app by leveraging a novel approach to integrate web code.
How It Works: The use dom directive enables incremental migration of web components into a React Native app. DOM components are rendered as regular components within a native context, often using a WebView or similar mechanism to pass raw HTML. However, this is not a full DOM environment—web content is passed directly through (not wrapped in an iframe), and the behavior is experimental and flakey, with potential deprecation in future React versions.
Limitations:
- Native primitives like <View>, <Image>, and <Text> are recommended over DOM elements for performance and consistency.
- Web-specific APIs (e.g., window, browser events) are not natively supported unless polyfilled.
- The system shares similarities with React Server Components but is not a complete replacement for web rendering.

Expo SDK 54 and Solito 5

The target post for Solito 5 mentions support for Expo SDK 54, which builds on these advancements. However, Solito 5’s web-first approach and the drop of react-native-web as a dependency suggest it prioritizes native compatibility without forcing web rendering on native.
The release notes (post 1980785627936543142) don’t explicitly mention use dom or HTML components, focusing instead on navigation, file structure changes (e.g., .native.tsx), and breaking changes like dropping TextLink defaults. This indicates Solito 5 is not designed to leverage Expo’s HTML capabilities directly.

WebView as a Fallback

Expo supports the WebView component (via expo-webview), allowing you to render HTML content within a native app. This is a traditional approach to embed web "stuff" (e.g., a webpage or custom HTML) on native, but it’s isolated from the React Native component tree and doesn’t integrate seamlessly with Solito’s navigation or shared logic.

Can You Use Web Stuff on Native with Solito Using Expo’s HTML Support?

Let’s connect this to your original question about using Solito to bring web stuff to native:

Direct Use with Solito 5

No Built-In Support: Solito 5 does not natively integrate Expo’s use dom or WebView to render HTML components on native. Its design focuses on sharing navigation and logic, with platform-specific files (e.g., .native.tsx) handling native implementations. The web-first shift means web logic (e.g., Next.js components) is isolated to the web, and native logic is isolated to React Native.
File Separation: As per the breaking changes (post 1980785627936543142), Solito 5 uses .native.tsx for native code, which won’t include web-specific HTML or DOM elements unless you manually bridge them.

Workarounds Using Expo’s Capabilities

You can leverage Expo’s HTML support alongside Solito, but it requires explicit integration:

Using use dom with Solito:

You could experiment with the use dom directive in a Solito project by adding it to a shared component. For example:

 // shared/MyComponent.tsx
 /** @jsxImportSource react */
 export const MyComponent = () => {
   if (process.env.EXPO_USE_DOM) {
     return <div style={{ color: 'red' }}>Web Stuff!</div>;
   }
   return <Text style={{ color: 'red' }}>Native Stuff!</Text>;
 };

This requires enabling use dom in your Expo config and testing its behavior, but it’s not a core part of Solito’s workflow. The flakiness noted in Expo docs suggests caution.

Embedding WebView:

Use expo-webview to render HTML within a Solito native screen:

 // app/native/screens/WebScreen.native.tsx
 import { WebView } from 'expo-webview';
 import { View } from 'react-native';

 export default function WebScreen() {
   return (
     <View style={{ flex: 1 }}>
       <WebView source={{ html: '<h1>Hello from Web!</h1>' }} />
     </View>
   );
 }

This isolates the web content and doesn’t integrate with Solito’s navigation API (e.g., <Link> or <Stack>), so you’d need custom bridging.

Shared Logic with Conditional Fallbacks:

Abstract web and native rendering in a Solito component:

 import { Platform } from 'react-native';
 import { WebView } from 'expo-webview';

 export const HybridComponent = ({ htmlContent }) => {
   if (Platform.OS === 'web') {
     return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
   }
   return <WebView source={{ html: htmlContent }} style={{ flex: 1 }} />;
 };

Use this in both web and native contexts within a Solito app, though performance and interactivity may differ.

Challenges

Inconsistency: Expo’s HTML support is not a full DOM implementation, so complex web features (e.g., CSS animations, JavaScript events) may not translate well to native.
Maintenance: Manually integrating use dom or WebView with Solito adds complexity, potentially conflicting with its goal of simplifying cross-platform development.
Solito’s Philosophy: The web-first shift in Solito 5 suggests a move away from forcing web rendering on native, aligning with Expo’s recommendation to use native primitives (View, Text) for optimal performance.

Comparison to Traditional React Native

Traditionally, React Native (and by extension Expo) does not support HTML or CSS natively, as noted in the FAQ from Expo Documentation: "React Native does not support HTML or CSS. Instead of using the DOM, React Native uses native components" (e.g., <View> instead of <div>). The use dom feature is an exception, but it’s an experimental bridge, not a replacement for native components.

Practical Implications with Solito 5

Web to Native: If you want to use web "stuff" (e.g., HTML components) on native with Solito, you’d need to rely on use dom or WebView outside Solito’s core framework. Solito facilitates sharing navigation and logic, but the rendering of HTML would be a separate implementation.
Native to Web: Conversely, Solito 5 drops react-native-web, so native components (e.g., View, Text) won’t render on the web unless you reintroduce that dependency, which isn’t recommended.

Conclusion

Yes, Expo now allows some HTML components via the use dom directive (SDK 52+) or WebView, but this is not a core feature of Solito 5. You can use these Expo capabilities alongside Solito to bring web-like behavior to native, but it requires manual integration and workarounds (e.g., conditional rendering, WebView embedding). Solito itself is designed to unify development experience and navigation, not to enable direct web-to-native or native-to-web component rendering. For optimal use, stick to native primitives on native and web standards on web, using Solito to bridge the logic gap.