# Liquid Glass playground

> Set up an iOS 26 Liquid Glass button or view and copy the matching @expo/ui/swift-ui code for Expo SDK 57.

Web page: https://davidewins.com/glass

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

## How to use it

- **Element**: Button or View.
- **Button style** (buttons): `glass` or `glassProminent`. `buttonStyle()`. In @expo/ui it takes no variant or interactive option.
- **Variant** (views): `regular` or `clear`.
- **Interactive** (views): Reacts to touch on iOS.
- **Tint**: Off, Blue (#2563eb), Red (#ef4444), Amber (#f59e0b), Green (#16a34a).
- **Shape**: Capsule, Circle or Rounded rectangle.
- **Corner radius** (rounded rectangle): 0 to 32.

The page shows a preview. 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.

## 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 (the starting settings):

```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>
  )
}
```

GlassView.tsx (a regular, interactive, capsule view):

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

export function GlassView() {
  return (
    <Host matchContents>
      <Text
        modifiers={[
          padding({ horizontal: 24, vertical: 16 }),
          glassEffect({
            glass: { variant: 'regular', interactive: true },
            shape: 'capsule',
          }),
        ]}
      >
        Liquid Glass
      </Text>
    </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.

## Sources

- [Expo docs: SwiftUI components (SDK 57)](https://docs.expo.dev/versions/latest/sdk/ui/swift-ui/)
- [Expo docs: SwiftUI modifiers (SDK 57)](https://docs.expo.dev/versions/latest/sdk/ui/swift-ui/modifiers/)
- [expo-ui source: modifiers/index.ts (sdk-57 branch)](https://github.com/expo/expo/blob/sdk-57/packages/expo-ui/src/swift-ui/modifiers/index.ts)
- [expo-ui source: GlassEffectModifier.swift (sdk-57 branch)](https://github.com/expo/expo/blob/sdk-57/packages/expo-ui/ios/Modifiers/GlassEffectModifier.swift)
- [expo-ui source: ButtonBorderShapeModifier.swift (sdk-57 branch)](https://github.com/expo/expo/blob/sdk-57/packages/expo-ui/ios/Modifiers/ButtonBorderShapeModifier.swift)
- [Apple: glassEffect(_:in:)](https://developer.apple.com/documentation/swiftui/view/glasseffect(_:in:))
- [Apple: Glass](https://developer.apple.com/documentation/swiftui/glass)