Integrating iOS 26 Liquid Glass app with Expo UI and SwiftUI

Expo UI brings modern native UI frameworks into React Native. Instead of re-implementing components, it exposes SwiftUI on iOS and Jetpack Compose on Android. This isn’t a new design system, it's a direct integration with platform primitives, so you can write SwiftUI and Jetpack Compose with the React model you already know.

Apple and Google are moving fast: some views are only available in SwiftUI or Jetpack Compose - not UIKit or legacy views. For example, iOS’s Gauge exists only in SwiftUI. If you want access to modern platform primitives and design language, you need SwiftUI/Jetpack Compose.

SwiftUI also provides powerful built-in containers that make it easy to implement complex UIs quickly and correctly. A good example is Form. In SwiftUI, a Form automatically handles layout, spacing, and platform-correct styling for controls. With Expo UI, you can more easily write an iOS Settings-like UI.

iOS Settings like UI

<Host style={{ flex: 1 }}>
  <Form>
    <Section title="My form section">
      <Text size={17}>
        Some text!
      </Text>
      <Button onPress={() => alert('Clicked!')}>
        I'm a button
      </Button>
      <Switch
        value={switchValue}
        label="This is a switch"
        onValueChange={setSwitchValue}
      />
    </Section>
  </Form>
</Host>

