Liquid Glass for app teams: what to adopt, what to leave alone

Apple introduced Liquid Glass on 9 June 2025, a redesign spanning iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26 at once. A year on, the novelty has gone and the work is still there. Most teams we talk to have rebuilt with the new SDK, seen their tab bar change shape, and are now deciding how far to go.

This is our view after a year of shipping with it: adopt the system's structure, don't paint glass on everything, and keep your brand in your content. Below is what changed, what the deadline really is, and how we handle it in native and React Native apps.

What Liquid Glass actually is

Liquid Glass is a material, not a theme. Apple describes it as translucent, behaving "like glass in the real world", with its colour informed by the content around it. It is used for one layer of the interface: the controls and navigation that sit above your content.

That last point matters more than the visual effect. Apple's Adopting Liquid Glass guide says Liquid Glass "applies to the topmost layer of the interface, where you define your navigation", and that tab bars and sidebars float in that layer so people focus on the content underneath. The redesign is really a statement about hierarchy: content at the bottom, a thin functional layer on top.

• Tab bars and toolbars float above content instead of sitting in a solid strip at the edge of the screen.
• Controls change shape when touched. The knob of a slider or toggle turns into glass while you drag it, and buttons can morph into menus and popovers.
• Shapes follow the hardware. Corners of controls, sheets and popovers are meant to be concentric with the rounded corners of the device or window.
• Scroll edge effects fade or blur content as it scrolls under a bar, so labels on top stay readable.
• App icons are built from layers, and the system adds reflection, refraction, shadow and highlights on top.

What you get for free, and what you don't

If your app uses standard SwiftUI, UIKit or AppKit components, rebuilding with the new SDK is most of the adoption. Apple's guide is explicit: standard bars, sheets, popovers and controls pick up the material automatically, and they adapt to overlap and focus without extra code.

The trouble starts where teams customised. A tab bar with a painted background, a toolbar with a brand-coloured strip, hard-coded control heights, or a custom navigation header will either look wrong or fight the system's own effects. Apple's advice is to remove custom backgrounds from bars and controls and let the system decide.

// A standard SwiftUI tab view adopts Liquid Glass when built with the new SDK.
TabView {
    Tab("Today", systemImage: "sun.max") { TodayView() }
    Tab("Library", systemImage: "books.vertical") { LibraryView() }
    Tab("Search", systemImage: "magnifyingglass", role: .search) { SearchView() }
}

// For your own primary action, use the system glass style
// instead of drawing your own blur.
Button("Start session") { start() }
    .buttonStyle(.glassProminent)

The opt-out key is temporary, and it ends with the iOS 27 SDK

Apple gave teams one escape hatch: the UIDesignRequiresCompatibility Info.plist key. Set to YES, the app runs in a compatibility mode and looks as it did when built against earlier SDKs.

<key>UIDesignRequiresCompatibility</key>
<true/>

Apple's documentation for the key carries a warning to use it only "temporarily" while you review your UI. It now also states that the system ignores the key when you build for iOS 27 or later, and the same for iPadOS, Mac Catalyst, macOS and tvOS 27.

An Apple engineer clarified on the developer forums what "build for" means: linking against the iOS 27 SDK. An app still linked against the iOS 26 SDK keeps the old look even on an iOS 27 device. So the key does not switch off on a date. It switches off the day you move your project to the new Xcode, and Apple requires new submissions to use a current SDK.

What changed with iOS 27

At WWDC in June 2026, Apple announced iOS 27 with refinements rather than a reversal. The newsroom announcement describes a new slider in Settings that lets people set Liquid Glass anywhere from ultra-clear to fully tinted, and app icons that are sharper and more defined. On the Mac, Apple brought back a more uniform toolbar across the top of apps, edge-to-edge sidebars and coloured sidebar icons.

For app teams, the slider is the important part. You no longer design for one level of transparency. The same tab bar will be nearly clear on one person's phone and almost solid on another's. A screen that only works at one setting is not finished.

Legibility is now your job too

Early iOS 26 builds were widely criticised for text that was hard to read over busy backgrounds, and Apple has since added more control over the effect. The system has improved, but it cannot fix content it doesn't control: your photo behind a floating bar, your thin white label on a glass button, your brand colour used as a tint.

