Liquid Glass playground

Set up a glass button or a glass view, then copy the @expo/ui/swift-ui code for it. Written against Expo SDK 57.

This preview is a browser approximation of iOS 26 Liquid Glass, made with CSS blur. The real effect bends light and reacts to touch in ways a browser can't draw, so check it on a device. Press and hold to see the press state.

Element
Button style
buttonStyle(). In @expo/ui it takes no variant or interactive option.
Tint
Shape

Code

Install with npx expo install @expo/ui. Needs iOS 26 and Xcode 26. On older iOS versions the glass modifiers fall back: glassEffect leaves the view as it is and glass button styles become the default style.

GlassButton.tsx

import { Button, Host } from '@expo/ui/swift-ui'
import { buttonBorderShape, buttonStyle } from '@expo/ui/swift-ui/modifiers'

export function GlassButton({ onPress }: { onPress: () => void }) {
  return (
    <Host matchContents>
      <Button
        label="Continue"
        onPress={onPress}
        modifiers={[
          buttonStyle('glass'),
          buttonBorderShape('capsule'),
        ]}
      />
    </Host>
  )
}

How the controls map to the API

Button
buttonStyle('glass') or buttonStyle('glassProminent'), shaped with buttonBorderShape(shape, cornerRadius) and coloured with tint(color). The corner radius is only used with a rounded rectangle.
View
glassEffect({ glass: { variant, interactive, tint }, shape, cornerRadius }) on any view. Put padding or frame before it so the glass has room around the content. The shape defaults to a capsule.
Left out
The API also has an identity variant (no glass) and rectangle, ellipse and container relative shapes. I left them out to keep this to the controls people reach for.

Liquid Glass playground

Code

How the controls map to the API

Sources