<View style={{ flex: 1, backgroundColor: '#F2F2F7', padding: 16 }}>
  <Text
    style={{
      fontSize: 12,
      fontWeight: '500',
      color: '#8E8E93',
      marginBottom: 12,
      paddingLeft: 12,
    }}>
    My form Section
  </Text>

  <View style={{ backgroundColor: '#FFFFFF', borderRadius: 10, overflow: 'hidden' }}>
    <View
      style={{
        paddingHorizontal: 16,
        paddingVertical: 12,
        minHeight: 44,
        justifyContent: 'center',
      }}>
      <Text style={{ fontSize: 17, color: '#000000' }}>Some text!</Text>
    </View>

    <View
      style={{
        height: StyleSheet.hairlineWidth,
        backgroundColor: '#C6C6C8',
        marginLeft: 16,
      }}
    />

    <TouchableOpacity
      style={{
        paddingHorizontal: 16,
        paddingVertical: 12,
        minHeight: 44,
        justifyContent: 'center',
      }}
      onPress={() => alert('Clicked!')}>
      <Text style={{ fontSize: 17, color: '#007AFF', fontWeight: '400' }}>
        I'm a button
      </Text>
    </TouchableOpacity>

    <View
      style={{
        height: StyleSheet.hairlineWidth,
        backgroundColor: '#C6C6C8',
        marginLeft: 16,
      }}
    />

    <View
      style={{
        paddingHorizontal: 16,
        paddingVertical: 8,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
      <Text style={{ fontSize: 17, color: '#000000' }}>
        This is a switch
      </Text>
      <Switch
        value={switchValue}
        onValueChange={setSwitchValue}
        trackColor={{ false: '#E5E5EA', true: '#34C759' }}
        thumbColor="#FFFFFF"
      />
    </View>
  </View>
</View>

Another example: iOS 26 introduced the glassEffect modifier to bring the Liquid Glass effect into most SwiftUI views. With Expo UI, you can apply the modifier to get Liquid Glass support. With GlassEffectContainer and transition animation, fancy Liquid Glass effect as the Apple’s example is also feasible. Learn more from expo#39070.

UIKit, on the other hand, requires you to re-implement UIGlassEffect manually across all views, whereas modern primitives provide these capabilities out of the box.

💡 If you need UIGlassEffect backed React Native <View>, we also introduce an opt-in package for you. Learn more about expo-glass-effect.

We also believe migration should be incremental. With Expo UI, you don’t need to rewrite your entire app, and we’re not introducing a new React Native platform. Instead, SwiftUI/Jetpack Compose can live alongside your existing React Native components, starting small and growing over time.

We first introduced Expo UI in SDK 53 focused on child-only components like Button, Slider, and Switch. As we went deeper into SwiftUI, it became clear that we needed to support more than leaf nodes — container views like Form and List are essential.

In SDK 54, we made several key updates:

• Explicit <Host> container: Expo UI now uses a <Host> component as the root SwiftUI container. This makes usage clearer and more consistent — similar to <svg> for DOM or <Canvas> for react-native-skia. Learn more about <Host>
• SwiftUI-first focus: While Jetpack Compose support is planned, our priority is to build a strong foundation on SwiftUI.
• Modifiers for flexible styling: SwiftUI’s power comes from modifiers, and Expo UI now supports them. This makes styling just as easy and composable as in SwiftUI itself. For example, the glassEffect modifier works out of the box, bringing iOS 26’s Liquid Glass visuals into your app.

import { Host, Text } from '@expo/ui/swift-ui';
import { glassEffect, padding } from '@expo/ui/swift-ui/modifiers';

export function Example() {
  return (
    <Host matchContents>
      <Text
        modifiers={[
          padding({
            all: 16,
          }),
          glassEffect({
            glass: {
              variant: 'regular',
            },
          }),
        ]}>
        Glass effect - regular
      </Text>
    </Host>
  );
}

• Full-app support: With SDK 54, it's now possible to build a complete app using Expo UI primitives — not just small demos.
• 1-to-1 mapping with SwiftUI: Every SwiftUI primitive should have a direct counterpart in Expo UI. Adding new components is straightforward, and we welcome community contributions to expand coverage.

Here are some example projects showcasing Expo UI capabilities:

• Hot Chocolate — a full app built entirely with Expo UI primitives. It replicates the YVR Hot Chocolate Fest app, demonstrating forms and layout.
• ExpoUITV — a TV interface built with Expo UI, showing how SwiftUI-style patterns extend beyond mobile.

These examples demonstrate that Expo UI is ready for building complete apps with modern native primitives.

Expo UI is still evolving, and development is progressing incrementally. That means APIs may continue to change as we expand coverage and refine the developer experience. For the latest updates, you can follow along in the Native Component List, which always reflects the most up-to-date usage.

Here's what’s on the horizon:

• More views - upcoming support for primitives like ZStack, LazyHStack, and LazyVStack. For inspiration, check out resources like Explore SwiftUI and Libraried app.
• Jetpack Compose support - while Expo UI has focused on SwiftUI first, Jetpack Compose is planned to bring the same modern primitives to Android.

We’re building this step by step, and contributions from the community will help us grow faster.

Our goal with Expo UI is to bring modern native UI primitives (SwiftUI and Jetpack Compose) into Expo and React Native.

Expo is flexible enough to support the different design philosophies we see in apps today:

• Some teams want to fully embrace platform-native experiences.
• Others aim for pixel-perfect custom UI across platforms.
• Many prioritize maximum code sharing between iOS, Android, and Web.

Expo is a great fit for all of these approaches because you can choose the right tool for each part of your app:

• Use React Native View/Text for cross-platform consistency.
• Use Expo UI for maximum native fidelity.
• Use react-native-skia when you want to draw everything yourself.
• Use react-native-webgpu when adding 3D experiences.
• Use use dom for seamless integration with the web ecosystem (e.g. shadcn).

Most importantly, these options integrate at the component level. You can mix and match React Native, Expo UI, Skia, WebGPU, and DOM components in the same app — creating experiences that are both universal and deeply native.

Learn more about using Expo UI in your project

• Can I use flexbox or other styles in SwiftUI components?
  • Flexbox styles can be applied to the <Host> component itself. Once you’re inside the SwiftUI context, however, Yoga is not available — layouts should be defined using HStack and VStack instead.
• What’s the <Host> component?
  • <Host> is the container for SwiftUI views. You can think of it like <svg> in the DOM or <Canvas> in react-native-skia. Under the hood, it uses UIHostingController to render SwiftUI views in UIKit.
• How is Expo UI different from libraries like react-native-paper or react-native-elements?
  • Expo UI is not “yet another” UI library and not an opinionated design kit. Instead, it’s a primitives library. It exposes native SwiftUI and Jetpack Compose components directly to JavaScript, rather than re-implementing or simulating UI in JavaScript.
• Can I use @expo/ui/swift-ui on Android or Web?
  • The first milestone for Expo UI is achieving a 1-to-1 mapping from SwiftUI to Expo UI. Universal support will come in the next stage of the roadmap. Our priority is to establish strong SwiftUI support first, and then expand to Jetpack Compose on Android and DOM support on the Web.
• Can I use React Native components inside SwiftUI components?
  • Yes. You can place React Native components as JSX children of Expo UI components. Expo UI automatically creates a UIViewRepresentable wrapper for you. However, keep in mind that the SwiftUI layout system works differently from UIKit and has some limitations. According to Apple’s documentation:

  • Warning
    SwiftUI fully controls the layout of the UIKit view’s center, bounds, frame, and transform properties. Don’t directly set these layout-related properties on the view managed by a UIViewRepresentable instance from your own code because that conflicts with SwiftUI and results in undefined behavior.

  • Also note that once you render React Native components, you’re leaving the SwiftUI context. If you want to add Expo UI components again, you’ll need to reintroduce a <Host> wrapper. We recommend keeping SwiftUI layouts self-contained. Interop is possible, but it works best when boundaries are clearly defined.
• I’m a SwiftUI developer. Why should I learn Expo UI?
  • Because React’s promise of “learn once, write anywhere”, it now extends to SwiftUI and Jetpack Compose. With Expo UI, you can apply your SwiftUI knowledge to build apps that run in the React Native ecosystem, extend to the Web through DOM components, and even integrate 2D and 3D rendering. The system is flexible enough that different parts of your app can use different approaches — giving you seamless integration at the component level.

Expo UI is a community effort and many people have contributed to the project. We’d like to thank the external contributors (in no particular order!): Andrew Levy, Benjamin Komen, Jacob Clausen (who recently joined us at Expo!), Jakov Glavina, Gregory Moskaliuk, Janic Duplessis, Mateo Guzmán, Petr Chalupa, Pflaumenbaum, Ramon, and Daniel Reichhart.