Apple's guide tells teams to test with different display and accessibility settings, because people can choose a preferred look for Liquid Glass or turn on settings that reduce transparency or motion, and those settings remove or change effects. In practice we check every key screen under four conditions:

1. The default look, over the busiest content you have (photos, video thumbnails, maps).
2. Fully tinted, which iOS 27 now offers as one end of the slider.
3. Reduce Transparency on (Settings > Accessibility > Display & Text Size). Glass becomes frosted or solid.
4. Increase Contrast on, in light and dark mode. Colours you defined need an increased-contrast variant, as Apple's guide asks.

Text contrast targets don't change because the background is glass. Body text still needs 4.5:1 against what is actually behind it, and that background now moves. If a label can't meet that over your own content, the label needs a stronger treatment, or the content needs a scroll edge effect behind it.

React Native and Expo apps

Cross-platform apps fall into two groups. If your navigation uses the platform's native components, you get Liquid Glass the same way a Swift app does. If your tab bar is drawn in JavaScript, nothing changes: it stays a flat custom view next to system sheets and alerts that now look different.

Expo Router's native tabs render the system tab bar, and on iOS 26 the system draws it with Liquid Glass. For a floating button or card that should use the material, the expo-glass-effect package wraps the native effect in GlassView. It only renders glass on iOS 26 and later and falls back to a plain View elsewhere, including Android.

import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { View } from 'react-native';

export function PlayerBar({ children }) {
  // Glass on iOS 26+, a solid branded surface everywhere else.
  if (isLiquidGlassAvailable()) {
    return <GlassView style={styles.bar}>{children}</GlassView>;
  }
  return <View style={[styles.bar, styles.solid]}>{children}</View>;
}

Two cautions from Expo's docs are worth repeating. isLiquidGlassAvailable() can be true even when the user has limited the effect through accessibility settings, so check AccessibilityInfo.isReduceTransparencyEnabled() if your layout depends on seeing through the bar. And don't fade a GlassView with opacity below 1; animate a wrapper instead.

Android is the bigger design question. Do not port glass to Android to match iOS. Android users expect Material, and a fake blur on a mid-range phone costs frames and battery. We design one structure (content first, a small floating navigation layer) and let each platform render it its own way.

Icons

App icons now have default, dark, clear and tinted appearances on iOS, iPadOS and macOS. Apple's Icon Composer takes layers exported from your design tool, lets you group them and set opacity, and previews the result with system effects. The practical change is in how you draw: simple, solid, overlapping shapes split into foreground, middle and background layers, with no baked-in shadows or gradients, because the system adds its own.

Check the clear and tinted versions early. A logo that relies on its brand colour to be recognised can become an anonymous shape when the system tints it. If that happens, the shape needs to work harder, not the colour.

Our position

Adopt the structure. Use the material sparingly. Put the brand in the content.

Apple's own guidance warns against overusing Liquid Glass in custom controls because it pulls attention away from content. We agree, and go a step further. The value of the redesign is the hierarchy, not the blur.

• Rebuild with the current SDK and list every screen that looks differentPay most attention to custom bars, headers and anything with a hard-coded height.
• Replace custom tab bars and toolbars with system componentsWhere you can't, redesign them on purpose rather than imitating glass.
• Remove the compatibility key from your plan, not just your Info.plistIt stops working as soon as you link against the iOS 27 SDK.
• Test at both ends of the transparency slider, plus Reduce Transparency and Increase Contrast
• Keep brand colour in content: imagery, illustrations, typography, the primary actionNot in the navigation chrome, where the system now owns the look.
• Rebuild the app icon in layers and check the clear and tinted versions
• For React Native, move navigation to native components before adding any glass views

Teams that treat Liquid Glass as a structure change end up with simpler apps that feel at home on the platform. Teams that treat it as a visual effect end up with blur in places Apple never meant it to go, which is harder to read and will date quickly.

Sources

1. Apple introduces a delightful and elegant new software design · Apple Newsroom
2. Adopting Liquid Glass · Apple Developer Documentation
3. UIDesignRequiresCompatibility · Apple Developer Documentation
4. Clarification on the planned removal of UIDesignRequiresCompatibility · Apple Developer Forums
5. Apple unveils next generation of Apple Intelligence, Siri AI, and more · Apple Newsroom
6. Icon Composer · Apple Developer
7. GlassEffect (expo-glass-effect) · Expo Documentation
8. Native tabs · Expo Documentation